:root{
  --bg:#0a0f24;--bg-soft:#101736;--panel:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.09);--border-strong:rgba(255,255,255,.18);
  --text:#eef2ff;--muted:#98a8d6;--muted-2:#6f7fb0;
  --accent:#7c9cff;--accent-2:#5eead4;--warn:#fbbf24;--danger:#ff6b81;--ok:#34d399;
  --shadow:0 18px 40px rgba(0,0,0,.32);--radius:16px;
  --select-bg:#0b1220;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Inter","Hiragino Sans","Noto Sans JP",system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(1100px 600px at 80% -10%,rgba(124,156,255,.18),transparent 50%),
    radial-gradient(900px 500px at -10% 0%,rgba(94,234,212,.10),transparent 55%),
    var(--bg);
  color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
code{font-family:"SFMono-Regular",Consolas,monospace;background:rgba(255,255,255,.06);padding:.12rem .35rem;border-radius:8px}
button,input,select{font:inherit}
.app{max-width:2100px;margin:0 auto;padding:14px}
.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr);gap:10px;margin-bottom:12px}
.hero-card,.panel{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.04));border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.hero-main{padding:18px}.hero-main h1{margin:0 0 8px;font-size:clamp(1.7rem,3vw,2.4rem)}.hero-main p{margin:0;color:var(--muted);line-height:1.65}.helper{margin-top:12px!important;font-size:.92rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
.stat{padding:12px 14px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.03)}
.stat .k,.summary-item .k{font-size:.78rem;letter-spacing:.08em;color:var(--muted-2);font-weight:700}.stat .v,.summary-item .v{font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:800;margin-top:4px}.stat .s{font-size:.82rem;color:var(--muted);margin-top:4px}
.panel{padding:0;overflow:hidden}.panel-body{padding:14px}
.control-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(160px,1fr));gap:10px;align-items:end}
.field{display:grid;gap:5px}.field span{font-size:12px;color:var(--muted);font-weight:700}
input[type="search"],select{width:100%;min-height:44px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--text);padding:0 14px;outline:none}
input[type="search"]:focus,select:focus{border-color:rgba(124,156,255,.55);box-shadow:0 0 0 3px rgba(124,156,255,.12)}
.chip-grid{display:flex;flex-wrap:wrap;gap:8px}.action-row{margin-top:10px}
.btn{min-height:40px;padding:0 13px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:.18s ease;background:rgba(255,255,255,.05);color:var(--text)}.btn:hover{transform:translateY(-1px)}.btn.primary{background:linear-gradient(135deg,#7c9cff,#9c7cff);color:#fff}.btn.ghost{border-color:var(--border);background:rgba(255,255,255,.04)}.btn.danger{background:rgba(255,107,129,.12);border-color:rgba(255,107,129,.3);color:#ffd3dc}
.summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.summary-item{padding:12px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.03)}
.empty-state{margin-top:10px;border:1px dashed var(--border);border-radius:16px;padding:18px;text-align:center;color:var(--muted)}
.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.card-tile{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.03);display:grid;grid-template-rows:auto 1fr;min-height:100%}
.tile-image-wrap{display:flex;justify-content:center;padding:10px 10px 0}
.tile-image{position:relative;width:min(100%,300px);aspect-ratio:1/1;border-radius:16px;background:#0c1227;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
.tile-image img{width:100%;height:100%;object-fit:cover;display:block}.tile-image .image-fallback{position:absolute;inset:0;display:none;place-items:center;padding:10px;text-align:center;color:var(--muted);font-size:.9rem;line-height:1.5;background:#0c1227}
.tile-body{padding:10px;display:grid;gap:6px;min-width:0}.tile-name{margin:0;font-size:15px;line-height:1.4}.tile-id{font-size:12px;color:var(--muted)}.tile-meta,.tile-stats,.tile-status{display:flex;flex-wrap:wrap;gap:5px}
.badge{border-radius:999px;padding:3px 8px;font-size:10px;font-weight:800;letter-spacing:.04em;white-space:nowrap;border:1px solid var(--border);background:rgba(255,255,255,.05)}.b-monster{background:rgba(124,156,255,.16)}.b-spell{background:rgba(52,211,153,.16)}.b-trap{background:rgba(251,191,36,.16)}.b-point{background:rgba(255,107,129,.15);border-color:rgba(255,107,129,.28);color:#ffe2ef}
.status-pill{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--border);font-size:12px;font-weight:700}.status-pill.ok{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.28);color:#d4ffe9}.status-pill.warn{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.28);color:#ffecc0}.status-pill.info{background:rgba(124,156,255,.12);border-color:rgba(124,156,255,.28);color:#d8e2ff}
.tile-text{font-size:12px;line-height:1.65;color:#dbe3ff;max-height:10.6em;overflow-y:auto;overflow-x:hidden;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(124,156,255,.55) rgba(255,255,255,.06)}
.tile-text::-webkit-scrollbar{width:8px}
.tile-text::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}
.tile-text::-webkit-scrollbar-thumb{background:rgba(124,156,255,.55);border-radius:999px;border:1px solid rgba(255,255,255,.08)}
.tile-text::-webkit-scrollbar-thumb:hover{background:rgba(124,156,255,.72)}
.manage-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto}.mini-field{display:grid;gap:5px}.mini-field span{font-size:11px;color:var(--muted);font-weight:700}
.dark-select,.manage-select{min-height:40px;padding:0 10px;font-size:13px;font-weight:700;color:#fff;border:1px solid rgba(255,255,255,.12);background:var(--select-bg)}
.dark-select option,.manage-select option{background:#111827;color:#fff}
.pagination-wrap{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0 2px;flex-wrap:wrap}.pagination-wrap.bottom{padding-top:12px}.pagination-info{color:var(--muted);font-size:12px}.pagination{display:flex;gap:6px;flex-wrap:wrap}
.page-btn,.page-ellipsis{min-width:38px;min-height:36px;padding:0 12px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.page-btn{cursor:pointer}.page-btn.active{background:linear-gradient(135deg,#7c9cff,#9c7cff);border-color:transparent}.page-btn[disabled]{opacity:.35;cursor:not-allowed}.page-ellipsis{border-style:dashed;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(16px);background:rgba(10,16,38,.95);color:#fff;border:1px solid var(--border);border-radius:999px;padding:12px 16px;opacity:0;pointer-events:none;transition:.2s ease;z-index:30}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:1700px){.control-grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(150px,1fr))}}
@media (max-width:1024px){.hero{grid-template-columns:1fr}.summary{grid-template-columns:1fr 1fr}.control-grid{grid-template-columns:1fr 1fr}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.app{padding:9px}.hero-stats{grid-template-columns:1fr}.summary{grid-template-columns:1fr 1fr}.control-grid{grid-template-columns:1fr}.card-grid{grid-template-columns:1fr}.tile-image{width:min(100%,300px)}.tile-text{max-height:12.5em}.pagination-wrap{justify-content:center}.pagination-info{text-align:center;width:100%;font-size:11px}.pagination{gap:4px;justify-content:center}.btn,.page-btn{min-height:42px}.page-btn,.page-ellipsis{min-width:34px;padding:0 8px;font-size:12px;border-radius:10px}}
@media (max-width:420px){.app{padding:8px}.hero-main{padding:15px 13px}.panel-body{padding:11px}.summary{grid-template-columns:1fr}.page-btn{min-width:32px;font-size:11px;padding:0 7px}.page-ellipsis{min-width:24px;font-size:11px}}