/* ==========================================================================
Zettelkasten design system
Layout based on styles.css | Colors based on styles2.css
========================================================================== */  
:root {
/* Paper & surfaces — Warm cream from styles2.css */
--paper: #faf4eb;
--surface: #fffcf7;
--surface-tint: #f5ede4;  

/* Ink — Warm dark brown from styles2.css */
--ink: #2c2416;
--ink-soft: #6b5d4e;
--ink-faint: #a69580;  

/* Borders — Warm tones from styles2.css */
--border: #e8ddd0;
--border-strong: #d4c4b0;  

/* Accent — Terracotta from styles2.css */
--accent: #c76b4a;
--accent-hover: #b05a3a;
--accent-bg: #fdf0ea;
--accent-text: #8a4a30;  

/* Sticky / pinned state — Warm amber/gold from styles2.css */
--sticky: #c9942e;
--sticky-hover: #b07d1f;
--sticky-bg: #fdf2d0;
--sticky-text: #8a6a1a;  

/* Danger — Reserved for delete only from styles2.css */
--danger: #b84a3a;
--danger-hover: #9a3a2a;
--danger-bg: #fceeea;
--danger-text: #8a3020;  

/* Type - Kept from styles.css */
--font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
--font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Roboto Mono', monospace;  

/* Spacing scale (4px base) - Kept from styles.css */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;  
--radius: 6px;
--radius-lg: 10px;
}  

/* Ab hier folgt der unveränderte Rest von styles.css */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }  
body {
font-family: var(--font-sans);
background: var(--paper);
color: var(--ink);
line-height: 1.6;
padding: var(--sp-5);
}  
.container { max-width: 820px; margin: 0 auto; }  
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; color: var(--ink); }
h1 { font-size: 1.9em; margin-bottom: var(--sp-4); }
h2 { font-size: 1.4em; margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
h3 { font-size: 1.1em; color: var(--ink-soft); margin-top: var(--sp-4); margin-bottom: var(--sp-2); font-weight: 600; }  
a { color: var(--accent); }  

/* ... (Alle weiteren Klassen wie .btn, .zettel, .modal etc. bleiben exakt so, wie sie in styles.css definiert waren) ... */

/* --------------------------------------------------------------------
   Buttons — one shared shape, three roles: primary (filled accent),
   secondary (outline neutral, the default), danger (outline red,
   delete only), sticky (outline gold, pin/unpin only).
   -------------------------------------------------------------------- */

.btn,
.btn-random, .btn-export-link, .btn-logout, .btn-import, .btn-export, .btn-secondary,
.back-link, .bookmarklet-link,
.btn-view, .btn-edit, .btn-delete, .btn-save, .btn-cancel, .btn-pin, .btn-unpin,
.btn-create-new,
.search-form button, .search-form a,
.create-form button,
.edit-form button,
.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding: 8px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none !important;
    font-size: 0.9em;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    min-height: 36px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover,
.btn-random:hover, .btn-export-link:hover, .btn-logout:hover, .btn-import:hover,
.btn-export:hover, .btn-secondary:hover, .back-link:hover, .bookmarklet-link:hover,
.btn-view:hover, .btn-edit:hover, .btn-cancel:hover,
.search-form a:hover,
.pagination a:hover {
    background: var(--surface-tint);
    border-color: var(--ink-faint);
}

/* Primary — the one filled action per view */
.btn-create-new,
.create-form button[name="create"],
.btn-save,
.btn-import {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn-create-new:hover,
.create-form button[name="create"]:hover,
.btn-save:hover,
.btn-import:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}
.btn-import:disabled { background: var(--border-strong); border-color: var(--border-strong); color: var(--ink-faint); cursor: not-allowed; }

.search-form button:hover { background: var(--surface-tint); border-color: var(--ink-faint); }

/* Danger — delete only */
.btn-delete {
    color: var(--danger-text);
    border-color: var(--danger);
    background: var(--surface);
}
.btn-delete:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

/* Sticky / pin state */
.btn-pin, .btn-unpin {
    color: var(--sticky-text);
    border-color: var(--sticky);
    background: var(--surface);
}
.btn-pin:hover, .btn-unpin:hover {
    background: var(--sticky);
    border-color: var(--sticky);
    color: #fff;
}

.btn-create-new { padding: 13px 32px; font-size: 1.05em; }

.pagination .current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------
   Header
   -------------------------------------------------------------------- */

.header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-5);
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
}
.header-section h1 { margin: 0; flex-shrink: 0; }
.header-section h1 a { color: inherit; text-decoration: none; }

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.user-info, .header-actions span { color: var(--ink-faint); font-size: 0.9em; margin-left: var(--sp-3); }

