/* ld_doll_gacha_sim.css */
:root{
  --bg:#0f1012;
  --panel:#15171b;
  --panel2:#101216;
  --text:#e8e8ea;
  --muted:#a7a7b0;
  --border:#30333a;
  --border2:#3c404a;
  --danger:#ff4b4b;
  --ok:#5ee06a;

  --card-radius:12px;
  --tap:44px;

  /* rarity bg (Display P3 hex) */
  --rN:#AFA68C;
  --rR:#3F4C82;
  --rE:#683A8E;
  --rL:#D2A349;
  --rM:#E8864A;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Sans", "Meiryo", sans-serif;
  background:var(--bg);
  color:var(--text);
}

.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background:linear-gradient(180deg, rgba(15,16,18,0.98), rgba(15,16,18,0.85));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  padding:10px 12px 10px;
}

.topbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.topbar-title{
  font-weight:700;
  font-size:16px;
  letter-spacing:0.2px;
  margin:0;
}

.step-tabs{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:nowrap;
}

.step-btn{
  height:26px;
  width:26px;
  min-width:26px;
  padding:0;
  border-radius:999px;
  border:1px solid var(--border2);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.step-btn[aria-current="step"]{
  border-color:rgba(255,255,255,0.35);
  background:rgba(255,255,255,0.10);
}
.step-btn:disabled{
  opacity:0.35;
  cursor:not-allowed;
}

.main{
  flex:1;
  padding:8px;
  max-width:520px;
  width:100%;
  margin:0 auto;
}

.section{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:9px;
  margin-bottom:12px;
}

.section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:700;
  font-size:14px;
  margin-bottom:10px;
}
.section-sub{
  font-size:12px;
  color:var(--muted);
  font-weight:500;
}

.row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.btn{
  height:var(--tap);
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border2);
  background:rgba(255,255,255,0.06);
  color:var(--text);
  font-weight:700;
  cursor:pointer;
}
.btn:disabled{
  opacity:0.35;
  cursor:not-allowed;
}
.btn.primary{
  background:rgba(94,224,106,0.14);
  border-color:rgba(94,224,106,0.35);
}
.btn.danger{
  background:rgba(255,75,75,0.12);
  border-color:rgba(255,75,75,0.35);
}

.btn.reset{
  background:rgba(255,255,255,0.14);
  border-color:rgba(255,255,255,0.28);
}

.cta-row{
  display:flex;
  gap:12px;
  margin-top:10px;
}
.cta-row .btn{
  flex:1 1 0;
  height:52px;
  border-radius:18px;
  font-size:16px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:rgba(255,255,255,0.04);
  font-size:12px;
  color:var(--muted);
}

.tabs{
  display:flex;
  gap:10px;
  margin-bottom:10px;
}
.tab-btn{
  flex:1 1 0;
  height:44px;
  min-width:0;
  padding:0 10px;
  border-radius:14px;
  border:1px solid var(--border2);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
  font-size:14px;
}
.tab-btn[aria-current="true"]{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.35);
}

.doll-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:6px;
}

.card{
  border:1px solid var(--border2);
  border-radius:14px;
  background:var(--panel2);
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:6px;
  min-height:70px;
  position:relative;
}

.card-top{
  display:flex;
  gap:6px;
  align-items:flex-start;
}

.card.selected{
  border:2px solid var(--danger);
}

.card.disabled{
  pointer-events:none;
}
.card.disabled::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(0,0,0,0.55);
  z-index:1;
}
.card > *{ position:relative; z-index:0; }

.card-block-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 6px;
  font-weight:900;
  font-size:22px;
  color:rgba(255,60,60,0.95);
  text-shadow:0 1px 6px rgba(0,0,0,0.85);
  z-index:2;
}
.card-left{
  width:42px;
  height:42px;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,0.06);
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-left img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.card-right{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}

.name-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}
.name{
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.score{
  font-size:12px;
  color:rgba(255,255,255,0.90);
  padding:3px 6px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.18);
  flex:0 0 auto;
}

