:root { color-scheme: dark; --bg:#14171c; --panel:#1c2129; --border:#34404f; --text:#d8dee9; --muted:#9aa8b8; --accent:#83c1fc; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.65 "Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif; }
header { display:flex; align-items:center; gap:24px; padding:16px 24px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.logo { display:flex; } .logo img { width:auto; height:56px; }
nav { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-left:auto; font-size:13px; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
main { max-width:1220px; margin:auto; padding:28px 24px 64px; }
h1 { font-size:28px; line-height:1.35; margin:0 0 10px; overflow-wrap:anywhere; }
h2, legend { font-size:17px; font-weight:600; } h2 { margin:0 0 16px; }
p { margin:0 0 16px; } .hint,.muted,dt { color:var(--muted); font-size:13px; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.panel { border:1px solid var(--border); border-radius:12px; background:var(--panel); padding:22px; margin-bottom:20px; min-width:0; }
.search-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; align-items:start; }
.search-layout .panel { padding:18px; } .search-layout summary { font-size:17px; font-weight:600; cursor:pointer; margin-bottom:16px; }
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.player-card { display:flex; flex-direction:column; gap:12px; border:1px solid var(--border); border-radius:12px; padding:20px; background:var(--panel); min-width:0; }
.identity { display:flex; align-items:center; gap:14px; min-width:0; } .identity>div { min-width:0; overflow-wrap:anywhere; }
.identity h2 { margin:0; font-size:18px; } .avatar { width:52px; height:52px; flex:none; border-radius:50%; background:#283e53; object-fit:cover; }
.avatar.placeholder { display:grid; place-items:center; font-size:21px; color:var(--accent); }
.badge { display:inline-block; border:1px solid #44627d; color:#b2dafa; background:#24384a; border-radius:6px; font-size:13px; padding:1px 8px; white-space:nowrap; }
.chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .chip { border:1px solid var(--border); border-radius:6px; padding:2px 8px; font-size:13px; max-width:100%; overflow-wrap:anywhere; }
.chip button { border:0; padding:0 0 0 8px; min-height:24px; background:none; }
.field { display:flex; flex-direction:column; gap:5px; margin:0 0 18px; min-width:0; }
.field>label { font-size:14px; font-weight:600; } input,select,textarea,button,.button { font:inherit; }
input:not([type=checkbox]),select,textarea { background:var(--bg); border:1px solid var(--border); color:var(--text); padding:9px 10px; border-radius:6px; width:100%; min-width:0; }
input[type=checkbox] { accent-color:var(--accent); width:17px; height:17px; flex:none; }
input:disabled { opacity:.45; } button,.button { cursor:pointer; display:inline-block; color:var(--accent); border:1px solid var(--border); background:var(--panel); border-radius:6px; padding:8px 14px; min-height:42px; }
button:disabled { opacity:.45; cursor:default; } .primary { background:#29659e; color:white; border-color:#4081ba; }
button:hover:not(:disabled),.button:hover { border-color:var(--accent); } :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }
.check { display:flex; gap:8px; align-items:center; font-size:14px; margin-bottom:10px; cursor:pointer; }
.character-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:4px 16px; }
.character-choices .check { min-height:36px; margin:0; }
.biography { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; }
textarea { resize:vertical; }
.link-editor-row { border:1px solid var(--border); border-radius:8px; padding:16px; margin-bottom:14px; }
.profile-links { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:12px; }
.profile-external-link { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:8px; padding:12px 16px; overflow-wrap:anywhere; }
.external-label { font-weight:600; }
.distribution-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
#statistics-results { min-width:0; }
.distribution-list { padding:0; margin:0; list-style:none; }
.distribution-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:0 10px; margin:0 0 10px; }
button.distribution-label { padding:4px 0; border:0; background:none; min-height:32px; text-align:left; white-space:normal; overflow-wrap:anywhere; }
.distribution-count { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.distribution-track { grid-column:1 / -1; height:6px; border-radius:3px; background:var(--bg); overflow:hidden; }
.distribution-bar { height:100%; background:var(--accent); }
fieldset { border:0; padding:0; margin:0 0 18px; min-width:0; } legend { padding:0; margin-bottom:10px; }
.tag-entry { display:flex; gap:8px; margin:8px 0; } .tag-entry input { flex:1; } .tag-entry button { flex:none; }
.actions,.pagination { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .pagination { justify-content:center; margin-top:24px; }
.error { color:#ff9a9a; white-space:pre-wrap; } .success { color:#87db9b; }
.editor { max-width:850px; margin:auto; } .editor .actions { position:sticky; bottom:0; background:var(--bg); padding:16px 0; border-top:1px solid var(--border); }
.rank-settings { margin:24px auto 0; }
.rank-settings summary { cursor:pointer; font-weight:600; }
.rank-settings details[open] summary { margin-bottom:16px; }
.rank-change-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.rank-change-buttons button { flex:1 1 120px; }
.rank-change-buttons span { display:block; }
.rank-change-buttons .rank-label { font-size:18px; font-weight:600; }
.profile-top { display:flex; align-items:center; flex-wrap:wrap; gap:24px; } .profile-top .avatar { width:84px; height:84px; }
.profile-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
dl { margin:0; } dt { margin-top:14px; } dt:first-child { margin-top:0; } dd { margin:3px 0 0; overflow-wrap:anywhere; }
.numbers { display:flex; gap:24px; flex-wrap:wrap; margin:0 0 16px; } .number { font-size:30px; font-weight:600; line-height:1.3; }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; white-space:nowrap; }
th,td { text-align:right; padding:9px 7px; border-bottom:1px solid var(--border); } th:first-child,td:first-child { text-align:left; } th { font-size:12px; color:var(--muted); }
@media(max-width:850px) { .cards,.distribution-grid { grid-template-columns:1fr; } }
@media(max-width:620px) { header { padding:12px 16px; gap:12px; } nav { margin:0; gap:12px; } main { padding:20px 16px 40px; } .search-layout,.profile-columns,.two-col { grid-template-columns:1fr; gap:12px; } .panel { padding:18px; } h1 { font-size:23px; } }