.tw-view{
  flex:1;
  min-width:0;
  display:flex;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}

.tw-view[hidden]{display:none}

body.app-reveal .tw-view{animation:riseIn .5s ease .18s backwards}

.tw-scroll{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  padding:14px 16px 17px;
}

.tw-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:16px;
  border-bottom:1px solid #1A1F26;
  flex-shrink:0;
}

.tw-bar .search{height:36px}

.tw-bar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.tw-count-pill{cursor:default}

.tw-count-pill:hover{background:#12151A;border-color:var(--border)}

.tw-grid{
  margin-top:13px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:10px;
  align-content:start;
}

.tw-card{
  display:flex;
  flex-direction:column;
  padding:12px;
  background:var(--card-2);
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;

  transition:transform .2s ease, border-color .2s ease;
}

.tw-card:hover{
  transform:translateY(-3px);
  border-color:var(--border-hi);
  box-shadow:0 16px 36px rgba(0,0,0,.45);
}

.tw-card.selected{
  border-color:var(--tw-acc,var(--blue));
  box-shadow:0 0 0 1px var(--tw-acc,var(--blue)), 0 14px 32px rgba(0,0,0,.45);
}

.tw-card.soon{
  opacity:.55;
  cursor:default;
}

.tw-card.soon:hover{
  transform:none;
  border-color:var(--border);
  box-shadow:none;
}

.tw-card.soon.selected{
  border-color:var(--border);
  box-shadow:none;
}

.tw-ico{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;
  background:var(--tw-acc-bg,rgba(76,159,255,.10));
  color:var(--tw-acc,var(--blue));
}

.tw-ico svg{width:19px;height:19px}

.tw-name{
  margin-top:14px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.04em;
  color:#EDF1F6;
}

.tw-desc{
  margin-top:6px;
  margin-bottom:14px;   /* oddech nad linią automatu i stopką */
  font-size:11px;
  line-height:1.5;
  color:var(--dim);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
  min-height:33px;
}

.tw-foot{
  /* stopka zawsze przyszpilona do dolu kafelka, niezaleznie od wysokosci */
  margin-top:auto;
  padding-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.tw-card:has(.tw-autoline) .tw-foot{margin-top:0;padding-top:10px}

.soon-badge.ok{
  color:var(--green);
  border-color:rgba(46,229,157,.4);
  background:rgba(46,229,157,.07);
}

.tw-open{
  height:28px;
  padding:0 14px;
  border-radius:4px;
  background:#12151A;
  border:1px solid var(--border);
  color:var(--text-soft);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}

.tw-open:hover{background:#1B2027;border-color:var(--border-hi);color:#fff}

.tw-open:disabled{cursor:default}

.tw-open:disabled:hover{background:#12151A;border-color:var(--border);color:var(--text-soft)}

.tw-empty{
  flex:1;
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
}

.tw-empty[hidden]{display:none}

.tw-empty svg{width:38px;height:38px;color:#2C333C}

.tw-empty-title{
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  color:var(--muted);
}

.tw-empty-sub{font-size:12px;color:var(--dim)}

.tw-modal{z-index:2300}

.tw-modal-card{
  width:420px;
  max-height:100%;
  overflow-y:auto;
}

.tw-modal-sub{
  margin:2px 2px 4px;
  font-size:11px;
  line-height:1.5;
  color:#737D89;
}

.tw-prog{
  margin-top:18px;
  height:6px;
  border-radius:999px;
  background:#191D23;
  border:1px solid var(--border);
  overflow:hidden;
}

.tw-prog[hidden]{display:none}

.tw-prog-bar{
  width:0;
  height:100%;
  border-radius:999px;
  background:var(--tw-acc,var(--blue));
  transition:width .07s linear;
}

/* plakietka trybu + pomoc "?" + przelacznik automatu na kartach narzedzi */
.tw-mode{
  font-size:9px;font-weight:800;letter-spacing:.1em;color:#8A93A0;
  background:#191D23;border:1px solid #262B33;border-radius:99px;padding:4px 10px;
}
.tw-mode.auto{color:#7FD7A6;border-color:#1E3B2C}
.tw-card{position:relative}
.tw-help{
  position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#191D23;border:1px solid #262B33;color:#8A93A0;
  font-size:12px;font-weight:800;line-height:1;
  transition:color .15s ease, border-color .15s ease;
}
.tw-help:hover{color:#fff;border-color:var(--border-hi)}
.tw-card.help-open .tw-help{color:#4C9FFF;border-color:#26405C}
.tw-helpbox{
  margin:10px 0 2px;padding:10px 12px;border-radius:7px;
  background:#12151A;border:1px solid #21252C;
  font-size:11px;line-height:1.65;color:#AEB6C0;
}
.tw-helpbox b{color:#E4E9EF;font-weight:700}
.tw-autoline{
  /* sekcja automatu dosunieta do dolu, oddzielona cienka linia */
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid #21252C;
  display:flex;align-items:center;gap:9px;
}
.tw-autotxt{font-size:10px;font-weight:700;letter-spacing:.05em;color:#8A93A0}
.tw-autoline.on .tw-autotxt{color:#7FD7A6}
.tw-autosum{font-size:10px;color:var(--dim);margin:5px 0 0 43px}
.tw-switch{
  width:34px;height:19px;border-radius:99px;flex:0 0 auto;position:relative;
  background:#1B2027;border:1px solid #2A303A;
  transition:background .18s ease, border-color .18s ease;
}
.tw-switch .tw-knob{
  position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#5A6470;transition:transform .18s ease, background .18s ease;
}
.tw-switch:hover{border-color:var(--border-hi)}
.tw-switch.on{background:#15271D;border-color:#2A4636}
.tw-switch.on .tw-knob{transform:translateX(15px);background:#3DDC84}