.grade-row{
  display:flex;
  gap:3px;
  flex-wrap:nowrap;
}
.gbtn{
  height:24px;
  min-width:20px;
  padding:0;
  border-radius:7px;
  border:1px solid var(--border2);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-weight:900;
  font-size:10px;
  cursor:pointer;
}
.gbtn.on{
  background:rgba(255,255,255,0.16);
  border-color:rgba(255,255,255,0.35);
}

.desc{
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.16);
  border-radius:10px;
  padding:6px 8px;
  font-size:12px;
  line-height:1.25;
  color:rgba(255,255,255,0.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
}

/* between list and slot actions */
.between-bar{
  margin:-4px 0 12px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  display:flex;
  justify-content:center;
  gap:10px;
}
.arrow-btn{
  width:120px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.12);
  color:var(--text);
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
}
.arrow-btn span{font-size:12px; color:rgba(255,255,255,0.9); font-weight:800;}
.arrow-btn:disabled{opacity:0.35; cursor:not-allowed;}
.arrow-btn.down{border-color:rgba(94,224,106,0.35); background:rgba(94,224,106,0.08);} 
.arrow-btn.up{border-color:rgba(255,75,75,0.35); background:rgba(255,75,75,0.06);} 

.card-bgN{background: color-mix(in srgb, var(--rN) 55%, var(--panel2) 45%);}
.card-bgR{background: color-mix(in srgb, var(--rR) 55%, var(--panel2) 45%);}
.card-bgE{background: color-mix(in srgb, var(--rE) 55%, var(--panel2) 45%);}
.card-bgL{background: color-mix(in srgb, var(--rL) 55%, var(--panel2) 45%);}
.card-bgM{background: color-mix(in srgb, var(--rM) 55%, var(--panel2) 45%);}