/* --------------------------------------------------------------------
   Sticky zettel
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
Sticky zettel - High Contrast "Pinned" Version
-------------------------------------------------------------------- */  
.sticky-zettel {
    /* 1. Stronger Visual Identity */
    background: var(--sticky-bg);
    border: 1px solid var(--sticky);
    border-left: 8px solid var(--sticky); /* Very bold accent line */
    
    /* 2. Physical Depth */
    margin-bottom: var(--sp-8); /* More space around it to let it breathe */
    position: relative;
    z-index: 2;
    
    /* 3. The "Lift" - A deep, warm shadow that makes it pop off the page */
    box-shadow: 0 10px 20px rgba(201, 148, 46, 0.25), 
                0 4px 6px rgba(0, 0, 0, 0.05);
    
    /* 4. Subtle Organic Feel - A tiny rotation makes it look pinned, not typed */
    transform: rotate(-0.5deg); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sticky-zettel:hover {
    /* Straightens out and lifts higher on hover */
    transform: rotate(0deg) translateY(-5px);
    box-shadow: 0 15px 30px rgba(201, 148, 46, 0.3);
}

.sticky-badge {
    background: var(--sticky);
    color: #fff;
    padding: var(--sp-2) var(--sp-4);
    font-weight: 800; /* Extra bold */
    font-size: 0.75em;
    border-radius: 0 0 var(--radius) var(--radius);
    display: inline-block;
    margin-bottom: var(--sp-3);
    text-transform: uppercase;
    letter-spacing: 0.1em; /* Spaced out for a "label" look */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Optional: Add a "Pin" icon using a pseudo-element */
.sticky-zettel::before {
    content: '📌';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5em;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}/* --------------------------------------------------------------------
   Bookmarklet
   -------------------------------------------------------------------- */

.bookmarklet-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-4); margin-bottom: var(--sp-6); }
.bookmarklet-section h3 { color: var(--ink); margin-top: 0; }
.bookmarklet-link { background: var(--accent); border-color: var(--accent); color: #fff; margin: var(--sp-2) 0; }
.bookmarklet-link:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.bookmarklet-instructions { margin-top: var(--sp-2); font-size: 0.9em; color: var(--ink-soft); }

.popup-mode { background: var(--surface); padding: var(--sp-4); border-radius: var(--radius-lg); border: 1px solid var(--border); }
.popup-mode h2 { margin-top: 0; color: var(--ink); }

/* --------------------------------------------------------------------
   Search
   -------------------------------------------------------------------- */

.search-form { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); align-items: stretch; }
.search-form input[type="text"] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 1em;
    font-family: inherit;
    background: var(--surface);
    color: var(--ink);
}
.search-form input[type="text"]:focus { outline: none; border-color: var(--accent); }

/* --------------------------------------------------------------------
   Tag cloud
   -------------------------------------------------------------------- */

