/* Playground styles */

body {
	font-family: system-ui, -apple-system, sans-serif;
	margin: 0;
	padding: 2rem;
	line-height: 1.6;
}

nui-app-footer {
	display: flex;
}

#scrollToTop {
	margin-left: auto;
}

/* Component demo page styles */
.demo-container {
	margin-bottom: var(--nui-space, 1rem);
}

/* Demo area containers - for interactive examples */
.demo-area {
	
	margin-bottom: 1rem;
}

.demo-result {
	border: solid var(--border-thickness) var(--border-shade2);
	padding-top: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}

.demo-callout {
	background: var(--color-shade1);
	border-left: 4px solid var(--color-highlight);
	padding: 1rem;
	margin: 1rem 0;
}

.demo-chrome {
	background: var(--color-shade1);
	border: var(--border-thickness) solid var(--border-shade2);
	border-radius: var(--border-radius2);
	padding: 1rem;
	margin: 1.5rem 0;
}

/* List page styles */
.page-list .demo-list {
	position: relative;
	background: var(--nui-surface);
	border: 1px solid var(--nui-border);
	border-radius: var(--nui-radius-md);
	overflow: hidden;
}

.page-list .demo-list--sm {
	height: 300px;
}

.page-list .demo-list--md {
	height: 400px;
}

.page-list .demo-list--lg {
	height: 500px;
}

.page-list .demo-list--xl {
	height: 600px;
}

.demo-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--nui-space, 1rem);
	margin: var(--nui-space, 1rem) 0;
}

.collapsible-section {
	margin: 1rem 0;
	border-bottom: thin solid var(--border-shade3);
}

.collapsible-section summary {
	cursor: pointer;
	font-weight: bold;
	padding: var(--nui-space-half, 0.5rem);
	padding-left: var(--nui-space, 1rem);
	padding-right: var(--nui-space, 1rem);
	background: var(--color-shade2);
	border-radius: var(--border-radius2, 0.25rem);
}

.collapsible-section summary::marker {
	font-size: 1rem;
	color: var(--colort-text-dim);
}

.collapsible-section summary strong {
	font-weight: 400;
	margin-left: 0.2rem;
}

.collapsible-section > div {
	padding: var(--nui-space, 1rem);
	background: var(--color-shade1);
	border-radius: 0 0 var(--border-radius1, 0.25rem) var(--border-radius1, 0.25rem);
}

.collapsible-section pre {
	margin: 0;
	overflow-x: auto;
	font-size: 0.875rem;
}

.llm-guide {
	max-width: 100%;
	line-height: 1.5;
	padding-bottom: 1.5rem;
	display: block;
	border-bottom: thin solid var(--border-shade3);
}

.page-markdown .markdown-render-card {
	background: light-dark(var(--color-shade2), var(--color-shade1));
	border-color: var(--border-shade3);
	box-shadow: 0 0 0 1px light-dark(rgb(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)), 0 0.5rem 1.25rem light-dark(rgb(0, 0, 0, 0.08), rgba(0, 0, 0, 0.28));
	padding: var(--nui-space-double);
	margin-top: var(--nui-space);
}

.page-markdown .markdown-render-card nui-markdown {
	display: block;
	width: 100%;
}

.page-markdown .streaming-grid {
	display: grid;
	grid-template-columns: 50% 50%;
	gap: var(--nui-space);
	margin-top: var(--nui-space);
}

