:root {
	color-scheme: dark;
	/* Core palette (updated to match example glass theme) */
	--bg: #0a0c10;
	--bg-accent-a: radial-gradient(1200px 1200px at 10% -10%, #182036 0%, transparent 60%),
		radial-gradient(1000px 1000px at 110% 10%, #1a2a2b 0%, transparent 50%);
	--panel: rgba(255,255,255,0.05);
	--panel-alt: rgba(255,255,255,0.03);
	--muted: #1a2430;
	--border: rgba(255,255,255,0.12);
	--border-strong: rgba(255,255,255,0.22);
	--text: #eaeef5;
	--text-dim: #b8c0cc;
	--accent: #7aa2ff;
	--accent-soft: rgba(122,162,255,0.18);
	--accent-alt: #6af0d9;
	--danger: #ff4f6b;
	--warn: #ffb347;
	--ok: #38d27d;
	--shadow: 0 10px 30px rgba(0,0,0,0.45);
	--shadow-sm: 0 4px 14px rgba(0,0,0,0.35);
	--radius: 14px;
	--radius-sm: 10px;
	--radius-lg: 18px;
	--radius-xl: 22px;
	--focus-ring: 0 0 0 3px rgba(122,162,255,0.35);
	--glass-grad: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
	--glass-strong: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	background: var(--bg-accent-a), var(--bg);
	color: var(--text);
	font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Utility */
.muted { color: var(--text-dim); }
.glass { background: var(--glass-grad); backdrop-filter: blur(10px); border: 1px solid var(--border); }
.elevate { box-shadow: var(--shadow); }
.brand-dot { width:12px; height:12px; border-radius:50%; background: linear-gradient(135deg,var(--accent),var(--accent-alt)); box-shadow:0 0 16px rgba(122,162,255,.55); display:inline-block; }

/* Global focus style */
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

	/* Hide debug-only buttons unless debug mode is enabled on body */
	.icon-btn.debug-only { display: none; }
	body.debug .icon-btn.debug-only { display: inline-flex; }

.topbar {
	position: sticky; top: 10px; z-index: 40;
	display: flex; align-items: center; gap: 14px;
	margin: 12px 16px 18px;
	padding: 14px 18px;
	background: var(--glass-grad);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	backdrop-filter: blur(12px);
	box-shadow: var(--shadow);
}
.topbar h1 { font-size: 15px; margin: 0; font-weight: 800; letter-spacing: .35px; display:flex; align-items:center; gap:10px; color: var(--text-dim); }
.icon-btn {
	appearance: none; border: 1px solid var(--border); background: rgba(255,255,255,0.04);
	color: var(--text); border-radius: 12px; padding: 8px 12px; cursor: pointer;
	font-weight:600; font-size:13px; letter-spacing:.3px;
	backdrop-filter: blur(8px);
	box-shadow: var(--shadow-sm);
	transition: transform .12s ease, border-color .25s ease, background .25s ease;
}
.icon-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.08); border-color: var(--border-strong); }
.icon-btn:active { transform: translateY(0); }
.icon-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.icon-btn.danger { background: linear-gradient(180deg, rgba(255,79,107,0.25), rgba(255,79,107,0.12)); border-color: rgba(255,79,107,0.55); }
.icon-btn.restore { background: linear-gradient(180deg, rgba(106,240,217,0.25), rgba(106,240,217,0.12)); border-color: rgba(106,240,217,0.55); }
.icon-btn.close { background: rgba(0,0,0,0.35); }
.icon-btn.debug-only { opacity:.65; }
.icon-btn.debug-only:hover { opacity:1; }

/* Health badge */
.health-indicator { position: relative; }
.health-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-left: 4px; box-shadow: 0 0 10px currentColor; }
.health-ok { color: var(--ok); background: var(--ok); }
.health-degraded { color: var(--warn); background: var(--warn); }
.health-backlog { color: var(--danger); background: var(--danger); }
.health-pulse { animation: pulse 1.6s infinite ease-in-out; }
@keyframes pulse { 0%,100% { transform: scale(.9); opacity:.85;} 50% { transform: scale(1.15); opacity:1;} }

.grid {
	padding: 18px 26px 60px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.category-section {
	margin: 12px 16px;
	padding: 12px 16px 10px;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	grid-column: 1 / -1;
}
.category-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 2px 10px;
}
.category-title {
	font-weight: 700;
	letter-spacing: 0.5px;
}
.category-toggle {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--panel-alt);
	color: var(--text-dim);
	padding: 4px 8px;
	cursor: pointer;
}
.category-section.collapsed .subgrid { display: none; }
.category-section.collapsed .category-toggle { background: var(--panel); color: var(--text); }
.category-section.collapsed { opacity: 0.82; }
.category-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}
.category-actions .icon-btn { height: 32px; width: 32px; }
.subgrid { padding: 12px 4px 32px; }
.category-select {
	min-width: 170px;
	margin-left: 10px;
	background: var(--panel);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: var(--radius-sm);
	padding: 6px 10px;
}
.search-input {
	min-width: 200px;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	color: var(--text);
}