.tag-cloud { background: var(--surface); padding: var(--sp-3); border-radius: var(--radius-lg); margin-bottom: var(--sp-5); border: 1px solid var(--border); }
.tag-cloud strong { color: var(--ink-soft); font-weight: 600; }
.tag-cloud a { display: inline-block; margin: var(--sp-1); padding: 4px 12px; background: var(--accent-bg); color: var(--accent-text); text-decoration: none; border-radius: var(--radius); font-size: 0.9em; }
.tag-cloud a:hover { background: var(--accent); color: #fff; }

.tag-cloud-bottom { margin-top: var(--sp-6); margin-bottom: var(--sp-4); border-top: 1px solid var(--border); padding-top: var(--sp-4); }

/* --------------------------------------------------------------------
   Create / edit forms
   -------------------------------------------------------------------- */

.create-form { background: var(--surface); padding: var(--sp-4); border-radius: var(--radius-lg); margin-bottom: var(--sp-6); border: 1px solid var(--border); }
.create-form label,
.edit-form label { display: block; margin-top: var(--sp-3); font-weight: 600; color: var(--ink-soft); font-size: 0.9em; }
.create-form input[type="text"], .create-form textarea,
.edit-form input[type="text"], .edit-form textarea {
    width: 100%;
    padding: 10px 12px;
    margin-top: var(--sp-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 1em;
    font-family: inherit;
    background: var(--paper);
    color: var(--ink);
}
.create-form input[type="text"]:focus, .create-form textarea:focus,
.edit-form input[type="text"]:focus, .edit-form textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.create-form textarea, .edit-form textarea { min-height: 150px; resize: vertical; font-family: var(--font-mono); font-size: 0.92em; }
.create-form button { margin-top: var(--sp-4); padding: 11px 24px; }

.edit-form { background: var(--surface-tint); padding: var(--sp-4); border-radius: var(--radius-lg); margin-top: var(--sp-3); border: 1px solid var(--border-strong); }
.edit-form button { margin-top: var(--sp-3); margin-right: var(--sp-2); }

/* --------------------------------------------------------------------
   Zettel card
   -------------------------------------------------------------------- */

.zettel {
    background: var(--surface);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    /* This adds a soft, natural shadow that defines the card edge */
    box-shadow: 0 2px 8px rgba(44, 36, 22, 0.08); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zettel:hover {
    /* Lifts the card slightly when hovering */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 36, 22, 0.12);
}
.zettel-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: var(--sp-3); gap: var(--sp-3); }
.zettel-title { font-family: var(--font-serif); font-size: 1.4em; font-weight: 600; color: var(--ink); margin: 0; }
.zettel-meta { font-size: 0.85em; color: var(--ink-faint); margin-top: var(--sp-1); }
.zettel-meta code { font-family: var(--font-mono); background: var(--surface-tint); padding: 1px 6px; border-radius: 4px; color: var(--ink-soft); }
.zettel-content { margin: var(--sp-3) 0; color: var(--ink); }

/* Markdown content styling */
.zettel-content h1 { font-size: 1.7em; margin: var(--sp-4) 0 var(--sp-2); }
.zettel-content h2 { font-size: 1.4em; margin: var(--sp-4) 0 var(--sp-2); }
.zettel-content h3 { font-size: 1.2em; margin: var(--sp-3) 0 var(--sp-1); }
.zettel-content h4 { font-size: 1.05em; margin: var(--sp-3) 0 var(--sp-1); color: var(--ink-soft); }
.zettel-content h5, .zettel-content h6 { font-size: 0.95em; margin: var(--sp-2) 0 var(--sp-1); font-weight: 600; }

.zettel-content p { margin: var(--sp-2) 0; line-height: 1.7; }

.zettel-content blockquote {
    margin: var(--sp-3) 0;
    padding: var(--sp-2) var(--sp-4);
    border-left: 3px solid var(--accent);
    background: var(--surface-tint);
    color: var(--ink-soft);
    font-style: italic;
}
.zettel-content blockquote p { margin: var(--sp-1) 0; }

.zettel-content code {
    background: var(--surface-tint);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--ink);
}

.zettel-content pre {
    background: var(--ink);
    color: var(--paper);
    padding: var(--sp-3);
    border-radius: var(--radius);
    overflow-x: auto;
    margin: var(--sp-3) 0;
}
.zettel-content pre code { background: none; color: inherit; padding: 0; }

.zettel-content ul, .zettel-content ol { margin: var(--sp-2) 0 var(--sp-2) 25px; line-height: 1.8; }
.zettel-content li { margin: var(--sp-1) 0; }

.zettel-content hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }

.zettel-content table { border-collapse: collapse; width: 100%; margin: var(--sp-3) 0; }
.zettel-content table th, .zettel-content table td { border: 1px solid var(--border); padding: var(--sp-2); text-align: left; }
.zettel-content table th { background: var(--ink); color: var(--paper); font-weight: 600; }
.zettel-content table tr:nth-child(even) { background: var(--surface-tint); }

.zettel-content a { color: var(--accent); text-decoration: none; }
.zettel-content a:hover { text-decoration: underline; }

.zettel-content strong { font-weight: 700; color: var(--ink); }
.zettel-content em { font-style: italic; }

.zettel-content img { max-width: 100%; height: auto; border-radius: var(--radius); margin: var(--sp-2) 0; }

.internal-link { color: var(--accent); text-decoration: none; font-weight: 500; }
.internal-link:hover { text-decoration: underline; }
.broken-link { color: var(--danger-text); font-style: italic; }

.zettel-tags { margin: var(--sp-3) 0; }
.zettel-tags span { display: inline-block; margin-right: var(--sp-2); padding: 3px 10px; background: var(--accent-bg); color: var(--accent-text); border-radius: var(--radius); font-size: 0.85em; }

