:root {
  --green: #213f2e;
  --ink: #25362c;
  --muted: #758078;
  --line: #e0e5de;
  --cream: #f6f6ee;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: var(--ink);
  background: #493d2e url("assets/sauna.jpg") center/cover fixed;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 25, 18, 0.4), rgba(13, 25, 18, 0.65));
  z-index: -1;
}
header {
  padding: 25px 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffffed;
}
.brand img {
  width: 190px;
  display: block;
}
nav {
  display: flex;
  align-items: center;
  gap: 35px;
}
nav span,
.eyebrow {
  font-size: 10px;
  letter-spacing: 2.3px;
  font-weight: 700;
}
button,
select,
input {
  font: inherit;
}
button {
  cursor: pointer;
  border: 1px solid var(--line);
  background: white;
  color: var(--green);
  border-radius: 8px;
  padding: 12px 17px;
}
button:hover {
  filter: brightness(0.95);
}
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 3px solid #b1c9a8;
  outline-offset: 3px;
}
main {
  max-width: 1280px;
  margin: auto;
  padding: 40px 30px 20px;
}
.intro {
  text-align: center;
  color: white;
  margin: 0 0 30px;
}
.intro .eyebrow {
  color: #e1ddc4;
}
h1 {
  font:
    normal clamp(32px, 3.3vw, 58px) Georgia,
    serif;
  margin: 13px 0;
}
.intro > p:last-child {
  font-size: 15px;
  color: #f1f0e6;
}
h2 {
  font:
    normal 29px Georgia,
    serif;
  margin: 8px 0 15px;
}
h3 {
  font-size: 13px;
  margin: 0;
}
.booking {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: #fffffff5;
  border-radius: 20px;
  box-shadow: 0 25px 80px #0003;
  overflow: hidden;
}
.calendar {
  padding: 35px;
  border-right: 1px solid var(--line);
}
.details {
  padding: 35px;
  background: #f7f8f3;
}
.sectiontop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.eyebrow {
  color: #72826c;
  margin: 0 0 12px;
}
.arrows {
  display: flex;
  gap: 8px;
}
.arrows button {
  font-size: 25px;
  padding: 3px 13px;
}
.week,
.days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
.week {
  font-size: 11px;
  text-align: center;
  color: var(--muted);
  margin: 18px 0 12px;
}
.day {
  height: 60px;
  padding: 0;
  background: #eef2e7;
  border: 1px solid #e1e8d8;
  font-size: 18px;
  border-radius: 9px;
  position: relative;
}
.day:not(:disabled):after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #8a9d78;
  border-radius: 50%;
  bottom: 10px;
  left: calc(50% - 2px);
}
.day:disabled {
  background: #d6dad3;
  color: #8a918a;
  cursor: default;
  border-color: transparent;
}
.day.empty {
  visibility: hidden;
}
.day.active {
  background: var(--green);
  color: white;
  border-color: var(--green);
}
.day.today {
  box-shadow: inset 0 0 0 1px #587c51;
}
.legend {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  font-size: 10px;
  color: #647065;
  margin: 19px 0;
}
.legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}
i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
}
.free {
  background: #dce8ce;
}
.selected {
  background: var(--green);
}
.closed {
  background: #bbc2b8;
}
.busy {
  background: #8c6551;
}
.buffer {
  background: repeating-linear-gradient(
    45deg,
    #d9cbbb,
    #d9cbbb 2px,
    #f3ebe1 2px,
    #f3ebe1 4px
  );
}
.small {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}
.muted {
  color: var(--muted);
  font-size: 13px;
}
.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 25px 0;
}
label {
  display: block;
  font-size: 12px;
  color: #61705f;
}
select,
input {
  width: 100%;
  padding: 13px 10px;
  border: 1px solid #dce2d7;
  background: white;
  border-radius: 8px;
  margin-top: 8px;
  color: var(--ink);
}
.availability {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 16px 0;
}
.slot {
  font-size: 11px;
  padding: 8px 3px;
  border: 0;
  background: #e4eddc;
  border-radius: 5px;
}
.slot.busy {
  background: #8c6551;
  color: white;
}
.slot.buffer {
  background: repeating-linear-gradient(
    45deg,
    #d9cbbb,
    #d9cbbb 3px,
    #f3ebe1 3px,
    #f3ebe1 6px
  );
  color: #746356;
}
.slot.chosen {
  background: var(--green);
  color: white;
}
.slot:disabled {
  cursor: default;
}
.summary {
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 0;
  font-size: 12px;
}
.summary strong {
  font-size: 15px;
}
.primary {
  background: var(--green);
  border: 0;
  color: white;
  width: 100%;
  padding: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.primary:disabled {
  opacity: 0.5;
  cursor: default;
}
.centered {
  text-align: center;
}
.notice {
  font-size: 11px;
  line-height: 1.6;
  color: #7c8175;
  background: #e9ede4;
  padding: 10px 12px;
  border-radius: 6px;
}
footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: #e8e6d9;
  font-size: 10px;
  padding: 25px 3px;
  flex-wrap: wrap;
}
footer a {
  color: inherit;
}
dialog {
  border: 0;
  border-radius: 17px;
  padding: 35px;
  width: min(92vw, 520px);
  color: var(--ink);
  box-shadow: 0 30px 100px #0005;
}
dialog::backdrop {
  background: #0b1c16a8;
  backdrop-filter: blur(5px);
}
dialog label {
  margin: 18px 0;
}
.close {
  position: absolute;
  right: 12px;
  top: 10px;
  border: 0;
  font-size: 24px;
  padding: 5px 10px;
}
#admin {
  width: min(95vw, 900px);
  max-height: 90vh;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 20px 0;
}
.tabs button {
  font-size: 12px;
}
.tabs button.active {
  background: var(--green);
  color: white;
}
.row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.row button {
  padding: 7px;
  font-size: 11px;
}
.row input {
  width: 100px;
  margin: 0;
}
.row select {
  width: 110px;
  margin: 0;
}
.controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.status {
  padding: 20px;
  background: #edf1e7;
  border-radius: 10px;
  margin-bottom: 15px;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: #213f2e;
  color: white;
  padding: 15px 25px;
  border-radius: 10px;
  box-shadow: 0 10px 40px #0004;
  max-width: 90vw;
  display: none;
  font-size: 13px;
  z-index: 5;
}
@media (min-width: 2000px) {
  main {
    max-width: 1700px;
    padding-top: 80px;
  }
  .day {
    height: 85px;
  }
  .calendar,
  .details {
    padding: 50px;
  }
  .slot {
    padding: 13px;
  }
  header {
    padding: 35px 6vw;
  }
  .brand img {
    width: 240px;
  }
  h2 {
    font-size: 36px;
  }
}
@media (max-width: 760px) {
  header {
    padding: 15px 20px;
  }
  .brand img {
    width: 140px;
  }
  nav span {
    display: none;
  }
  nav button {
    font-size: 11px;
    padding: 9px;
  }
  main {
    padding: 25px 14px 10px;
  }
  .intro {
    margin-bottom: 24px;
  }
  .intro > p:last-child {
    font-size: 13px;
    line-height: 1.7;
  }
  .booking {
    grid-template-columns: 1fr;
    border-radius: 14px;
  }
  .calendar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 24px 20px;
  }
  .details {
    padding: 25px 20px;
  }
  .day {
    height: 49px;
    font-size: 16px;
  }
  .days,
  .week {
    gap: 5px;
  }
  h2 {
    font-size: 26px;
  }
  .sectiontop .small {
    font-size: 9px;
  }
  .summary {
    flex-wrap: wrap;
  }
  .row {
    flex-wrap: wrap;
  }
  .controls {
    grid-template-columns: 1fr;
  }
  dialog {
    padding: 28px 20px;
  }
  footer {
    line-height: 1.8;
  }
  body {
    background-attachment: scroll;
  }
}

