* {

  box-sizing: border-box;

}



:root,

:root[data-theme='light'] {

  --color-bg: #f5f7fa;

  --color-text: #1a1d23;

  --color-text-muted: #5f6368;

  --color-header-bg: #ffffff;

  --color-border: #dadce0;

  --color-panel-bg: #ffffff;

  --color-input-bg: #ffffff;

  --color-input-border: #c4c7cc;

  --color-btn-primary-bg: #1b5e20;

  --color-btn-primary-text: #ffffff;

  --color-btn-ghost-text: #1a1d23;

  --color-btn-ghost-border: #c4c7cc;

  --color-error: #c5221f;

  --color-tile-border: #dadce0;

  --color-overlay: rgba(0, 0, 0, 0.55);

  --color-tile-overlay: rgba(255, 255, 255, 0.85);

  --color-tile-overlay-text: #1a1d23;

  --color-fullscreen-toolbar: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), transparent);

}



:root[data-theme='dark'] {

  --color-bg: #0f1115;

  --color-text: #e8eaed;

  --color-text-muted: #9aa0a6;

  --color-header-bg: #151820;

  --color-border: #2a2f3a;

  --color-panel-bg: #151820;

  --color-input-bg: #0f1115;

  --color-input-border: #3c4043;

  --color-btn-primary-bg: #8ab4f8;

  --color-btn-primary-text: #0f1115;

  --color-btn-ghost-text: #e8eaed;

  --color-btn-ghost-border: #3c4043;

  --color-error: #f28b82;

  --color-tile-border: #2a2f3a;

  --color-overlay: rgba(0, 0, 0, 0.55);

  --color-tile-overlay: rgba(0, 0, 0, 0.65);

  --color-tile-overlay-text: #e8eaed;

  --color-fullscreen-toolbar: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent);

}



body {

  margin: 0;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  background: var(--color-bg);

  color: var(--color-text);

}



body.no-scroll {

  overflow: hidden;

}



.header {

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 12px 20px;

  border-bottom: 1px solid var(--color-border);

  background: var(--color-header-bg);

}



.header h1 {

  margin: 0;

  font-size: 1.25rem;

  flex: 1;

}



.status {

  font-size: 0.875rem;

  color: var(--color-text-muted);

}



.panel {

  max-width: 520px;

  margin: 48px auto;

  padding: 24px;

  background: var(--color-panel-bg);

  border-radius: 12px;

  border: 1px solid var(--color-border);

}



.panel h2 {

  margin-top: 0;

}



.hint {

  color: var(--color-text-muted);

  font-size: 0.9rem;

  line-height: 1.5;

}



.field {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin: 16px 0;

}



.field textarea,

.field input,

.field select {

  width: 100%;

  padding: 10px;

  border-radius: 8px;

  border: 1px solid var(--color-input-border);

  background: var(--color-input-bg);

  color: inherit;

  font-size: 1rem;

}



.code-input {

  font-family: monospace;

  font-size: 1.75rem;

  letter-spacing: 0.35em;

  text-align: center;

  padding: 14px 10px;

}



.btn {

  border: none;

  border-radius: 8px;

  padding: 10px 16px;

  cursor: pointer;

  font-size: 0.95rem;

}



.btn-primary {

  background: var(--color-btn-primary-bg);

  color: var(--color-btn-primary-text);

  font-weight: 600;

}



.btn-ghost {

  background: transparent;

  color: var(--color-btn-ghost-text);

  border: 1px solid var(--color-btn-ghost-border);

}



.error {

  color: var(--color-error);

  margin-top: 12px;

}



.hidden {

  display: none !important;

}



.dashboard {

  padding: 16px;

}



.grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(260px, 320px));

  gap: 12px;

  justify-content: center;

}



.grid[data-columns='1'] {

  grid-template-columns: minmax(260px, 360px);

}



.grid[data-columns='3'] {

  grid-template-columns: repeat(auto-fill, minmax(220px, 280px));

}



.grid[data-columns='4'] {

  grid-template-columns: repeat(auto-fill, minmax(180px, 240px));

}