.zettel-links { margin: var(--sp-3) 0; font-size: 0.95em; }
.zettel-links a { color: var(--accent); text-decoration: none; margin-right: var(--sp-3); }
.zettel-links a:hover { text-decoration: underline; }

.related-section { background: var(--surface-tint); padding: var(--sp-3); border-radius: var(--radius); margin-top: var(--sp-4); border: 1px solid var(--border); }
.related-section h4 { color: var(--ink-soft); margin-bottom: var(--sp-2); font-size: 0.95em; font-weight: 600; }
.related-section ul { list-style: none; padding: 0; }
.related-section li { padding: var(--sp-1) 0; }
.related-section a { color: var(--accent); text-decoration: none; }
.related-section a:hover { text-decoration: underline; }

.no-results { background: var(--sticky-bg); border: 1px solid var(--sticky); color: var(--sticky-text); padding: var(--sp-3); border-radius: var(--radius); margin: var(--sp-4) 0; }

/* Zettel actions */
.zettel-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; align-items: center; }
.zettel-actions form { margin: 0; padding: 0; display: inline-flex; flex: 0 0 auto; }

/* Break long links/words gracefully */
a, .zettel-content, .zettel-content p, .zettel-content div, .zettel-content span {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}
.zettel a { word-break: break-word; overflow-wrap: anywhere; }
.zettel-meta code { word-break: break-all; overflow-wrap: break-word; }

/* --------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------- */

.pagination { display: flex; justify-content: center; gap: var(--sp-2); margin: var(--sp-6) 0; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 36px; padding: 8px 12px; font-weight: 500; }

/* --------------------------------------------------------------------
   Modal (create zettel)
   -------------------------------------------------------------------- */

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(42, 38, 34, 0.55);
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
    background-color: var(--surface);
    margin: 5% auto;
    padding: var(--sp-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-close {
    color: var(--ink-faint);
    float: right;
    font-size: 28px;
    font-weight: bold;
    line-height: 20px;
    cursor: pointer;
    transition: color 0.15s;
}
.modal-close:hover, .modal-close:focus { color: var(--danger); }

.modal-content form input,
.modal-content form textarea {
    width: 100%;
    padding: 10px 12px;
    margin: var(--sp-1) 0 var(--sp-3) 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 1em;
    font-family: inherit;
    background: var(--paper);
}
.modal-content form textarea { font-family: var(--font-mono); font-size: 0.92em; }
.modal-content form input:focus, .modal-content form textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.modal-content form label { font-weight: 600; color: var(--ink-soft); display: block; margin-top: var(--sp-2); font-size: 0.9em; }
.modal-content form button { min-height: 44px; }

/* ==========================================================================
   Auth pages (login.php)
   ========================================================================== */

.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--paper);
}

.login-container {
    max-width: 400px;
    width: 100%;
    background: var(--surface);
    padding: var(--sp-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}
.login-container h1 { text-align: center; margin-bottom: var(--sp-1); font-size: 1.9em; }
.login-container h2 { text-align: center; color: var(--ink-faint); font-size: 1em; font-weight: 400; font-family: var(--font-sans); margin-top: 0; margin-bottom: var(--sp-5); }

.login-form input {
    width: 100%;
    padding: 12px 14px;
    margin: var(--sp-2) 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 1em;
    font-family: inherit;
    background: var(--paper);
    color: var(--ink);
}
.login-form input:focus { outline: none; border-color: var(--accent); background: var(--surface); }

.login-form button {
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    margin-top: var(--sp-3);
}
.login-form button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.login-form button:disabled { background: var(--border-strong); border-color: var(--border-strong); color: var(--ink-faint); cursor: not-allowed; }

.attempt-counter { text-align: center; color: var(--ink-faint); font-size: 0.9em; margin-top: var(--sp-2); }

/* ==========================================================================
   Status messages — shared across login / import / export
   ========================================================================== */

.error { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger); padding: var(--sp-3); border-radius: var(--radius); margin-bottom: var(--sp-4); text-align: center; white-space: pre-line; }
.success { background: var(--accent-bg); color: var(--accent-text); border: 1px solid var(--accent); padding: var(--sp-3); border-radius: var(--radius); margin-bottom: var(--sp-4); text-align: center; white-space: pre-line; }
.info { background: var(--surface-tint); color: var(--ink-soft); border: 1px solid var(--border-strong); padding: var(--sp-3); border-radius: var(--radius); margin-bottom: var(--sp-4); text-align: center; }

/* ==========================================================================
   Import page
   ========================================================================== */

