/* секция "на всю ширину" и "до низа" */
.section{
  width:100%;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--card);
  border-left:none; border-right:none; border-radius:0;
  padding:16px clamp(12px, 4vw, 18px);

  /* растяжение до низа экрана */
  display:flex;
  flex-direction:column;
  min-height:100%;
}

/* когда секция внутри таба — таб тоже растягиваем */
[data-tab-root]{
  height:100%;
}

/* заголовок секции */
.section-title{
  font-weight:700; font-size:20px; margin:4px 0 12px;
}

/* список занимает всё оставшееся место внутри секции */
.list{
  display:flex; flex-direction:column;
  border-top:1px solid var(--border);
  flex:1 1 auto;
  min-height:0;        /* важно для корректного overflow в flex-контейнере */
  overflow:auto;
}

.row{display:grid; grid-template-columns:28px 1fr 120px; gap:12px;
     align-items:center; padding:12px 4px; border-bottom:1px solid var(--border)}
.row.head{color:var(--muted); font-size:13px}
.row.item{cursor:pointer}
.row.item:hover{background:#151925}
.icon{width:24px;height:24px;display:grid;place-items:center;font-size:18px}
.name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.size{color:var(--fg-dim);font-size:14px;text-align:right}
.empty{padding:22px;color:var(--muted);text-align:center}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--muted);
         border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
.error{background:#3a1f22;border:1px solid #7a2a33;color:#ffd6db;
       padding:10px;border-radius:10px;margin:10px 0;font-size:14px}

.pin-lock{
  position:fixed;
  inset:0;
  background:rgba(5,7,12,0.95);
  display:flex;
  align-items:stretch;
  justify-content:center;
  z-index:999;
  backdrop-filter:blur(2px);
  --pin-key-gap: clamp(10px, 2vw, 18px);
  --pin-key-size: clamp(56px, calc((100vw - 120px)/3), 90px);
}
.pin-lock.hidden{display:none;}
.pin-lock__sheet{
  width:100%;
  max-width:420px;
  max-height:100vh;
  margin:0 auto;
  padding:32px 24px;
  padding-top:calc(32px + var(--safe-top, 0px));
  padding-bottom:calc(32px + var(--safe-bottom, 0px));
  display:flex;
  flex-direction:column;
  color:#fff;
}
.pin-lock__header{
  margin-bottom:24px;
}
.pin-lock__title{
  font-size:18px;
  font-weight:600;
  text-align:center;
}
.pin-lock__body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
}
.pin-lock__logo{
  width:56px;
  height:56px;
  border-radius:16px;
  background:rgba(255,255,255,0.08) url("../img/key.svg") center/26px no-repeat;
}
.pin-lock__desc{
  font-size:15px;
  color:rgba(255,255,255,0.75);
  max-width:280px;
}
.pin-lock__dots{
  display:flex;
  gap:18px;
  margin-top:12px;
}
.pin-lock__dot{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.6);
  transition:background .15s ease, border-color .15s ease;
}
.pin-lock__dot.filled{
  background:#fff;
  border-color:#fff;
}
.pin-lock__dots.is-shaking{
  animation:pin-lock-shake .4s ease;
}
.pin-lock__error{
  min-height:18px;
  font-size:13px;
  color:#ff8d90;
  opacity:0;
  transition:opacity .15s ease;
}
.pin-lock__error.visible{
  opacity:1;
}
.pin-lock__keypad{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:var(--pin-key-gap);
  padding-bottom:4px;
}
.pin-lock__keypad-row{
  display:flex;
  justify-content:space-between;
  gap:var(--pin-key-gap);
}
.pin-lock__key{
  flex:1 1 var(--pin-key-size);
  max-width:var(--pin-key-size);
  height:var(--pin-key-size);
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.1);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:600;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border .12s ease;
}
.pin-lock__key strong{
  font-weight:600;
}
.pin-lock__key span{
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  opacity:0.6;
  margin-top:4px;
}
.pin-lock__key:active{
  transform:scale(0.94);
}
.pin-lock__key--delete{
  max-width:var(--pin-key-size);
  height:var(--pin-key-size);
  border:none;
  background:none;
  font-size:15px;
  opacity:0.9;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:500;
}
.pin-lock__key--delete:active{
  transform:none;
  opacity:0.7;
}
.pin-lock__key--cancel{
  flex:0 0 auto;
  width:clamp(96px, 28vw, 140px);
  height:auto;
  min-height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.05);
  color:#fff;
  font-size:15px;
  font-weight:600;
  padding:0 22px;
  align-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  letter-spacing:0.3px;
  text-transform:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
}
.pin-lock__key--cancel.is-placeholder{
  visibility:hidden;
  pointer-events:none;
}
.pin-lock__key--spacer{
  flex:1 1 var(--pin-key-size);
  max-width:var(--pin-key-size);
  height:var(--pin-key-size);
  visibility:hidden;
  pointer-events:none;
}
.pin-lock--busy .pin-lock__key{
  opacity:0.6;
  pointer-events:none;
}
.pin-lock__keypad-row--actions{
  display:grid;
  grid-template-columns:repeat(3, minmax(var(--pin-key-size), 1fr));
  align-items:end;
}
.pin-lock__keypad-row--actions .pin-lock__key{
  width:100%;
}
.pin-lock__keypad-row--actions .pin-lock__key[data-type="cancel"]{
  justify-self:start;
}
.pin-lock__keypad-row--actions .pin-lock__key[data-type="digit"][data-value="0"]{
  justify-self:center;
  width:var(--pin-key-size);
}
.pin-lock__keypad-row--actions .pin-lock__key--delete{
  justify-self:end;
  width:var(--pin-key-size);
}
@keyframes pin-lock-shake{
  0%{transform:translateX(0);}
  25%{transform:translateX(-8px);}
  50%{transform:translateX(8px);}
  75%{transform:translateX(-6px);}
  100%{transform:translateX(0);}
}

@media (max-height: 720px){
  .pin-lock__sheet{
    padding-top:calc(20px + var(--safe-top, 0px));
    padding-bottom:calc(20px + var(--safe-bottom, 0px));
  }
  .pin-lock__body{
    gap:12px;
  }
  .pin-lock__keypad{
    gap:calc(var(--pin-key-gap) * 0.8);
  }
  .pin-lock{
    --pin-key-size: clamp(52px, calc((100vw - 100px)/3), 80px);
  }
}