<?php

require_once __DIR__ . '/../src/bootstrap.php';
require_once __DIR__ . '/../src/CalDavClient.php';
require_once __DIR__ . '/../src/CalDavSync.php';
require_once __DIR__ . '/../src/WebDavNotes.php';

$db = Database::connect();

// ── Cache & Security headers ──
header('Cache-Control: no-cache, must-revalidate');
header('X-Content-Type-Options: nosniff');
header('X-Frame-Options: DENY');
header('X-XSS-Protection: 1; mode=block');
header('Referrer-Policy: strict-origin-when-cross-origin');
if (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') {
    header('Strict-Transport-Security: max-age=31536000; includeSubDomains');
}

// ── Session ──
session_set_cookie_params([
    'httponly' => true,
    'secure' => !empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off',
    'samesite' => 'Strict',
]);
session_start();

// CSRF token
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

// ── Auth ──

$method = $_SERVER['REQUEST_METHOD'];
$path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$basePath = dirname($_SERVER['SCRIPT_NAME']);
$route = ($basePath === '/' || $basePath === '\\') ? $path : str_replace($basePath, '', $path);

$pwHash = $db->query("SELECT value FROM settings WHERE key = 'password_hash'")->fetchColumn();
$isSetup = !$pwHash;
$isLoggedIn = !empty($_SESSION['hyprcrd_auth']);

// Auth API endpoints (always accessible)
if (str_starts_with($route, '/api/auth')) {
    error_reporting(0);
    header('Content-Type: application/json');

    // GET /api/auth/status
    if ($route === '/api/auth/status' && $method === 'GET') {
        echo json_encode(['setup' => $isSetup, 'logged_in' => $isLoggedIn, 'csrf' => $_SESSION['csrf_token'], 'version' => APP_VERSION]);
        exit;
    }

    // POST /api/auth/setup — set initial password
    if ($route === '/api/auth/setup' && $method === 'POST' && $isSetup) {
        $input = json_decode(file_get_contents('php://input'), true);
        $pw = $input['password'] ?? '';
        if (strlen($pw) < 4) {
            http_response_code(400);
            echo json_encode(['error' => 'password too short (min 4)']);
            exit;
        }
        $hash = password_hash($pw, PASSWORD_BCRYPT);
        $db->prepare("INSERT OR REPLACE INTO settings (key, value) VALUES ('password_hash', :hash)")->execute(['hash' => $hash]);
        session_regenerate_id(true);
        $_SESSION['hyprcrd_auth'] = true;
        $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
        echo json_encode(['ok' => true, 'csrf' => $_SESSION['csrf_token']]);
        exit;
    }

    // POST /api/auth/login (rate limited)
    if ($route === '/api/auth/login' && $method === 'POST') {
        $attempts = $_SESSION['login_attempts'] ?? 0;
        $lastAttempt = $_SESSION['login_last'] ?? 0;
        if ($attempts >= 5 && time() - $lastAttempt < 60) {
            http_response_code(429);
            echo json_encode(['error' => 'too many attempts, wait 60s']);
            exit;
        }
        $input = json_decode(file_get_contents('php://input'), true);
        $pw = $input['password'] ?? '';
        if ($pwHash && password_verify($pw, $pwHash)) {
            session_regenerate_id(true);
            $_SESSION['hyprcrd_auth'] = true;
            $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
            $_SESSION['login_attempts'] = 0;
            echo json_encode(['ok' => true, 'csrf' => $_SESSION['csrf_token']]);
        } else {
            $_SESSION['login_attempts'] = $attempts + 1;
            $_SESSION['login_last'] = time();
            usleep(300000); // 300ms delay against timing attacks
            http_response_code(401);
            echo json_encode(['error' => 'wrong password']);
        }
        exit;
    }

    // POST /api/auth/logout
    if ($route === '/api/auth/logout' && $method === 'POST') {
        $_SESSION = [];
        session_destroy();
        echo json_encode(['ok' => true]);
        exit;
    }

    // POST /api/auth/password — change password (requires current password)
    if ($route === '/api/auth/password' && $method === 'POST') {
        $input = json_decode(file_get_contents('php://input'), true);
        $current = $input['current'] ?? '';
        $newPass = $input['new'] ?? '';
        $hash = $db->query("SELECT value FROM settings WHERE key = 'password_hash'")->fetchColumn();
        if (!password_verify($current, $hash)) {
            http_response_code(403);
            echo json_encode(['error' => 'wrong password']);
            exit;
        }
        if (strlen($newPass) < 4) {
            http_response_code(400);
            echo json_encode(['error' => 'min 4 characters']);
            exit;
        }
        // Re-encrypt CalDAV credentials with new key (atomic — rollback on failure)
        $oldKey = substr(hash('sha256', $hash), 0, 32);
        $newHash = password_hash($newPass, PASSWORD_BCRYPT);
        $newKey = substr(hash('sha256', $newHash), 0, 32);

        $credKeys = ['caldav_url', 'caldav_username', 'caldav_password'];
        $reEncrypted = [];
        $rekeyOk = true;

        foreach ($credKeys as $ck) {
            $enc = $db->query("SELECT value FROM settings WHERE key = '{$ck}'")->fetchColumn();
            if (!$enc) continue;
            $raw = base64_decode($enc);
            if (strlen($raw) < 17) continue;
            $iv = substr($raw, 0, 16);
            $cipher = base64_encode(substr($raw, 16));
            $plain = openssl_decrypt($cipher, 'aes-256-cbc', $oldKey, 0, $iv);
            if ($plain === false) { $rekeyOk = false; break; }
            $newIv = random_bytes(16);
            $newCipher = openssl_encrypt($plain, 'aes-256-cbc', $newKey, 0, $newIv);
            $reEncrypted[$ck] = base64_encode($newIv . base64_decode($newCipher));
        }

        if (!$rekeyOk) {
            http_response_code(500);
            echo json_encode(['error' => 'could not re-encrypt credentials — password NOT changed. Please re-enter CalDAV credentials first.']);
            exit;
        }

        // All re-encryption succeeded — commit everything
        $db->beginTransaction();
        // Save old hash for re-key recovery
        $db->prepare("INSERT OR REPLACE INTO settings (key, value) VALUES ('prev_password_hash', :h)")->execute(['h' => $hash]);
        foreach ($reEncrypted as $ck => $val) {
            $db->prepare("UPDATE settings SET value = :v WHERE key = :k")->execute(['v' => $val, 'k' => $ck]);
        }
        $db->prepare("UPDATE settings SET value = :h WHERE key = 'password_hash'")->execute(['h' => $newHash]);
        $db->commit();

        // Mark all notes for re-push (re-encrypt with new key)
        $db->exec("UPDATE cards SET caldav_etag = NULL, caldav_synced_at = NULL WHERE caldav_uid LIKE 'note:%'");

        echo json_encode(['ok' => true, 'rekey' => true]);
        exit;
    }

    http_response_code(404);
    echo json_encode(['error' => 'not found']);
    exit;
}

// All other API/page requests require auth (unless setup mode)
if (!$isSetup && !$isLoggedIn) {
    if (str_starts_with($route, '/api/')) {
        http_response_code(401);
        header('Content-Type: application/json');
        echo json_encode(['error' => 'unauthorized']);
        exit;
    }
    // For page requests, still serve the HTML shell — JS will show login dialog
}