.slot {
  font-size: 10px;
}
.row > div {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

dialog #toast {
  position: sticky;
  bottom: 0;
  left: auto;
  transform: none;
  max-width: 100%;
  margin-top: 16px;
  box-shadow: none;
  background: #fff1db;
  color: #603e15;
  border: 1px solid #e0c5a1;
  line-height: 1.6;
}

.scheduleRow {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 110px 25px 110px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.scheduleRow input {
  margin: 0;
}
.scheduleRow label input {
  width: auto;
}
.scheduleRow label {
  margin: 0;
}
@media (max-width: 500px) {
  .scheduleRow {
    grid-template-columns: 1fr 90px 18px 90px;
    gap: 5px;
    font-size: 11px;
  }
  .scheduleRow input {
    padding: 8px 3px;
  }
}

/* Przycisk formularza logowania */
#loginForm > .primary {
  justify-content: center;
  text-align: center;
  font-weight: 600;
  min-height: 50px;
}

.slot.excluded {
  background: #c7cbc5;
  color: #515d53;
  cursor: default;
}

/* Access overview: independent from the page header and booking layout. */
.access-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 18px;
}
.access-heading h3 {
  font:
    normal 27px Georgia,
    serif;
}
.access-heading .eyebrow {
  margin-bottom: 8px;
}
.access-counters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.access-counter {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 17px;
  background: #f7f9f4;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.access-counter span {
  font-size: 12px;
  line-height: 1.4;
}
.access-counter strong {
  font-size: 30px;
  font-weight: 500;
}
.access-counter.good strong {
  color: #276449;
}
.access-counter.info strong {
  color: #396b99;
}
.access-counter.bad strong {
  color: #a43f32;
}
.access-footnote {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin: 12px 0 22px;
}
.access-card-list {
  display: grid;
  gap: 15px;
}
.access-card {
  border: 1px solid #dde4da;
  border-left: 4px solid #c2cbbf;
  border-radius: 12px;
  overflow: hidden;
  background: white;
}
.access-card.good {
  border-left-color: #4f8965;
}
.access-card.bad {
  border-left-color: #bb6557;
}
.access-card.info {
  border-left-color: #6389ad;
}
.access-card-header {
  padding: 17px 19px;
  background: #f6f8f2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.access-card-header h4 {
  margin: 0 0 7px;
  font-size: 16px;
}
.access-card-header p {
  margin: 0;
  color: #6c786a;
  font-size: 11px;
  line-height: 1.6;
}
.access-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 6px 9px;
  border-radius: 6px;
  line-height: 1.4;
  background: #edf0eb;
  color: #62705e;
}
.access-badge:before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}
.access-badge.good {
  background: #e7f2e9;
  color: #2d6b45;
}
.access-badge.info {
  background: #eaf0f7;
  color: #3c6389;
}
.access-badge.bad {
  background: #f9eae5;
  color: #9f3d2d;
}
.access-badge.muted {
  background: #edf0eb;
  color: #6b7565;
}
.access-grant {
  padding: 15px 19px;
}
.access-grant + .access-grant {
  border-top: 1px dashed var(--line);
}
.access-slot {
  font-size: 11px;
  color: #6c786a;
  margin: 0 0 14px;
}
.access-operation {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.3fr;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eef1eb;
  font-size: 12px;
}
.access-table-head {
  color: #7c8577;
  font-size: 10px;
  padding-top: 0;
}
.access-date {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.access-details {
  margin-top: 13px;
  color: #6c786a;
  font-size: 11px;
}
.access-details summary,
.access-history summary {
  cursor: pointer;
  padding: 5px 0;
}
.access-details p {
  line-height: 1.7;
}
.access-details code {
  font-size: 10px;
  overflow-wrap: anywhere;
}
.access-history {
  border-top: 1px solid var(--line);
  margin-top: 25px;
  padding-top: 15px;
  font-size: 13px;
}
.access-history summary span {
  color: var(--muted);
  font-size: 11px;
}
.access-event {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  font-size: 11px;
}
.access-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
  margin-top: 20px;
}
.access-empty {
  border: 1px dashed var(--line);
  padding: 22px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.access-load-error {
  background: #fff0e9;
  color: #9f3d2d;
  padding: 12px;
  border-radius: 8px;
  font-size: 12px;
}
@media (max-width: 600px) {
  .access-counters {
    gap: 7px;
  }
  .access-counter {
    padding: 12px 9px;
  }
  .access-counter span {
    font-size: 10px;
  }
  .access-counter strong {
    font-size: 25px;
  }
  .access-card-header {
    padding: 15px;
    flex-wrap: wrap;
  }
  .access-grant {
    padding: 14px 15px;
  }
  .access-operation {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .access-operation > [role="cell"]:last-child {
    grid-column: 1/-1;
  }
  .access-table-head {
    display: none;
  }
  .access-event {
    grid-template-columns: 1fr auto;
  }
  .access-event > span:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }
  .access-event > .access-badge {
    grid-column: 2;
    grid-row: 1/3;
  }
  .access-heading h3 {
    font-size: 24px;
  }
}

.access-history > .access-card-list {
  margin-top: 15px;
}

/* Reservation management: visit lifecycle is separate from door access. */
.reservation-list {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}
.reservation-card {
  background: white;
  border: 1px solid var(--line);
  border-left: 4px solid #6389ad;
  border-radius: 12px;
  padding: 19px;
}
.reservation-card.good {
  border-left-color: #4f8965;
}
.reservation-card.bad {
  border-left-color: #bb6557;
}
.reservation-card.muted {
  border-left-color: #c2cbbf;
  background: #fafbf8;
}
.reservation-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.reservation-top .eyebrow {
  font-size: 9px;
  margin-bottom: 7px;
}
.reservation-top h4 {
  font-size: 17px;
  margin: 0;
}
.reservation-day {
  font-size: 12px;
  color: #6c786a;
  margin: 15px 0 8px;
}
.reservation-time {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
}
.reservation-time strong {
  font-size: 21px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.reservation-time span {
  color: var(--muted);
  font-size: 11px;
}
.reservation-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid #eef1eb;
  padding-top: 14px;
  margin-top: 15px;
}
.reservation-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.reservation-actions button {
  font-size: 11px;
  padding: 9px 11px;
}
.reservation-actions .reservation-cancel {
  color: #9a4938;
}
@media (max-width: 600px) {
  .reservation-card {
    padding: 15px;
  }
  .reservation-top {
    flex-wrap: wrap;
  }
  .reservation-actions {
    width: 100%;
  }
}

.panel-loading {
  padding: 24px 0;
  color: var(--muted);
  font-size: 14px;
}
#adminBtn {
  touch-action: manipulation;
}
#adminBtn[aria-busy="true"] {
  cursor: progress;
}

