*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f5f5f5;--surface: #ffffff;--border: #e0e0e0;--text: #1a1a1a;--text-muted: #6b6b6b;--accent: #2563eb;--accent-hover: #1d4ed8;--error-bg: #fef2f2;--error-border: #fca5a5;--error-text: #b91c1c;--tag-bg: #f0f0f0;--radius: 8px}@media(prefers-color-scheme:dark){:root{--bg: #0f0f0f;--surface: #1c1c1c;--border: #2e2e2e;--text: #f0f0f0;--text-muted: #9a9a9a;--accent: #3b82f6;--accent-hover: #60a5fa;--error-bg: #2d0f0f;--error-border: #7f1d1d;--error-text: #fca5a5;--tag-bg: #2a2a2a}}body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh}.page{display:flex;flex-direction:column;min-height:100dvh;padding:2rem 1rem}.container{width:100%;max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:2rem}.search-form{display:flex;gap:.5rem}@media(max-width:480px){.search-form{flex-direction:column}}.url-input{flex:1;padding:.65rem 1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:1rem;outline:none;transition:border-color .15s}.url-input:focus{border-color:var(--accent)}.url-input:disabled{opacity:.6}.btn-primary{padding:.65rem 1.25rem;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:1rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s,opacity .15s}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{padding:.5rem 1rem;background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;cursor:pointer;transition:border-color .15s,color .15s}.btn-secondary:hover{border-color:var(--text-muted);color:var(--text)}.status-area{display:flex;align-items:center;gap:.75rem;color:var(--text-muted)}.spinner{display:inline-block;width:1.25rem;height:1.25rem;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.status-text{font-size:.9rem}.error-area{display:flex;flex-direction:column;gap:1rem;background:var(--error-bg);border:1px solid var(--error-border);border-radius:var(--radius);padding:1rem 1.25rem}.error-msg{color:var(--error-text);font-size:.9rem}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}.media-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}.media-thumb-wrap{position:relative;aspect-ratio:16 / 9;background:var(--tag-bg);overflow:hidden}.media-thumb{width:100%;height:100%;object-fit:cover;display:block}.media-thumb--placeholder{display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--text-muted)}.badge{position:absolute;bottom:.4rem;right:.4rem;padding:.2rem .45rem;border-radius:4px;font-size:.72rem;font-weight:600;line-height:1}.badge--video{background:#000000a6;color:#fff}.media-info{padding:.6rem}.btn-group{display:flex;gap:.4rem}.btn-action{flex:1;padding:.45rem .5rem;background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius);text-align:center;text-decoration:none;font-size:.8rem;font-weight:500;transition:border-color .15s,color .15s}.btn-action:hover{border-color:var(--text-muted);color:var(--text)}.btn-action--primary{background:var(--accent);color:#fff;border-color:transparent}.btn-action--primary:hover{background:var(--accent-hover);color:#fff;border-color:transparent}