:root{
  --ink:rgba(0,0,0,.5);
  --mac-win:rgba(8,8,8,.94);
  --mac-bar:rgba(4,4,4,.94);
  --mac-field:rgba(0,0,0,.3);
  --mac-ctl:rgba(255,255,255,.12);
  --mac-hair:rgba(255,255,255,.08);
  --mac-hair-2:rgba(255,255,255,.045);
  --mac-txt:#e9ecf1;
  --mac-2:#8b93a3;
  --mac-3:#565e6d;
  --mac-blue:#3a3d4a;
  --mac-green:#3a3d4a;
  --mac-red:#ef4444;
  --mac-amber:#ffd60a;
  --mac-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mac-num:ui-monospace,"SF Mono",Menlo,monospace;
  --spring:cubic-bezier(.32,1.28,.42,1);
}

#dock{
  position:fixed;left:50%;transform:translateX(-50%);z-index:45;
  bottom:calc(64px + env(safe-area-inset-bottom));
  display:flex;align-items:flex-end;gap:5px;
  padding:6px;border-radius:20px;
  background:#0a0a0b;
  border:1px solid var(--mac-hair);
  box-shadow:0 10px 32px rgba(0,0,0,.55);
  max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;
}
#dock::-webkit-scrollbar{display:none}

.dk{
  flex:none;width:42px;height:42px;position:relative;
  display:grid;place-items:center;border-radius:12px;
  background:rgba(255,255,255,.07);
  border:1px solid var(--mac-hair);
  color:var(--mac-txt);
  transition:transform .32s var(--spring), background .2s;
}
.dk svg{width:20px;height:20px;pointer-events:none;opacity:.92}
@media(hover:hover){ .dk:hover{transform:translateY(-9px) scale(1.14)} }
.dk:active{transform:translateY(-3px) scale(1.04)}

.dk[aria-pressed="true"]::before{
  content:"";position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--mac-txt);opacity:.85;
}

.dk .badge{
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;
  border-radius:8px;background:var(--mac-red);color:#fff;
  font:600 10px/16px var(--mac-ui);text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}

.dk::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 12px);left:50%;
  transform:translateX(-50%) scale(.92);transform-origin:bottom center;
  padding:5px 11px;white-space:nowrap;border-radius:9px;
  font:500 12px/1.3 var(--mac-ui);color:var(--mac-txt);
  background:rgba(20,20,20,.94);
  border:.5px solid var(--mac-hair);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;
  transition:opacity .16s, transform .28s var(--spring);
}
@media(hover:hover){
  .dk:hover::after{opacity:1;transform:translateX(-50%) scale(1);transition-delay:.35s}
}

.dk-sep{flex:none;width:1px;height:30px;margin:0 4px;align-self:center;
  background:var(--mac-hair)}

#fab-wrap{
  position:fixed;right:16px;z-index:46;
  bottom:calc(86px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
#fab{
  flex:none;width:52px;height:52px;border-radius:18px;position:relative;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#3df57a,#1fc455);color:#04170a;
  border:0;
  box-shadow:0 8px 22px rgba(31,196,85,.38),0 2px 6px rgba(0,0,0,.5);
  transition:transform .28s var(--spring), background .2s, border-radius .2s;
}
#fab:active{transform:scale(.92)}
#fab-wrap.open #fab{background:#16191e;color:#fff;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.5)}
.fab-ic{position:absolute;width:22px;height:22px;
  transition:opacity .16s ease, transform .28s var(--spring)}
.fab-ic-close{opacity:0;transform:rotate(-45deg) scale(.6)}
#fab-wrap.open .fab-ic-tools{opacity:0;transform:rotate(45deg) scale(.6)}
#fab-wrap.open .fab-ic-close{opacity:1;transform:rotate(0) scale(1)}

#fab-menu{display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
#fab-wrap.open #fab-menu{pointer-events:auto}

.fab-item{
  flex:none;display:flex;align-items:center;gap:11px;
  padding:9px 10px 9px 16px;border-radius:16px;
  background:#101216;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 26px rgba(0,0,0,.5);color:var(--mac-txt);
  opacity:0;transform:translateY(10px) scale(.92);
  transition:opacity .2s ease, transform .28s var(--spring);
}
#fab-wrap.open .fab-item{opacity:1;transform:none}

