.sline-landscape-setting {
  border: 1px solid var(--color-border, var(--border, #34404e));
  border-radius: 14px;
  padding: 20px;
  background: var(--color-card, var(--card, transparent));
  margin: 16px 0;
  color: inherit;
}
.sline-landscape-setting h2 {
  font-size: 1.15rem;
  font-weight: 650;
  margin: 0 0 10px;
}
.sline-landscape-setting p {
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 10px 0;
}
.sline-landscape-setting label {
  display: block;
  font-weight: 600;
  margin-top: 18px;
}
.sline-landscape-setting select {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: var(--color-background, var(--bg, #10151c));
  color: inherit;
  padding: 10px 12px;
  font: inherit;
}
.sline-landscape-hint {
  opacity: 0.75;
}
html[data-sline-landscape="desktop"] .sline-workspace {
  display: flex;
  min-width: 0;
  max-width: 100%;
}
html[data-sline-landscape="desktop"] .sline-workspace > aside {
  display: flex !important;
  width: clamp(9.5rem, 20vw, 12rem) !important;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  padding: 12px 8px;
  flex-shrink: 0;
}
html[data-sline-landscape="desktop"] .sline-workspace > aside nav {
  min-height: 0;
  overflow-y: auto;
}
html[data-sline-landscape="desktop"] .sline-workspace > aside a,
html[data-sline-landscape="desktop"] .sline-workspace > aside button {
  min-height: 44px;
}
html[data-sline-landscape="desktop"] .sline-workspace > div {
  min-width: 0;
  flex: 1;
}
html[data-sline-landscape="desktop"] .sline-workspace main {
  min-width: 0;
  max-width: 100%;
  padding: 12px max(12px, env(safe-area-inset-right)) 24px;
}
html[data-sline-landscape="desktop"] .sline-workspace .sline-brand-banner {
  max-height: 80px;
  margin-top: 12px;
  margin-bottom: 12px;
}
html[data-sline-landscape="desktop"] .sline-workspace .sline-brand-banner img {
  max-height: 80px;
  width: 100%;
  object-fit: contain;
}
html[data-sline-landscape="desktop"]
  .sline-workspace
  main
  .grid[class*="grid-cols-"] {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
html[data-sline-landscape="desktop"] .sline-workspace main .overflow-x-auto {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
html[data-sline-landscape="desktop"] .sline-workspace main table {
  min-width: 560px;
}
html[data-sline-landscape="desktop"]
  .sline-workspace
  main
  [class~="hidden"][class~="md:block"] {
  display: block;
}
html[data-sline-landscape="desktop"]
  .sline-workspace
  main
  [class~="md:hidden"] {
  display: none;
}
html[data-sline-landscape="desktop"]
  .sline-workspace
  [aria-label="Open navigation"] {
  display: none !important;
}
html[data-sline-landscape="desktop"] .sline-workspace [data-landscape-nav] {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
}
html[data-sline-landscape="desktop"] .sline-workspace [data-landscape-header] {
  height: auto !important;
  min-height: 56px;
  flex-wrap: wrap;
  padding: 8px 12px;
}
html[data-sline-landscape="desktop"] [role="dialog"] {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}

html[data-sline-landscape="desktop"] .app-shell {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
}
html[data-sline-landscape="desktop"] .app-shell > .sidebar {
  position: sticky;
  top: 0;
  width: 180px;
  max-height: 100dvh;
  transform: none;
  visibility: visible;
  overflow-y: auto;
  z-index: 30;
  padding: 12px;
}
html[data-sline-landscape="desktop"] .app-shell > .workspace {
  margin-left: 0;
  min-width: 0;
  width: 100%;
}
html[data-sline-landscape="desktop"] .app-shell .menu,
html[data-sline-landscape="desktop"] .app-shell .sidebar .close,
html[data-sline-landscape="desktop"] .app-shell .scrim {
  display: none;
}
html[data-sline-landscape="desktop"] .app-shell .content {
  padding: 16px;
  min-width: 0;
}
html[data-sline-landscape="desktop"] .app-shell .queue-grid,
html[data-sline-landscape="desktop"] .app-shell .category-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
html[data-sline-landscape="desktop"] .app-shell .sidebar-scroll {
  min-height: 0;
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
}

/* Restore interaction as well as visibility after the mobile drawer is closed. */
html[data-sline-landscape="desktop"] .app-shell > .sidebar[data-open="false"] {
  visibility: visible !important;
  pointer-events: auto;
  transform: none;
}
html[data-sline-landscape="desktop"] .app-shell .sline-drawer-tab,
html[data-sline-landscape="desktop"] .app-shell .sidebar .close {
  display: none !important;
}
html[data-sline-landscape="desktop"] .app-shell .content {
  width: calc(100% - 24px);
  margin: 16px auto 32px;
}
html[data-sline-landscape="desktop"] .app-shell .topbar {
  min-height: 56px;
  height: auto;
  padding: 8px max(12px, env(safe-area-inset-right)) 8px 12px;
}