if (str_starts_with($route, '/api/')) {
    error_reporting(0);
    header('Content-Type: application/json');

    // CSRF check on all state-changing requests
    if (in_array($method, ['POST', 'PATCH', 'DELETE'])) {
        $csrfHeader = $_SERVER['HTTP_X_CSRF_TOKEN'] ?? '';
        if (!hash_equals($_SESSION['csrf_token'] ?? '', $csrfHeader)) {
            http_response_code(403);
            echo json_encode(['error' => 'invalid csrf token']);
            exit;
        }
    }

    // Input sanitization
    function validColor($c) { return preg_match('/^#[0-9a-fA-F]{6}$/', $c ?? '') ? $c : '#ffffff'; }
    function validInt($v, $default = 0) { return is_numeric($v) ? (int)$v : $default; }
    function extractTags($body) {
        preg_match_all('/(?<=\s|^)#([a-zA-Z0-9_\/-][a-zA-Z0-9_\/-]*[a-zA-Z0-9_-]|[a-zA-Z0-9_-]+)/m', $body ?? '', $matches);
        return implode(',', array_unique(array_map('strtolower', $matches[1] ?? [])));
    }

    // Cards
    if ($route === '/api/cards' && $method === 'POST') {
        $input = json_decode(file_get_contents('php://input'), true);
        $title = trim($input['title'] ?? '');
        if ($title === '') { http_response_code(400); echo json_encode(['error' => 'title is required']); exit; }
        $pos = $input['position'] ?? 0;
        $body = $input['body'] ?? '';
        $db->prepare('INSERT INTO cards (title, body, color, bucket_id, parent_id, position, tags) VALUES (:title, :body, :color, :bucket_id, :parent_id, :position, :tags)')->execute([
            'title' => $title, 'body' => $body, 'color' => validColor($input['color'] ?? null),
            'bucket_id' => validInt($input['bucket_id'] ?? null, null),
            'parent_id' => validInt($input['parent_id'] ?? null, null),
            'position' => validInt($pos),
            'tags' => extractTags($body),
        ]);
        echo json_encode($db->query('SELECT c.*, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id WHERE c.id = ' . $db->lastInsertId())->fetch());
        exit;
    }

    if ($route === '/api/cards' && $method === 'GET') {
        if (!empty($_GET['ids'])) {
            $ids = array_filter(array_map('intval', explode(',', $_GET['ids'])));
            if ($ids) {
                $ph = implode(',', array_fill(0, count($ids), '?'));
                $stmt = $db->prepare("SELECT c.*, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id WHERE c.id IN ($ph)");
                $stmt->execute($ids);
                echo json_encode($stmt->fetchAll());
                exit;
            }
        }
        echo json_encode($db->query('SELECT c.*, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id ORDER BY c.position ASC, c.created_at DESC')->fetchAll());
        exit;
    }

    if ($route === '/api/cards/meta' && $method === 'GET') {
        echo json_encode($db->query('SELECT c.id, c.title, c.color, c.tags, c.bucket_id, c.parent_id, c.position, c.created_at, c.updated_at, c.due_date, c.caldav_uid, c.caldav_rrule, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id ORDER BY c.position ASC, c.created_at DESC')->fetchAll());
        exit;
    }

    if (preg_match('#^/api/cards/(\d+)$#', $route, $m) && $method === 'DELETE') {
        // CalDAV tombstone for synced cards
        $card = $db->prepare('SELECT caldav_uid FROM cards WHERE id = :id');
        $card->execute(['id' => $m[1]]);
        $uid = $card->fetchColumn();
        if ($uid) {
            $db->prepare('INSERT OR REPLACE INTO caldav_tombstones (caldav_uid, card_id) VALUES (?, ?)')->execute([$uid, $m[1]]);
        }
        $db->prepare('DELETE FROM cards WHERE id = :id')->execute(['id' => $m[1]]);
        echo json_encode(['ok' => true]); exit;
    }

    if (preg_match('#^/api/cards/(\d+)$#', $route, $m) && $method === 'PATCH') {
        $input = json_decode(file_get_contents('php://input'), true);
        $fields = []; $params = ['id' => $m[1]];
        foreach (['title', 'body', 'color', 'position', 'bucket_id', 'parent_id', 'due_date'] as $f) {
            if (array_key_exists($f, $input)) { $fields[] = "$f = :$f"; $params[$f] = $input[$f]; }
        }
        if (array_key_exists('body', $input)) { $fields[] = 'tags = :tags'; $params['tags'] = extractTags($input['body']); }
        if ($fields) { $fields[] = 'updated_at = datetime("now")'; $db->prepare('UPDATE cards SET ' . implode(', ', $fields) . ' WHERE id = :id')->execute($params); }
        $card = $db->prepare('SELECT c.*, b.name as bucket_name FROM cards c LEFT JOIN buckets b ON c.bucket_id = b.id WHERE c.id = :id');
        $card->execute(['id' => $m[1]]); echo json_encode($card->fetch()); exit;
    }

    // Buckets
    if ($route === '/api/buckets' && $method === 'GET') {
        echo json_encode($db->query('SELECT * FROM buckets ORDER BY position ASC, created_at ASC')->fetchAll()); exit;
    }

    if ($route === '/api/buckets' && $method === 'POST') {
        $input = json_decode(file_get_contents('php://input'), true);
        $name = trim($input['name'] ?? '');
        if ($name === '') { http_response_code(400); echo json_encode(['error' => 'name is required']); exit; }
        $db->prepare('INSERT INTO buckets (name) VALUES (:name)')->execute(['name' => $name]);
        echo json_encode($db->query('SELECT * FROM buckets WHERE id = ' . $db->lastInsertId())->fetch()); exit;
    }

    if (preg_match('#^/api/buckets/(\d+)$#', $route, $m) && $method === 'PATCH') {
        $input = json_decode(file_get_contents('php://input'), true);
        $fields = []; $params = ['id' => $m[1]];
        foreach (['name', 'position', 'color'] as $f) { if (array_key_exists($f, $input)) { $fields[] = "$f = :$f"; $params[$f] = $f === 'color' ? validColor($input[$f]) : $input[$f]; } }
        if ($fields) $db->prepare('UPDATE buckets SET ' . implode(', ', $fields) . ' WHERE id = :id')->execute($params);
        $b = $db->prepare('SELECT * FROM buckets WHERE id = :id'); $b->execute(['id' => $m[1]]); echo json_encode($b->fetch()); exit;
    }

    if (preg_match('#^/api/buckets/(\d+)$#', $route, $m) && $method === 'DELETE') {
        $db->prepare('UPDATE cards SET bucket_id = NULL WHERE bucket_id = :id')->execute(['id' => $m[1]]);
        $db->prepare('DELETE FROM buckets WHERE id = :id')->execute(['id' => $m[1]]);
        echo json_encode(['ok' => true]); exit;
    }

    // List all upload files
    if ($route === '/api/uploads' && $method === 'GET') {
        $dir = __DIR__ . '/uploads';
        $files = [];
        if (is_dir($dir)) {
            foreach (glob($dir . '/*.{png,jpg,gif,webp,mp3,ogg,wav,m4a}', GLOB_BRACE) as $f) {
                $name = basename($f);
                $files[] = ['name' => $name, 'url' => 'uploads/' . $name, 'size' => filesize($f), 'modified' => filemtime($f)];
            }
        }
        usort($files, fn($a, $b) => $b['modified'] - $a['modified']);
        echo json_encode($files);
        exit;
    }

    // Delete an upload file
    if (preg_match('#^/api/uploads/([a-f0-9]+\.\w+)$#', $route, $m) && $method === 'DELETE') {
        $file = __DIR__ . '/uploads/' . basename($m[1]);
        if (is_file($file)) {
            unlink($file);
            echo json_encode(['ok' => true]);
        } else {
            http_response_code(404);
            echo json_encode(['error' => 'file not found']);
        }
        exit;
    }

    // Upload (max 10MB, real MIME check)
    if ($route === '/api/upload' && $method === 'POST') {
        $uploadDir = __DIR__ . '/uploads';
        if (!is_dir($uploadDir)) mkdir($uploadDir, 0755, true);

        if (empty($_FILES['file']) || $_FILES['file']['error'] !== UPLOAD_ERR_OK) {
            http_response_code(400);
            echo json_encode(['error' => 'no file', 'debug_files' => array_keys($_FILES), 'debug_method' => $method, 'debug_ct' => $_SERVER['CONTENT_TYPE'] ?? 'none']);
            exit;
        }

        $file = $_FILES['file'];
        if ($file['size'] > 10 * 1024 * 1024) {
            http_response_code(400);
            echo json_encode(['error' => 'file too large (max 10MB)']);
            exit;
        }

        // Check MIME — finfo first, fallback to extension for audio
        $mimeMap = ['image/png' => 'png', 'image/jpeg' => 'jpg', 'image/gif' => 'gif', 'image/webp' => 'webp', 'audio/mpeg' => 'mp3', 'audio/ogg' => 'ogg', 'audio/wav' => 'wav', 'audio/x-wav' => 'wav', 'audio/mp4' => 'm4a', 'application/ogg' => 'ogg'];
        $extMap = ['mp3' => 'mp3', 'ogg' => 'ogg', 'wav' => 'wav', 'm4a' => 'm4a'];
        $finfo = new finfo(FILEINFO_MIME_TYPE);
        $realMime = $finfo->file($file['tmp_name']);
        $ext = $mimeMap[$realMime] ?? null;
        // Fallback: trust extension for audio when finfo returns octet-stream
        if (!$ext && ($realMime === 'application/octet-stream' || str_starts_with($realMime, 'audio/'))) {
            $origExt = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
            $ext = $extMap[$origExt] ?? null;
        }
        if (!$ext) {
            http_response_code(400);
            echo json_encode(['error' => 'invalid file type', 'detected' => $realMime]);
            exit;
        }

        $name = bin2hex(random_bytes(16)) . '.' . $ext;
        $dest = $uploadDir . '/' . $name;
        if (!move_uploaded_file($file['tmp_name'], $dest)) {
            http_response_code(500);
            echo json_encode(['error' => 'upload failed']);
            exit;
        }

        http_response_code(201);
        echo json_encode(['url' => 'uploads/' . $name, 'name' => $name]);
        exit;
    }

    // Export — Markdown vault (Obsidian / Logseq compatible)
    if ($route === '/api/export-md' && $method === 'GET') {
        $ids = isset($_GET['ids']) ? array_filter(array_map('intval', explode(',', $_GET['ids']))) : null;
        if ($ids) {
            $ph = implode(',', array_fill(0, count($ids), '?'));
            $stmt = $db->prepare("SELECT * FROM cards WHERE id IN ($ph) ORDER BY id");
            $stmt->execute($ids);
            $cards = $stmt->fetchAll();
        } else {
            $cards = $db->query('SELECT * FROM cards ORDER BY id')->fetchAll();
        }
        $allCards = $db->query('SELECT * FROM cards ORDER BY id')->fetchAll();
        $buckets = $db->query('SELECT * FROM buckets ORDER BY position, id')->fetchAll();
        $bucketMap = [];
        foreach ($buckets as $b) $bucketMap[$b['id']] = $b['name'];
        $cardMap = [];
        foreach ($allCards as $c) $cardMap[$c['id']] = $c;

        // Sanitise filename
        $safe = function ($name) {
            $name = preg_replace('/[<>:"\/\\\\|?*]/', '_', $name);
            return trim($name) ?: 'untitled';
        };

        $tmp = tempnam(sys_get_temp_dir(), 'hyprcrd_md_');
        $zip = new ZipArchive();
        $zip->open($tmp, ZipArchive::OVERWRITE);

        $usedNames = [];
        $allBodies = '';
        foreach ($cards as $c) {
            // Build folder path: bucket/group/ (skip folders for single-card export)
            $folder = '';
            if (!$ids || count($ids) > 1) {
                if ($c['bucket_id'] && isset($bucketMap[$c['bucket_id']])) {
                    $folder = $safe($bucketMap[$c['bucket_id']]) . '/';
                }
                if ($c['parent_id'] && isset($cardMap[$c['parent_id']])) {
                    $folder .= $safe($cardMap[$c['parent_id']]['title']) . '/';
                }
            }

            $baseName = $safe($c['title']);
            $fileName = $folder . $baseName . '.md';
            // Deduplicate
            $n = 1;
            while (isset($usedNames[$fileName])) {
                $fileName = $folder . $baseName . ' ' . (++$n) . '.md';
            }
            $usedNames[$fileName] = true;

            // YAML frontmatter
            $fm = "---\n";
            $fm .= 'id: ' . $c['id'] . "\n";
            $fm .= 'color: "' . $c['color'] . "\"\n";
            if ($c['bucket_id'] && isset($bucketMap[$c['bucket_id']])) {
                $fm .= 'bucket: "' . addcslashes($bucketMap[$c['bucket_id']], '"') . "\"\n";
            }
            if ($c['parent_id'] && isset($cardMap[$c['parent_id']])) {
                $fm .= 'parent: "' . addcslashes($cardMap[$c['parent_id']]['title'], '"') . "\"\n";
            }
            $fm .= 'created: ' . $c['created_at'] . "\n";
            $fm .= 'updated: ' . $c['updated_at'] . "\n";
            if (!empty($c['tags'])) {
                $fm .= 'tags: [' . implode(', ', array_map(fn($t) => '"' . trim($t) . '"', explode(',', $c['tags']))) . "]\n";
            }
            $fm .= "---\n\n";

            // Body: rewrite upload paths to attachments/
            $body = $c['body'] ?? '';
            $allBodies .= "\n" . $body;
            $body = preg_replace('#uploads/#', 'attachments/', $body);

            $zip->addFromString($fileName, $fm . '# ' . $c['title'] . "\n\n" . $body);
        }

        // Copy referenced uploads → attachments/
        $uploadDir = __DIR__ . '/uploads';
        if (is_dir($uploadDir)) {
            foreach (glob($uploadDir . '/*') as $f) {
                $name = basename($f);
                if (is_file($f) && (!$ids || str_contains($allBodies, $name))) {
                    $zip->addFile($f, 'attachments/' . $name);
                }
            }
        }

        $zip->close();

        header('Content-Type: application/zip');
        header('Content-Disposition: attachment; filename="hyprcrd-vault-' . date('Y-m-d') . '.zip"');
        header('Content-Length: ' . filesize($tmp));
        readfile($tmp);
        unlink($tmp);
        exit;
    }

    // Export — full or selective
    if ($route === '/api/export' && $method === 'GET') {
        $ids = isset($_GET['ids']) ? array_filter(array_map('intval', explode(',', $_GET['ids']))) : null;
        if ($ids) {
            $ph = implode(',', array_fill(0, count($ids), '?'));
            $cards = $db->prepare("SELECT * FROM cards WHERE id IN ($ph) ORDER BY id")->execute($ids) ? $db->prepare("SELECT * FROM cards WHERE id IN ($ph) ORDER BY id") : null;
            // Re-query properly
            $stmt = $db->prepare("SELECT * FROM cards WHERE id IN ($ph) ORDER BY id");
            $stmt->execute($ids);
            $cards = $stmt->fetchAll();
            $bucketIds = array_unique(array_filter(array_column($cards, 'bucket_id')));
            $buckets = [];
            if ($bucketIds) {
                $bph = implode(',', array_fill(0, count($bucketIds), '?'));
                $bstmt = $db->prepare("SELECT * FROM buckets WHERE id IN ($bph)");
                $bstmt->execute(array_values($bucketIds));
                $buckets = $bstmt->fetchAll();
            }
        } else {
            $cards = $db->query('SELECT * FROM cards ORDER BY id')->fetchAll();
            $buckets = $db->query('SELECT * FROM buckets ORDER BY id')->fetchAll();
        }

        $tmp = tempnam(sys_get_temp_dir(), 'hyprcrd_');
        $zip = new ZipArchive();
        $zip->open($tmp, ZipArchive::OVERWRITE);
        $zip->addFromString('data.json', json_encode(['version' => 1, 'buckets' => $buckets, 'cards' => $cards, 'selective' => !!$ids], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));

        // Only include referenced uploads
        $uploadDir = __DIR__ . '/uploads';
        $allBodies = implode("\n", array_column($cards, 'body'));
        if (is_dir($uploadDir)) {
            foreach (glob($uploadDir . '/*') as $f) {
                $name = basename($f);
                if (is_file($f) && (!$ids || str_contains($allBodies, $name))) {
                    $zip->addFile($f, 'uploads/' . $name);
                }
            }
        }
        $zip->close();

        header('Content-Type: application/zip');
        header('Content-Disposition: attachment; filename="hyprcrd-export-' . date('Y-m-d') . '.zip"');
        header('Content-Length: ' . filesize($tmp));
        readfile($tmp);
        unlink($tmp);
        exit;
    }

    // Import — ZIP with JSON dump + uploads
    if ($route === '/api/import' && $method === 'POST') {
        if (empty($_FILES['file']) || $_FILES['file']['error'] !== UPLOAD_ERR_OK) {
            http_response_code(400);
            echo json_encode(['error' => 'no file']); exit;
        }

        $zip = new ZipArchive();
        if ($zip->open($_FILES['file']['tmp_name']) !== true) {
            http_response_code(400);
            echo json_encode(['error' => 'invalid zip']); exit;
        }

        $json = $zip->getFromName('data.json');
        if (!$json) {
            $zip->close();
            http_response_code(400);
            echo json_encode(['error' => 'no data.json in archive']); exit;
        }

        $data = json_decode($json, true);
        if (!$data || !isset($data['buckets']) || !isset($data['cards'])) {
            $zip->close();
            http_response_code(400);
            echo json_encode(['error' => 'invalid data.json']); exit;
        }

        $merge = !empty($data['selective']) || !empty($_GET['merge']);

        if (!$merge) {
            $db->exec('DELETE FROM cards');
            $db->exec('DELETE FROM buckets');
        }

        // Import buckets (merge: match by name, create if missing)
        $bucketMap = [];
        foreach ($data['buckets'] as $b) {
            $oldId = $b['id'];
            if ($merge) {
                $existing = $db->prepare('SELECT id FROM buckets WHERE name = :name');
                $existing->execute(['name' => $b['name']]);
                $found = $existing->fetchColumn();
                if ($found) { $bucketMap[$oldId] = $found; continue; }
            }
            $stmt = $db->prepare('INSERT INTO buckets (name, position, created_at) VALUES (:name, :position, :created_at)');
            $stmt->execute(['name' => $b['name'], 'position' => $b['position'] ?? 0, 'created_at' => $b['created_at'] ?? date('Y-m-d H:i:s')]);
            $bucketMap[$oldId] = $db->lastInsertId();
        }

        // Import cards
        foreach ($data['cards'] as $c) {
            $bucketId = ($c['bucket_id'] && isset($bucketMap[$c['bucket_id']])) ? $bucketMap[$c['bucket_id']] : null;
            $stmt = $db->prepare('INSERT INTO cards (title, body, color, bucket_id, position, created_at, updated_at) VALUES (:title, :body, :color, :bucket_id, :position, :created_at, :updated_at)');
            $stmt->execute([
                'title' => $c['title'], 'body' => $c['body'], 'color' => $c['color'],
                'bucket_id' => $bucketId, 'position' => $c['position'] ?? 0,
                'created_at' => $c['created_at'] ?? date('Y-m-d H:i:s'),
                'updated_at' => $c['updated_at'] ?? date('Y-m-d H:i:s'),
            ]);
        }

        // Extract uploads
        $uploadDir = __DIR__ . '/uploads';
        if (!is_dir($uploadDir)) mkdir($uploadDir, 0777, true);
        for ($i = 0; $i < $zip->numFiles; $i++) {
            $name = $zip->getNameIndex($i);
            if (str_starts_with($name, 'uploads/') && $name !== 'uploads/') {
                $content = $zip->getFromIndex($i);
                if ($content !== false) {
                    file_put_contents($uploadDir . '/' . basename($name), $content);
                }
            }
        }
        $zip->close();

        echo json_encode(['ok' => true, 'buckets' => count($data['buckets']), 'cards' => count($data['cards'])]);
        exit;
    }

    // CalDAV endpoints
    $caldav = new CalDavSync($db);

    if ($route === '/api/caldav/settings' && $method === 'GET') {
        echo json_encode($caldav->getSettings()); exit;
    }
    if ($route === '/api/caldav/settings' && $method === 'POST') {
        $caldav->saveSettings(json_decode(file_get_contents('php://input'), true) ?? []);
        echo json_encode(['ok' => true]); exit;
    }
    if ($route === '/api/caldav/test' && $method === 'POST') {
        $input = json_decode(file_get_contents('php://input'), true) ?? [];
        echo json_encode($caldav->testConnection($input['url'] ?? null, $input['username'] ?? null, $input['password'] ?? null)); exit;
    }
    if ($route === '/api/caldav/sync' && $method === 'POST') {
        echo json_encode($caldav->sync()); exit;
    }
    if ($route === '/api/caldav/log' && $method === 'GET') {
        echo json_encode($db->query('SELECT * FROM caldav_sync_log ORDER BY id DESC LIMIT 50')->fetchAll()); exit;
    }

    // WebDAV Notes sync
    if ($route === '/api/notes/sync' && $method === 'POST') {
        $notes = new WebDavNotes($db);
        echo json_encode($notes->sync()); exit;
    }

    // Re-key notes: decrypt with old key, re-encrypt with current key
    if ($route === '/api/notes/rekey' && $method === 'POST') {
        $input = json_decode(file_get_contents('php://input'), true);
        $oldPass = $input['old_password'] ?? '';
        if (!$oldPass) { http_response_code(400); echo json_encode(['error' => 'old password required']); exit; }

        $currentHash = $db->query("SELECT value FROM settings WHERE key = 'password_hash'")->fetchColumn();
        $currentKey = substr(hash('sha256', $currentHash), 0, 32);
        $prevHash = $db->query("SELECT value FROM settings WHERE key = 'prev_password_hash'")->fetchColumn();

        // Build candidate old keys: try prev hash first, then verify password against it
        $candidateKeys = [];
        if ($prevHash) {
            $candidateKeys[] = substr(hash('sha256', $prevHash), 0, 32);
            // Maybe password was changed multiple times — prev_hash might not match oldPass
            if (password_verify($oldPass, $prevHash)) {
                // Confirmed: prev hash matches old password
                array_unshift($candidateKeys, substr(hash('sha256', $prevHash), 0, 32));
            }
        }
        // Also try current key (notes might already be on current key)
        $candidateKeys[] = $currentKey;

        // Get WebDAV client
        $caldavSync = new CalDavSync($db);
        $settings = $caldavSync->getSettings();
        if (empty($settings['url'])) { echo json_encode(['ok' => false, 'error' => 'no CalDAV credentials']); exit; }

        $url = $settings['url'];
        $user = $settings['username'];
        $passEnc = $db->query("SELECT value FROM settings WHERE key = 'caldav_password'")->fetchColumn();
        $passRaw = base64_decode($passEnc);
        $passIv = substr($passRaw, 0, 16);
        $passCipher = base64_encode(substr($passRaw, 16));
        $pass = openssl_decrypt($passCipher, 'aes-256-cbc', $currentKey, 0, $passIv) ?: '';

        if (!$pass) { echo json_encode(['ok' => false, 'error' => 'cannot decrypt CalDAV password']); exit; }

        if (preg_match('#(https?://[^/]+)/remote\.php/dav/calendars/([^/]+)#', $url, $m)) {
            $notesUrl = $m[1] . '/remote.php/dav/files/' . $m[2] . '/Notes/';
        } else { echo json_encode(['ok' => false, 'error' => 'cannot derive notes URL']); exit; }

        $client = new CalDavClient($notesUrl, $user, $pass);
        $notes = new WebDavNotes($db);
        $remoteNotes = $notes->listRemoteNotes();
        if (empty($remoteNotes)) { echo json_encode(['ok' => false, 'error' => 'no remote notes']); exit; }

        // Find working key by testing first encrypted note
        $parsed = parse_url($notesUrl);
        $base = $parsed['scheme'] . '://' . $parsed['host'] . (isset($parsed['port']) ? ':' . $parsed['port'] : '');
        $workingKey = null;

        foreach ($remoteNotes as $testNote) {
            $testRes = $client->request('GET', $base . $testNote['href']);
            $testBody = $testRes['body'] ?? '';
            if (!str_starts_with($testBody, 'HYPRCRD-ENCRYPTED-V1')) continue;

            $encData = trim(explode("\n", $testBody, 2)[1] ?? '');
            $raw = base64_decode($encData);
            if (strlen($raw) < 17) continue;
            $iv = substr($raw, 0, 16);
            $cipher = substr($raw, 16);

            foreach ($candidateKeys as $tryKey) {
                $plain = openssl_decrypt($cipher, 'aes-256-cbc', $tryKey, OPENSSL_RAW_DATA, $iv);
                if ($plain !== false && (str_contains($plain, '#') || str_contains($plain, "\n"))) {
                    $workingKey = $tryKey;
                    break 2;
                }
            }
        }

        if (!$workingKey) {
            echo json_encode(['ok' => false, 'error' => 'could not decrypt — old key not found']);
            exit;
        }

        if ($workingKey === $currentKey) {
            echo json_encode(['ok' => true, 'rekeyed' => 0, 'message' => 'notes already on current key']);
            exit;
        }

        // Re-encrypt all notes
        $count = 0;
        foreach ($remoteNotes as $note) {
            $res = $client->request('GET', $base . $note['href']);
            if ($res['status'] !== 200) continue;
            $body = $res['body'];
            if (!str_starts_with($body, 'HYPRCRD-ENCRYPTED-V1')) continue;

            $encData = trim(explode("\n", $body, 2)[1] ?? '');
            $raw = base64_decode($encData);
            if (strlen($raw) < 17) continue;
            $plain = openssl_decrypt(substr($raw, 16), 'aes-256-cbc', $workingKey, OPENSSL_RAW_DATA, substr($raw, 0, 16));
            if ($plain === false) continue;

            $newIv = random_bytes(16);
            $newCipher = openssl_encrypt($plain, 'aes-256-cbc', $currentKey, OPENSSL_RAW_DATA, $newIv);
            $client->request('PUT', $base . $note['href'], "HYPRCRD-ENCRYPTED-V1\n" . base64_encode($newIv . $newCipher), ['Content-Type: text/markdown; charset=utf-8']);
            $count++;
        }

        // Clear and re-pull
        $db->exec("DELETE FROM cards WHERE caldav_uid LIKE 'note:%'");
        $db->exec("DELETE FROM caldav_tombstones WHERE caldav_uid LIKE 'note:%'");
        $db->exec("DELETE FROM settings WHERE key = 'prev_password_hash'");

        echo json_encode(['ok' => true, 'rekeyed' => $count]);
        exit;
    }

    // Force re-sync: clear all notes state and re-pull
    if ($route === '/api/notes/reset' && $method === 'POST') {
        $deleted = $db->exec("DELETE FROM cards WHERE caldav_uid LIKE 'note:%'");
        $db->exec("DELETE FROM caldav_tombstones WHERE caldav_uid LIKE 'note:%'");
        $notes = new WebDavNotes($db);
        $result = $notes->sync();
        $result['reset'] = $deleted;
        echo json_encode($result); exit;
    }

    http_response_code(404); echo json_encode(['error' => 'not found']); exit;
}