#fab-wrap.open .fab-item:nth-child(1){transition-delay:.12s}
#fab-wrap.open .fab-item:nth-child(2){transition-delay:.09s}
#fab-wrap.open .fab-item:nth-child(3){transition-delay:.06s}
#fab-wrap.open .fab-item:nth-child(4){transition-delay:.03s}
#fab-wrap.open .fab-item:nth-child(5){transition-delay:0s}
.fab-item:active{transform:scale(.94)}
.fab-item-label{font:650 14px/1 var(--mac-ui);white-space:nowrap}
.fab-item-label em{font-style:normal;color:#767b86;margin-left:5px;font-size:11px}
.fab-item-icon{flex:none;position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(70,74,88,.14);color:#3a3d4a}
.fab-item-icon svg:not(.fab-lock-badge){width:18px;height:18px}
.fab-item.locked{cursor:not-allowed}
.fab-item.locked .fab-item-icon{background:rgba(255,255,255,.06);color:#6b727e}
.fab-item.locked .fab-item-icon svg:not(.fab-lock-badge){opacity:.8}
.fab-item.locked .fab-item-label{color:#767b86}
.fab-lock-badge{position:absolute;right:-4px;bottom:-4px;width:11px;height:11px;
  border-radius:50%;background:#141414;border:1px solid rgba(255,255,255,.16);
  color:#9aa0ab;padding:1.5px}

.win{
  position:fixed;z-index:80;
  max-width:calc(100vw - 16px);
  width:min(400px,calc(100vw - 16px));
  border-radius:18px;overflow:hidden;
  background:#0c0e11;
  border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.65);
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  font-family:var(--mac-ui);color:var(--mac-txt);
  display:flex;flex-direction:column;max-height:82vh;
  animation:winIn .34s var(--spring) both;
}
@keyframes winIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.win[hidden]{display:none}
.win:not(.focus){box-shadow:0 14px 44px rgba(0,0,0,.5), 0 0 0 .5px rgba(0,0,0,.45)}

.win-bar{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:11px 14px;position:relative;
  background:#0c0e11;
  border-bottom:1px solid rgba(255,255,255,.06);
  cursor:grab;touch-action:none;user-select:none;
}
.win-bar:active{cursor:grabbing}
.win-bar b{
  position:absolute;left:0;right:0;text-align:center;pointer-events:none;
  font-size:13px;font-weight:590;letter-spacing:-.01em;
  color:var(--mac-2);
}
.win.focus .win-bar b{color:var(--mac-txt)}

.win-x{
  width:12px;height:12px;flex:none;border-radius:50%;
  background:var(--mac-red);position:relative;
  border:.5px solid rgba(0,0,0,.16);
  transition:filter .15s;
}
.win:not(.focus) .win-x{background:rgba(255,255,255,.18)}
.win-x::after{
  content:"✕";position:absolute;inset:0;
  font:700 8px/11px var(--mac-ui);color:rgba(0,0,0,.55);text-align:center;
  opacity:0;transition:opacity .15s;
}
@media(hover:hover){ .win-bar:hover .win-x::after{opacity:1} }
.win-x:active{filter:brightness(.82)}

.lights{display:flex;gap:8px;flex:none;z-index:1}
.lights i{display:none;
  width:12px;height:12px;border-radius:50%;display:block;
  border:.5px solid rgba(0,0,0,.16);
}
.lights .amber{background:var(--mac-amber)}
.lights .green{background:var(--mac-green)}
.win:not(.focus) .lights i{display:none;background:rgba(255,255,255,.18)}

.win-body{
  padding:18px;overflow-y:auto;font-size:13.5px;line-height:1.5;
  -webkit-overflow-scrolling:touch;
}

.w-grp{
  background:rgba(255,255,255,.035);
  border:1px solid var(--mac-hair-2);
  border-radius:11px;padding:2px 13px;margin-bottom:14px;
}
.w-grp > h5{
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mac-3);margin:12px 0 6px;
}

.w-row{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:10px 0;border-bottom:.5px solid var(--mac-hair-2);
}
.w-row:last-child{border-bottom:none}
.w-row label{font-size:13px;flex:1;cursor:pointer;letter-spacing:-.01em}
.w-row .val{font-family:var(--mac-num);font-size:12.5px;color:var(--mac-2)}

.w-ck{
  width:44px;height:26px;flex:none;border-radius:13px;position:relative;
  background:var(--mac-ctl);
  transition:background .26s var(--spring);
}
.w-ck::after{
  content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;
  border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.32);
  transition:transform .26s var(--spring);
}
.w-ck[aria-checked="true"]{background:var(--mac-green)}
.w-ck[aria-checked="true"]::after{transform:translateX(18px)}

.w-in{
  width:100%;padding:9px 12px;border-radius:9px;
  font:13px/1.3 var(--mac-ui);
  background:var(--mac-field);color:var(--mac-txt);
  border:1px solid var(--mac-hair);outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.w-in:focus{border-color:var(--mac-blue);box-shadow:0 0 0 3px rgba(10,132,255,.24)}
.w-in::placeholder{color:var(--mac-3)}

.w-btn{
  padding:9px 16px;border-radius:9px;
  font:590 13px var(--mac-ui);color:var(--mac-txt);letter-spacing:-.01em;
  background:rgba(255,255,255,.09);
  border:1px solid var(--mac-hair);
  transition:transform .12s, background .18s;
}
.w-btn:active{transform:scale(.97);background:rgba(255,255,255,.16)}
.w-btn.go{background:var(--mac-blue);border-color:transparent;color:#fff}
.w-btn.go:active{background:#0060df}
.w-btn.warn{background:var(--mac-red);border-color:transparent;color:#fff}
.w-btn[disabled]{opacity:.42}
.w-btn.sm{padding:5px 11px;font-size:11.5px;flex:none}

.preset-grid{display:flex;flex-wrap:wrap;gap:7px}
.preset-box{
  position:relative;display:flex;align-items:center;gap:2px;
  padding:8px 9px;border-radius:9px;background:rgba(255,255,255,.06);
  border:1px solid var(--mac-hair);
}
.preset-box input{
  width:52px;background:none;border:none;outline:none;color:var(--mac-txt);
  font:600 13.5px var(--mac-num,monospace);text-align:right;
  -moz-appearance:textfield;
}
.preset-box input::-webkit-outer-spin-button,
.preset-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.preset-suffix{font-size:12px;color:var(--mac-3)}
.preset-rm{
  margin-left:4px;width:16px;height:16px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:9px;color:var(--mac-3);
  background:rgba(255,255,255,.08);
}
.preset-rm:active{background:var(--mac-red);color:#fff}

.w-bar-out{
  height:6px;border-radius:3px;margin:10px 0 14px;overflow:hidden;
  background:rgba(255,255,255,.09);display:flex;
}
.w-bar-out i{flex:1;background:var(--mac-green);border-radius:3px}
.w-bar-out.hi i{background:var(--mac-amber)}
.w-bar-out.max i{background:var(--mac-red)}

.w-note{font-size:12px;color:var(--mac-3);line-height:1.5;padding:0 0 11px}
.w-verdict{
  font-size:14px;font-weight:640;padding:11px;text-align:center;
  border-radius:10px;margin-bottom:12px;letter-spacing:-.01em;
}
.w-verdict.ok{background:rgba(50,215,75,.16);color:#5de37a}
.w-verdict.mid{background:rgba(255,214,10,.15);color:#ffd60a}
.w-verdict.bad{background:rgba(255,69,58,.17);color:#ff6b61}

.w-list{
  border-radius:11px;overflow:hidden;max-height:180px;overflow-y:auto;
  background:rgba(255,255,255,.035);border:1px solid var(--mac-hair-2);
}
.w-list div{
  padding:11px 13px;font-size:12.5px;display:flex;
  justify-content:space-between;gap:10px;
  border-bottom:.5px solid var(--mac-hair-2);
}
.w-list div:last-child{border-bottom:none}
.w-list .none{justify-content:center;color:var(--mac-3);padding:22px;font-size:12.5px}

.w-status{
  margin:6px -16px -16px;padding:9px 16px;
  border-top:.5px solid var(--mac-hair-2);
  font-size:11.5px;color:var(--mac-3);
  background:rgba(0,0,0,.16);
}

@media(prefers-reduced-motion:reduce){
  #dock,.dk,.win,.w-ck,.w-ck::after,.dk::after,
  #fab,.fab-ic,.fab-item{transition:none!important;animation:none!important}
}

@media (max-width:520px){
  .win{
    left:8px !important;right:8px !important;
    width:auto !important;max-width:none;
    max-height:70vh;
    border-radius:16px;
  }
  .win-body{padding:16px}
  #dock{
    bottom:calc(60px + env(safe-area-inset-bottom));
    gap:3px;padding:5px;border-radius:17px;
  }
  .dk{width:38px;height:38px;border-radius:11px}
  .dk svg{width:18px;height:18px}
  #fab-wrap{
    right:12px;
    bottom:calc(72px + env(safe-area-inset-bottom));
  }
  #fab{width:50px;height:50px}
}