.root, :root { --card-title-size: 32px; --card-list-size: 24px; --card-padding: 24px }
.html, body { height: 100%; overflow: hidden }
.wall { display: grid; gap: 12px; padding: 8px; min-height: calc(100vh - 60px); height: 100vh; box-sizing: border-box }
.cards { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; height: 100%; gap: 0; align-content: stretch; overflow: hidden }
.cards-inner { display: flex; height: 100%; gap: 12px; will-change: transform; transition: transform 300ms ease }
.cards-inner .card { flex: 0 0 calc(50% - 6px) }
.cards { position: relative }
.card { border: 2px solid #111; border-radius: 16px; padding: var(--card-padding); background: rgba(255,255,255,0.96) }
.card { height: 100%; display: flex; flex-direction: column; position: relative; z-index: 1; overflow: hidden }
.card::before { content: ""; position: absolute; inset: 0; border-radius: 16px; background-image: var(--card-bg-image, none); background-repeat: var(--card-bg-repeat, repeat); background-size: var(--card-bg-size, 120px 120px); background-position: center; opacity: var(--card-bg-opacity, 0.08); z-index: 0 }
.card > * { position: relative; z-index: 1 }
.card .list { flex: 1; font-size: var(--card-list-size) }
.card .lines { flex: 1; font-size: var(--card-list-size); line-height: 1.5 }
.card .lines div { margin: 6px 0 }
.card .title { font-size: var(--card-title-size) }
.card .title { font-size: 32px; font-weight: 700; margin-bottom: 12px }
.card .list { font-size: 24px; line-height: 1.5 }
.card .list li { margin: 6px 0 }
.card .meta { margin-top: 8px; font-size: 16px; color: #666 }
.status { margin: 8px 0; padding: 8px; border: 1px solid #ffd666; background: #fffbe6; color: #a87000; border-radius: 8px }
.controls { display: flex; gap: 8px; align-items: center }
.preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 6px; max-height: 100%; overflow-y: auto }
.thumb { border: 1px solid #bbb; border-radius: 10px; padding: 6px; background: #fff; cursor: pointer }
.thumb .title { font-size: 12px; font-weight: 600; margin-bottom: 4px }
.preview .title { display: block; max-width: 6em; word-break: break-all; overflow-wrap: anywhere; white-space: normal }
.thumb .list { display: none }
.thumb.active { border-color: #1677ff }
.debug { margin: 12px 0; padding: 8px; border: 1px dashed #aaa; }
.debug-actions { display: flex; gap: 8px; margin-bottom: 8px }
.debug-output { height: 240px; overflow: auto; background: #fafafa; padding: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; white-space: pre-wrap }

/* Landscape preference */
@media (orientation: landscape) {
  .wall {
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "cards preview"
      "controls controls";
    align-items: start;
  }
  .preview { display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 6px; overflow: auto; width: 8em; box-sizing: border-box }
  .thumb { min-width: unset; width: 100% }
  .preview .title { max-width: 8em }
  .weather { grid-column: 1 / -1 !important }
  .controls { grid-column: 1 / -1 !important; width: 100% }
}

/* Portrait phones (iPhone 14/Pro/Max widths ~393–430px) */
@media (max-width: 480px) {
  .wall { gap: 8px; padding: 6px; min-height: 100vh }
  .cards { gap: 8px }
  .card { padding: var(--card-padding) }
  .card .title { font-size: var(--card-title-size) }
  .card .list { font-size: var(--card-list-size) }
  .preview { display: flex; gap: 6px; overflow: hidden; flex-wrap: nowrap }
  .thumb { min-width: 90px; padding: 4px }
  .thumb .title { font-size: 11px }
  .thumb .list { font-size: 9px; line-height: 1.25 }
  .controls { gap: 6px }
}

/* Portrait mobile: allow vertical scroll */
@media (max-width: 480px) and (orientation: portrait) {
  html, body { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch }
  .wall { min-height: auto }
}

/* Mobile iPad/iPhone friendly */
@media (max-width: 800px) {
  .card .title { font-size: 28px }
  .card .list { font-size: 20px }
  .debug-output { height: 160px }
  .controls { flex-wrap: wrap }
}
/* Portrait strict sizing for preview and weather */
@media (orientation: portrait) {
  .preview { height: 4em; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; align-items: center }
  .thumb { height: 3.6em; padding: 4px 6px; display: flex; align-items: center }
  .preview .title { line-height: 1em; max-width: 8em; max-height: 4em; word-break: break-all; overflow: hidden; white-space: normal }
}

.wall-settings-modal {
  max-width: 640px;
  width: 90vw;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  padding: 20px;
  gap: 12px;
}

.wall-settings-modal h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.wall-settings-modal label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: #555;
}

.wall-settings-modal input,
.wall-settings-modal select {
  width: 100%;
}

.wall-cards-modal {
  width: 80vw;
  max-width: 80vw;
  max-height: 80vh;
  height: 80vh;
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
}

.wall-cards-modal h3 {
  margin: 0;
  font-size: 18px;
}

.cards-modal-toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.cards-modal-main {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 12px;
  min-height: 0;
}

.cards-modal-list {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 8px;
  background: #fafafa;
  overflow: auto;
}

.cards-modal-editor {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  min-height: 0;
}

.cards-modal-textarea {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

.cards-modal-textarea textarea {
  width: 100%;
  height: 100%;
  resize: none;
}

.cards-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.cards-table th,
.cards-table td {
  padding: 4px 6px;
  border-bottom: 1px solid #e5e5e5;
}

.cards-table tr:hover {
  background: #f5f5f5;
}

.wall-cards-modal label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: #555;
}

.wall-cards-modal input,
.wall-cards-modal textarea {
  width: 100%;
}

@media (max-width: 800px) {
  .wall-cards-modal {
    width: 96vw;
    max-width: 96vw;
    grid-template-rows: auto auto 1fr auto;
  }
  .cards-modal-main {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}