.page-markdown .streaming-grid > div {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.page-markdown .streaming-grid h3 {
	margin-bottom: var(--nui-space-half);
}

.page-markdown .streaming-grid nui-card {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.page-markdown .streaming-grid nui-card > * {
	flex: 1;
}

.page-markdown #output {
	min-height: 400px;
}



/* Icon page styles */
.page-icon .icon-demo {
	display: flex;
	gap: var(--nui-space-double, 2rem);
	align-items: center;
	padding: var(--nui-space-double, 2rem);
	background: var(--color-shade2);
	border-radius: var(--border-radius2, 8px);
}

.page-icon .icon-demo nui-icon {
	width: 1em;
	height: 1em;
}

.page-icon .icon-demo p {
	margin: 0 0 1rem 0;
}

.page-icon .icon-demo p:last-child {
	margin: 0;
}

.page-icon .demo-list {
	position: relative;
	background: var(--color-base);
	border: 1px solid var(--border-shade1);
	border-radius: var(--border-radius1);
	overflow: hidden;
	height: 400px;
}

.page-icon .demo-list--sm {
	height: 300px;
}

.page-icon .demo-list--md {
	height: 400px;
}

.page-icon .demo-list--lg {
	height: 500px;
}

.page-icon .icon-list-item {
	display: flex;
	align-items: center;
	gap: var(--nui-space);
	padding: var(--nui-space-half) var(--nui-space);
	cursor: pointer;
	transition: background 0.2s;
	border-radius: var(--border-radius1);
}

.page-icon .icon-list-item:hover {
	background: var(--color-shade2);
}

.page-icon .icon-list-item nui-icon {
	font-size: 2rem;
	flex-shrink: 0;
}

.page-icon .icon-list-item code {
	font-size: 0.875rem;
	opacity: 0.8;
}

/* App Layout page styles */
.page-app-layout .layout-diagram {
	padding: calc(var(--nui-space, 1rem) * 1.5);
	background: var(--color-base);
}

.page-app-layout .diagram-label {
	font-weight: 600;
	margin-bottom: var(--nui-space, 1rem);
	color: var(--color-highlight);
}

/* App Mode Diagram */
.page-app-layout .app-mode-diagram {
	display: grid;
	grid-template-areas:
		"topnav topnav topnav"
		"sidebar content sidebar-right"
		"footer footer footer";
	grid-template-rows: 50px 200px 40px;
	grid-template-columns: 150px 1fr 150px;
	gap: var(--nui-space-half, 0.5rem);
	background: var(--color-base);
	padding: var(--nui-space-half, 0.5rem);
	border-radius: var(--border-radius1, 4px);
}

.page-app-layout .diagram-topnav {
	grid-area: topnav;
	background: light-dark(#e3f2fd, #1e3a5f);
	border: 2px solid light-dark(#2196f3, #64b5f6);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	color: light-dark(#1976d2, #90caf9);
}

.page-app-layout .diagram-sidebar {
	grid-area: sidebar;
	background: light-dark(#f3e5f5, #4a1a4a);
	border: 2px solid light-dark(#9c27b0, #ba68c8);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	color: light-dark(#7b1fa2, #ce93d8);
}

.page-app-layout .diagram-content {
	grid-area: content;
	background: light-dark(#e8f5e9, #1b4d1b);
	border: 2px solid light-dark(#4caf50, #81c784);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	color: light-dark(#388e3c, #a5d6a7);
}

.page-app-layout .diagram-footer {
	grid-area: footer;
	background: light-dark(#fff3e0, #5a3d1a);
	border: 2px solid light-dark(#ff9800, #ffb74d);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	color: light-dark(#f57c00, #ffcc80);
}

.page-app-layout .app-mode-diagram small {
	font-size: 0.7rem;
	opacity: 0.7;
	font-weight: 400;
}

/* Page Mode Diagram */
.page-app-layout .page-mode-diagram {
	display: flex;
	flex-direction: column;
	gap: var(--nui-space-half, 0.5rem);
	background: var(--color-base);
	padding: var(--nui-space-half, 0.5rem);
	border-radius: var(--border-radius1, 4px);
}

.page-app-layout .diagram-page-block {
	background: light-dark(#f5f5f5, #2a2a2a);
	border: 2px dashed light-dark(#9e9e9e, #616161);
	border-radius: 4px;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	font-weight: 600;
}

.page-app-layout .diagram-page-block small {
	font-size: 0.75rem;
	opacity: 0.7;
	font-weight: 400;
}

/* Component Diagrams */
.page-app-layout .component-diagram {
	margin-top: var(--nui-space-double, 2rem);
	margin-bottom: var(--nui-space-double, 2rem);
}

.page-app-layout .topnav-example {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.5rem;
	background: light-dark(#e3f2fd, #1e3a5f);
	border: 2px solid light-dark(#2196f3, #64b5f6);
	border-radius: 4px;
	margin-bottom: 0.5rem;
}

.page-app-layout .topnav-title {
	font-weight: 600;
	font-size: 1.25rem;
	color: light-dark(#1976d2, #90caf9);
}

.page-app-layout .topnav-actions {
	display: flex;
	gap: 1rem;
}

.page-app-layout .icon-placeholder {
	font-size: 1.5rem;
}

.page-app-layout .sidenav-example {
	background: light-dark(#f3e5f5, #4a1a4a);
	border: 2px solid light-dark(#9c27b0, #ba68c8);
	border-radius: 4px;
	padding: 1rem;
	text-align: left;
	max-width: 250px;
	margin: 0 auto 0.5rem;
}

.page-app-layout .nav-group {
	margin-bottom: 0.5rem;
}

.page-app-layout .nav-group-header {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.5rem;
	font-weight: 600;
	color: light-dark(#7b1fa2, #ce93d8);
	cursor: pointer;
}

.page-app-layout .nav-items {
	padding-left: 1.5rem;
}

.page-app-layout .nav-item {
	padding: 0.5rem;
	color: light-dark(#6a1b9a, #ba68c8);
	cursor: pointer;
}

.page-app-layout .nav-item.active {
	background: light-dark(rgba(156, 39, 176, 0.1), rgba(186, 104, 200, 0.2));
	border-radius: 4px;
	font-weight: 600;
}

/* Grid Visualization */
.page-app-layout .grid-visualization {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: 40px 1fr 40px;
	gap: var(--nui-space-half, 0.5rem);
	min-height: 200px;
	background: var(--color-base);
	padding: var(--nui-space-half, 0.5rem);
	border-radius: var(--border-radius1, 4px);
	margin-bottom: var(--nui-space, 1rem);
}

.page-app-layout .grid-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.9rem;
}

.page-app-layout .topnav-cell {
	background: light-dark(#e3f2fd, #1e3a5f);
	border: 2px solid light-dark(#2196f3, #64b5f6);
	color: light-dark(#1976d2, #90caf9);
}

.page-app-layout .sidebar-cell {
	background: light-dark(#f3e5f5, #4a1a4a);
	border: 2px solid light-dark(#9c27b0, #ba68c8);
	color: light-dark(#7b1fa2, #ce93d8);
}

.page-app-layout .content-cell {
	background: light-dark(#e8f5e9, #1b4d1b);
	border: 2px solid light-dark(#4caf50, #81c784);
	color: light-dark(#388e3c, #a5d6a7);
}

.page-app-layout .footer-cell {
	background: light-dark(#fff3e0, #5a3d1a);
	border: 2px solid light-dark(#ff9800, #ffb74d);
	color: light-dark(#f57c00, #ffcc80);
}

.page-app-layout .grid-labels {
	display: flex;
	justify-content: space-around;
	font-size: 0.85rem;
	opacity: 0.7;
	margin-top: 0.5rem;
}

/* Responsive Diagram */
.page-app-layout .responsive-diagram {
	display: flex;
	gap: var(--nui-space-double, 2rem);
	justify-content: center;
	flex-wrap: wrap;
	margin: var(--nui-space-double, 2rem) 0;
	padding: calc(var(--nui-space, 1rem) * 1.5);
	background: var(--color-shade2);
	border-radius: var(--border-radius2, 8px);
}

.page-app-layout .device-view {
	text-align: center;
}

.page-app-layout .device-label {
	font-weight: 600;
	margin-bottom: var(--nui-space-half, 0.5rem);
	color: var(--color-highlight);
}

.page-app-layout .desktop-view .device-screen {
	width: 300px;
	height: 200px;
	border: 3px solid light-dark(#424242, #bdbdbd);
	border-radius: 8px;
	display: grid;
	grid-template-areas:
		"topnav topnav"
		"sidebar content";
	grid-template-rows: 30px 1fr;
	grid-template-columns: 80px 1fr;
	gap: 2px;
	background: var(--color-base);
	padding: 2px;
}

.page-app-layout .mobile-view .device-screen {
	width: 150px;
	height: 200px;
	border: 3px solid light-dark(#424242, #bdbdbd);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--color-base);
	padding: 2px;
}

.page-app-layout .view-topnav {
	grid-area: topnav;
	background: light-dark(#e3f2fd, #1e3a5f);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 600;
	color: light-dark(#1976d2, #90caf9);
	border-radius: 2px;
}

.page-app-layout .view-sidebar {
	grid-area: sidebar;
	background: light-dark(#f3e5f5, #4a1a4a);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65rem;
	font-weight: 600;
	color: light-dark(#7b1fa2, #ce93d8);
	border-radius: 2px;
}

.page-app-layout .view-content {
	grid-area: content;
	background: light-dark(#e8f5e9, #1b4d1b);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 600;
	color: light-dark(#388e3c, #a5d6a7);
	border-radius: 2px;
}

.page-app-layout .view-content-full {
	flex: 1;
	background: light-dark(#e8f5e9, #1b4d1b);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 600;
	color: light-dark(#388e3c, #a5d6a7);
	border-radius: 2px;
}

.link_list_fold_container {
	border: 1px solid var(--border-shade2);
	border-radius: var(--border-radius1);
	padding: 1rem;
	background: var(--color-shade1);
	margin-bottom: 1rem;
}
/* Tabs page styles */
.page-tabs .tab-content-short,
.page-tabs .tab-content-medium,
.page-tabs .tab-content-tall {
padding: 1rem;
background: var(--color-shade2);
}

.page-tabs .tab-log {
margin-top: 1rem;
padding: 0.5rem;
background: var(--color-shade2);
font-family: monospace;
font-size: 0.85rem;
}


/* Accordion page styles */
.page-accordion .accordion-content {
	padding: 1rem;
	line-height: 1.6;
}

/* Playground specific banner layout override */
.layout-banner {
	position: relative;
	overflow: hidden;
	background-color: var(--color-shade3);
	isolation: isolate;
}

/* Declarative Actions page styles */
.page-declarative-actions .syntax-display {
	font-family: monospace;
	font-size: 1.2rem;
}

.page-declarative-actions #demo-status-box {
	transition: background 0.3s;
}

.page-declarative-actions #task-card {
	max-width: 400px;
}

.page-declarative-actions .task-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.page-declarative-actions .task-card-header h4 {
	margin: 0;
}

.page-declarative-actions .task-status-badge {
	font-size: 0.8rem;
	padding: 0.2rem 0.5rem;
	background: var(--color-shade2);
	border-radius: 4px;
}

.page-declarative-actions .task-log {
	margin-top: 1rem;
	font-size: 0.9rem;
	color: var(--text-color-dim);
	font-family: monospace;
}

/* Dialog page styles */
.page-dialog nui-dialog dialog > div {
	padding: 2rem;
	width: 400px;
	max-width: 100%;
}

.page-dialog #custom-confirm-state {
	padding: 0.5rem 1rem;
	background: var(--color-shade1);
	border-radius: var(--border-radius1);
}

/* Button page styles */
.page-button .demo-box {
	padding: 1rem;
	background: var(--color-shade2);
	border-radius: var(--border-radius1);
	transition: background 0.3s;
}

.page-button .demo-box.highlight {
	background: var(--color-highlight-dim);
	color: white;
}

#demo-target {
	margin-bottom: 1rem;
}

.page-button #demo-target {
	padding: 0.5rem;
	background: var(--color-shade2);
	transition: background 0.3s;
}


/* Banner page styles */
.page-banner nui-banner > div {
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Icon page styles */
.page-icon .icon-demo-block {
	display: block;
}


/* API Documentation Tables */
.api-table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--nui-space-double, 1.5rem) 0;
	font-size: 0.875rem;
}

.api-table th,
.api-table td {
	text-align: left;
	padding: var(--nui-space) var(--nui-space);
	border-bottom: 1px solid var(--nui-border, var(--border-shade1));
}

.api-table th {
	font-weight: 600;
	background: var(--nui-surface, var(--color-shade1));
}

.api-table code {
	font-family: var(--nui-font-mono, monospace);
	font-size: 0.8rem;
	background: var(--nui-surface, var(--color-shade1));
	padding: 0.125rem 0.375rem;
	border-radius: 3px;
}
/* Page: Component Card */
.page-component-card .demo-card-standard {
max-width: 350px;
}
.page-component-card .demo-card-horizontal {
max-width: 600px;
}
.page-component-card .demo-card-horizontal-code {
max-width: 500px;
}
.page-component-card .demo-card-image-only {
width: 300px;
height: 250px;
}
.page-component-card .demo-card-flip {
height: 200px;
}

/* Internal formatting classes for card demos */
.page-component-card .demo-content {
padding: var(--nui-space);
}
.page-component-card .demo-content-horizontal {
padding: var(--nui-space);
display: flex;
flex-direction: column;
justify-content: center;
}

.page-component-card .demo-overlay {
padding: var(--nui-space);
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: white;
}
.page-component-card .demo-overlay-title,
.page-component-card .demo-overlay-desc {
margin: 0;
color: inherit;
}
.page-component-card .demo-overlay-desc {
opacity: 0.9;
}
.page-component-card .demo-m0 {
margin: 0;
}
.page-component-card .demo-mt0 {
margin-top: 0;
}
.page-component-card .demo-mb0 {
margin-bottom: 0;
}
.page-component-card .demo-link-clean {
text-decoration: none;
}
.page-component-card .demo-flip-face {
padding: var(--nui-space);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.page-component-card .demo-flip-back {
background: var(--color-shade2);
}