:root{--color-bg: #f5f7fa;--color-surface: #ffffff;--color-surface-muted: #f8f9fa;--color-border: #e1e8ed;--color-text: #2c3e50;--color-text-muted: #7f8c8d;--color-text-subtle: #95a5a6;--color-primary: #667eea;--color-primary-strong: #764ba2;--color-error-bg: #fff5f5;--color-error-border: #feb2b2;--color-error-text: #c53030;--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-pill: 12px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .05);--shadow-md: 0 2px 10px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 12px rgba(0, 0, 0, .1);--font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "Consolas", "Monaco", monospace}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-stack);background:var(--color-bg);color:var(--color-text);height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.layout{display:flex;flex:1;overflow:hidden}.main{flex:1;padding:30px;overflow-y:auto;background:var(--color-bg)}.app-header{background:var(--gradient-primary);color:#fff;padding:20px 30px;box-shadow:var(--shadow-md)}.app-header h1{font-size:24px;font-weight:600}.app-header__subtitle{font-size:14px;opacity:.9;margin-top:5px}.sidebar{width:350px;background:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column}.sidebar__header{padding:20px;border-bottom:1px solid var(--color-border);background:var(--color-surface-muted)}.sidebar__header h2{font-size:16px;font-weight:600;color:var(--color-text)}.search-box{margin-top:10px;position:relative}.search-box input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:var(--radius-md);font-size:14px;outline:none;transition:border-color .2s}.search-box input:focus{border-color:var(--color-primary)}.resource-list{flex:1;overflow-y:auto;padding:10px}.resource-item{padding:12px 15px;margin-bottom:4px;background:var(--color-surface-muted);border-radius:var(--radius-md);cursor:pointer;transition:all .2s;display:flex;justify-content:space-between;align-items:center}.resource-item:hover{background:#e9ecef;transform:translate(2px)}.resource-item.is-active{background:var(--color-primary);color:#fff}.resource-item__name{font-weight:500;font-size:14px}.resource-item__count{background:#667eea1a;color:var(--color-primary);padding:3px 10px;border-radius:var(--radius-pill);font-size:12px;font-weight:600}.resource-item.is-active .resource-item__count{background:#fff3;color:#fff}.detail-header{margin-bottom:30px}.detail-header h2{font-size:28px;color:var(--color-text);margin-bottom:10px}.detail-header__meta{font-size:14px;color:var(--color-text-muted)}.profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px}.profile-card{perspective:1200px;cursor:pointer;border-radius:var(--radius-lg);height:360px}.profile-card__inner{display:grid;position:relative;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.profile-card.is-flipped .profile-card__inner{transform:rotateY(180deg)}.profile-card__face{grid-area:1 / 1;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--color-surface);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm);border:1px solid var(--color-border);transition:box-shadow .2s,transform .2s;display:flex;flex-direction:column;overflow:hidden}.profile-card:hover .profile-card__face{box-shadow:var(--shadow-lg)}.profile-card:not(.is-flipped):hover .profile-card__inner{transform:translateY(-2px)}.profile-card__face--back{transform:rotateY(180deg)}.profile-card__title{font-size:16px;font-weight:600;color:var(--color-text);margin-bottom:8px}.profile-card__name{font-size:13px;color:var(--color-primary);font-family:var(--font-mono);margin-bottom:12px;word-break:break-all}.profile-card__meta{font-size:13px;color:var(--color-text-muted);margin-bottom:8px}.profile-card__url{font-size:11px;color:var(--color-text-subtle);word-break:break-all;margin-top:8px}.profile-card__keywords{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}.profile-card__hint{margin-top:auto;padding-top:12px;font-size:11px;color:var(--color-text-subtle);text-align:right;letter-spacing:.02em}.profile-card__back-section{font-size:13px;color:var(--color-text-muted);margin-bottom:10px}.profile-card__back-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-subtle);margin-bottom:4px}.profile-card__description{font-size:13px;line-height:1.5;color:var(--color-text);margin-bottom:12px;white-space:pre-wrap;max-height:9em;overflow-y:auto;padding-right:6px;overscroll-behavior:contain}.profile-card__description--missing{color:var(--color-text-subtle);font-style:italic;max-height:none;overflow:visible}.profile-card__description::-webkit-scrollbar{width:4px}.profile-card__description::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:2px}.profile-card__link{display:inline-block;margin-top:4px;padding:6px 12px;background:var(--color-surface-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-primary);font-size:12px;font-family:var(--font-mono);text-decoration:none;word-break:break-all;transition:all .2s}.profile-card__link:hover{background:var(--color-surface);border-color:var(--color-primary)}.keyword-badge{display:inline-block;background:var(--gradient-primary);color:#fff;padding:4px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:500;text-transform:lowercase;cursor:pointer;transition:all .2s;border:none}.keyword-badge:hover{transform:translateY(-1px);box-shadow:0 2px 6px #667eea4d}.keyword-filter{background:var(--color-surface);border-radius:var(--radius-lg);padding:15px 20px;margin-bottom:20px;border:1px solid var(--color-border)}.keyword-filter__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.keyword-filter__title{font-size:13px;font-weight:600;color:var(--color-text)}.keyword-filter__clear{background:transparent;border:1px solid #ddd;padding:4px 12px;border-radius:var(--radius-md);font-size:12px;cursor:pointer;color:var(--color-text-muted);transition:all .2s}.keyword-filter__clear:hover{background:var(--color-surface-muted);border-color:var(--color-primary);color:var(--color-primary)}.keyword-filter__tags{display:flex;flex-wrap:wrap;gap:8px}.keyword-filter__tag{display:inline-block;background:var(--color-surface-muted);border:1px solid var(--color-border);color:#495057;padding:6px 12px;border-radius:16px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}.keyword-filter__tag:hover{background:#e9ecef;border-color:var(--color-primary)}.keyword-filter__tag.is-active{background:var(--gradient-primary);color:#fff;border-color:transparent}.keyword-filter__tag-count{opacity:.7;margin-left:4px;font-size:11px}.state{text-align:center;color:var(--color-text-subtle)}.state--empty{padding:80px 20px}.state--empty .state__icon{font-size:64px;margin-bottom:20px}.state--empty h3{font-size:20px;margin-bottom:10px;color:var(--color-text-muted)}.state--loading{padding:100px 20px;font-size:18px;color:var(--color-text-muted)}.state--no-results{padding:20px;color:var(--color-text-subtle)}.spinner{border:3px solid #f3f3f3;border-top:3px solid var(--color-primary);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error{background:var(--color-error-bg);border:1px solid var(--color-error-border);color:var(--color-error-text);padding:15px 20px;border-radius:var(--radius-md);margin:20px}