:root {
    --bg: #1b1d23;
    --panel: #232733;
    --panel-2: #2b3040;
    --text: #e8edf7;
    --text-muted: #a5adbf;
    --border: #3a4257;
    --accent: #4ea1ff;
    --accent-2: #6ec8ff;
    --danger: #ff6b6b;
    --success: #5dd39e;
    --focus: #89d0ff;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: radial-gradient(circle at 20% -10%, #2a2f40 0%, var(--bg) 55%);
    color: var(--text);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--border);
    background: rgba(20, 23, 31, 0.92);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
}

.site-brand {
    color: #d8e7ff;
    font-weight: 700;
    text-decoration: none;
}

.site-nav {
    display: flex;
    gap: 0.35rem;
}

.nav-link {
    text-decoration: none;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.4rem 0.7rem;
}

.nav-link:hover,
.nav-link.active {
    color: #e9f2ff;
    border-color: var(--border);
    background: #252c3b;
}

.site-main {
    min-height: calc(100vh - 62px);
}

a {
    color: var(--accent-2);
}

h1,
h2,
h3,
h4 {
    margin: 0;
    line-height: 1.2;
}

p {
    margin: 0;
    color: var(--text-muted);
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
    background: var(--panel-2);
    color: var(--text);
    cursor: pointer;
}

a.btn-primary,
button.btn-primary {
    text-decoration: none;
    display: inline-block;
}

button:hover {
    border-color: var(--accent);
}

button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.btn-primary {
    background: linear-gradient(180deg, #4d9cff, #3479d9);
    border-color: #2d6dc7;
    color: #f7fbff;
}

.btn-delete {
    background: #3a2c33;
    border-color: #6a3d4a;
    color: #ffb9c1;
}

#character-list-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.25rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(300px, 380px) 1fr;
}

.empty-state {
    grid-column: 1 / -1;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(180deg, #273146, #22293a);
    padding: 1rem;
    display: grid;
    gap: 0.65rem;
}

.empty-state p {
    color: var(--text-muted);
}

.empty-state-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.admin-page {
    max-width: 1160px;
    margin: 0 auto;
    padding: 1.25rem;
    display: grid;
    gap: 1rem;
}

.admin-header {
    display: grid;
    gap: 0.4rem;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    align-items: start;
}

.admin-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(180deg, #242b3b 0%, #202634 100%);
    padding: 1rem;
    display: grid;
    gap: 0.65rem;
}

.admin-card-narrow {
    max-width: 680px;
}

.admin-form {
    display: grid;
    gap: 0.7rem;
}

.admin-form fieldset {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: 0;
    padding: 0.7rem;
    display: grid;
    gap: 0.45rem;
}

.admin-form legend {
    color: #cadcf9;
    padding: 0 0.35rem;
}

.choice-row {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    color: var(--text-muted);
}

.choice-row input {
    margin: 0;
}

.form-help {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.result-box {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #1b2130;
    color: #d9e8ff;
    margin: 0;
    padding: 0.7rem;
    min-height: 4.2rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.result-box.error {
    border-color: #7d4552;
    color: #ffb9c1;
}

.result-box.success {
    border-color: #43715c;
    color: #b5efd2;
}

#character-list-container > h1 {
    grid-column: 1 / -1;
    color: #d8e7ff;
    font-size: 1.65rem;
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.85rem;
    align-content: start;
}

.character-card {
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #242a39 0%, #222736 100%);
    border-radius: 12px;
    padding: 0.65rem;
    display: grid;
    gap: 0.55rem;
    transition: border-color 0.15s ease;
}

.character-card:hover {
    border-color: var(--accent);
}

.character-header {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: center;
}

.character-name {
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.character-rating {
    color: #d0dcf5;
    font-size: 0.92rem;
}

.character-info {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.rank-badge {
    min-width: 2rem;
    text-align: center;
    border-radius: 999px;
    border: 1px solid #7f6848;
    padding: 0.15rem 0.5rem;
    background: linear-gradient(180deg, #e6cc95, #be9651);
    color: #1f1b12;
    font-weight: 700;
}

.card-portrait {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.card-portrait:not([src]),
.detail-portrait:not([src]) {
    display: none;
}

.detail-portrait {
    width: 68px;
    height: 68px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.character-list-col {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

#char-filter {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    background: var(--panel-2);
    color: var(--text);
}

#char-filter:focus {
    outline: 2px solid transparent;
    border-color: var(--focus);
    box-shadow: 0 0 0 2px rgba(137, 208, 255, 0.25);
}

#character-detail,
.character-detail {
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #242b3b 0%, #202634 100%);
    border-radius: 12px;
    padding: 1rem;
}

#character-detail {
    min-height: 250px;
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.8rem;
}

.rating {
    margin-left: auto;
    font-weight: 600;
    color: #d5e5ff;
}

.epithet {
    margin-bottom: 0.8rem;
    color: #b7c9ea;
    font-style: italic;
}

.stats-section,
.history-section,
.aptitudes-section,
.skills-section,
.races-section,
.support-cards-section,
.parents-section,
.career-section {
    margin-top: 1rem;
    display: grid;
    gap: 0.55rem;
}

.bar-container {
    height: 0.95rem;
    border-radius: 999px;
    border: 1px solid #3f4a63;
    overflow: hidden;
    background: #1a1f2a;
}

.bar {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #45b8ff, #2f79db);
    color: #f8fbff;
    font-size: 0.72rem;
    line-height: 0.9rem;
    text-align: right;
    padding-right: 0.35rem;
    min-width: 1.9rem;
}

.stat-bar {
    display: grid;
    gap: 0.3rem;
}

.stat-bar label {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.aptitude-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(90px, 1fr));
    gap: 0.55rem;
}

.aptitude-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
    background: #23293a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
}

.apt-label {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.apt-grade {
    font-weight: 700;
}

.skills-list,
.support-cards-list,
.parents-list {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.skill-tag,
.parent-item,
.support-card {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    background: #2a3144;
    font-size: 0.84rem;
}

.support-card {
    border-radius: 8px;
    display: inline-flex;
    gap: 0.45rem;
}

.race-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-muted);
}

.detail-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.6rem;
}

#character-form {
    max-width: 950px;
    margin: 1rem auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    background: linear-gradient(180deg, #242b3b, #202634);
    display: grid;
    gap: 0.8rem;
}

#character-form fieldset {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.8rem;
}

#character-form legend {
    padding: 0 0.35rem;
    color: #cadcf9;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.form-group {
    display: grid;
    gap: 0.35rem;
}