.card {
	background: var(--glass-strong);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	display: flex; flex-direction: column;
	box-shadow: var(--shadow);
	backdrop-filter: blur(14px) saturate(140%);
	transition: border-color .25s ease, transform .18s ease, background .4s ease;
	/* Make card footprint square based on width */
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.card:active { transform: translateY(0); }
.card { will-change: transform; }
.card.dragging { opacity:.4; transform: scale(.94) rotate(.5deg) !important; box-shadow: 0 12px 28px -6px rgba(0,0,0,0.55); }
.card-placeholder { border:2px dashed var(--accent); background: repeating-linear-gradient(45deg, rgba(122,162,255,0.12), rgba(122,162,255,0.12) 8px, rgba(122,162,255,0.05) 8px, rgba(122,162,255,0.05) 16px); border-radius: var(--radius); min-height:132px; animation: pulsePlaceholder 1s ease-in-out infinite; position:relative; }
.card-placeholder::after { content:'Drop here'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; letter-spacing:.5px; color: var(--accent); text-transform:uppercase; opacity:.65; }
@keyframes pulsePlaceholder { 0%,100% { opacity:.55; } 50% { opacity:.9; } }
.card[draggable="true"] { user-select: none; }
.card.dragging { opacity: .6; }
.card.drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; }

.card-handle {
	padding: 10px 12px;
	display:flex; align-items:center; gap:10px; justify-content:center;
	background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
	border-bottom: 1px solid var(--border);
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	font-weight: 700; letter-spacing: 2px;
	color: #7b8fb8;
	cursor: grab;
}
.card-blurb {
	padding: 14px 16px 18px;
	color: var(--text);
	opacity: .9;
	font-size: 14px;
	line-height: 1.4;
	flex: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	line-clamp: 9; /* standard (not widely supported but added for lint) */
	-webkit-line-clamp: 9; /* approx lines to fit square after handle */
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Modal */
.modal.hidden { display: none; }
.modal {
	position: fixed; inset: 0; z-index: 50;
	display: grid; place-items: center;
}
.modal .backdrop {
	position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(10px) saturate(140%);
}
.modal .dialog {
	position: relative; width: min(920px, calc(100vw - 42px));
	background: var(--glass-strong);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow);
	display: flex; flex-direction: column;
	backdrop-filter: blur(18px) saturate(160%);
	transform: translateY(-10px);
}
.dialog-header {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.drag-hint { color: var(--text-dim); font-size: 18px; }
.spacer { flex: 1; }
.icon-btn.close { width: 34px; height: 34px; font-size: 18px; background: #121a28; display:grid; place-items:center; padding:0; line-height:1; }
.icon-btn.close:hover { background: linear-gradient(180deg, rgba(255,79,107,0.25), rgba(255,79,107,0.12)); border-color: rgba(255,79,107,0.55); color:#fff; box-shadow:0 0 0 2px rgba(255,79,107,0.35); }

/* Unified close style reuse */
.unified-close { border-radius: 10px; }

#editor {
	width: 100%; min-height: 46vh;
	padding: 18px 20px; border: 0; outline: none;
	background: transparent; color: var(--text);
	font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	resize: vertical;
}
.dialog-actions {
	display: flex; justify-content: flex-end; gap: 10px;
	padding: 12px 16px; border-top: 1px solid var(--border);
}
.dialog-actions.inline-actions { border-top: 0; padding: 12px 0 6px; }
.trash { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); }
.trash.armed { background: var(--danger); border-color: #ff9aa9; color:#fff; }
.name-input {
	background: rgba(0,0,0,0.35); border: 1px solid var(--border);
	color: var(--text); border-radius: 10px; padding: 8px 12px; text-align: center;
	min-width: 40%; outline: none; font-weight:600; letter-spacing:.4px;
}
.name-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.text-input {
	width: 100%;
	background: rgba(0,0,0,0.32);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	font-size: 14px;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.text-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }

.dialog-slim { width: min(480px, calc(100vw - 42px)); }
.dialog-header.simple { align-items: flex-start; }
.dialog-titles { display: flex; flex-direction: column; gap: 4px; }
.dialog-title { font-weight: 700; letter-spacing: .4px; }
.dialog-subtitle { color: var(--text-dim); font-size: 13px; }
.dialog-body { padding: 16px 18px; color: var(--text); line-height: 1.55; }
.modal .dialog form { padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 12px; }
.icon-btn.primary { background: linear-gradient(180deg, rgba(122,162,255,0.25), rgba(122,162,255,0.12)); border-color: rgba(122,162,255,0.55); }

.fullscreen .dialog { width: 96vw; height: 92vh; }
.fullscreen #editor { height: calc(92vh - 140px); min-height: 0; resize: none; }

.drawer { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; }
.drawer.hidden { display: none; }
.drawer-backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.55); backdrop-filter: blur(10px) saturate(140%); }
.drawer-panel { position:relative; width: min(920px, 94vw); max-height: 84vh; overflow: hidden; display:flex; flex-direction:column; background: var(--glass-strong); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(160%); }
.drawer-header { display:flex; align-items:center; justify-content: space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); }
.drawer-title { font-size:15px; letter-spacing:.4px; font-weight:700; color: var(--text-dim); }
.drawer-body { padding: 18px 20px 22px; display:flex; flex-direction:column; gap:16px; overflow:auto; }

