body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;margin:16px;background:#f6f7fb;color:#111}
h1{margin:0 0 12px;font-size:20px}
.row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:2rem}
.panel{background:#fff;border-radius:8px;padding:12px;box-shadow:0 2px 6px rgba(0,0,0,0.06);min-width:280px}
.panel button {
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}
.panel > div[style*="margin-bottom:8px"] {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
select,input,button,textarea{font-size:14px;padding:6px;border:1px solid #ddd;border-radius:6px}
button{cursor:pointer}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:#eee;margin:4px}
.color-chip{width:14px;height:14px;border-radius:4px;display:inline-block;margin-right:2px;}
.color-y{background:#f6c34a} .color-g{background:#7cc47b} .color-b{background:#6fa3ff}
.color-r{background:#f08080} .color-grey{background:#cfcfcf}
.bg-y { background: #fcf3d5; }
.bg-g { background: #e5f2e4; }
.bg-b { background: #e3ecff; }
.bg-r { background: #f9e1e1; }
.bg-grey{background:#cfcfcf30}
.bg-w{background:#fff}
.character-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: start;
  margin-bottom: 8px;
}
.character-card {
  flex: 0 1 auto;
  width: 80px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 6px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.character-card.active {
  background: #5ab2;
  border: 1px solid #028;
}
.character-card:hover {
  opacity: 0.8;
  border-color: #5ab;
  transform: translateY(-1px);
}
.character-card input {
  display: none;
}
.character-card input:checked + .character-name {
  color: #024;
  font-weight: 600;
}
.character-name {
  display: block;
  user-select: none;
  font-size: 13px;
}
#inventoryHeaderWrapper {
  position: sticky;
  top: 0;
  background: #fff;
}
#inventoryHeader {
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:4px;
  padding: 4px 0;
}
.effect-list, .disadvantage-list{padding-left:1.25rem;margin:0;}
.effect-row, .disadvantage-row{display:flex;gap:8px;align-items:center;margin:6px 0}
.effect-row .ts-wrapper, .disadvantage-row .ts-wrapper {width: 70vw}
.effect-row .btn-secondary,
.disadvantage-row .btn-secondary {
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
}
.effect-row button:not(:first-child),
.disadvantage-row button:not(:first-child) {
  margin-left: 4px;
}
.effect-row .btn-secondary:hover,
.disadvantage-row .btn-secondary:hover {
  border-color: #999;
  background: #f5f5f5;
}
.effect-row .btn-secondary[id*="remove"],
.disadvantage-row .btn-secondary[id*="remove"],
#resetDesiredBtn, #resetExcludedBtn, #clearResultsBtn,
#inventoryHeader #deleteRelics,
#inventoryList .relic-item .btn-secondary[data-id] {
  color: #c33;
  border-color: #c33;
}
.effect-row .btn-secondary[id*="remove"]:hover,
.disadvantage-row .btn-secondary[id*="remove"]:hover,
#resetDesiredBtn:hover, #resetExcludedBtn:hover, #clearResultsBtn:hover,
#inventoryHeader #deleteRelics:hover,
#inventoryList .relic-item .btn-secondary[data-id] {
  background: #fdd;
}
#inventoryList .color-chip {
  cursor: pointer;
}
#addDesiredBtn, #addExcludedBtn, #openAddRelic,
#importCsvOverwrite, #importCsvAppendStart, #importCsvAppendEnd {
  background: #2b6cb0;
  color: #fff;
  border: none;
}
#addDesiredBtn:hover, #addExcludedBtn:hover, openAddRelic:hover,
#importCsvOverwrite:hover, #importCsvAppendStart:hover, #importCsvAppendEnd:hover {
  background: #1d4f91;
}

.btn-tertiary {
  background: #4caf7d;
  color: #fff;
  border: none;
}
.btn-tertiary:hover {
  background: #3c8c66;
}

.result-card {
  border: 1px solid #ddd;
  background: #fffefc;
  padding: 8px;
  border-radius: 8px;
  margin: 8px 0;
  transition: background 0.2s, border-color 0.2s;
}
.result-card:nth-child(even) {
  border-color: #bbb;
  background: #0001;
}
.relic-item{display:flex;align-items:center;gap:8px;margin:6px 0;padding:6px;border:1px solid #bbb;border-radius:6px}
.advantage.desired{color: #f19; font-weight: 600;}
.effect, .disadvantage {
  cursor: pointer;
}
.disadvantage{margin-left: 4px; color: #2b6cb0}
.heading{
  font-size: 14px;
  font-weight: 600;
  color: #333;
  display: block;
  margin: 12px 0 6px;
  padding: 4px 0;
  border-left: 4px solid #5ab;
  padding-left: 6px;
  background: #f8fafc;
  border-radius: 2px;
}
.small{font-size:13px;color:#555}
.tiny{font-size:10px;color:#aaa}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.muted{color:#666;font-size:13px}
.btn-secondary{background:#fff;border:1px solid #ddd}
.btn-primary{background:#2b6cb0;color:#fff;border:none}
.btn-secondary:disabled,
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.footer{margin-top:12px;color:#666;font-size:13px}
label{display:block;font-size:13px;margin-bottom:6px}
#importRelicsModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:80;align-items:center;justify-content:center}
#resultsArea{}
#inventoryCount {
  font-size: 12px;
  color: #333;
  padding-bottom:6px;
}
.tab-header {
  display: flex;
  gap: 8px;
}
.tab-btn {
  padding: 8px 16px;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
}
.tab-btn.active {
  background: #fff;
  border-bottom: 1px solid #fff;
  font-weight: bold;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
/* デモモード ON/OFF */
.demo-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 8px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP",sans-serif;
}
.switch-input{
  position:absolute;
  opacity:0;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;
}
.switch{
  --w:48px;
  --h:28px;
  --knob:22px;
  --on-bg:#2b6cb0;
  --off-bg:#e6eef8;
  --border:#d0d7df;
  display:inline-block;
  width:var(--w);
  height:var(--h);
  background:var(--off-bg);
  border:1px solid var(--border);
  border-radius:999px;
  margin: 0;
  padding: (var(--h) - var(--knob)) / 2;
  box-sizing:border-box;
  position:relative;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
  cursor:pointer;
  vertical-align:middle;
}
.switch-knob{
  position:absolute;
  top:50%;
  left:4px;
  width:var(--knob);
  height:var(--knob);
  transform:translateY(-50%);
  background:#fff;
  border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  transition: left .18s ease, transform .12s ease;
  will-change: left;
}
.switch-input:checked + .switch{
  background: linear-gradient(90deg, rgba(43,108,176,0.98), rgba(57,119,184,0.98));
  border-color: rgba(43,108,176,0.9);
}
.switch-input:checked + .switch .switch-knob{
  left: calc(100% - var(--knob) - 4px);
}
.switch-input:focus + .switch{
  box-shadow: 0 0 0 4px rgba(43,108,176,0.12);
  outline: none;
}
.switch-input:disabled + .switch{
  opacity: .5;
  cursor: not-allowed;
}
.switch-label{font-size:14px;color:#333}
.switch-label strong{margin-left:6px;color:#2b6cb0}
.switch, .switch-label { user-select: none; }
.tingle-modal-box__content {
  padding: 1.5rem;
  p {
    margin: 0.5rem 0;
  }
}
.tingle-modal-box__footer {
  padding: 0 1.5rem 1.5rem 1.5rem;
  button {
    margin: 0 0.5rem 0 0;
  }
}