.slot-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.slot-card{
  position:relative;
  border:1px solid var(--border2);
  border-radius:16px;
  background:rgba(0,0,0,0.15);
  padding:8px;
  display:flex;
  align-items:stretch;
  gap:8px;
  min-height:66px;
}
.slot-card.selected{
  border:2px solid var(--danger);
}
.slot-left{
  width:52px;
  height:52px;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.slot-left img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.slot-right{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.slot-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.slot-name{
  font-weight:900;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.slot-chips{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.chip{
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(0,0,0,0.18);
  font-size:12px;
  color:rgba(255,255,255,0.92);
}
.chip.grade{
  color:#111;
  font-weight:900;
}
.chip.grade.N{background:var(--rN);}
.chip.grade.R{background:var(--rR); color:#fff;}
.chip.grade.E{background:var(--rE); color:#fff;}
.chip.grade.L{background:var(--rL);}
.chip.grade.M{background:var(--rM);}

.slot-desc{
  font-size:12px;
  color:rgba(255,255,255,0.92);
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


.slot-desc-btn{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:0;
  margin-top:3px;
  font-size:12px;
  color:rgba(255,255,255,0.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
}
.slot-desc-btn:active{ opacity:0.85; }

@media (max-width: 380px){
  .main{padding:8px;}
  .section{padding:8px;}
  .doll-grid{gap:6px;}
  .card{padding:6px;}
  .card-left{width:40px; height:40px;}
  .gbtn{min-width:20px; height:24px; font-size:10px;}
  .arrow-btn{width:108px;}
}

.slot-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}
.icon-btn{
  height:34px;
  min-width:34px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid var(--border2);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.icon-btn:disabled{opacity:0.35; cursor:not-allowed;}
.icon-btn.lock.on{
  background:rgba(255,75,75,0.85);
  border-color:rgba(255,75,75,0.95);
}

.panel-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}
.panel-item{
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.14);
  border-radius:12px;
  padding:8px 10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.panel-item .t{
  font-weight:900;
  font-size:13px;
}
.panel-item .d{
  font-size:12px;
  color:rgba(255,255,255,0.90);
  margin-top:2px;
}
.panel-item.ref{
  opacity:0.65;
}
.panel-item .x{
  height:30px;
  min-width:30px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}

.footer{
  border-top:1px solid var(--border);
  padding:12px;
  color:var(--muted);
  text-align:center;
  font-size:12px;
}

/* modal */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:100;
  padding:12px;
}
.modal{
  width:min(520px, 100%);
  background:var(--panel);
  border:1px solid var(--border2);
  border-radius:18px;
  padding:12px;
}
.modal-title{
  font-weight:900;
  font-size:14px;
  margin-bottom:10px;
}

.modal-grade-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:2px 0 8px;
}
.modal-grade-row .label{
  font-size:12px;
  color:rgba(255,255,255,0.7);
  flex:0 0 auto;
}
.modal-grade-row .btn-group{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex:1 1 auto;
}
.modal-grade-row .gbtn{
  height:28px;
  min-width:28px;
}
.modal-value{
  font-weight:900;
  font-size:18px;
  letter-spacing:0.3px;
}
.slider{
  width:100%;
  margin:10px 0 6px;
}
.modal-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:8px;
}
.modal-grid .btn{
  height:40px;
  border-radius:12px;
}
.modal-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.modal-actions .btn{
  flex:1;
}
.preset-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.preset{
  height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:rgba(255,255,255,0.06);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}

/* small */
.small{font-size:12px; color:var(--muted);}


/* --- layout tweaks (20260129b) --- */
.small{font-size:12px; color:var(--muted);}

.list-head .head-right{
  display:flex;
  gap:8px;
  align-items:center;
}
.list-head .head-left{
  display:flex;
  align-items:center;
  gap:6px;
}
.caret{
  display:inline-flex;
  width:16px;
  justify-content:center;
  opacity:0.85;
  transform: translateY(-1px);
}

.btn.compact{
  height:34px;
  border-radius:999px;
  padding:0 14px;
}

/* slot compact row */
.slot-move{
  width:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.04);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  flex:0 0 auto;
}
.slot-move.empty{
  border-color:transparent;
  background:transparent;
}
.move-btn{
  height:30px;
  border:0;
  background:transparent;
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.move-btn + .move-btn{
  border-top:1px solid rgba(255,255,255,0.14);
}
.move-btn:disabled{
  opacity:0.25;
  cursor:not-allowed;
}

.slot-mid{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}
.slot-tail{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:space-between;
  gap:6px;
  flex:0 0 auto;
  align-self:stretch;
  padding-top:0;
}

.slot-tail-top{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}

.slot-tail-bottom{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-top:auto;
}

.slot-tail-bottom .chip.score{
  min-width:64px;
  text-align:right;
  padding:6px 10px;
  font-weight:700;
}
.slot-tail-spacer{
  display:inline-block;
  width:34px;
  height:34px;
}

.slot-card .slot-desc-btn{
  border:0;
  background:transparent;
  padding:0;
  border-radius:0;
  color:rgba(255,255,255,0.92);
}

body.modal-open{ touch-action: manipulation; }
.modal-backdrop{ touch-action: manipulation; }


/* small delete buttons (do not change card size) */
.xbtn{
  position:absolute;
  top:5px;
  right:5px;
  width:18px;
  height:18px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(0,0,0,0.35);
  color:rgba(255,255,255,0.95);
  font-weight:900;
  font-size:13px;
  line-height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  z-index:3;
}
.xbtn:active{ transform:scale(0.96); }
.card .xbtn{ z-index:2; }
.card.disabled .xbtn{ pointer-events:auto; }
.xbtn.x-slot{ top:6px; right:6px; }

/* inline delete button for slots (placed next to grade) */
.xbtn-inline{
  width:18px;
  height:18px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(0,0,0,0.35);
  color:rgba(255,255,255,0.95);
  font-weight:900;
  font-size:13px;
  line-height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.xbtn-inline:active{ transform:scale(0.96); }


/* --- Step5: keypad --- */
.kv-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
  margin:10px 0 10px;
}
.kv-box{
  border:1px solid var(--border2);
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  color:var(--text);
  padding:10px 10px;
  text-align:left;
  cursor:pointer;
}
.kv-box.on{
  border-color:rgba(255,255,255,0.45);
  box-shadow:0 0 0 2px rgba(255,255,255,0.08) inset;
}
.kv-box .k{ font-weight:900; font-size:12px; color:rgba(255,255,255,0.92); }
.kv-box .v{ font-weight:1000; font-size:20px; margin-top:4px; }
.kv-box .unit{ font-size:12px; font-weight:900; color:rgba(255,255,255,0.80); }
.kv-box .h{ font-size:11px; color:rgba(255,255,255,0.55); margin-top:4px; }

.keypad{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
  margin:8px 0 12px;
}
.kbtn{
  height:48px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.14);
  color:var(--text);
  font-weight:1000;
  font-size:18px;
  cursor:pointer;
}
.kbtn:active{ transform: translateY(1px); }
.kbtn.zero{ grid-column: 1 / span 2; }
.kbtn.bs{ font-size:14px; font-weight:900; }

.btn.wide{
  min-width: 180px;
}

/* --- Step6: situation grid & forms --- */
.situ-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:6px;
}
.situ-tile{
  position:relative;
  border:2px solid rgba(255,255,255,0.14);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,0.03);
  aspect-ratio: 1 / 1;
}
.situ-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.situ-tile .situ-num{
  position:absolute;
  top:4px;
  left:4px;
  padding:2px 5px;
  border-radius:8px;
  font-size:10px;
  font-weight:1000;
  background:rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.18);
}
.situ-tile .situ-badge{
  position:absolute;
  left:4px;
  right:4px;
  bottom:4px;
  padding:3px 6px;
  border-radius:10px;
  font-size:10px;
  font-weight:1000;
  text-align:center;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.18);
  color:#fff;
}
.situ-tile.lock{
  border-color: rgba(74,163,255,0.95);
  background: #f7f9ff;
}
.situ-tile.lock .situ-num,
.situ-tile.lock .situ-badge{
  background: rgba(255,255,255,0.85);
  color: #121316;
  border-color: rgba(0,0,0,0.12);
}
.situ-tile.c1{ border-color: rgba(255,75,75,0.95); }
.situ-tile.c2{ border-color: rgba(255,160,55,0.95); }
.situ-tile.c3{ border-color: rgba(255,225,80,0.95); }
.situ-tile.other{ border-color: rgba(210,200,180,0.35); }
.situ-tile.other img{ filter: grayscale(0.65) sepia(0.55) saturate(0.75); opacity:0.88; }

