:root{--bg: #121212;--surface: #1e1e1e;--surface-hover: #2a2a2a;--primary: #bb86fc;--secondary: #03dac6;--error: #cf6679;--text: #e0e0e0;--text-muted: #a0a0a0;--border: #333333;--accent-director: #ff79c6;--accent-scenarist: #8be9fd;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.6;overflow-x:hidden}.app-container{display:grid;grid-template-columns:400px 1fr;height:100vh;gap:1px;background-color:var(--border)}@media(max-width:900px){.app-container{grid-template-columns:1fr;height:auto}}.sidebar{background-color:var(--bg);padding:2rem;display:flex;flex-direction:column;gap:1.5rem;overflow-y:auto}.sidebar h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--primary)}.sidebar p{font-size:.875rem;color:var(--text-muted)}.input-group{display:flex;flex-direction:column;gap:.5rem}.input-group label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--text-muted)}textarea{background-color:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--font-mono);font-size:.75rem;padding:1rem;resize:vertical;min-height:150px;transition:border-color .2s}textarea:focus{outline:none;border-color:var(--primary)}button{background-color:var(--primary);color:#000;border:none;border-radius:8px;padding:.75rem 1.5rem;font-weight:600;cursor:pointer;transition:transform .1s,opacity .2s}button:hover{opacity:.9}button:active{transform:scale(.98)}button:disabled{background-color:var(--border);color:var(--text-muted);cursor:not-allowed}.main-content{background-color:var(--bg);padding:2rem;overflow-y:auto;position:relative}.empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-muted);gap:1rem}.empty-state svg{width:64px;height:64px;opacity:.2}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1.5rem}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.progress-text{font-family:var(--font-mono);font-size:.875rem;color:var(--primary)}.progress-container{width:100%;max-width:300px;height:6px;background-color:var(--border);border-radius:3px;overflow:hidden}.progress-bar{height:100%;background-color:var(--primary);width:0%;transition:width .3s ease}.recommendations-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}.anime-card{background-color:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:transform .2s,border-color .2s;display:flex;flex-direction:column;font-size:.875rem}.anime-card:hover{transform:translateY(-4px);border-color:var(--primary)}.card-image{width:100%;aspect-ratio:2/3;object-fit:cover;background-color:var(--border)}.card-content{padding:1rem;display:flex;flex-direction:column;gap:.5rem;flex-grow:1}.card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.anime-title{font-size:1rem;font-weight:600;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.match-score{background-color:var(--primary);color:#000;padding:.25rem .5rem;border-radius:4px;font-size:.875rem;font-weight:700;font-family:var(--font-mono)}.anime-meta{font-size:.75rem;color:var(--text-muted);margin-bottom:.25rem}.synopsis{font-size:.75rem;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.5rem}.match-reasons-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--primary);margin-bottom:.25rem}.grouped-reasons{display:flex;flex-direction:column;gap:.35rem;margin-top:.25rem}.reason-group{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem}.reason-category{font-size:.6rem;font-weight:700;color:var(--text-muted);min-width:55px;text-transform:uppercase}.badge{font-size:.65rem;padding:.1rem .4rem;border-radius:3px;background-color:var(--border);color:var(--text);white-space:nowrap}.badge-director{background-color:#ff79c633;color:var(--accent-director);border:1px solid var(--accent-director)}.badge-scenarist{background-color:#8be9fd33;color:var(--accent-scenarist);border:1px solid var(--accent-scenarist)}.error-block{background-color:#cf66791a;border:1px solid var(--error);color:var(--error);padding:1rem;border-radius:8px;margin-bottom:1.5rem;font-size:.875rem}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#444}.history-section{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border)}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.history-header label{font-size:.8rem;font-weight:600;text-transform:uppercase;color:var(--text-muted);letter-spacing:.05em}.text-btn{background:none;border:none;color:var(--primary);font-size:.75rem;cursor:pointer;padding:0}.text-btn:hover{text-decoration:underline}.history-list{display:flex;flex-direction:column;gap:.75rem}.history-item{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.75rem;cursor:pointer;transition:all .2s ease}.history-item:hover{border-color:var(--primary);background:var(--surface-hover);transform:translateY(-2px)}.history-item-info{display:flex;justify-content:space-between;margin-bottom:.5rem}.history-user{font-size:.85rem;font-weight:600;color:var(--text)}.history-date{font-size:.7rem;color:var(--text-muted)}.history-previews{display:flex;gap:4px;overflow:hidden}.history-previews img{width:30px;height:42px;object-fit:cover;border-radius:2px;border:1px solid var(--border)}.empty-history{font-size:.8rem;color:var(--text-muted);text-align:center;padding:1rem;border:1px dashed var(--border);border-radius:8px}.history-view-header{grid-column:1 / -1;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}.history-view-header h2{font-size:1.25rem;margin-bottom:.25rem}.history-view-header p{font-size:.85rem;color:var(--text-muted)}
