:root{
  --bg:#070a12;
  --panel:rgba(19,24,36,0.72);
  --panel-2:rgba(28,34,48,0.72);
  --line:rgba(255,255,255,0.10);
  --text:#eef4ff;
  --muted:rgba(235,241,255,0.70);
  --cyan:#00e5ff;
  --green:#22ff88;
  --violet:#b388ff;
  --danger:#ff5f6d;
  --shadow:0 18px 38px rgba(0,0,0,0.32);
  --blur:18px;
  --radius:22px;
  --sheet-collapsed:126px;
  --sheet-expanded:56vh;
  --topbar-h:66px;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  width:100%;
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  overflow:hidden;
}

body{
  -webkit-tap-highlight-color:transparent;
}

button,input,select{
  font:inherit;
}

.screenPick{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,229,255,0.18), transparent 26%),
    radial-gradient(circle at 80% 25%, rgba(179,136,255,0.16), transparent 24%),
    radial-gradient(circle at 50% 80%, rgba(34,255,136,0.10), transparent 28%),
    linear-gradient(180deg, #070a12 0%, #0a1020 100%);
}

.pickCard{
  width:min(92vw,420px);
  padding:28px 22px;
  border-radius:28px;
  background:rgba(19,24,36,0.72);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.pickLogo{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:24px;
  box-shadow:0 10px 24px rgba(0,0,0,0.28);
}

.pickBtn{
  width:100%;
  min-height:54px;
  border:none;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(0,229,255,0.22), rgba(34,255,136,0.22));
  color:var(--text);
  font-weight:800;
  letter-spacing:0.02em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);
  cursor:pointer;
}

.pickErr{
  width:100%;
  font-size:13px;
  color:#ffd7dc;
  background:rgba(255,95,109,0.12);
  border:1px solid rgba(255,95,109,0.24);
  border-radius:14px;
  padding:10px 12px;
}

.screenMain{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  background:#03060c;
}

.topbar{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  padding:10px 14px;
  position:relative;
  z-index:20;
  background:linear-gradient(180deg, rgba(8,10,16,0.72), rgba(8,10,16,0.22));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brandLogo{
  width:42px;
  height:42px;
  border-radius:14px;
  object-fit:cover;
  box-shadow:0 8px 18px rgba(0,0,0,0.24);
}

.brandText{
  min-width:0;
}

.brandTitle{
  font-weight:900;
  font-size:15px;
  letter-spacing:0.03em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brandSub{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mapWrap{
  position:relative;
  flex:1;
  min-height:0;
}

.map{
  position:absolute;
  inset:0;
}

.rightRail{
  position:absolute;
  right:10px;
  top:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:12;
}

.miniBtn{
  width:56px;
  height:56px;
  border:none;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(85,84,82,0.88), rgba(59,59,57,0.88));
  color:#eef4ff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  cursor:pointer;
}

.miniBtn.danger{
  box-shadow:
    0 14px 26px rgba(0,0,0,0.34),
    inset 0 0 0 1px rgba(255,95,109,0.28);
}

.miniBtn:active{
  transform:scale(0.98);
}

.miniIcon{
  font-size:28px;
  font-weight:900;
  line-height:1;
}

.chips{
  position:absolute;
  left:10px;
  top:16px;
  display:flex;
  gap:8px;
  z-index:12;
  flex-wrap:wrap;
  max-width:calc(100% - 100px);
}

.chip{
  min-height:34px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(16,21,31,0.72);
  border:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#eef4ff;
  font-size:12px;
  font-weight:800;
  box-shadow:0 10px 24px rgba(0,0,0,0.22);
}

.sheetHandle{
  position:absolute;
  left:50%;
  bottom:calc(var(--sheet-collapsed) - 12px);
  transform:translateX(-50%);
  width:72px;
  height:24px;
  border:none;
  border-radius:999px;
  background:rgba(16,21,31,0.76);
  box-shadow:0 10px 24px rgba(0,0,0,0.22);
  z-index:14;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.sheetPill{
  width:36px;
  height:5px;
  border-radius:999px;
  background:rgba(235,241,255,0.56);
}

.sheet{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--sheet-collapsed);
  background:rgba(20,24,32,0.58);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-top-left-radius:28px;
  border-top-right-radius:28px;
  border-top:1px solid rgba(255,255,255,0.10);
  z-index:13;
  box-shadow:0 -18px 42px rgba(0,0,0,0.30);
  transition:height .22s ease;
  overflow:hidden;
}

.sheet.expanded{
  height:var(--sheet-expanded);
}

.sheetTop{
  padding:20px 14px 10px;
}

.search{
  width:100%;
  height:48px;
  border:none;
  border-radius:16px;
  background:rgba(255,255,255,0.08);
  color:var(--text);
  padding:0 14px;
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}

.search::placeholder{
  color:rgba(235,241,255,0.46);
}

.list{
  height:calc(100% - 78px);
  overflow:auto;
  padding:0 12px 16px;
}

.item{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  margin-bottom:12px;
  border-radius:22px;
  background:rgba(255,255,255,0.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}

.main-empty{
  border-left:3px solid rgba(255,255,255,0.18);
}

.main-started{
  border-left:3px solid rgba(34,255,136,0.80);
}

.main-done{
  border-left:3px solid rgba(0,229,255,0.78);
}

.itemInfo{
  min-width:0;
  flex:1;
}

.itemTitleRow{
  display:flex;
  align-items:center;
  gap:8px;
}

.itemTitle{
  font-size:15px;
  font-weight:900;
  letter-spacing:0.02em;
  min-width:0;
}

.itemSub{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  word-break:break-word;
}

.itemState{
  margin-top:10px;
  font-size:13px;
  color:#eef4ff;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.stateDot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(235,241,255,0.55);
  box-shadow:0 0 0 4px rgba(255,255,255,0.04);
  flex:0 0 auto;
}

.stateDot.started{
  background:var(--green);
}

.stateDot.done{
  background:var(--cyan);
}

.itemActions{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:0 0 auto;
}

.rowBtns{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}

.smallBtn{
  min-width:92px;
  height:42px;
  border:none;
  border-radius:16px;
  background:rgba(255,255,255,0.08);
  color:#eef4ff;
  font-weight:800;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);
}

.smallBtn.nav{
  box-shadow:inset 0 0 0 1px rgba(0,229,255,0.34);
}

.smallBtn.start{
  box-shadow:inset 0 0 0 1px rgba(34,255,136,0.28);
}

.smallBtn.finish{
  box-shadow:inset 0 0 0 1px rgba(179,136,255,0.34);
}

.smallBtn:disabled{
  opacity:0.42;
  cursor:not-allowed;
}

.editBtn{
  width:28px;
  height:28px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  color:#eef4ff;
  font-size:14px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);
}

.editBtn:active{
  transform:scale(0.97);
}

.overlay{
  position:fixed;
  inset:0;
  z-index:40;
  background:rgba(5,7,12,0.52);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
}

.formCard{
  width:min(100%,520px);
  max-height:90vh;
  overflow:auto;
  border-radius:28px;
  background:rgba(20,24,32,0.92);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 24px 50px rgba(0,0,0,0.34);
  padding:18px;
}

.formTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.formTitle{
  font-size:18px;
  font-weight:900;
}

.formSub{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
}

.xBtn{
  width:42px;
  height:42px;
  border:none;
  border-radius:14px;
  background:rgba(255,255,255,0.08);
  color:#eef4ff;
  font-weight:900;
  cursor:pointer;
}

.fLabel{
  display:block;
  margin:10px 0 8px;
  font-size:13px;
  color:#eef4ff;
  font-weight:700;
}

.fInput{
  width:100%;
  min-height:48px;
  border:none;
  outline:none;
  border-radius:16px;
  background:rgba(255,255,255,0.08);
  color:#eef4ff;
  padding:0 14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}

select.fInput{
  appearance:none;
  -webkit-appearance:none;
}

.row2{
  display:flex;
  gap:10px;
  align-items:end;
  margin-top:4px;
}

.col{
  flex:1;
  min-width:0;
}

.fMini{
  min-width:84px;
  height:48px;
  border:none;
  border-radius:16px;
  background:rgba(0,229,255,0.14);
  color:#eef4ff;
  font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(0,229,255,0.22);
  cursor:pointer;
}

.formActions{
  margin-top:16px;
}

.aBtn{
  width:100%;
  height:52px;
  border:none;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(0,229,255,0.22), rgba(34,255,136,0.24));
  color:#eef4ff;
  font-weight:900;
  letter-spacing:0.02em;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}

