:root {--bg:#0b0c10;--panel:#111827;--panel-border:#1f2937;--text:#e5e7eb;--muted:#9ca3af;--accent:#2563eb;--accent-hover:#1d4ed8;} * {box-sizing:border-box;} html, body {height:100%;margin:0;} body {background:var(--bg);font-family:system-ui, -apple-system, Segoe UI, Roboto, sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} main {width:100%;padding:16px;} #upload-page.card {margin-top:20px;} .card {background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;padding:24px;} .hero {padding:48px 32px;display:flex;flex-direction:column;gap:24px;} .brand {font-size:36px;letter-spacing:0.2px;margin:0 0 8px 0;} .search-row {display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;} .search-input {width:100%;height:48px;padding:0 16px;border-radius:12px;border:1px solid var(--panel-border);background:#0f172a;color:var(--text);font-size:16px;} .muted {color:var(--muted);font-size:14px;} .btn {height:48px;padding:0 18px;border-radius:12px;border:1px solid var(--panel-border);background:#0f172a;color:var(--text);cursor:pointer;font-weight:600;} .btn-primary {background:var(--accent);border:none;} .btn-primary:hover {background:var(--accent-hover);} .btn-ghost {background:transparent;} .upload-header {display:flex;justify-content:space-between;align-items:center;gap:12px;} .upload-form .row {display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap;} .upload-form input[type="text"], .upload-form input:not([type]), .upload-form input {padding:10px 12px;border-radius:10px;border:1px solid var(--panel-border);background:#0f172a;color:var(--text);min-width:220px;} .results {list-style:none;margin:8px 0 0 0;padding:0;border-top:1px solid var(--panel-border);} .results li {display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--panel-border);} .results .meta {font-size:12px;color:var(--muted);} .results a {color:#93c5fd;text-decoration:none;font-weight:600;} .results a:hover {text-decoration:underline;} .hidden {display:none;} .center-wrap {min-height:calc(100vh - 40px);display:flex;align-items:center;justify-content:center;} .search-form {display:flex;gap:8px;flex-wrap:wrap;} #results-view.hidden, #search-view.hidden {display:none;} #results-view {min-height:100vh;display:flex;flex-direction:column;} .results-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-bottom:1px solid #333;position:sticky;top:0;background:#0b0b0b;z-index:5;box-sizing:border-box;} .toolbar-right {display:flex;align-items:center;gap:12px;} .results-list {width:100%;margin:0;padding:12px;display:grid;grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));gap:clamp(8px, 2vw, 16px);box-sizing:border-box;} .result-card {border:1px solid #3a3a3a;border-radius:8px;padding:clamp(10px, 3vw, 14px);background:#121212;display:grid;grid-template-rows:auto 1fr auto;row-gap:8px;transition:transform 120ms ease, border-color 120ms ease;min-width:0;box-sizing:border-box;} .result-card:hover {transform:translateY(-2px);border-color:#4a4a4a;} .result-title {font-weight:600;font-size:clamp(0.9rem, 2.5vw, 1rem);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;min-width:0;} .result-meta {display:flex;align-items:center;gap:8px;font-size:0.82rem;color:#bdbdbd;} .badge {display:inline-block;font-size:0.72rem;padding:2px 8px;border-radius:999px;border:1px solid #2e2e2e;background:#1a1a1a;letter-spacing:0.02em;} .result-actions {display:flex;justify-content:flex-start;} .result-actions .btn {display:inline-block;font-size:clamp(0.8rem, 2vw, 0.9rem);padding:clamp(6px, 2vw, 8px) clamp(8px, 2.5vw, 12px);border-radius:6px;border:1px solid #2f4366;background:#0f1a2c;color:#9ec3ff;text-decoration:none;transition:background 120ms ease, border-color 120ms ease;white-space:nowrap;min-width:0;} .result-actions .btn:hover {background:#14233a;border-color:#3a5686;} .pager {display:flex;align-items:center;gap:10px;} #btn-back {font-weight:600;color:var(--text);background:transparent;border:1px solid var(--panel-border);} #btn-back:hover {background:var(--panel-border);} .no-results {text-align:center;color:var(--muted);padding:40px 20px;font-style:italic;} .file-list {list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:180px;overflow:auto;} .file-list li {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px dashed #2a2a2a;} .file-list li:first-child {border-top:none;} .file-name {font-size:0.9rem;color:#cfcfcf;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:all 0.15s ease;} .file-name.expanded {white-space:normal;overflow:visible;text-overflow:clip;} .file-list li.expanded {align-items:flex-start;} .file-name:hover {text-decoration:underline;} .chip {display:inline-block;font-size:0.78rem;padding:4px 8px;border-radius:999px;border:1px solid #2f4366;background:#14233a;color:#a8c8ff;text-decoration:none;white-space:nowrap;} .chip:hover {background:#1c3359;border-color:#436b9f;} @media (max-width:680px) {.search-row {grid-template-columns:1fr;} .btn, .search-input {height:44px;} .pager {justify-content:center;} .search-form {flex-direction:column;} .results-list {grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr));padding:8px;gap:8px;} } @media (max-width:520px) {.results-toolbar {flex-direction:column;align-items:stretch;gap:8px;} .results-list {grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr));padding:6px;gap:6px;} } @media (max-width:400px) {.results-list {grid-template-columns:1fr;gap:8px;} } .autocomplete-container {position:relative;min-width:220px;} .autocomplete-dropdown {position:absolute;top:100%;left:0;right:0;background:var(--panel);border:1px solid var(--panel-border);border-top:none;border-radius:0 0 10px 10px;max-height:200px;overflow-y:auto;z-index:1000;margin:0;padding:0;list-style:none;box-shadow:0 4px 6px rgba(0, 0, 0, 0.3);} .autocomplete-dropdown.hidden {display:none;} .autocomplete-dropdown li {padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--panel-border);color:var(--text);} .autocomplete-dropdown li:last-child {border-bottom:none;} .autocomplete-dropdown li:hover, .autocomplete-dropdown li.selected {background:var(--accent);color:white;} .autocomplete-dropdown li.selected {background:var(--accent-hover);}