// ── HTML Shell ──
?>
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hyprcrd</title>
    <link rel="stylesheet" href="css/fonts.css">
    <link rel="stylesheet" href="css/vendor/phosphor-regular.css">
    <link rel="stylesheet" href="css/vendor/phosphor-fill.css">
    <link rel="stylesheet" href="css/tailwind.out.css?v=<?= APP_VERSION ?>">
    <script src="js/vendor/marked.min.js"></script>
    <script src="js/vendor/purify.min.js"></script>
    <link rel="stylesheet" href="css/style.css?v=<?= time() ?>">
    <script>
    window.themes = {
        slate:    { label:'Slate',    vars:{ '--t-bg':'#1e293b','--t-surface':'#273349','--t-raised':'#2e3d56','--t-border':'#384a64','--t-dim':'#64748b','--t-muted':'#94a3b8','--t-text':'#cbd5e1','--t-bright':'#f1f5f9','--t-accent':'#38bdf8','--t-accent2':'#818cf8','--t-danger':'#fb7185','--t-scanline':'rgba(0,0,0,0.04)','--t-overlay':'rgba(15,23,42,0.75)','--t-font-pixel':'"Silkscreen", cursive','--t-cover-gradient':'linear-gradient(180deg, rgba(15,23,42,0.22) 0%, rgba(15,23,42,0.7) 62%, rgba(15,23,42,0.86) 100%)' }},
        phosphor: { label:'Phosphor', vars:{ '--t-bg':'#0a0f0a','--t-surface':'#0f1a0f','--t-raised':'#142214','--t-border':'#1a3a1a','--t-dim':'#2d5a2d','--t-muted':'#4a8a4a','--t-text':'#7bc67b','--t-bright':'#b8f0b8','--t-accent':'#4ade80','--t-accent2':'#22d3ee','--t-danger':'#f87171','--t-scanline':'rgba(0,0,0,0.1)','--t-overlay':'rgba(5,10,5,0.85)','--t-font-pixel':'"Silkscreen", cursive','--t-cover-gradient':'linear-gradient(180deg, rgba(10,15,10,0.22) 0%, rgba(10,15,10,0.7) 62%, rgba(10,15,10,0.86) 100%)' }},
        midnight: { label:'Midnight', vars:{ '--t-bg':'#0f172a','--t-surface':'#162033','--t-raised':'#1c2940','--t-border':'#263650','--t-dim':'#475882','--t-muted':'#7088b0','--t-text':'#a8bdd8','--t-bright':'#e2e8f0','--t-accent':'#a78bfa','--t-accent2':'#f472b6','--t-danger':'#fb7185','--t-scanline':'rgba(0,0,0,0.06)','--t-overlay':'rgba(10,15,30,0.8)','--t-font-pixel':'"Silkscreen", cursive','--t-cover-gradient':'linear-gradient(180deg, rgba(15,23,42,0.22) 0%, rgba(15,23,42,0.7) 62%, rgba(15,23,42,0.86) 100%)' }},
        amber:    { label:'Amber',    vars:{ '--t-bg':'#1a1408','--t-surface':'#231c0e','--t-raised':'#2c2414','--t-border':'#3d3520','--t-dim':'#6b5c38','--t-muted':'#a08c5a','--t-text':'#d4c088','--t-bright':'#fbe8b0','--t-accent':'#fbbf24','--t-accent2':'#fb923c','--t-danger':'#ef4444','--t-scanline':'rgba(0,0,0,0.08)','--t-overlay':'rgba(20,16,5,0.8)','--t-font-pixel':'"Silkscreen", cursive','--t-cover-gradient':'linear-gradient(180deg, rgba(26,20,8,0.22) 0%, rgba(26,20,8,0.7) 62%, rgba(26,20,8,0.86) 100%)' }},
        void:     { label:'Void',     vars:{ '--t-bg':'#000000','--t-surface':'#0a0a0a','--t-raised':'#141414','--t-border':'#222222','--t-dim':'#444444','--t-muted':'#666666','--t-text':'#a0a0a0','--t-bright':'#e0e0e0','--t-accent':'#ffffff','--t-accent2':'#888888','--t-danger':'#ff4444','--t-scanline':'rgba(0,0,0,0)','--t-overlay':'rgba(0,0,0,0.85)','--t-font-pixel':'"Silkscreen", cursive','--t-cover-gradient':'linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 62%, rgba(0,0,0,0.9) 100%)' }},
        paper:    { label:'Paper',    vars:{ '--t-bg':'#f4f4f5','--t-surface':'#ffffff','--t-raised':'#e8e8eb','--t-border':'#d4d4d8','--t-dim':'#a1a1aa','--t-muted':'#71717a','--t-text':'#3f3f46','--t-bright':'#18181b','--t-accent':'#2563eb','--t-accent2':'#7c3aed','--t-danger':'#dc2626','--t-scanline':'rgba(0,0,0,0)','--t-overlay':'rgba(244,244,245,0.8)','--t-font-pixel':'"JetBrains Mono", monospace','--t-cover-gradient':'linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.75) 40%, rgba(255,255,255,0.3) 100%)' }},
    };
    window.applyTheme = function(name) {
        const t = themes[name] || themes.slate;
        for (const [k,v] of Object.entries(t.vars)) document.documentElement.style.setProperty(k,v);
        localStorage.setItem('hyprcrd-theme', name);
        document.querySelectorAll('[data-theme-dot]').forEach(el => {
            const a = el.dataset.themeDot === name;
            el.classList.toggle('ring-2',a); el.classList.toggle('ring-t-accent',a); el.classList.toggle('ring-offset-1',a); el.classList.toggle('ring-offset-t-bg',a);
        });
    }
    applyTheme(localStorage.getItem('hyprcrd-theme') || 'slate');
    </script>