#character-form label {
    color: var(--text-muted);
    font-size: 0.82rem;
}

#character-form input[type="text"],
#character-form input[type="number"],
#character-form select,
.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="password"],
.admin-form input[type="file"],
.admin-form select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
    background: #1f2431;
    color: var(--text);
}

#character-form input:focus,
#character-form select:focus,
#character-form textarea:focus,
.admin-form input:focus,
.admin-form select:focus {
    outline: 2px solid transparent;
    border-color: var(--focus);
    box-shadow: 0 0 0 2px rgba(137, 208, 255, 0.25);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.tag-input-container {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.55rem;
    background: #1e2433;
    display: grid;
    gap: 0.55rem;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tag-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #46536d;
    border-radius: 999px;
    padding: 0.2rem 0.45rem;
    background: #2a3347;
}

.tag-name {
    font-size: 0.84rem;
}

.tag-level,
.tag-input-mini,
.tag-extra {
    font-size: 0.78rem;
}

.tag-input-wrapper {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}

.tag-input {
    min-width: 190px;
    flex: 1;
}

.tag-input-mini {
    width: 76px;
}

.tag-remove {
    border: none;
    background: transparent;
    color: #ffadad;
    padding: 0;
    width: 1rem;
    height: 1rem;
    line-height: 1;
}

.tag-remove:hover {
    color: var(--danger);
}

.tag-remove:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 3px;
}

.tag-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #1f2635;
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 20;
}

.tag-suggestions .autocomplete-list {
    margin: 0;
    padding: 0;
    list-style: none;
    position: static;
}

.tag-suggestions .autocomplete-item {
    padding: 0.45rem 0.55rem;
    cursor: pointer;
}

.tag-suggestions .autocomplete-item:hover {
    background: #2f3950;
}

.career-item {
    color: var(--text-muted);
}

.graph-page-body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.graph-page-body .site-main {
    padding: 0;
    min-height: 0;
    flex: 1;
}

.graph-page {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
}

.graph-toolbar {
    border-bottom: 1px solid #355171;
    background: #1b2a40;
    padding: 0.9rem;
    display: grid;
    gap: 0.7rem;
}

.graph-toolbar h1 {
    font-size: 1.45rem;
    color: #d7ecff;
}

.graph-controls {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    flex-wrap: wrap;
}

.graph-controls select,
.graph-controls button {
    border-radius: 7px;
    border: 1px solid #355171;
    background: #223650;
    color: #dcecff;
    padding: 0.42rem 0.7rem;
}

.graph-controls button:disabled {
    opacity: 0.55;
}

.graph-status {
    font-size: 0.85rem;
    color: #b4c5dd;
}

