:root{--primary: #007bff;--primary-dark: #0056b3;--primary-light: #e7f1ff;--success: #28a745;--info: #17a2b8;--warning: #ffc107;--muted: #6c757d;--white: #ffffff;--gray-100: #f8f9fa;--gray-200: #e9ecef;--gray-300: #dee2e6;--gray-500: #adb5bd;--gray-700: #495057;--gray-900: #212529;--border-color: #dee2e6;--shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.5;color:var(--gray-900);background-color:var(--gray-100)}a{color:var(--primary);text-decoration:none}a:hover{color:var(--primary-dark);text-decoration:underline}.btn{display:inline-block;padding:.375rem .75rem;font-size:14px;font-weight:400;line-height:1.5;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;border:1px solid transparent;border-radius:.25rem;transition:all .15s ease-in-out}.btn-primary{color:var(--white);background-color:var(--primary);border-color:var(--primary)}.btn-primary:hover{background-color:var(--primary-dark);border-color:var(--primary-dark)}.btn-outline{color:var(--gray-700);background-color:var(--white);border-color:var(--border-color)}.btn-outline:hover{background-color:var(--gray-100)}.btn:disabled{opacity:.65;cursor:not-allowed}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:14px;line-height:1.5;color:var(--gray-700);background-color:var(--white);border:1px solid var(--border-color);border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control:focus{border-color:var(--primary);outline:0;box-shadow:0 0 0 .2rem #007bff40}select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;padding-right:2.25rem}.badge{display:inline-block;padding:.25em .5em;font-size:12px;font-weight:500;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.badge-success{color:var(--white);background-color:var(--success)}.badge-info{color:var(--white);background-color:var(--info)}.badge-muted{color:var(--white);background-color:var(--muted)}.badge-primary{color:var(--white);background-color:var(--primary)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 15px}.skill-list-page{background:var(--white);border:1px solid var(--border-color);border-radius:.25rem}.search-section{padding:.75rem 1rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}.search-section h3{font-size:14px;font-weight:500;margin:0;margin-right:.5rem;color:var(--gray-700);white-space:nowrap}.search-row{display:flex;gap:.5rem;align-items:center;flex:1}.search-input{flex:1;min-width:180px;max-width:300px}.filter-select{width:100px}.search-btn{padding:.375rem .75rem;white-space:nowrap}.reset-btn{padding:.375rem .5rem;color:var(--muted);background:transparent;border:none;cursor:pointer;white-space:nowrap}.reset-btn:hover{color:var(--gray-700)}.result-info{padding:.5rem 1rem;background-color:var(--gray-100);border-bottom:1px solid var(--border-color);font-size:13px;color:var(--muted)}.skill-table{width:100%;border-collapse:collapse}.skill-table th,.skill-table td{padding:.75rem;text-align:left;border-bottom:1px solid var(--border-color);vertical-align:top}.skill-table th{background-color:var(--gray-100);font-weight:500;font-size:13px;color:var(--gray-700);white-space:nowrap}.skill-table tbody tr:hover{background-color:var(--gray-100)}.skill-table tbody tr{cursor:pointer}.col-name{width:15%}.col-status,.col-scene,.col-category{width:10%}.col-effect{width:40%}.col-heroes{width:15%;text-align:center}.skill-name-cell{display:flex;flex-direction:column;gap:.25rem}.skill-name{color:var(--primary);font-weight:500}.skill-name:hover{text-decoration:underline}.status-badge{display:inline-block;padding:.2em .5em;font-size:11px;font-weight:500;border-radius:.2rem}.status-published{color:#fff;background-color:var(--success)}.status-implemented{color:#fff;background-color:var(--info)}.status-designed{color:#fff;background-color:var(--muted)}.effect-text{color:var(--gray-700);font-size:13px;line-height:1.5}.hero-count{color:var(--muted);font-size:13px}.pagination{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;border-top:1px solid var(--border-color)}.pagination button{padding:.375rem .75rem;font-size:13px;color:var(--primary);background:var(--white);border:1px solid var(--border-color);border-radius:.25rem;cursor:pointer}.pagination button:hover:not(:disabled){background-color:var(--gray-100)}.pagination button:disabled{color:var(--muted);cursor:not-allowed}.pagination .page-info{font-size:13px;color:var(--muted);padding:0 1rem}.loading-state,.error-state,.empty-state{padding:3rem;text-align:center;color:var(--muted)}.error-state{color:#dc3545}@media(max-width:992px){.search-section{flex-wrap:wrap}.search-input{min-width:150px}.filter-select{width:90px}}@media(max-width:768px){.search-section{flex-wrap:wrap;gap:.5rem}.search-section h3{width:100%;margin-bottom:.25rem}.search-input{flex:1;min-width:120px;max-width:none}.filter-select{width:auto;flex:1;min-width:80px}.skill-table{font-size:13px}.skill-table th,.skill-table td{padding:.5rem}.col-effect{display:none}}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1050;padding:1rem}.modal-content{background:var(--white);border-radius:.25rem;box-shadow:0 .5rem 1rem #00000026;max-width:700px;width:100%;max-height:90vh;overflow-y:auto}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border-color)}.modal-header h2{font-size:1.25rem;font-weight:500;margin:0;color:var(--gray-900)}.modal-header-actions{display:flex;align-items:center;gap:.5rem}.btn-detail-link{display:inline-flex;align-items:center;padding:.25rem .5rem;font-size:.75rem;color:var(--primary);text-decoration:none;border:1px solid var(--primary);border-radius:.25rem;transition:all .2s}.btn-detail-link:hover{background-color:var(--primary);color:#fff}.modal-close{background:none;border:none;font-size:1.5rem;color:var(--muted);cursor:pointer;padding:0;line-height:1}.modal-close:hover{color:var(--gray-900)}.modal-body{padding:1rem}.detail-badges{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}.detail-badges .badge{font-size:12px}.detail-row{display:flex;padding:.5rem 0;border-bottom:1px solid var(--gray-200)}.detail-row:last-child{border-bottom:none}.detail-label{width:80px;flex-shrink:0;font-weight:500;color:var(--gray-700)}.detail-value{flex:1;color:var(--gray-900);line-height:1.6}.detail-memo{margin-top:1rem;padding:1rem;background-color:var(--gray-100);border-radius:.25rem}.detail-memo-title{font-weight:500;color:var(--gray-700);margin-bottom:.5rem}.detail-memo-content{color:var(--gray-700);line-height:1.8;white-space:pre-wrap;font-size:13px}.detail-section{margin-top:1.5rem}.detail-section-title{font-size:14px;font-weight:500;color:var(--gray-700);margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.detail-section-title .badge{font-size:11px}.hero-list{display:flex;flex-wrap:wrap;gap:.5rem}.hero-item{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background-color:var(--gray-100);border:1px solid var(--border-color);border-radius:.25rem;font-size:13px}.hero-item.published{border-color:var(--success);background-color:#28a7451a}.hero-item.developing{border-color:var(--info);background-color:#17a2b81a}.hero-name{color:var(--primary);text-decoration:none;font-weight:500}.hero-name:hover{color:var(--primary-dark, #0056b3);text-decoration:underline}.hero-level{color:var(--muted);font-size:12px}.hero-face{color:var(--primary);font-size:12px}.badge-published,.status-published{background-color:var(--success);color:#fff}.badge-implemented,.status-implemented{background-color:var(--info);color:#fff}.badge-designed,.status-designed{background-color:var(--muted);color:#fff}@media(max-width:576px){.modal-content{margin:.5rem;max-height:calc(100vh - 1rem)}.detail-row{flex-direction:column}.detail-label{width:auto;margin-bottom:.25rem}}.hero-list-container{background:var(--white);border:1px solid var(--border-color);border-radius:.25rem;padding:1rem}.hero-filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.hero-filters .search-input{flex:1;min-width:200px;padding:.375rem .75rem;border:1px solid var(--border-color);border-radius:.25rem;font-size:.875rem}.hero-filters .search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 .2rem #007bff40}.hero-filters .btn{padding:.375rem .75rem;font-size:.875rem;border:none;border-radius:.25rem;cursor:pointer}.hero-filters .btn-primary{background-color:var(--primary);color:#fff}.hero-filters .btn-primary:hover{background-color:var(--primary-dark)}.hero-filters .btn-secondary{background-color:var(--gray-200);color:var(--gray-700)}.hero-filters .btn-secondary:hover{background-color:var(--gray-300)}.hero-filters .result-count{margin-left:auto;color:var(--muted);font-size:.875rem}.hero-table-responsive{overflow-x:auto}.hero-table{width:100%;border-collapse:collapse;font-size:.875rem}.hero-table th,.hero-table td{padding:.75rem;border-bottom:1px solid var(--border-color);text-align:left;vertical-align:top}.hero-table th{background-color:var(--gray-100);font-weight:600;color:var(--gray-700);white-space:nowrap}.hero-table tbody tr:hover{background-color:var(--gray-50, #f8f9fa)}.hero-name{font-weight:500;color:var(--gray-900)}.hero-name-link{font-weight:500;color:var(--primary-dark);text-decoration:none}.hero-name-link:hover{text-decoration:underline}.hero-courtesy{font-size:.8em;color:var(--muted);margin-left:.25rem}.hero-skills{list-style:none;padding:0;margin:0}.hero-skills li{margin-bottom:.25rem;font-size:.8rem}.hero-skills li:last-child{margin-bottom:0}.hero-skills .skill-level{color:var(--muted);margin-right:.25rem}.hero-skills .skill-name{color:var(--primary)}.hero-skills .skill-name-link{color:var(--primary);text-decoration:none}.hero-skills .skill-name-link:hover{text-decoration:underline}.hero-skills .no-skills{color:var(--muted);font-style:italic}.pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-color)}.pagination .btn-page{padding:.375rem .75rem;background-color:var(--gray-200);color:var(--gray-700);border:none;border-radius:.25rem;cursor:pointer}.pagination .btn-page:hover:not(:disabled){background-color:var(--gray-300)}.pagination .btn-page:disabled{opacity:.5;cursor:not-allowed}.pagination .page-info{font-size:.875rem;color:var(--muted)}.hero-detail-container{display:flex;flex-direction:column;gap:1rem}.hero-detail-container .card{background:var(--white);border:1px solid var(--border-color);border-radius:.25rem}.hero-detail-container .card-header{padding:.75rem 1rem;background-color:var(--gray-100);border-bottom:1px solid var(--border-color);font-weight:500;color:var(--gray-900)}.hero-detail-container .card-body{padding:1rem}.profile-content{display:flex;gap:1.5rem;align-items:flex-start}.hero-avatar-large{flex-shrink:0;border-radius:4px;box-shadow:0 2px 4px #0000001a}.profile-info{flex:1}.info-row{display:flex;padding:.5rem 0;border-bottom:1px solid var(--gray-100)}.info-row:last-child{border-bottom:none}.info-label{width:80px;color:var(--muted);font-size:.875rem}.info-value{flex:1;color:var(--gray-900);font-weight:500}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr)}}.stat-item{display:flex;flex-direction:column;align-items:center;padding:1rem;background-color:var(--gray-50, #f8f9fa);border-radius:.25rem;text-align:center}.stat-label{font-size:.75rem;color:var(--muted);margin-bottom:.25rem}.stat-value{font-size:1.5rem;font-weight:700;line-height:1.2}.stat-level{font-size:.7rem;color:var(--muted);margin-top:.25rem}.skill-count{font-weight:400;font-size:.875rem;color:var(--muted);margin-left:.5rem}.empty-skills{text-align:center;padding:2rem;color:var(--muted)}.skills-table{width:100%;border-collapse:collapse}.skills-table th,.skills-table td{padding:.75rem;border-bottom:1px solid var(--border-color);text-align:left}.skills-table th{background-color:var(--gray-50, #f8f9fa);font-weight:500;font-size:.875rem;color:var(--gray-700)}.skills-table tbody tr:hover{background-color:var(--gray-50, #f8f9fa)}.skills-table .skill-level{width:100px;font-weight:500;color:var(--gray-700)}.skills-table .skill-link{color:var(--primary);text-decoration:none;font-weight:500}.skills-table .skill-link:hover{text-decoration:underline}.skills-table .skill-source{width:100px}.source-tag{display:inline-block;padding:.125rem .5rem;font-size:.75rem;border-radius:.25rem;color:#fff}.source-tag.published{background-color:#28a745}.source-tag.developing{background-color:#17a2b8}.assignment-container{background:var(--white);border:1px solid var(--border-color);border-radius:.25rem;padding:1rem}.assignment-intro{padding:.75rem 1rem;background-color:var(--gray-100);border-radius:.25rem;margin-bottom:1rem;font-size:.875rem;color:var(--gray-700)}.assignment-intro p{margin:0}.assignment-filters{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.filter-checkbox{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem}.filter-checkbox input{cursor:pointer}.assignment-filters .result-count{margin-left:auto;color:var(--muted);font-size:.875rem}.assignment-table-responsive{overflow-x:auto}.assignment-table{width:100%;border-collapse:collapse;font-size:.875rem}.assignment-table th,.assignment-table td{padding:.75rem;border:1px solid var(--border-color);text-align:left;vertical-align:top}.assignment-table th{background-color:var(--gray-100);font-weight:600;color:var(--gray-700);white-space:nowrap}.assignment-table .row-diff{background-color:#fff3cd}.assignment-table .row-diff:hover{background-color:#ffe69c}.skill-info{display:flex;flex-direction:column;gap:.25rem}.skill-info .skill-name{font-weight:500;color:var(--gray-900)}.skill-info .skill-name-link{font-weight:500;color:var(--primary-dark);text-decoration:none}.skill-info .skill-name-link:hover{text-decoration:underline}.status-tag{display:inline-block;padding:.125rem .375rem;font-size:.75rem;border-radius:.25rem;color:#fff}.status-published{background-color:#28a745}.status-implemented{background-color:#17a2b8}.status-designed{background-color:var(--muted)}.no-assignment{color:var(--muted)}.face-yang{background-color:#fd7e14}.face-yin{background-color:#6f42c1}.comparison-container{background:var(--white);border:1px solid var(--border-color);border-radius:.25rem;padding:1rem}.comparison-actions{display:flex;justify-content:flex-end;margin-bottom:1rem}.comparison-actions .btn{display:inline-block;padding:.5rem 1rem;background-color:var(--primary);color:#fff;text-decoration:none;border-radius:.25rem;font-size:.875rem;transition:background-color .2s}.comparison-actions .btn:hover{background-color:var(--primary-dark)}.comparison-intro{padding:.75rem 1rem;background-color:var(--gray-100);border-radius:.25rem;margin-bottom:1rem;font-size:.875rem;color:var(--gray-700)}.comparison-intro p{margin:0}.comparison-tabs{display:flex;gap:0;border-bottom:1px solid var(--border-color);margin-bottom:1rem}.tab-btn{padding:.75rem 1.5rem;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-size:.875rem;color:var(--gray-700);transition:all .2s}.tab-btn:hover{color:var(--primary);background-color:var(--gray-50, #f8f9fa)}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500}.data-table{width:100%;border-collapse:collapse;font-size:.875rem}.data-table th,.data-table td{padding:.75rem;border:1px solid var(--border-color);text-align:left;vertical-align:top}.data-table th{background-color:var(--gray-100);font-weight:600;color:var(--gray-700);white-space:nowrap}.data-table tbody tr:hover{background-color:var(--gray-50, #f8f9fa)}.hero-name,.skill-name{font-weight:500;color:var(--primary-dark)}.hero-name-link,.skill-name-link{font-weight:500;color:var(--primary-dark);text-decoration:none}.hero-name-link:hover,.skill-name-link:hover{text-decoration:underline}.skill-link{text-decoration:none}.skill-link:hover{text-decoration:underline}.skill-link.old{color:#dc3545}.skill-link.new{color:#28a745}.skill-effect{font-size:.8rem;color:var(--gray-700);max-width:400px}.skill-changes{display:flex;flex-direction:column;gap:.5rem}.change-item{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border-radius:.25rem;font-size:.8rem}.change-level{font-weight:500;color:var(--gray-700);min-width:60px}.change-detail{display:flex;align-items:center;gap:.5rem}.change-add{background-color:#d4edda}.change-remove{background-color:#f8d7da}.change-replace{background-color:#fff3cd}.old-skill{color:#dc3545;text-decoration:line-through}.new-skill{color:#28a745;font-weight:500}.arrow{color:var(--gray-500)}.assignment-list{list-style:none;padding:0;margin:0}.assignment-list li{margin-bottom:.25rem;font-size:.8rem}.assignment-list li:last-child{margin-bottom:0}.face-tag{display:inline-block;margin-left:.25rem;padding:.0625rem .25rem;font-size:.7rem;border-radius:.125rem;color:#fff}.face-tag.yang{background-color:#fd7e14}.face-tag.yin{background-color:#6f42c1}.error-message{display:flex;flex-direction:column;align-items:center;padding:2rem;color:#dc3545}.empty-state{text-align:center;padding:3rem;color:var(--muted)}.announcement-page{padding:20px;background-color:#f5f5f5;min-height:100vh}.announcement-header{max-width:650px;margin:0 auto 20px;text-align:center}.announcement-header h2{margin:10px 0;color:var(--gray-900)}.announcement-header .tip{color:var(--muted);font-size:.9rem}@media print{.no-print{display:none!important}}.announcement-content{max-width:650px;margin:0 auto}.hero-card{background-color:#fcbcb0;width:100%;padding:12px 12px 24px;margin-bottom:12px;min-height:200px;border-radius:4px;position:relative}.card-toolbar{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:10}.toolbar-btn{padding:4px 10px;font-size:12px;background-color:#ffffffe6;border:1px solid rgba(0,0,0,.15);border-radius:4px;cursor:pointer;transition:all .2s;white-space:nowrap}.toolbar-btn:hover:not(:disabled){background-color:#fff;box-shadow:0 2px 4px #0000001a}.toolbar-btn:disabled{opacity:.6;cursor:not-allowed}.hero-header{display:flex;align-items:flex-start;margin-left:20px;margin-top:12px}.hero-avatar{width:64px;height:80px;margin-right:12px;flex-shrink:0;image-rendering:pixelated}.hero-info{display:flex;flex-direction:column;gap:8px}.hero-name{font-weight:600;font-size:24px;color:#333}.hero-name .face-tag{color:red;font-size:20px}.hero-nick{font-weight:600;font-size:20px;color:#555;margin-left:48px}.hero-divider{clear:both;width:90%;margin:12px auto;border:none;border-top:1px solid rgba(0,0,0,.15)}.hero-skills{margin-left:20px;margin-right:28px}.skill-block{margin-bottom:8px}.skill-row{display:flex;align-items:flex-start;font-size:16px;line-height:1.6;margin-bottom:4px}.skill-name{font-weight:500;min-width:100px;flex-shrink:0;color:#333}.skill-name.is-new{color:red!important;font-weight:600}.skill-name.is-related{color:#00f!important}.skill-detail{font-weight:600;color:#333}.skill-sub-divider{width:calc(100% - 100px);margin:8px 0 8px 100px;border:none;border-top:1px dashed rgba(0,0,0,.2)}.skill-memo{margin-top:8px;margin-left:100px;font-size:15px;color:#00278c}.memo-label{font-weight:400}.memo-content{white-space:pre-wrap}.empty-state{text-align:center;padding:60px 20px;color:var(--muted);background-color:var(--white);border-radius:4px}.loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:60px 20px}.loading-spinner{width:24px;height:24px;border:3px solid var(--gray-200);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.error-message{text-align:center;padding:40px 20px;color:var(--danger)}.error-message button{margin-left:10px;padding:6px 12px;background-color:var(--primary);color:#fff;border:none;border-radius:4px;cursor:pointer}.error-message button:hover{background-color:var(--primary-dark)}.export-container{background:var(--white);border:1px solid var(--border-color);border-radius:.25rem;padding:1.5rem}.export-intro{padding:.75rem 1rem;background-color:var(--gray-100);border-radius:.25rem;margin-bottom:1.5rem;font-size:.875rem;color:var(--gray-700)}.export-intro p{margin:0}.export-section{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.export-section:last-of-type{border-bottom:none;margin-bottom:1rem}.export-section h3{font-size:1.1rem;font-weight:600;color:var(--gray-900);margin:0 0 .5rem}.section-desc{font-size:.875rem;color:var(--muted);margin:0 0 1rem}.export-buttons{display:flex;flex-wrap:wrap;gap:.75rem}.export-buttons .btn{padding:.5rem 1.25rem;font-size:.875rem;border:none;border-radius:.25rem;cursor:pointer;transition:all .2s}.export-buttons .btn:disabled{opacity:.6;cursor:not-allowed}.export-buttons .btn-primary{background-color:var(--primary);color:#fff}.export-buttons .btn-primary:hover:not(:disabled){background-color:var(--primary-dark)}.export-buttons .btn-secondary{background-color:var(--gray-200);color:var(--gray-700)}.export-buttons .btn-secondary:hover:not(:disabled){background-color:var(--gray-300)}.export-notes{background-color:var(--gray-50, #f8f9fa);border:1px solid var(--border-color);border-radius:.25rem;padding:1rem;margin-top:1rem}.export-notes h4{font-size:.9rem;font-weight:600;color:var(--gray-700);margin:0 0 .75rem}.export-notes ul{margin:0;padding-left:1.25rem;font-size:.8rem;color:var(--gray-700)}.export-notes li{margin-bottom:.5rem}.export-notes li:last-child{margin-bottom:0}.export-notes strong{color:var(--gray-900)}.skill-detail-page{display:flex;flex-direction:column;gap:1rem}.page-header h1{display:flex;align-items:center;gap:.75rem}.status-badge{font-size:.75rem;padding:.25rem .5rem;border-radius:.25rem;font-weight:400}.status-badge.status-published{background-color:#28a745;color:#fff}.status-badge.status-implemented{background-color:#17a2b8;color:#fff}.status-badge.status-designed{background-color:#6c757d;color:#fff}.skill-detail-page .card{background:var(--white);border:1px solid var(--border-color);border-radius:.25rem}.skill-detail-page .card-header{padding:.75rem 1rem;background-color:var(--gray-100);border-bottom:1px solid var(--border-color);font-weight:500;color:var(--gray-900)}.skill-detail-page .card-body{padding:1rem}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}@media(max-width:576px){.info-grid{grid-template-columns:1fr}}.info-item{display:flex;flex-direction:column;gap:.25rem}.info-label{font-size:.75rem;color:var(--muted);text-transform:uppercase}.info-value{font-size:1rem;color:var(--gray-900);font-weight:500}.skill-effect,.skill-desc,.skill-memo{margin:0;line-height:1.8;color:var(--gray-700);white-space:pre-wrap}.skill-effect{font-size:1rem}.skill-desc{font-size:.95rem;color:var(--gray-600)}.skill-memo{font-size:.9rem;color:#00278c;font-style:italic}.assignment-section{margin-bottom:1.5rem}.assignment-section:last-child{margin-bottom:0}.assignment-section h3{font-size:.9rem;font-weight:500;color:var(--gray-700);margin:0 0 .75rem;display:flex;align-items:center;gap:.5rem}.badge{display:inline-block;padding:.15rem .4rem;font-size:.7rem;border-radius:.2rem;color:#fff;font-weight:400}.badge-published{background-color:#28a745}.badge-implemented{background-color:#17a2b8}.badge-designed{background-color:#6c757d}.assignment-list{display:flex;flex-wrap:wrap;gap:.5rem}.assignment-item{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .75rem;background-color:var(--gray-100);border-radius:.25rem;text-decoration:none;transition:background-color .2s}.assignment-item:hover{background-color:var(--gray-200)}.assignment-item .hero-name{color:var(--primary);font-weight:500}.assignment-item .hero-level{color:var(--gray-600);font-size:.85rem}.assignment-item .hero-face{color:#dc3545;font-size:.8rem}.no-assignments{color:var(--muted);font-style:italic;margin:0}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:var(--muted)}.loading-spinner{width:2rem;height:2rem;border:3px solid var(--gray-200);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:.5rem}@keyframes spin{to{transform:rotate(360deg)}}.error-message{display:flex;flex-direction:column;align-items:center;padding:2rem;color:var(--danger, #dc3545)}.error-message button{margin-top:1rem;padding:.375rem .75rem;background-color:var(--primary);color:#fff;border:none;border-radius:.25rem;cursor:pointer}.app{min-height:100vh;display:flex;flex-direction:column}.navbar{background-color:#343a40;padding:.5rem 1rem;position:sticky;top:0;z-index:1000}.navbar .container{display:flex;align-items:center;justify-content:space-between}.navbar-brand{color:#fff;font-size:1.25rem;font-weight:500;text-decoration:none}.navbar-brand:hover{color:#fff;text-decoration:none}.navbar-nav{display:flex;gap:1rem;list-style:none;margin:0;padding:0}.navbar-nav .nav-item{position:relative}.navbar-nav .nav-link{color:#ffffffbf;text-decoration:none;padding:.5rem 0;cursor:pointer;display:inline-block}.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active{color:#fff}.navbar-nav>.nav-item>a{color:#ffffffbf;text-decoration:none;padding:.5rem 0}.navbar-nav>.nav-item>a:hover,.navbar-nav>.nav-item>a.active{color:#fff}.dropdown-menu{position:absolute;top:100%;left:0;background:#fff;border:1px solid #dee2e6;border-radius:.25rem;box-shadow:0 .5rem 1rem #00000026;min-width:180px;padding:.5rem 0;margin:0;list-style:none;z-index:1001}.dropdown-menu li{margin:0;padding:0;list-style:none}.dropdown-item{display:block;width:100%;padding:.5rem 1rem;color:#212529!important;text-decoration:none!important;white-space:nowrap;background:none;border:none;text-align:left;font-size:.875rem}.dropdown-item:hover{background-color:#f8f9fa;color:#007bff!important}.dropdown-item.active{background-color:#007bff;color:#fff!important}.main-content{flex:1;padding:1.5rem 0}.footer{background-color:var(--gray-100);border-top:1px solid var(--border-color);padding:1rem 0;margin-top:auto}.footer .container{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}.breadcrumb{display:flex;gap:.5rem;margin-bottom:1rem;font-size:13px;color:var(--muted)}.breadcrumb a{color:var(--primary)}.breadcrumb span{color:var(--gray-700)}.page-header{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.page-header h1{font-size:1.5rem;font-weight:500;margin:0;color:var(--gray-900)}.card{background:var(--white);border:1px solid var(--border-color);border-radius:.25rem;margin-bottom:1rem}.card-header{padding:.75rem 1rem;background-color:var(--gray-100);border-bottom:1px solid var(--border-color);font-weight:500}.card-body{padding:1rem}