</head>
<!-- tailwind safelist: border-t-bright border-transparent scale-125 text-t-accent line-clamp-2 line-clamp-5 border-t-danger text-t-danger pr-16 text-amber-400 -->
<body class="bg-t-bg text-t-text h-screen transition-colors duration-200 flex flex-col overflow-hidden">

    <header id="main-header" class="shrink-0 z-40 bg-t-bg border-b border-t-border shadow-[0_4px_20px_-4px_rgba(0,0,0,0.3)]" style="overflow:hidden;">
        <div class="flex items-center justify-between px-6 py-3 relative z-[1]">
            <div class="flex items-center gap-3">
                <i class="ph ph-terminal-window text-t-accent text-xl"></i>
                <h1 class="font-pixel text-t-accent text-lg tracking-wider">hyprcrd</h1>
                <span class="text-[10px] text-t-dim font-pixel ml-1">v<?= APP_VERSION ?></span>
                <button id="search-btn" class="flex items-center gap-2 px-2.5 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors ml-3">
                    <i class="ph ph-magnifying-glass text-sm"></i><span class="font-pixel text-[10px]">search</span>
                    <kbd class="text-[9px] text-t-dim border border-t-border rounded px-1 py-0.5 ml-1 font-pixel">ctrl+k</kbd>
                </button>
            </div>
            <div class="flex items-center gap-3">
                <button id="calendar-btn" class="flex items-center gap-2 px-2.5 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
                    <i class="ph ph-calendar-dots text-sm"></i><span class="font-pixel text-[10px]">calendar</span>
                </button>
                <button id="gallery-btn" class="flex items-center gap-2 px-2.5 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
                    <i class="ph ph-image-square text-sm"></i><span class="font-pixel text-[10px]">images</span>
                </button>
                <button id="tasks-btn" class="flex items-center gap-2 px-2.5 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent2 hover:text-t-accent2 transition-colors">
                    <i class="ph ph-check-square-offset text-sm"></i><span class="font-pixel text-[10px]">tasks</span>
                    <span id="tasks-open-count" class="font-pixel text-[9px] px-1.5 py-0.5 border border-t-border rounded text-t-dim">0</span>
                </button>
                <button id="add-btn" class="flex items-center gap-2 px-3 py-1.5 text-xs bg-t-accent text-t-bg border border-t-accent hover:brightness-110 transition-all">
                    <i class="ph ph-plus-square text-sm"></i><span class="font-pixel text-[11px]">new_card</span>
                </button>
            </div>
        </div>
        <div id="bucket-row" class="flex items-center px-6 py-1.5 relative">
            <div class="flex items-center gap-1 overflow-x-auto flex-1" id="bucket-bar"></div>
            <button id="board-split-toggle" class="flex items-center gap-1.5 px-2 py-1 text-[10px] font-pixel text-t-dim hover:text-t-accent transition-colors shrink-0 ml-2" title="split preview">
                <i class="ph ph-split-horizontal text-xs"></i>
            </button>
            <button id="superview-toggle" class="flex items-center gap-1.5 px-2 py-1 text-[10px] font-pixel text-t-dim hover:text-t-accent transition-colors shrink-0 ml-2" title="compact list view">
                <i class="ph ph-list text-xs"></i>
            </button>
            <button id="hide-done" class="flex items-center gap-1.5 px-2 py-1 text-[10px] font-pixel text-t-dim hover:text-t-accent transition-colors shrink-0 ml-2" title="toggle done">
                <i class="ph ph-check-circle text-xs"></i>
            </button>
            <button id="hide-termine" class="flex items-center gap-1.5 px-2 py-1 text-[10px] font-pixel text-t-dim hover:text-t-accent transition-colors shrink-0 ml-2" title="toggle appointments">
                <i class="ph ph-calendar-x text-xs"></i>
            </button>
            <button id="sort-toggle" class="flex items-center gap-1.5 px-2 py-1 text-[10px] font-pixel text-t-dim hover:text-t-accent transition-colors shrink-0 ml-2">
                <i class="ph ph-sort-ascending text-xs"></i>
                <span id="sort-label">manual</span>
            </button>
        </div>
        <div id="group-bar" class="hidden flex items-center gap-2 px-6 pb-2 relative z-[1]"></div>
    </header>
    <div id="upcoming-banner" class="hidden shrink-0"></div>
    <div id="board-wrapper" class="flex flex-1 min-h-0 overflow-hidden">
        <div id="board" class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 px-6 pt-5 pb-6 flex-1 overflow-y-auto content-start"></div>
        <div id="board-preview" class="hidden border-l border-t-border bg-t-surface flex flex-col" style="width:40%;min-width:300px;max-width:500px;">
            <div id="board-preview-header" class="flex items-center gap-2 px-4 py-2.5 border-b border-t-border shrink-0 relative">
                <div class="card-bar w-8 rounded-sm" id="board-preview-color"></div>
                <h3 id="board-preview-title" class="font-pixel text-xs text-t-bright flex-1 truncate"></h3>
                <span id="board-preview-done-badge" class="hidden"><i class="ph ph-check-circle text-sm text-green-400"></i></span>
                <button id="board-preview-edit" class="text-t-muted hover:text-t-accent transition-colors"><i class="ph ph-pencil-simple text-sm"></i></button>
                <button id="board-preview-close" class="text-t-muted hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i></button>
            </div>
            <div id="board-preview-empty" class="flex-1 flex flex-col items-center justify-center text-t-dim">
                <i class="ph ph-article text-3xl mb-2"></i>
                <p class="font-pixel text-[10px]">click a card to preview</p>
            </div>
            <div id="board-preview-content" class="hidden flex-1 flex flex-col min-h-0">
                <div id="board-preview-body" class="flex-1 overflow-y-auto p-5 prose text-sm text-t-text"></div>
                <div id="board-preview-tags" class="hidden flex flex-wrap gap-1.5 px-5 pb-3"></div>
                <div id="board-preview-meta" class="px-5 py-2 border-t border-t-border text-[10px] text-t-dim font-pixel shrink-0"></div>
            </div>
        </div>
    </div>

    <footer class="shrink-0 z-40 border-t border-t-border bg-t-bg shadow-[0_-4px_20px_-4px_rgba(0,0,0,0.3)] px-6 py-2 flex items-center justify-between gap-4">
        <div class="flex items-center gap-2 flex-wrap">
            <input type="file" id="import-file" accept=".zip,application/zip" class="hidden">
            <button id="import-btn" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
                <i class="ph ph-upload-simple text-sm"></i><span class="font-pixel text-[10px]">import</span>
            </button>
            <button id="export-btn" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
                <i class="ph ph-download-simple text-sm"></i><span class="font-pixel text-[10px]">export</span>
            </button>
            <button id="export-md-btn" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
                <i class="ph ph-vault text-sm"></i><span class="font-pixel text-[10px]">vault</span>
            </button>
            <button id="logout-btn" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
                <i class="ph ph-sign-out text-sm"></i><span class="font-pixel text-[10px]">logout</span>
            </button>
            <button id="settings-btn" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent2 hover:text-t-accent2 transition-colors">
                <i class="ph ph-gear text-sm"></i><span class="font-pixel text-[10px]">settings</span>
            </button>
        </div>
        <div id="footer-count" class="font-pixel text-[10px] text-t-dim whitespace-nowrap absolute left-1/2 -translate-x-1/2"></div>
        <div class="flex items-center gap-2">
            <button id="help-btn" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-dim hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-question text-sm"></i><span class="font-pixel text-[10px]">help</span></button>
            <span class="font-pixel text-[10px] text-t-dim whitespace-nowrap">© <?= date('Y') ?> hyprcrd</span>
        </div>
    </footer>

    <!-- Help -->
    <div class="overlay fixed inset-0 z-[95] flex justify-center items-start pt-12 pb-12 px-8" style="background:var(--t-overlay)" id="help">
        <div class="bg-t-surface border border-t-border shadow-2xl w-full max-w-3xl max-h-full overflow-y-auto" style="border-radius:4px;">
            <div class="flex items-center gap-3 px-6 py-4 border-b border-t-border sticky top-0 bg-t-surface z-[1]">
                <i class="ph ph-question text-t-accent text-base"></i>
                <h2 class="font-pixel text-sm text-t-accent">help</h2>
                <div class="flex-1"></div>
                <button id="help-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">close</span></button>
            </div>
            <div class="p-6 text-sm text-t-text space-y-6" id="help-content">

                <section>
                    <h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-info text-sm"></i>concepts</h3>
                    <div class="text-xs leading-relaxed space-y-3 text-t-muted">
                        <p><i class="ph ph-cards text-t-accent text-sm"></i> <span class="text-t-bright font-pixel">cards</span> are the basic unit — each card has a title, a markdown body, a color, and optional tags. Cards appear as tiles on the board. Click to preview, double-click to edit, right-click for actions. Cards can contain images, checklists, links to other cards, and any markdown content.</p>
                        <p><i class="ph ph-folder text-t-accent text-sm"></i> <span class="text-t-bright font-pixel">buckets</span> organize cards into categories (like folders or columns). Each bucket has a name and color. The bucket bar at the top lets you filter the board. Special built-in views: <i class="ph ph-squares-four text-xs"></i> <span class="text-t-dim font-pixel">all</span>, <i class="ph ph-lightning text-xs"></i> <span class="text-t-dim font-pixel">current</span>, <i class="ph ph-star text-xs"></i> <span class="text-t-dim font-pixel">favorites</span>, <i class="ph ph-notebook text-xs"></i> <span class="text-t-dim font-pixel">journal</span>, <i class="ph ph-tray text-xs"></i> <span class="text-t-dim font-pixel">unsorted</span>. Drag a card onto a bucket tab to move it. Drag to <i class="ph ph-plus text-xs"></i> to create a new bucket.</p>
                        <p><i class="ph ph-stack text-t-accent text-sm"></i> <span class="text-t-bright font-pixel">groups</span> let you nest cards. Drag a card to the center of another card to group them. The parent card shows a badge with the member count. Click the badge or use <i class="ph ph-stack text-xs"></i> "open group" in the context menu to see all members. Inside a group you can reorder, drag cards out to ungroup, or drag the first card to promote a new parent. Use <i class="ph ph-arrow-line-up text-xs"></i> "dissolve group" to ungroup all at once.</p>
                        <p><i class="ph ph-hash text-t-accent text-sm"></i> <span class="text-t-bright font-pixel">tags</span> are written as <span class="text-t-accent font-pixel">#tagname</span> in the card body and extracted automatically. They support hierarchy: <span class="text-t-accent font-pixel">#project/frontend</span>. Click a tag to filter — Ctrl+click to combine multiple tags (AND). Assign via right-click > <i class="ph ph-hash text-xs"></i> tags. Each segment of a hierarchical tag is independently clickable.</p>
                        <p><i class="ph ph-link text-t-accent text-sm"></i> <span class="text-t-bright font-pixel">links</span> connect cards. Write <span class="text-t-accent font-pixel">[[Card Title]]</span> in the body to create a link. Linked cards are clickable in preview and show up as <i class="ph ph-arrow-bend-left-up text-xs"></i> backlinks on the target card. The <i class="ph ph-split-horizontal text-xs"></i> split view shows related cards based on shared tags, links, and content overlap.</p>
                        <p><i class="ph ph-calendar-dots text-t-accent text-sm"></i> <span class="text-t-bright font-pixel">calendar</span> shows cards on their dates. Journal cards (<span class="text-t-dim font-pixel">YYYY-MM-DD</span>) and appointments (<span class="text-t-dim font-pixel">YYYY-MM-DD — Subject</span>) appear on their date. <i class="ph ph-cake text-xs" style="color:#fb7185"></i> Birthdays (<span class="text-t-accent font-pixel">#geburtstag</span>) repeat yearly. Sync with ownCloud/Nextcloud via <i class="ph ph-cloud-arrow-up text-xs"></i> CalDAV.</p>
                    </div>
                </section>

                <section>
                    <h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-keyboard text-sm"></i>shortcuts</h3>
                    <table class="w-full text-xs">
                        <tr><td class="py-1 text-t-dim w-40 font-pixel">Ctrl+K</td><td><i class="ph ph-magnifying-glass text-xs"></i> open / close search</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">Ctrl+Z</td><td><i class="ph ph-arrow-counter-clockwise text-xs"></i> undo last action</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">F1</td><td><i class="ph ph-question text-xs"></i> open / close help</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">Escape</td><td><i class="ph ph-x text-xs"></i> close any overlay</td></tr>
                    </table>
                </section>

                <section>
                    <h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-squares-four text-sm"></i>board</h3>
                    <table class="w-full text-xs">
                        <tr><td class="py-1 text-t-dim w-40 font-pixel">click card</td><td><i class="ph ph-eye text-xs"></i> open preview (or side panel in split mode)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">double-click</td><td><i class="ph ph-pencil-simple text-xs"></i> open editor</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">right-click</td><td><i class="ph ph-list text-xs"></i> context menu (color, bucket, tags, ...)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">Ctrl+click</td><td><i class="ph ph-check-square text-xs"></i> multi-select cards</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">drag card</td><td><i class="ph ph-arrows-out-cardinal text-xs"></i> reorder, move to bucket, or group</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">click tag</td><td><i class="ph ph-funnel text-xs"></i> filter by tag</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">Ctrl+click tag</td><td><i class="ph ph-plus-circle text-xs"></i> add/remove tag filter (AND)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">group badge</td><td><i class="ph ph-stack text-xs"></i> expand group</td></tr>
                    </table>
                </section>

                <section>
                    <h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-eye text-sm"></i>preview</h3>
                    <table class="w-full text-xs">
                        <tr><td class="py-1 text-t-dim w-40 font-pixel">double-click image</td><td><i class="ph ph-arrows-out text-xs"></i> fullscreen (scroll to zoom, drag to pan)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><i class="ph ph-caret-left text-xs"></i> <i class="ph ph-caret-right text-xs"></i></td><td>prev/next image in gallery</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">click <span class="text-t-accent">[[link]]</span></td><td><i class="ph ph-arrow-square-out text-xs"></i> open linked card</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">click checkbox</td><td><i class="ph ph-check-square text-xs"></i> toggle task completion</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><i class="ph ph-corners-out text-xs"></i> zen mode</td><td>full-screen reading (drag edges to resize)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><i class="ph ph-split-horizontal text-xs"></i> split view</td><td>show related / tagged cards side-by-side</td></tr>
                    </table>
                </section>

                <section>
                    <h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-pencil-simple text-sm"></i>editor</h3>
                    <table class="w-full text-xs">
                        <tr><td class="py-1 text-t-dim w-40 font-pixel">Ctrl+S</td><td><i class="ph ph-floppy-disk text-xs"></i> save</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">Ctrl+Shift+S</td><td><i class="ph ph-floppy-disk text-xs"></i> save and close</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">Alt+<i class="ph ph-arrow-up text-xs"></i>/<i class="ph ph-arrow-down text-xs"></i></td><td>move line up/down</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">Shift+Alt+<i class="ph ph-arrow-up text-xs"></i>/<i class="ph ph-arrow-down text-xs"></i></td><td>duplicate line</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">Tab</td><td>indent (4 spaces)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">paste / drag</td><td><i class="ph ph-upload-simple text-xs"></i> upload and insert image</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><i class="ph ph-scissors text-xs"></i> extract</td><td>selection to new card</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">drag divider</td><td>resize editor / preview split</td></tr>
                    </table>
                </section>

                <section>
                    <h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-lightning text-sm"></i>autocomplete</h3>
                    <table class="w-full text-xs">
                        <tr><td class="py-1 text-t-dim w-40 font-pixel"><span class="text-t-accent">[[</span></td><td><i class="ph ph-link text-xs"></i> link to card (search by title)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><span class="text-t-accent">#</span></td><td><i class="ph ph-hash text-xs"></i> tag autocomplete (existing tags)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><span class="text-t-accent">?</span></td><td><i class="ph ph-magic-wand text-xs"></i> snippet menu (see below)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><i class="ph ph-arrow-up text-xs"></i> <i class="ph ph-arrow-down text-xs"></i></td><td>navigate suggestions</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">Enter / Tab</td><td>accept suggestion</td></tr>
                    </table>
                </section>

                <section>
                    <h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-magic-wand text-sm"></i>snippets <span class="text-t-dim font-pixel" style="font-weight:400">type ? + keyword + space</span></h3>
                    <table class="w-full text-xs">
                        <tr><td class="py-1 text-t-dim w-40 font-pixel">?dat</td><td><i class="ph ph-calendar text-xs"></i> current date</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">?time</td><td><i class="ph ph-clock text-xs"></i> current time</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">?now</td><td><i class="ph ph-clock-countdown text-xs"></i> date + time</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">?week</td><td><i class="ph ph-calendar-blank text-xs"></i> calendar week (KW15)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">?todo</td><td><i class="ph ph-check-square text-xs"></i> checkbox - [ ]</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">?hr</td><td><i class="ph ph-minus text-xs"></i> horizontal rule ---</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">?h1 ?h2 ?h3</td><td><i class="ph ph-text-h text-xs"></i> headings</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">?table</td><td><i class="ph ph-table text-xs"></i> markdown table template</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">?code</td><td><i class="ph ph-code text-xs"></i> fenced code block</td></tr>
                    </table>
                </section>

                <section>
                    <h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-calculator text-sm"></i>inline calculator</h3>
                    <table class="w-full text-xs">
                        <tr><td class="py-1 text-t-dim w-40 font-pixel"><span class="text-t-accent">?</span>3+5 Space</td><td><i class="ph ph-equals text-xs"></i> replaces with 8</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">34+56<span class="text-t-accent">?</span> Space</td><td><i class="ph ph-equals text-xs"></i> becomes 34+56=90</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">operators</td><td>+ - * / () % ^</td></tr>
                    </table>
                </section>

                <section>
                    <h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-hash text-sm"></i>tags</h3>
                    <table class="w-full text-xs">
                        <tr><td class="py-1 text-t-dim w-40 font-pixel"><span class="text-t-accent">#tagname</span></td><td>write tags in card body</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><span class="text-t-accent">#parent/child</span></td><td><i class="ph ph-tree-structure text-xs"></i> hierarchical tags</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">right-click > <i class="ph ph-hash text-xs"></i> tags</td><td>assign tags via context menu</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">click segment</td><td><i class="ph ph-funnel text-xs"></i> each path level is clickable</td></tr>
                    </table>
                </section>

                <section>
                    <h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-magnifying-glass text-sm"></i>search</h3>
                    <table class="w-full text-xs">
                        <tr><td class="py-1 text-t-dim w-40 font-pixel">text</td><td><i class="ph ph-magnifying-glass text-xs"></i> search titles + body</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><span class="text-t-accent">#tag</span></td><td><i class="ph ph-funnel text-xs"></i> filter by tag</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><span class="text-t-accent">#tag</span> word</td><td>tag filter + text search combined</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><span class="text-t-accent">#tag1 #tag2</span></td><td><i class="ph ph-intersect text-xs"></i> multiple tags (AND)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">bucket filter</td><td><i class="ph ph-folder text-xs"></i> dropdown to restrict scope</td></tr>
                    </table>
                </section>

                <section>
                    <h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-article text-sm"></i>markdown</h3>
                    <table class="w-full text-xs">
                        <tr><td class="py-1 text-t-dim w-40 font-pixel"><span class="text-t-accent">[[title]]</span></td><td><i class="ph ph-link text-xs"></i> card link</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><span class="text-t-accent">```gallery</span></td><td><i class="ph ph-images text-xs"></i> image gallery grid (click to fullscreen)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><span class="text-t-accent">```tree</span></td><td><i class="ph ph-tree-structure text-xs"></i> tree-style list</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><span class="text-t-accent">```bullets</span></td><td><i class="ph ph-list-bullets text-xs"></i> bullet-style list</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">- [ ] / - [x]</td><td><i class="ph ph-check-square text-xs"></i> interactive checkboxes</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">http://...</td><td><i class="ph ph-arrow-square-out text-xs"></i> external links open in new tab</td></tr>
                    </table>
                </section>

                <section>
                    <h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-calendar-dots text-sm"></i>calendar</h3>
                    <table class="w-full text-xs">
                        <tr><td class="py-1 text-t-dim w-40 font-pixel">click day</td><td><i class="ph ph-caret-down text-xs"></i> open day popup with all cards</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">click item</td><td><i class="ph ph-eye text-xs"></i> open card preview</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">double-click item</td><td><i class="ph ph-pencil-simple text-xs"></i> open card editor</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">right-click item</td><td><i class="ph ph-list text-xs"></i> context menu</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">+ termin</td><td><i class="ph ph-calendar-plus text-xs"></i> new appointment (choose calendar)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel">+ journal</td><td><i class="ph ph-notebook text-xs"></i> new/open journal for that day</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><i class="ph ph-cake text-xs" style="color:#fb7185;"></i> geb.</td><td>new birthday (repeats yearly)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><i class="ph ph-caret-left text-xs"></i> <i class="ph ph-caret-right text-xs"></i></td><td>navigate months</td></tr>
                    </table>
                </section>

                <section>
                    <h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-cloud-arrow-up text-sm"></i>CalDAV sync</h3>
                    <table class="w-full text-xs">
                        <tr><td class="py-1 text-t-dim w-40 font-pixel"><i class="ph ph-gear text-xs"></i> gear icon</td><td>CalDAV settings (URL, credentials, calendar colors)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><i class="ph ph-cloud-arrow-up text-xs"></i> sync</td><td>manual sync (also auto every 2 min)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><span class="text-t-accent">#termin</span></td><td><i class="ph ph-calendar-dots text-xs"></i> card syncs as calendar event</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><span class="text-t-accent">#geburtstag</span></td><td><i class="ph ph-cake text-xs"></i> card syncs as yearly birthday</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><span class="text-t-accent">#termin #privat</span></td><td><i class="ph ph-folder text-xs"></i> pushes to "Privat" calendar</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><i class="ph ph-arrows-clockwise text-xs"></i> recurring</td><td>birthdays + RRULE events repeat in view</td></tr>
                    </table>
                </section>

                <section>
                    <h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-layout text-sm"></i>views</h3>
                    <table class="w-full text-xs">
                        <tr><td class="py-1 text-t-dim w-40 font-pixel"><i class="ph ph-split-horizontal text-xs"></i> split</td><td>side-by-side board + preview panel</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><i class="ph ph-list text-xs"></i> superview</td><td>compact multi-column title list with hover cards</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><i class="ph ph-calendar-x text-xs"></i> hide termine</td><td>toggle appointment cards on/off</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><i class="ph ph-sort-ascending text-xs"></i> sort</td><td>manual / newest / oldest / alpha / tag</td></tr>
                    </table>
                </section>

                <section>
                    <h3 class="font-pixel text-xs text-t-accent mb-3 flex items-center gap-2"><i class="ph ph-download-simple text-sm"></i>import / export</h3>
                    <table class="w-full text-xs">
                        <tr><td class="py-1 text-t-dim w-40 font-pixel"><i class="ph ph-download-simple text-xs"></i> export</td><td>JSON + media ZIP (re-importable)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><i class="ph ph-vault text-xs"></i> vault</td><td>Obsidian / Logseq markdown vault</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><i class="ph ph-file-md text-xs"></i> save .md</td><td>single card as markdown + images (right-click)</td></tr>
                        <tr><td class="py-1 text-t-dim font-pixel"><i class="ph ph-upload-simple text-xs"></i> import</td><td>restore from exported ZIP</td></tr>
                    </table>
                </section>

            </div>
        </div>
    </div>

    <!-- Settings -->
    <div class="overlay fixed inset-0 z-[88] flex justify-center items-center px-6" style="background:var(--t-overlay)" id="settings-overlay">
        <div class="bg-t-surface border border-t-border shadow-2xl w-full max-w-2xl flex" style="border-radius:4px;height:90vh;">
            <div class="w-44 shrink-0 border-r border-t-border py-4 flex flex-col gap-1" id="settings-nav">
                <button class="settings-tab active" data-tab="branding"><i class="ph ph-terminal-window text-sm"></i><span class="font-pixel text-[10px]">hyprcrd</span></button>
                <button class="settings-tab" data-tab="account"><i class="ph ph-user text-sm"></i><span class="font-pixel text-[10px]">account</span></button>
                <button class="settings-tab" data-tab="theme"><i class="ph ph-palette text-sm"></i><span class="font-pixel text-[10px]">themes</span></button>
                <button class="settings-tab" data-tab="sync"><i class="ph ph-cloud-arrow-up text-sm"></i><span class="font-pixel text-[10px]">sync</span></button>
                <button class="settings-tab" data-tab="behavior"><i class="ph ph-sliders text-sm"></i><span class="font-pixel text-[10px]">behavior</span></button>
                <button class="settings-tab" data-tab="notifications"><i class="ph ph-bell text-sm"></i><span class="font-pixel text-[10px]">notifications</span></button>
            </div>
            <div class="flex-1 flex flex-col min-h-0">
                <div class="flex items-center gap-3 px-5 py-3 border-b border-t-border shrink-0">
                    <i class="ph ph-gear text-t-accent text-base"></i>
                    <h2 id="settings-title" class="font-pixel text-xs text-t-accent">settings</h2>
                    <div class="flex-1"></div>
                    <button id="settings-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">close</span></button>
                </div>
                <div class="flex-1 overflow-y-auto p-5">
                    <div id="settings-panel-branding">
                        <div class="flex flex-col items-center justify-center py-12 text-center">
                            <i class="ph ph-terminal-window text-t-accent text-5xl mb-4"></i>
                            <h1 class="font-pixel text-2xl text-t-accent tracking-wider mb-2">hyprcrd</h1>
                            <p class="font-pixel text-[10px] text-t-dim mb-6">v<?= APP_VERSION ?></p>
                            <p class="text-xs text-t-muted leading-relaxed max-w-sm">Self-hosted card manager with markdown, tags, calendar, CalDAV sync, encrypted WebDAV notes, and Obsidian-compatible export.</p>
                            <div class="flex items-center gap-4 mt-8 text-t-dim">
                                <div class="text-center"><div id="stats-cards" class="font-pixel text-lg text-t-bright">—</div><div class="font-pixel text-[8px] uppercase">cards</div></div>
                                <div class="w-px h-8 bg-t-border"></div>
                                <div class="text-center"><div id="stats-buckets" class="font-pixel text-lg text-t-bright">—</div><div class="font-pixel text-[8px] uppercase">buckets</div></div>
                                <div class="w-px h-8 bg-t-border"></div>
                                <div class="text-center"><div id="stats-tags" class="font-pixel text-lg text-t-bright">—</div><div class="font-pixel text-[8px] uppercase">tags</div></div>
                            </div>
                            <p class="text-[10px] text-t-dim mt-8">Press <kbd class="px-1 py-0.5 border border-t-border rounded text-[9px] font-pixel">F1</kbd> for help</p>
                        </div>
                    </div>
                    <div id="settings-panel-theme" class="hidden">
                        <div class="font-pixel text-[9px] uppercase tracking-wider text-t-dim mb-3">color theme</div>
                        <div id="settings-theme-list" class="grid grid-cols-2 gap-2"></div>
                    </div>
                    <div id="settings-panel-sync" class="hidden space-y-3">
                        <div class="font-pixel text-[9px] uppercase tracking-wider text-t-dim mb-2">CalDAV / WebDAV</div>
                        <div><label class="font-pixel text-[9px] text-t-dim uppercase block mb-1">server url</label><input id="caldav-url" type="text" name="caldav_url_x" placeholder="https://cloud.example.com/remote.php/dav/calendars/user/" autocomplete="off" data-1p-ignore data-lpignore="true" data-form-type="other" class="w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-xs focus:border-t-accent focus:outline-none placeholder:text-t-dim font-mono"></div>
                        <div class="flex gap-3">
                            <div class="flex-1"><label class="font-pixel text-[9px] text-t-dim uppercase block mb-1">username</label><input id="caldav-user" type="text" name="caldav_user_x" autocomplete="off" data-1p-ignore data-lpignore="true" data-form-type="other" class="w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-xs focus:border-t-accent focus:outline-none font-mono"></div>
                            <div class="flex-1"><label class="font-pixel text-[9px] text-t-dim uppercase block mb-1">password</label><input id="caldav-pass" type="text" name="caldav_pass_x" placeholder="app password" autocomplete="off" data-1p-ignore data-lpignore="true" data-form-type="other" style="-webkit-text-security:disc;" class="w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-xs focus:border-t-accent focus:outline-none font-mono"></div>
                        </div>
                        <div class="flex items-center gap-3">
                            <button id="caldav-test" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-plugs-connected text-sm"></i><span class="font-pixel text-[10px]">test</span></button>
                            <span id="caldav-test-status" class="font-pixel text-[9px] text-t-dim"></span>
                        </div>
                        <div id="caldav-calendars" class="hidden border-t border-t-border pt-2">
                            <label class="font-pixel text-[9px] text-t-dim uppercase block mb-2">calendars</label>
                            <div id="caldav-cal-list" class="space-y-2"></div>
                        </div>
                        <div class="flex flex-wrap gap-2 pt-2 border-t border-t-border">
                            <button id="caldav-save" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors"><i class="ph ph-floppy-disk text-sm"></i><span class="font-pixel text-[10px]">save</span></button>
                            <button id="caldav-sync-now" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-arrows-clockwise text-sm"></i><span class="font-pixel text-[10px]">sync now</span></button>
                            <button id="notes-reset" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-arrow-counter-clockwise text-sm"></i><span class="font-pixel text-[10px]">reset notes</span></button>
                            <button id="notes-rekey" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-key text-sm"></i><span class="font-pixel text-[10px]">re-key notes</span></button>
                        </div>
                        <div class="flex items-center gap-2">
                            <span id="caldav-sync-status" class="font-pixel text-[9px] text-t-dim"></span>
                        </div>
                        <div id="caldav-log" class="text-[10px] text-t-dim font-mono max-h-32 overflow-y-auto hidden border-t border-t-border pt-2"></div>
                    </div>
                    <div id="settings-panel-behavior" class="hidden space-y-4">
                        <div class="font-pixel text-[9px] uppercase tracking-wider text-t-dim mb-2">current view</div>
                        <div class="flex items-center gap-3">
                            <label class="text-xs text-t-muted">Show cards touched within</label>
                            <select id="setting-current-days" class="bg-t-bg border border-t-border text-t-bright text-xs font-pixel px-2 py-1 rounded-sm focus:border-t-accent focus:outline-none cursor-pointer">
                                <option value="1">1 day</option>
                                <option value="2">2 days</option>
                                <option value="3">3 days</option>
                                <option value="7">1 week</option>
                                <option value="14">2 weeks</option>
                            </select>
                        </div>
                        <p class="text-[10px] text-t-dim leading-relaxed"><i class="ph ph-info text-xs"></i> "Current" shows cards you recently opened or edited. Sync-only updates (CalDAV/WebDAV) are excluded.</p>
                    </div>
                    <div id="settings-panel-notifications" class="hidden space-y-4">
                        <div class="font-pixel text-[9px] uppercase tracking-wider text-t-dim mb-2">lookahead</div>
                        <div class="flex items-center gap-3">
                            <label class="text-xs text-t-muted">Show upcoming events</label>
                            <select id="notif-lookahead" class="bg-t-bg border border-t-border text-t-bright text-xs font-pixel px-2 py-1 rounded-sm focus:border-t-accent focus:outline-none cursor-pointer">
                                <option value="1">1 day</option>
                                <option value="3">3 days</option>
                                <option value="7">1 week</option>
                                <option value="14">2 weeks</option>
                                <option value="30">1 month</option>
                            </select>
                            <span class="text-xs text-t-dim">ahead</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <label class="text-xs text-t-muted">Show at</label>
                            <select id="notif-time" class="bg-t-bg border border-t-border text-t-bright text-xs font-pixel px-2 py-1 rounded-sm focus:border-t-accent focus:outline-none cursor-pointer">
                                <option value="0">midnight</option>
                                <option value="6">06:00</option>
                                <option value="8">08:00</option>
                                <option value="9">09:00</option>
                            </select>
                        </div>
                        <div class="flex items-center gap-3">
                            <label class="text-xs text-t-muted flex items-center gap-2">
                                <input type="checkbox" id="notif-birthdays" checked class="accent-t-accent"> Birthdays
                            </label>
                            <label class="text-xs text-t-muted flex items-center gap-2">
                                <input type="checkbox" id="notif-termine" checked class="accent-t-accent"> Appointments
                            </label>
                            <label class="text-xs text-t-muted flex items-center gap-2">
                                <input type="checkbox" id="notif-overdue" checked class="accent-t-accent"> Overdue tasks
                            </label>
                        </div>
                        <div class="border-t border-t-border pt-3 mt-2">
                            <div class="font-pixel text-[9px] uppercase tracking-wider text-t-dim mb-2">notification stream</div>
                            <div class="flex items-center gap-2 mb-2">
                                <button id="notif-clear-dismissed" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-arrow-counter-clockwise text-sm"></i><span class="font-pixel text-[10px]">restore dismissed</span></button>
                            </div>
                            <div id="notif-stream" class="max-h-64 overflow-y-auto space-y-1"></div>
                        </div>
                    </div>
                    <div id="settings-panel-account" class="hidden space-y-4">
                        <div class="font-pixel text-[9px] uppercase tracking-wider text-t-dim mb-3">change password</div>
                        <div>
                            <label class="font-pixel text-[9px] text-t-dim uppercase block mb-1">current password</label>
                            <input id="settings-pw-current" type="password" autocomplete="off" data-1p-ignore data-lpignore="true" class="w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-xs focus:border-t-accent focus:outline-none font-mono">
                        </div>
                        <div>
                            <label class="font-pixel text-[9px] text-t-dim uppercase block mb-1">new password</label>
                            <input id="settings-pw-new" type="password" autocomplete="new-password" class="w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-xs focus:border-t-accent focus:outline-none font-mono">
                        </div>
                        <div>
                            <label class="font-pixel text-[9px] text-t-dim uppercase block mb-1">confirm new password</label>
                            <input id="settings-pw-confirm" type="password" autocomplete="new-password" class="w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-xs focus:border-t-accent focus:outline-none font-mono">
                        </div>
                        <div class="flex items-center gap-3">
                            <button id="settings-pw-save" class="flex items-center gap-1.5 px-3 py-1.5 text-xs border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors"><i class="ph ph-floppy-disk text-sm"></i><span class="font-pixel text-[10px]">change password</span></button>
                            <span id="settings-pw-status" class="font-pixel text-[9px] text-t-dim"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Dialog -->
    <div class="overlay fixed inset-0 z-[90] flex justify-center items-center px-4" style="background:var(--t-overlay)" id="dialog">
        <div class="bg-t-surface border border-t-border w-full max-w-sm">
            <div class="flex items-center gap-2 px-4 py-3 border-b border-t-border">
                <i class="ph ph-warning text-t-accent text-sm"></i>
                <h2 id="dialog-title" class="font-pixel text-xs text-t-accent"></h2>
                <div class="flex-1"></div>
                <button id="dialog-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
                    <i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">close</span>
                </button>
            </div>
            <div class="p-4 space-y-3">
                <p id="dialog-msg" class="text-xs text-t-text"></p>
                <input type="text" id="dialog-input" class="hidden w-full bg-t-bg border border-t-border text-t-bright px-3 py-2 text-sm focus:border-t-accent focus:outline-none placeholder:text-t-dim font-mono">
                <div id="dialog-datepicker" class="hidden"></div>
            </div>
            <div class="flex justify-end gap-2 px-4 py-3 border-t border-t-border">
                <button id="dialog-cancel" class="font-pixel text-[10px] px-3 py-1.5 text-xs border border-t-border text-t-muted hover:text-t-bright transition-colors">cancel</button>
                <button id="dialog-ok" class="font-pixel text-[10px] px-3 py-1.5 text-xs border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors">ok</button>
            </div>
        </div>
    </div>

    <!-- Search -->
    <div class="overlay fixed inset-0 z-[70]" style="background:var(--t-overlay)" id="search">
        <div class="bg-t-surface border border-t-border rounded-sm shadow-2xl flex flex-col absolute" style="inset:40px;">
            <div class="flex items-center gap-3 px-4 py-3 border-b border-t-border">
                <i class="ph ph-magnifying-glass text-t-accent text-base"></i>
                <input type="text" id="search-input" placeholder="search cards..." class="flex-1 bg-transparent text-t-bright text-sm placeholder:text-t-dim font-mono" autocomplete="off" spellcheck="false">
                <select id="search-bucket-filter" class="bg-t-bg border border-t-border text-t-muted text-[10px] font-pixel px-2 py-1 rounded-sm focus:border-t-accent focus:outline-none cursor-pointer"><option value="">all buckets</option></select>
                <button id="search-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
                    <i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">close</span>
                </button>
            </div>
            <div class="flex flex-1 min-h-0">
                <div id="search-results" class="overflow-y-auto w-2/5 min-w-[220px] border-r border-t-border"></div>
                <div class="flex-1 overflow-y-auto p-5">
                    <div id="search-preview-empty" class="flex flex-col items-center justify-center h-full text-t-dim"><i class="ph ph-article text-3xl mb-2"></i><p class="font-pixel text-[10px]">select a card</p></div>
                    <div id="search-preview-content" class="hidden">
                        <div class="card-bar w-16 mb-4 rounded-sm" id="search-preview-color"></div>
                        <h2 id="search-preview-title" class="font-pixel text-t-bright text-sm mb-4 leading-relaxed"></h2>
                        <div id="search-preview-body" class="prose text-xs text-t-text"></div>
                        <div id="search-preview-tags" class="hidden flex flex-wrap gap-1.5 mt-4"></div>
                        <div id="search-preview-meta" class="mt-6 pt-3 border-t border-t-border text-[10px] text-t-dim font-pixel"></div>
                    </div>
                </div>
            </div>
            <div id="search-footer" class="hidden px-4 py-2 border-t border-t-border flex items-center gap-4 text-[10px] text-t-dim font-pixel">
                <span><i class="ph ph-arrow-up text-xs"></i><i class="ph ph-arrow-down text-xs"></i> navigate</span>
                <span><i class="ph ph-arrow-elbow-down-left text-xs"></i> open</span><span>esc close</span>
            </div>
        </div>
    </div>

    <!-- Tasks -->
    <div class="overlay fixed inset-0 z-[72]" style="background:var(--t-overlay)" id="tasks">
        <div class="bg-t-surface border border-t-border rounded-sm shadow-2xl flex flex-col absolute" style="inset:54px;">
            <div class="flex items-center gap-3 px-4 py-3 border-b border-t-border">
                <i class="ph ph-check-square-offset text-t-accent2 text-base"></i>
                <h2 class="font-pixel text-xs text-t-accent2">global_tasks</h2>
                <div class="flex-1"></div>
                <select id="tasks-status-filter" class="bg-t-bg border border-t-border text-t-muted text-[10px] font-pixel px-2 py-1 rounded-sm focus:border-t-accent2 focus:outline-none cursor-pointer">
                    <option value="open">open</option>
                    <option value="done">done</option>
                    <option value="all">all</option>
                </select>
                <select id="tasks-bucket-filter" class="bg-t-bg border border-t-border text-t-muted text-[10px] font-pixel px-2 py-1 rounded-sm focus:border-t-accent2 focus:outline-none cursor-pointer">
                    <option value="">all buckets</option>
                    <option value="none">unsorted</option>
                </select>
                <button id="tasks-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
                    <i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">close</span>
                </button>
            </div>
            <div id="tasks-summary" class="px-4 py-2 border-b border-t-border text-[10px] text-t-dim font-pixel"></div>
            <div id="tasks-list" class="flex-1 overflow-y-auto"></div>
        </div>
    </div>

    <!-- Detail -->
    <div class="overlay fixed inset-0 z-[75]" style="background:var(--t-overlay)" id="detail">
        <div class="bg-t-surface border border-t-border flex absolute" style="inset:40px;">
            <!-- Group sidebar (hidden for single cards) -->
            <div id="detail-sidebar" class="hidden w-56 shrink-0 border-r border-t-border flex flex-col">
                <div class="px-3 py-3 border-b border-t-border flex items-center gap-2">
                    <i class="ph ph-stack text-t-accent text-sm"></i>
                    <span class="font-pixel text-[10px] text-t-accent">group</span>
                    <span id="detail-sidebar-count" class="font-pixel text-[9px] text-t-dim ml-auto"></span>
                </div>
                <div id="detail-sidebar-list" class="flex-1 overflow-y-auto"></div>
            </div>
            <!-- Main content -->
            <div class="flex-1 flex flex-col min-w-0 relative">
                <div class="card-bar w-full shrink-0" id="detail-color"></div>
                <div id="detail-controls" class="flex items-center gap-2 px-4 py-2 border-b border-t-border shrink-0">
                    <button id="detail-edit" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent2 hover:text-t-accent2 transition-colors">
                        <i class="ph ph-pencil-simple text-sm"></i><span class="font-pixel text-[10px]">edit</span>
                    </button>
                    <button id="detail-delete" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
                        <i class="ph ph-trash text-sm"></i><span class="font-pixel text-[10px]">del</span>
                    </button>
                    <button id="detail-done" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" title="mark done">
                        <i class="ph ph-check-circle text-sm"></i><span class="font-pixel text-[10px]" id="detail-done-label">done</span>
                    </button>
                    <button id="detail-zen" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" title="zen mode">
                        <i class="ph ph-corners-out text-sm"></i>
                    </button>
                    <div class="flex-1"></div>
                    <button id="split-right-btn" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors" title="split view">
                        <i class="ph ph-split-horizontal text-sm"></i><span class="font-pixel text-[10px]">split</span>
                    </button>
                    <button id="detail-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
                        <i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">close</span>
                    </button>
                </div>
                <div id="detail-scroll" class="p-6 pt-5 flex-1 overflow-y-auto">
                    <h2 id="detail-title" class="font-pixel text-t-bright text-lg mb-4 leading-relaxed"></h2>
                    <div id="detail-body" class="prose text-sm text-t-text"></div>
                    <div id="detail-tags" class="hidden flex flex-wrap gap-1.5 mt-4"></div>
                    <div id="detail-backlinks" class="hidden mt-6 pt-4 border-t border-t-border">
                        <div class="font-pixel text-[10px] text-t-dim mb-2 flex items-center gap-1.5"><i class="ph ph-arrow-bend-left-up text-xs"></i> referenced_by</div>
                        <div id="detail-backlinks-list" class="flex flex-wrap gap-2"></div>
                    </div>
                    <div id="detail-meta" class="mt-8 pt-4 border-t border-t-border text-[11px] text-t-dim font-pixel"></div>
                </div>
                <div id="detail-done-corner" class="card-done-badge hidden"><i class="ph ph-check"></i></div>
            </div>
            <!-- Split right pane -->
            <div id="split-right" class="hidden w-2/5 shrink-0 border-l border-t-border flex flex-col min-w-0">
                <div class="flex items-center gap-2 px-3 py-2 border-b border-t-border shrink-0">
                    <i class="ph ph-magnifying-glass text-t-dim text-xs"></i>
                    <input type="text" id="split-search" class="flex-1 bg-transparent text-xs text-t-bright placeholder:text-t-dim font-mono focus:outline-none" placeholder="search all cards..." autocomplete="off">
                    <button id="split-close" class="text-t-dim hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i></button>
                </div>
                <div id="split-picks" class="overflow-y-auto border-b border-t-border"></div>
                <div id="split-content" class="flex-1 overflow-y-auto p-5"></div>
            </div>
        </div>
    </div>

    <div id="link-ac" class="fixed z-[80] bg-t-surface border border-t-border shadow-xl max-h-48 overflow-y-auto hidden" style="min-width:220px;max-width:360px;"></div>
    <div id="tag-ac" class="fixed z-[80] bg-t-surface border border-t-border shadow-xl max-h-48 overflow-y-auto hidden" style="min-width:180px;max-width:300px;"></div>
    <div id="snippet-ac" class="fixed z-[80] bg-t-surface border border-t-border shadow-xl max-h-56 overflow-y-auto hidden" style="min-width:240px;max-width:360px;"></div>

    <!-- Calendar -->
    <div class="overlay fixed inset-0 z-[73]" style="background:var(--t-overlay)" id="calendar">
        <div class="bg-t-surface border border-t-border flex flex-col absolute" style="inset:40px;">
            <div class="flex items-center gap-3 px-5 py-3 border-b border-t-border shrink-0">
                <i class="ph ph-calendar-dots text-t-accent text-base"></i>
                <button id="cal-prev" class="text-t-muted hover:text-t-accent transition-colors"><i class="ph ph-caret-left text-sm"></i></button>
                <h2 id="cal-title" class="font-pixel text-xs text-t-accent min-w-[120px] text-center"></h2>
                <button id="cal-next" class="text-t-muted hover:text-t-accent transition-colors"><i class="ph ph-caret-right text-sm"></i></button>
                <button id="cal-today" class="font-pixel text-[10px] px-2 py-0.5 border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">today</button>
                <button id="cal-sync" class="font-pixel text-[10px] px-2 py-0.5 border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors flex items-center gap-1"><i class="ph ph-cloud-arrow-up text-xs"></i>sync</button>
                <button id="cal-caldav-settings" class="text-t-dim hover:text-t-accent transition-colors"><i class="ph ph-gear text-sm"></i></button>
                <div class="flex-1"></div>
                <button id="cal-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
                    <i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">close</span>
                </button>
            </div>
            <div id="cal-grid" class="flex-1 flex flex-col overflow-hidden"></div>
        </div>
    </div>


    <!-- Gallery -->
    <div class="overlay fixed inset-0 z-[72]" style="background:var(--t-overlay)" id="gallery">
        <div class="bg-t-surface border border-t-border rounded-sm shadow-2xl flex flex-col absolute" style="inset:40px;">
            <div class="flex items-center gap-3 px-4 py-3 border-b border-t-border shrink-0">
                <i class="ph ph-images text-t-accent text-base"></i>
                <h2 class="font-pixel text-xs text-t-accent">images</h2>
                <span id="gallery-count" class="font-pixel text-[9px] text-t-dim"></span>
                <div class="flex-1"></div>
                <button id="gallery-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
                    <i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">close</span>
                </button>
            </div>
            <div id="gallery-grid" class="flex-1 overflow-y-auto p-4 grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-3 content-start"></div>
        </div>
    </div>

    <!-- Selection action bar -->
    <div id="select-bar" class="fixed bottom-16 left-1/2 -translate-x-1/2 z-[45] bg-t-surface border border-t-border shadow-2xl px-4 py-2 flex items-center gap-3 hidden" style="border-radius:6px;">
        <span id="select-count" class="font-pixel text-[10px] text-t-accent"></span>
        <button id="select-group" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
            <i class="ph ph-stack text-sm"></i><span class="font-pixel text-[10px]">group</span>
        </button>
        <button id="select-bucket" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
            <i class="ph ph-folder text-sm"></i><span class="font-pixel text-[10px]">bucket</span>
        </button>
        <button id="select-color" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
            <i class="ph ph-palette text-sm"></i><span class="font-pixel text-[10px]">color</span>
        </button>
        <button id="select-tag" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
            <i class="ph ph-hash text-sm"></i><span class="font-pixel text-[10px]">tag</span>
        </button>
        <button id="select-export" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors">
            <i class="ph ph-download-simple text-sm"></i><span class="font-pixel text-[10px]">export</span>
        </button>
        <button id="select-delete" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
            <i class="ph ph-trash text-sm"></i><span class="font-pixel text-[10px]">delete</span>
        </button>
        <button id="select-clear" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors">
            <i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">clear</span>
        </button>
    </div>

    <!-- Context menu -->
    <div id="ctx-menu" class="fixed z-[85] bg-t-surface border border-t-border shadow-2xl hidden" style="min-width:180px;">
        <div id="ctx-items" class="py-1"></div>
        <div id="ctx-colors" class="hidden px-3 py-2 border-t border-t-border">
            <div class="flex flex-wrap gap-1.5" id="ctx-color-grid"></div>
        </div>
        <div id="ctx-buckets" class="hidden border-t border-t-border py-1"></div>
        <div id="ctx-members" class="hidden border-t border-t-border py-1 max-h-48 overflow-y-auto"></div>
        <div id="ctx-tags" class="hidden border-t border-t-border py-1">
            <div class="px-3 py-1.5"><input id="ctx-tag-input" type="text" placeholder="#tag..." class="w-full bg-t-bg border border-t-border text-t-text text-[10px] font-pixel px-2 py-1 rounded-sm focus:border-t-accent focus:outline-none"></div>
            <div id="ctx-tag-list" class="max-h-36 overflow-y-auto"></div>
        </div>
    </div>

    <!-- Editor -->
    <div class="overlay fixed inset-0 z-[60]" style="background:var(--t-overlay)" id="modal">
        <div class="bg-t-surface border border-t-border flex flex-col absolute" style="inset:40px;">
            <div class="card-bar w-full shrink-0" id="editor-color"></div>
            <div class="flex items-center justify-between px-4 py-2.5 border-b border-t-border shrink-0">
                <div class="flex items-center gap-3"><i class="ph ph-file-plus text-t-accent text-sm"></i><h2 id="modal-title" class="font-pixel text-xs text-t-accent">new_card</h2></div>
                <div class="flex items-center gap-2">
                    <button id="modal-cancel" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-danger hover:text-t-danger transition-colors"><i class="ph ph-x text-sm"></i><span class="font-pixel text-[10px]">close</span></button>
                    <button id="modal-save" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-floppy-disk text-sm"></i><span class="font-pixel text-[10px]">save</span></button>
                    <button id="modal-save-view" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-border text-t-muted hover:border-t-accent hover:text-t-accent transition-colors"><i class="ph ph-eye text-sm"></i><span class="font-pixel text-[10px]">save+view</span></button>
                    <button id="modal-save-close" class="flex items-center gap-1.5 px-2.5 py-1 text-xs border border-t-accent text-t-accent hover:bg-t-accent/10 transition-colors"><i class="ph ph-floppy-disk text-sm"></i><span class="font-pixel text-[10px]">save+close</span></button>
                </div>
            </div>
            <div class="flex items-center gap-3 px-4 py-2.5 border-b border-t-border shrink-0">
                <input type="text" id="inp-title" placeholder="> title..." class="flex-1 bg-transparent border-none text-t-bright text-base font-bold focus:outline-none placeholder:text-t-dim font-pixel">
                <button id="inp-due-date" class="flex items-center gap-1 px-2 py-1 text-[10px] font-pixel border border-t-border text-t-dim hover:border-t-accent hover:text-t-accent transition-colors rounded-sm shrink-0" title="set due date">
                    <i class="ph ph-clock-countdown text-xs"></i><span id="inp-due-label">no due</span>
                </button>
                <button id="inp-done-toggle" class="flex items-center gap-1 px-2 py-1 text-[10px] font-pixel border border-t-border text-t-dim hover:border-t-accent hover:text-t-accent transition-colors rounded-sm shrink-0" title="mark done">
                    <i class="ph ph-check-circle text-xs"></i><span id="inp-done-label">done</span>
                </button>
                <input type="hidden" id="inp-due-value" value="">
                <select id="inp-bucket" class="bg-t-bg border border-t-border text-t-muted text-[10px] font-pixel px-2 py-1 rounded-sm focus:border-t-accent focus:outline-none cursor-pointer"><option value="">no bucket</option></select>
                <div id="color-presets" class="flex gap-1.5 shrink-0"></div>
                <input type="hidden" id="inp-color" value="#38bdf8">
            </div>
            <div class="flex items-center gap-1 px-4 py-1.5 border-b border-t-border shrink-0" id="md-toolbar">
                <button data-md="heading" title="Heading" class="toolbar-btn"><i class="ph ph-text-h text-sm"></i></button>
                <button data-md="bold" title="Bold" class="toolbar-btn"><i class="ph ph-text-bolder text-sm"></i></button>
                <button data-md="italic" title="Italic" class="toolbar-btn"><i class="ph ph-text-italic text-sm"></i></button>
                <button data-md="strikethrough" title="Strikethrough" class="toolbar-btn"><i class="ph ph-text-strikethrough text-sm"></i></button>
                <div class="w-px h-4 bg-t-border mx-1"></div>
                <button data-md="code" title="Code" class="toolbar-btn"><i class="ph ph-code text-sm"></i></button>
                <button data-md="codeblock" title="Code block" class="toolbar-btn"><i class="ph ph-code-block text-sm"></i></button>
                <div class="w-px h-4 bg-t-border mx-1"></div>
                <button data-md="ul" title="List" class="toolbar-btn"><i class="ph ph-list-bullets text-sm"></i></button>
                <button data-md="tree" title="Tree list" class="toolbar-btn"><i class="ph ph-tree-structure text-sm"></i></button>
                <button data-md="ol" title="Numbered" class="toolbar-btn"><i class="ph ph-list-numbers text-sm"></i></button>
                <button data-md="quote" title="Quote" class="toolbar-btn"><i class="ph ph-quotes text-sm"></i></button>
                <button data-md="todo" title="Todo" class="toolbar-btn"><i class="ph ph-check-square text-sm"></i></button>
                <div class="w-px h-4 bg-t-border mx-1"></div>
                <button data-md="link" title="Link" class="toolbar-btn"><i class="ph ph-link text-sm"></i></button>
                <button data-md="cardlink" title="Card ref [[" class="toolbar-btn"><i class="ph ph-arrow-square-out text-sm"></i></button>
                <button data-md="hr" title="Divider" class="toolbar-btn"><i class="ph ph-minus text-sm"></i></button>
                <div class="w-px h-4 bg-t-border mx-1"></div>
                <button data-md="extract" title="Extract selection to new card" class="toolbar-btn"><i class="ph ph-scissors text-sm"></i></button>
                <div class="flex-1"></div>
                <button id="toggle-lines" class="toolbar-btn flex items-center gap-1.5 px-2" title="line numbers"><i class="ph ph-hash text-sm"></i></button>
                <button id="toggle-preview" class="toolbar-btn flex items-center gap-1.5 px-2"><i class="ph ph-eye text-sm"></i><span class="font-pixel text-[9px]">preview</span></button>
            </div>
            <div class="flex flex-1 min-h-0 overflow-hidden">
                <div id="editor-gutter" class="hidden bg-t-bg text-t-dim text-right font-mono text-sm select-none overflow-hidden shrink-0 border-r border-t-border" style="width:3.5em; padding:1rem 0.25rem 1rem 0.5rem; line-height:1.625;"></div>
                <div id="editor-pane" class="relative min-h-full bg-t-bg overflow-hidden" style="flex:1 1 0%;min-width:0;">
                    <div id="editor-line-hl" class="absolute pointer-events-none left-0 right-0" style="background:var(--t-border);opacity:0.18;display:none;z-index:1;"></div>
                    <textarea id="editor-body" placeholder="> write markdown..." class="absolute inset-0 w-full h-full text-t-text text-sm font-mono placeholder:text-t-dim border-none overflow-y-auto" style="padding:1rem; line-height:1.625; resize:none; z-index:2; background:transparent;"></textarea>
                </div>
                <div id="editor-divider" class="hidden shrink-0" style="width:11px;cursor:col-resize;position:relative;z-index:3;margin:0 -5px;"><div style="position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--t-border);"></div><div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:48px;border-radius:2px;background:var(--t-muted);opacity:0.08;transition:opacity 0.2s;"></div></div>
                <div id="editor-preview" class="bg-t-bg p-4 overflow-y-auto hidden" style="flex:1 1 0%;min-width:0;"><div id="preview-content" class="prose text-sm text-t-text"></div></div>
            </div>
        </div>
    </div>

    <script type="module" src="js/app.js?v=<?= time() ?>"></script>
</body>
</html>