main { width: min(1440px, calc(100% - 48px)); margin: 0 auto; }
        h1 { margin: 0; font: 700 clamp(2rem, 5vw, 4.5rem)/.9 'Trebuchet MS', sans-serif; }
        h1 span { color: var(--accent); }
        .search-panel { padding: 0 0 34px; }
        .search-panel h2 { max-width: 760px; margin: 0 0 18px; font: 700 clamp(1.7rem, 3vw, 2.8rem)/1 'Trebuchet MS', sans-serif; }
        .variant-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
        .variant-option, #person-options { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 100%; }
        .variant-option { flex-wrap: nowrap; }
        .variant-option[hidden], #person-options[hidden] { display: none; }
        .variant-option input, .variant-option select { min-width: 0; }
        .variant-toolbar label { color: var(--muted); font: 700 .82rem 'Trebuchet MS', sans-serif; }
        .variant-toolbar select { padding: 8px 30px 8px 9px; border: 1px solid #cbd3d8; border-radius: 5px; background: #fff; color: var(--ink); font: inherit; }
        .search-actions { display: grid; max-width: 1100px; gap: 12px; }
        .search-form { display: flex; flex: 1; min-width: 0; gap: 10px; }
        .search-form input { flex: 1; min-width: 0; padding: 15px 18px; border: 2px solid var(--ink); border-radius: 6px; background: #fff; color: var(--ink); font: 1.1rem Georgia, serif; }
        .search-form button, .new-term-button { padding: 0 22px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; font: 700 1rem 'Trebuchet MS', sans-serif; cursor: pointer; }
        .new-term-button { min-height: 58px; padding: 14px 30px; background: #2f6f5e; font-size: 1.2rem; }
        .new-term-button:hover, .new-term-button:focus-visible { background: #245446; outline: none; }
        .request-term-button { background: #4a6a8a; }
        .term-actions { display: flex; flex-wrap: wrap; gap: 12px; }
        .term-actions:not(:has(> form:not([hidden]))) { display: none; }
        .term-actions form[hidden] { display: none; }
        .request-term-button:hover, .request-term-button:focus-visible { background: #3a566f; }
        .summary { color: var(--muted); }
        .search-privacy-note { max-width: 850px; margin: -22px 0 24px; color: var(--muted); font-size: .85rem; }
        .search-loading { display: flex; align-items: center; gap: 12px; width: fit-content; margin: 0 0 20px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-weight: 700; }
        .search-loading::before { width: 20px; height: 20px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; content: ''; animation: search-spin .8s linear infinite; }
        @keyframes search-spin { to { transform: rotate(360deg); } }
        .error { padding: 14px; border: 1px solid #e6a28f; border-radius: 6px; background: #fff1ed; color: #8c2f1a; }
        .search-warning { padding: 10px 14px; border-left: 3px solid #b87918; background: #fff5df; color: #68470f; }
        .results { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; padding-bottom: 60px; }
        .topics-page .results { grid-template-columns: repeat(auto-fill, 100px); gap: 12px; }
        .topics-page .image-card { width: 100px; }
        .topics-page .image-preview { height: 100px; }
        .topics-page .search-form { align-items: center; }
        .topics-page .search-form select { flex: 1; min-width: 0; padding: 12px; border: 2px solid var(--ink); border-radius: 6px; background: #fff; font: inherit; }
        .image-card { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #eef2f1; }
        .image-preview { display: grid; place-items: center; width: 100%; aspect-ratio: 1; background: #fff; }
        .image-card img { display: block; width: 100%; height: 100%; object-fit: contain; }
        .image-card[data-frame-mode="kleine_woerter"] .image-preview img { width: 50%; height: 50%; }
        .card-actions { display: flex; gap: 6px; margin: 10px; }
        .download-button, .edit-button, .save-button { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 12px; border: 0; border-radius: 5px; color: #fff; text-align: center; text-decoration: none; cursor: pointer; }
        .download-button img, .edit-button img, .save-button img { display: block; width: 24px; height: 24px; object-fit: contain; }
        .download-button, .edit-button, .save-button { flex: 1; }
        .topics-page .card-actions { gap: 3px; margin: 4px; }
        .topics-page .card-actions .download-button, .topics-page .card-actions .edit-button, .topics-page .card-actions .save-button { min-width: 0; min-height: 28px; padding: 4px 3px; }
        .topics-page .card-actions img { width: 16px; height: 16px; }
        .download-button { background: var(--accent); }
        .download-button:hover, .download-button:focus-visible { background: #b9472a; outline: none; }
        .edit-button { background: #426b82; }
        .edit-button:hover, .edit-button:focus-visible { background: #315266; outline: none; }
        .save-button { background: #2f6f5e; }
        .save-button:hover, .save-button:focus-visible { background: #245446; outline: none; }
        .debug-info { margin: -2px 10px 10px; color: var(--muted); font: .72rem/1.3 'Trebuchet MS', sans-serif; overflow-wrap: anywhere; }
        .image-card p { margin: 0; padding: 9px 11px 11px; overflow-wrap: anywhere; color: var(--muted); font-size: .82rem; }
        .zoomable { cursor: zoom-in; }
        .image-modal { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; }
        .image-modal[hidden] { display: none; }
        .image-modal-backdrop { position: absolute; inset: 0; background: #17202acc; }
        .image-modal-content { position: relative; display: grid; place-items: center; max-width: min(92vw, 900px); max-height: 90vh; padding: 20px; border-radius: 8px; background: #fff; box-shadow: 0 24px 60px #17202a44; }
        .image-modal-content img { display: block; max-width: 100%; max-height: 80vh; object-fit: contain; }
        .image-modal-close { position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; font: 700 1.2rem/1 sans-serif; cursor: pointer; }
        .image-modal-close:hover, .image-modal-close:focus-visible { background: #b9472a; outline: none; }
        body.has-saved-panel { padding-bottom: 200px; }
        .saved-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 16px; padding: 12px max(24px, calc((100vw - 1440px) / 2)); border-top: 2px solid var(--line); background: #fff; box-shadow: 0 -10px 30px #17202a1a; }
        .saved-panel-header { display: grid; gap: 2px; flex: none; }
        .saved-panel-header h2 { margin: 0; font: 700 1rem 'Trebuchet MS', sans-serif; }
        .saved-panel-header span { color: var(--muted); font-size: .78rem; }
        .saved-panel-header .saved-reorder-hint { max-width: 140px; font-size: .72rem; }
        .saved-panel-header .clear-saved-button { margin-top: 6px; padding: 8px 12px; }
        .saved-list { display: flex; flex: 1; align-items: center; gap: 10px; min-height: 150px; overflow-x: auto; padding: 4px 2px; }
        .saved-item { position: relative; flex: none; width: 150px; height: 150px; margin: 0; border: 1px solid var(--line); border-radius: 6px; background: #eef2f1; }
        .saved-item.drop-before::before { position: absolute; top: 0; bottom: 0; left: -7px; width: 3px; border-radius: 2px; background: var(--accent); content: ''; }
        .saved-item[draggable="true"] { cursor: grab; }
        .saved-item[draggable="true"]:active { cursor: grabbing; }
        .saved-item.is-dragging { opacity: .45; }
        .saved-list.drop-at-end::after { width: 3px; height: 140px; flex: none; border-radius: 2px; background: var(--accent); content: ''; }
        .saved-item img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 6px; }
        .saved-item[data-frame-mode="kleine_woerter"] img { position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; }
        .saved-remove { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; font: 700 1rem/1 sans-serif; cursor: pointer; }
        .saved-remove:hover, .saved-remove:focus-visible { background: #b9472a; outline: none; }
        .saved-actions { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 6px; flex: none; }
        .saved-panel.drag-over { background: #e5f1ed; }
        .image-card[draggable="true"] { cursor: grab; }
        .image-card[draggable="true"]:active { cursor: grabbing; }
        .zip-button { flex: none; padding: 12px 18px; border: 0; border-radius: 6px; background: var(--ink); color: #fff; font: 700 .85rem 'Trebuchet MS', sans-serif; cursor: pointer; }
        .zip-button:hover, .zip-button:focus-visible { background: #2b3946; outline: none; }
        .zip-button:disabled { background: #a7afb6; cursor: not-allowed; }
        .clear-saved-button { background: var(--accent); }
        .clear-saved-button:hover, .clear-saved-button:focus-visible { background: #b9472a; outline: none; }
        @media (max-width: 620px) { main { width: min(100% - 24px, 1440px); } .search-actions { display: grid; } .search-form { display: grid; grid-template-columns: 1fr auto; } .new-term-button { min-height: 48px; } .saved-panel { flex-wrap: wrap; padding: 10px 12px; } }
        @media (max-width: 620px) { .topics-page .search-form { display: flex; } }