/* Audit entries use a vertical layout, independent of editable panel rows. */
.audit-entry {
  display: grid;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.audit-entry strong {
  display: block;
  font-weight: 600;
}
.audit-entry p {
  margin: 0;
}
.audit-entry .audit-details {
  color: var(--ink);
}
.audit-entry .audit-meta {
  color: var(--muted);
  font-size: 12px;
}

.unit-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.unit-heading h3 {
  margin: 0 0 6px;
}
.unit-heading p {
  margin: 0;
  font-size: 13px;
}
.unit-addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.unit-addresses > div {
  min-width: 0;
  padding: 13px;
  background: #f5f7f3;
  border-radius: 8px;
}
.unit-addresses dt {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 6px;
}
.unit-addresses dd {
  margin: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .unit-addresses {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.lk-section {
  margin-top: 18px;
}
.lk-section h4 {
  margin: 0;
}
.lk-config {
  padding: 18px 0;
}
.lk-config .muted,
.lk-section > .muted {
  font-size: 12px;
  line-height: 1.6;
}
.lk-stop {
  border-color: #bb6557;
  color: #9b3527;
}

/* Heating controls follow the same cards and spacing as reservation management. */
.lk-toolbar {
  display: flex;
  justify-content: flex-end;
}
.lk-automatic-actions {
  margin-top: 20px;
}
.lk-automatic-actions button {
  width: 100%;
  white-space: normal;
}
.lk-mode-note,
.lk-empty {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.lk-section .lk-plan-title {
  margin-top: 22px;
  font-size: 14px;
}
.lk-period-list {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.lk-period-list > li {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 13px;
}
.lk-period-label {
  color: var(--muted);
  font-size: 11px;
}
.lk-period-list .unit-addresses {
  margin: 10px 0 0;
  gap: 10px;
}
.lk-history {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.lk-disclosure > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
}
.lk-disclosure > summary::-webkit-details-marker {
  display: none;
}
.lk-disclosure > summary:focus-visible {
  outline: 3px solid #b1c9a8;
  outline-offset: 5px;
  border-radius: 6px;
}
.lk-disclosure-action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 13px;
  color: var(--green);
  background: #f5f7f3;
  font-size: 12px;
  font-weight: 400;
}
.lk-disclosure-action::after {
  content: "+";
  font-size: 17px;
  line-height: 1;
}
.lk-disclosure[open] > summary .lk-disclosure-action::after {
  content: "−";
}
.lk-disclosure > summary:hover .lk-disclosure-action {
  background: #eaf0e6;
}
.lk-event-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.lk-event {
  min-width: 0;
  border: 1px solid var(--line);
  border-left: 3px solid #6389ad;
  border-radius: 8px;
  padding: 13px;
  overflow-wrap: anywhere;
}
.lk-event time {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
}
.lk-event strong,
.lk-event p {
  font-size: 13px;
  line-height: 1.5;
}
.lk-event p {
  margin: 6px 0 0;
}
.lk-event-error {
  border-left-color: #bb6557;
}
.lk-event-on {
  border-color: #d4e6d7;
  border-left-color: #4f8965;
  background: #f1f8f2;
}
.lk-event-on strong {
  color: #28613d;
}
.lk-event-off {
  border-color: #eed8d1;
  border-left-color: #bb6557;
  background: #fff3ef;
}
.lk-event-off strong {
  color: #9b3527;
}
.archive-tools {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0;
}
.archive-delete {
  color: #9b3527;
  border-color: #e9ccc2;
  font-size: 12px;
  padding: 9px 12px;
}
.access-event-removable {
  grid-template-columns: minmax(130px, 1fr) minmax(160px, 2fr) auto auto;
}
.lk-event-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 7px;
}
.lk-event-heading time {
  margin: 0;
}
@media (max-width: 600px) {
  .access-event-removable {
    grid-template-columns: 1fr auto;
  }
  .access-event-removable > span:nth-child(2) {
    grid-column: 1 / -1;
  }
  .access-event-removable > .access-badge {
    grid-column: 2;
    grid-row: 1;
  }
  .access-event-removable > .archive-delete {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
  }
  .archive-tools button {
    white-space: normal;
  }
}
.lk-disclosure .lk-config {
  margin-top: 18px;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 600px) {
  .lk-disclosure > summary {
    gap: 10px;
    font-size: 13px;
  }
  .lk-disclosure-action {
    padding: 9px 10px;
    gap: 8px;
    font-size: 11px;
  }
}