.form-block{
  margin-top:12px;
  padding:10px 10px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,0.02);
}
.form-title{
  font-weight:1000;
  font-size:13px;
  margin-bottom:8px;
}
.seg{
  display:flex;
  gap:8px;
}
.seg-btn{
  flex:1 1 auto;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.14);
  color:var(--text);
  font-weight:1000;
  font-size:12px;
  cursor:pointer;
}
.seg-btn.on{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.35);
}
.seg-btn.dis{
  opacity:0.35;
}
.check{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-weight:900;
  font-size:12px;
}
.check input{
  width:18px;
  height:18px;
  margin-top:2px;
}
.end-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:8px;
}
.end-item{
  border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;
  padding:8px 8px;
  background:rgba(0,0,0,0.12);
}
.end-k{ font-weight:1000; font-size:12px; }
.end-d{ font-size:10px; color:rgba(255,255,255,0.70); margin:4px 0 6px; line-height:1.2; }
.sel{
  width:100%;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.18);
  color:var(--text);
  font-weight:1000;
}
.acc-btn{
  width:100%;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(0,0,0,0.12);
  color:var(--text);
  font-weight:1000;
  cursor:pointer;
}
.id-list{
  margin-top:8px;
  max-height: 260px;
  overflow:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.10);
}
.id-row{
  display:grid;
  grid-template-columns: 38px 1fr 1fr;
  gap:8px;
  padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.id-row:last-child{ border-bottom:none; }
.id-n{ font-weight:1000; font-size:12px; }
.id-name{ font-weight:900; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.id-desc{ font-size:11px; color:rgba(255,255,255,0.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


/* Step6 N2 range UI */
.n2-range{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.n2-row{display:flex;align-items:center;gap:6px}
.n2-row.presets{gap:8px;flex-wrap:wrap}
.sel.mini{width:64px;padding:6px 8px}
.n2-l{min-width:34px;font-size:12px;opacity:.9}
.n2-mid{opacity:.8}
.chip{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;border-radius:12px;padding:4px 10px;font-size:12px}
.chip:active{transform:scale(.98)}
.small.warn{color:#ff6b6b}


/* --- Step7 additions --- */
.form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.field{flex:1 1 160px;min-width:140px}
.field-label{font-size:12px;opacity:.85;margin-bottom:4px;font-weight:900}
.inp,.sel{width:100%;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,0.18);background:rgba(0,0,0,0.14);color:var(--text);padding:0 10px;font-size:14px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13px}
.chk input{margin-top:2px}
.panel-title{font-weight:1000;font-size:13px;margin-bottom:8px}
.quant-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
@media (max-width:380px){.quant-grid{grid-template-columns:repeat(2,1fr)}}
.qcell{border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.03);border-radius:12px;padding:8px;text-align:center}
.qk{font-size:12px;opacity:.85;font-weight:900}
.qv{font-size:14px;font-weight:1000;margin-top:4px}
.progress{margin-top:10px}
.progress-text{font-size:12px;opacity:.85;margin-bottom:6px}
.progress-bar{height:8px;border-radius:999px;background:rgba(255,255,255,0.10);overflow:hidden}
.progress-bar-inner{height:100%;background:rgba(255,255,255,0.32)}
.graph-wrap{padding-top:10px}
.graph-wrap canvas{width:100%;height:auto;border:1px solid rgba(255,255,255,0.14);border-radius:12px;background:rgba(0,0,0,0.10)}
.btn.wide{flex:1 1 auto}


/* Stepper for end conditions */
.stepper{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:6px;}
.stepper-val{min-width:28px;text-align:center;font-weight:700;}
.btn.mini{padding:6px 10px;font-size:12px;line-height:1;border-radius:10px;}


/* Step6 end condition UI: 3 horizontal rows */
.end-rows{display:flex;flex-direction:column;gap:10px;}
.end-row{
  border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;
  padding:10px;
  background:rgba(0,0,0,0.12);
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.end-left{min-width:86px}
.end-d2{font-size:11px;color:rgba(255,255,255,0.75);margin-top:4px;line-height:1.2;}
.end-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.end-right-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.end-row .stepper{margin-top:0;justify-content:flex-start;}

.n2-range-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.n2-range-label{min-width:34px;font-size:12px;opacity:.9}
.end-row .sel.mini{width:56px;padding:6px 8px}
.end-row .chip{font-size:11px}
.n2-sp{flex:1 1 8px;min-width:8px;}
@media (max-width:360px){
  .end-left{min-width:74px}
}


/* Step6 end-condition sets */
.endsets{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.endset{
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px;
  background: rgba(255,255,255,0.03);
}
.endset-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.endset-name{
  font-weight:800;
  font-size:13px;
}
.endset-note{
  font-size:12px;
}
.endset-cards{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:6px;
}
.endcard{
  border:1px solid var(--line);
  border-radius:12px;
  padding:6px 6px 7px;
  background: rgba(0,0,0,0.18);
  min-height:54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.endcard:disabled{
  opacity:0.85;
  cursor:not-allowed;
}
.endcard-top{
  font-size:11px;
  opacity:0.85;
  margin-bottom:4px;
}
.endcard-val{
  font-size:12px;
  font-weight:800;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.endtok-none{
  color: rgba(255,255,255,0.75);
}
.endtok-c1{
  border-color: rgba(255,80,80,0.8);
  background: rgba(255,80,80,0.15);
  color: rgba(255,160,160,1);
}
.endtok-c2{
  border-color: rgba(255,165,0,0.75);
  background: rgba(255,165,0,0.14);
  color: rgba(255,210,120,1);
}
.endtok-c3{
  border-color: rgba(80,180,255,0.75);
  background: rgba(80,180,255,0.14);
  color: rgba(170,220,255,1);
}
.endtok-locked{
  border-color: rgba(255,0,0,0.85);
  background: rgba(255,0,0,0.20);
  color: rgba(255,170,170,1);
}
.check.mini{
  font-size:12px;
}


/* chip as a button */
button.chip{
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  font-family:inherit;
}
button.chip:focus{
  outline:2px solid rgba(255,255,255,0.22);
  outline-offset:2px;
}


/* ---- save/load (step1) ---- */
.save-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.save-row .btn{
  flex:1 1 120px;
}
.save-meta{
  margin-top:8px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}
.save-modal-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}