.graph-main-container {
    display: flex;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

#graph-container {
    flex: 1;
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.graph-sidebar {
    width: 300px;
    background: #1b2a40;
    border-left: 1px solid #355171;
    padding: 1rem;
    overflow-y: auto;
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

.graph-character-info {
    background: #223650;
    border: 1px solid #355171;
    border-radius: 8px;
    padding: 0.7rem;
    display: grid;
    gap: 0.25rem;
}

.graph-character-info p {
    color: #b4c5dd;
    font-size: 0.9rem;
}

.detail-history {
    display: grid;
    gap: 0.55rem;
}

.detail-history-summary {
    display: grid;
    gap: 0.12rem;
}

.detail-history-meta {
    margin: 0;
    color: #b4c5dd;
    font-size: 0.78rem;
    opacity: 0.72;
    font-variant-numeric: tabular-nums;
}

.detail-history-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.detail-history-card {
    border-radius: 8px;
    border: 1px solid #3f4a63;
    background: #1a1f2a;
    padding: 0.45rem 0.5rem;
    display: grid;
    gap: 0.24rem;
}

.detail-history-card-header,
.detail-history-card-meta,
.detail-history-row-main {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: baseline;
}

.detail-history-card-header span,
.detail-history-card-meta span,
.detail-history-row-main span,
.detail-history-row-stats {
    color: #b4c5dd;
    font-size: 0.74rem;
}

.detail-history-card-header strong {
    color: #edf6ff;
    font-size: 0.98rem;
    padding-left: 0.2rem;
}

.detail-history-chart {
    width: 100%;
    height: 40px;
    display: block;
}

.detail-history-chart-wrap {
    position: relative;
}

.detail-history-tooltip {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -100%);
    pointer-events: none;
    padding: 0.22rem 0.4rem;
    border-radius: 6px;
    background: rgba(15, 24, 37, 0.94);
    border: 1px solid rgba(127, 199, 255, 0.28);
    color: #edf6ff;
    font-size: 0.7rem;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
}

.detail-history-hitbox {
    fill: transparent;
    pointer-events: all;
}

.detail-history-point {
    fill: rgba(255, 255, 255, 0.38);
    stroke: none;
}

.detail-history-point.is-current {
    fill: #ffffff;
}

.detail-history-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.28rem;
    max-height: 272px;
    overflow-y: auto;
    align-content: start;
}

.detail-history-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.detail-history-sort,
.detail-history-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.detail-history-toolbar-btn {
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid #3f4a63;
    background: #1a1f2a;
    color: #b4c5dd;
    font-size: 0.72rem;
    line-height: 1.2;
}

.detail-history-toolbar-btn:hover {
    border-color: #4e6888;
    color: #edf6ff;
}

.detail-history-toolbar-btn.is-active {
    border-color: rgba(69, 184, 255, 0.5);
    background: rgba(69, 184, 255, 0.12);
    color: #edf6ff;
}

.detail-history-row {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #3f4a63;
    background: #1a1f2a;
    color: #edf6ff;
    padding: 0.4rem 0.55rem;
    display: grid;
    gap: 0.08rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
    border-left: 3px solid #756449;
}

.detail-history-row:hover {
    background: #202636;
    border-color: #4e6888;
}

.detail-history-row.is-current {
    border-color: #45b8ff;
    box-shadow: inset 0 0 0 1px rgba(69, 184, 255, 0.2);
}

.detail-history-row-date {
    color: #d7e0f0;
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.detail-history-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.14rem 0.45rem;
    border-radius: 999px;
    background: rgba(247, 185, 85, 0.15);
    border: 1px solid rgba(247, 185, 85, 0.3);
    color: #f6d28c;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.detail-history-row-stats {
    font-size: 0.7rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-history-card-meta {
    color: #93a4bd;
}

.detail-history-card-meta span {
    font-size: 0.68rem;
    opacity: 0.72;
}

@media (max-width: 980px) {
    .detail-history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .detail-history-grid {
        grid-template-columns: 1fr;
    }
}

.graph-actions {
    display: grid;
    gap: 0.5rem;
}

.graph-legend {
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid #355171;
    display: grid;
    gap: 0.25rem;
}

.graph-legend p {
    color: #b4c5dd;
    font-size: 0.84rem;
}

.graph-page .error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffb9c1;
    text-align: center;
}

@media (max-width: 980px) {
    #character-list-container {
        grid-template-columns: 1fr;
    }

    .aptitude-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .graph-main-container {
        flex-direction: column;
        overflow: visible;
    }

    #graph-container {
        height: min(65vh, 420px);
        min-height: 320px;
    }

    .graph-sidebar {
        width: auto;
        border-left: none;
        border-top: 1px solid #355171;
    }
}

@media (max-width: 640px) {
    .site-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-nav {
        width: 100%;
        overflow-x: auto;
    }

    #character-list-container,
    #character-form,
    .admin-page {
        padding: 0.8rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .aptitude-grid {
        grid-template-columns: 1fr;
    }
}