.import-container { max-width: 800px; margin: 0 auto; padding: var(--sp-5) 0; }
.import-option { background: var(--surface); padding: var(--sp-4); border-radius: var(--radius-lg); margin: var(--sp-4) 0; border: 1px solid var(--border); }
.import-option h3 { margin-top: 0; color: var(--ink); }
.import-option input[type="file"] { margin: var(--sp-3) 0; font-family: inherit; }

.info-box { background: var(--accent-bg); border-left: 3px solid var(--accent); padding: var(--sp-3); margin: var(--sp-4) 0; border-radius: 0 var(--radius) var(--radius) 0; color: var(--accent-text); }
.info-box ul { margin: var(--sp-2) 0 0 var(--sp-4); }

.warning-box { background: var(--sticky-bg); border-left: 3px solid var(--sticky); padding: var(--sp-3); margin: var(--sp-4) 0; border-radius: 0 var(--radius) var(--radius) 0; color: var(--sticky-text); }

/* ==========================================================================
   Export page
   ========================================================================== */

.export-container { max-width: 900px; margin: 0 auto; padding: var(--sp-5) 0; }
.export-options { background: var(--surface); padding: var(--sp-5); border-radius: var(--radius-lg); margin-bottom: var(--sp-6); border: 1px solid var(--border); }
.export-format { margin: var(--sp-4) 0; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.15s; }
.export-format:hover { border-color: var(--accent); }
.export-format h3 { margin-top: 0; color: var(--ink); }
.export-format p { color: var(--ink-soft); margin: var(--sp-2) 0; }

.zettel-list { background: var(--surface); padding: var(--sp-4); border-radius: var(--radius-lg); border: 1px solid var(--border); }
.zettel-checkbox { display: flex; align-items: center; padding: var(--sp-2); margin: var(--sp-1) 0; background: var(--surface-tint); border-radius: var(--radius); transition: background 0.15s; }
.zettel-checkbox:hover { background: var(--accent-bg); }
.zettel-checkbox input[type="checkbox"] { margin-right: var(--sp-2); width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); }
.zettel-checkbox label { cursor: pointer; flex: 1; font-weight: 500; }
.zettel-checkbox .zettel-id { color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.85em; margin-left: var(--sp-2); }

.selection-controls { margin: var(--sp-4) 0; padding: var(--sp-3); background: var(--surface-tint); border-radius: var(--radius); display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.export-actions { margin-top: var(--sp-5); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.btn-export.disabled { opacity: 0.5; cursor: not-allowed; }

.stats { margin: var(--sp-3) 0; padding: var(--sp-2) var(--sp-3); background: var(--accent-bg); border-radius: var(--radius); color: var(--accent-text); font-weight: 600; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    body { padding: var(--sp-3); }

    .header-section { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
    .header-section h1 { text-align: center; font-size: 1.5em; }
    .header-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-2);
    }
    .header-actions > a { width: 100%; }
    .header-actions .user-info {
        grid-column: 1 / -1;
        order: 10;
        text-align: center;
        padding: var(--sp-1) 0 0;
        font-size: 0.85em;
    }

    .sticky-badge { font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

    .search-form { flex-direction: column; }
    .search-form input, .search-form button, .search-form a { width: 100%; }

    .zettel { padding: var(--sp-3); }
    .zettel-header { flex-direction: column; }
    .zettel-title { font-size: 1.25em; }

    .zettel-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-2);
    }
    .zettel-actions form { margin: 0; display: flex; }
    .zettel-actions a, .zettel-actions > button, .zettel-actions form button {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    .bookmarklet-section { padding: var(--sp-3); }
    .bookmarklet-section h3 { font-size: 1em; }

    .tag-cloud { padding: var(--sp-2); }
    .tag-cloud a { font-size: 0.85em; margin: 3px; padding: 4px 8px; }

    .btn-create-new { padding: var(--sp-3) var(--sp-5); font-size: 1em; }

    .pagination { gap: 5px; }
    .pagination a, .pagination span { padding: 6px 10px; font-size: 0.9em; }

    .modal-content { width: 95%; margin: 10% auto; padding: var(--sp-4); }
    .edit-form { padding: var(--sp-3); }
}

@media (max-width: 480px) {
    body { padding: var(--sp-2); }
    .header-section h1 { font-size: 1.3em; }
    .zettel { padding: var(--sp-3); }
    .zettel-title { font-size: 1.15em; }
    .btn-create-new { padding: var(--sp-2) var(--sp-4); font-size: 0.95em; }
    .sticky-badge { font-size: 0.8em; }
}