.tile {

  position: relative;

  aspect-ratio: 3 / 4;

  max-height: min(480px, 55vh);

  width: 100%;

  background: #000;

  border-radius: 12px;

  overflow: hidden;

  cursor: pointer;

  border: 1px solid var(--color-tile-border);

}



.tile video {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.tile-label {

  position: absolute;

  left: 8px;

  top: 8px;

  background: var(--color-tile-overlay);

  color: var(--color-tile-overlay-text);

  padding: 4px 8px;

  border-radius: 6px;

  font-size: 0.75rem;

}



.tile-badge {

  position: absolute;

  right: 8px;

  top: 8px;

  font-size: 0.7rem;

  background: var(--color-tile-overlay);

  color: var(--color-text-muted);

  padding: 2px 6px;

  border-radius: 4px;

}



.tile-loading {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-text-muted);

  font-size: 0.85rem;

  background: rgba(0, 0, 0, 0.45);

  pointer-events: none;

  z-index: 2;

}



.empty {

  text-align: center;

  color: var(--color-text-muted);

  padding: 48px;

}



.fullscreen {

  position: fixed;

  inset: 0;

  background: #000;

  z-index: 100;

}



.fullscreen-top {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  z-index: 2;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px;

  background: var(--color-fullscreen-toolbar);

}



.fullscreen-top .tile-label {

  position: static;

  background: transparent;

  padding: 0;

  flex: 1;

}



.fullscreen-bottom {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 2;

  display: flex;

  justify-content: center;

  padding: 12px 12px max(12px, env(safe-area-inset-bottom));

  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);

}



.fullscreen-controls {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 8px;

}



.tile-actions .btn.active,

.fullscreen-controls .btn.active {

  background: rgba(255, 193, 7, 0.85);

  color: #111;

}



.fullscreen-video-wrap {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.fullscreen-video-wrap video {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.tile-actions {

  position: absolute;

  right: 8px;

  bottom: 8px;

  display: flex;

  gap: 6px;

  z-index: 2;

}



.tile-actions .btn {

  padding: 6px 10px;

  font-size: 0.8rem;

  background: var(--color-tile-overlay);

  color: var(--color-tile-overlay-text);

  border: 1px solid var(--color-btn-ghost-border);

}



.settings-panel {

  position: fixed;

  inset: 0;

  z-index: 200;

  display: flex;

  align-items: flex-end;

  justify-content: center;

}



.settings-backdrop {

  position: absolute;

  inset: 0;

  background: var(--color-overlay);

}



.settings-sheet {

  position: relative;

  width: min(520px, 100%);

  max-height: 90vh;

  overflow: auto;

  background: var(--color-panel-bg);

  border-radius: 16px 16px 0 0;

  border: 1px solid var(--color-border);

  padding: 20px 24px 28px;

}



.settings-sheet fieldset {

  border: 1px solid var(--color-input-border);

  border-radius: 8px;

  padding: 10px 12px;

  margin: 0;

}



.settings-sheet fieldset label {

  display: block;

  margin: 6px 0;

}



.settings-sheet .checkbox {

  flex-direction: row;

  align-items: center;

  gap: 10px;

}



.settings-actions {

  display: flex;

  gap: 12px;

  margin-top: 16px;

}



.dashboard-toolbar {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  align-items: center;

  padding: 8px 0 12px;

}



.dashboard-toolbar select {

  background: var(--color-panel-bg);

  color: inherit;

  border: 1px solid var(--color-input-border);

  border-radius: 8px;

  padding: 8px 10px;

}



.layout-root {

  position: relative;

  min-height: min(70vh, 720px);

  max-height: 80vh;

}



.layout-root.layout-grid {

  display: grid;

  gap: 8px;

  min-height: min(70vh, 720px);

  max-height: 80vh;

}



.layout-root .tile {

  max-height: none;

  aspect-ratio: auto;

  min-height: 0;

}



.layout-root .layout-free-item {

  position: absolute;

}



.editor-group {

  margin-bottom: 16px;

  padding-bottom: 12px;

  border-bottom: 1px solid var(--color-border);

}



.editor-preset {

  padding: 4px 0;

  color: var(--color-text-muted);

}