/* History tabs refinement */
.history-tabs { display:flex; gap:8px; }
.history-tabs.inline { position:static; background:transparent; padding:0; }
.history-tabs .tab { flex:0 0 auto; }
.history-tabs .tab.active { background: var(--accent-soft); border-color: var(--accent); }
.header-spacer { flex:1; }

/* History rows */
.history-row { padding:12px 14px 14px; border:1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,0.04); display:flex; flex-direction:column; gap:6px; position:relative; }
.history-row:hover { border-color: var(--border-strong); }
.history-row code { font-size:11px; background: rgba(255,255,255,0.06); padding:2px 6px; border-radius:6px; }
.history-row .muted { font-size:12px; line-height:1.4; }
.history-row .row-actions { display:flex; gap:8px; margin-top:4px; }

/* Versions / Diff UI */
.versions-panel { display:flex; flex-direction:column; gap:14px; }
.versions-header { display:flex; gap:12px; align-items:center; }
.versions-header select { flex:1; background: rgba(0,0,0,0.45); border:1px solid var(--border); border-radius:12px; padding:10px 14px; color:var(--text); font-weight:600; letter-spacing:.3px; appearance:none; position:relative; box-shadow: var(--shadow-sm) inset; }
.versions-header select:focus { outline:none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.versions-header { background:linear-gradient(180deg, rgba(10,12,16,0.65), rgba(10,12,16,0.4)); padding:12px 14px; margin:0; border:1px solid var(--border); border-radius: var(--radius); }
.versions-panel { padding-top:0; }
.versions-list { display:flex; flex-direction:column; gap:8px; max-height:260px; overflow:auto; }
.version-row { padding:10px 12px; border:1px solid var(--border); border-radius: var(--radius-sm); background:rgba(255,255,255,0.04); cursor:pointer; display:flex; flex-direction:column; gap:4px; }
.version-row:hover { border-color: var(--border-strong); background:rgba(255,255,255,0.06); }
.version-row .badge { background: rgba(122,162,255,0.18); padding:2px 8px; border-radius:30px; font-size:11px; letter-spacing:.5px; }
.version-actions { display:flex; justify-content:space-between; gap:10px; margin-bottom:8px; }
.version-actions .left-group { display:flex; gap:8px; }
.version-actions .mode-btn.active { background: var(--accent-soft); border-color: var(--accent); }
.version-view pre { margin:0; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(0,0,0,0.35); padding:14px 16px; border:1px solid var(--border); border-radius: var(--radius); overflow:auto; max-height:360px; }
.diff-block { display:block; }
.diff-line { white-space:pre-wrap; }
.diff-line.add { background: rgba(56,210,125,0.18); color:#b2f5d2; padding:1px 6px; border-radius:6px; }
.diff-line.del { background: rgba(255,79,107,0.18); color:#ffb5c2; padding:1px 6px; border-radius:6px; }
.diff-line.same { color: var(--text-dim); }
.version-raw code { white-space:pre-wrap; }

/* Scrollbar refinement */
::-webkit-scrollbar { width: 10px; height:10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border:2px solid rgba(0,0,0,0.15); border-radius: 30px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.26); }

/* Animations */
@keyframes floatUp { 0% { transform: translateY(6px); opacity:0;} 100% { transform: translateY(0); opacity:1;} }
.card, .modal .dialog, .drawer-panel { animation: floatUp .5s ease; }

/* Accessibility tweaks */
@media (prefers-reduced-motion: reduce) { .card, .modal .dialog, .drawer-panel { animation: none; transition: none; } }