.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:60;
  min-height:42px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(16,21,31,0.88);
  color:#eef4ff;
  font-weight:800;
  box-shadow:0 18px 34px rgba(0,0,0,0.30);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.heightCard{
  width:100%;
  padding:12px 12px 10px;
  border-radius:16px;
  background:rgba(255,255,255,0.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
  margin-bottom:10px;
}

.heightTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.heightHint{
  font-size:12px;
  color:rgba(235,241,255,0.68);
}

.heightValue{
  font-size:15px;
  font-weight:800;
  color:#eef4ff;
  letter-spacing:0.02em;
}

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

.heightStepBtn{
  width:40px;
  height:40px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,0.10);
  color:#eef4ff;
  font-size:22px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);
  flex:0 0 auto;
}

.heightStepBtn:active{
  transform:scale(0.97);
}

.heightRange{
  flex:1;
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  margin:6px 0 8px;
}

.heightRange:focus{
  outline:none;
}

.heightRange::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(0,229,255,0.45), rgba(34,255,136,0.55));
}

.heightRange::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#eef4ff;
  border:2px solid rgba(0,0,0,0.18);
  margin-top:-8px;
  box-shadow:0 8px 18px rgba(0,0,0,0.28);
}

.heightRange::-moz-range-track{
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(0,229,255,0.45), rgba(34,255,136,0.55));
}

.heightRange::-moz-range-thumb{
  width:24px;
  height:24px;
  border:none;
  border-radius:50%;
  background:#eef4ff;
  box-shadow:0 8px 18px rgba(0,0,0,0.28);
}

.heightScale{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:rgba(235,241,255,0.58);
}

@media (max-width:640px){
  :root{
    --sheet-collapsed:132px;
    --sheet-expanded:60vh;
  }

  .topbar{
    padding:10px 10px;
  }

  .brandTitle{
    font-size:14px;
  }

  .miniBtn{
    width:54px;
    height:54px;
    border-radius:18px;
  }

  .smallBtn{
    min-width:86px;
  }

  .item{
    padding:12px;
  }
}