:root {
	
	--font:        system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-header: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	
	--light-bg:           #f5f6fa;
	--light-surface:      #fff;
	--light-surface-alt:  #f1f3f5;
	--light-border:       #e5e7eb;
	--light-text:         #1a1a2e;
	--light-text-muted:   #666;
	--light-text-hint:    #9a9aa8;

	--dark-bg:            #010101;
	--dark-surface:       #1c1c1a;
	--dark-surface-alt:   #242424;
	--dark-border:        #2a2a33;
	--dark-text:          #f1f1f5;
	--dark-text-muted:    #9a9aa8;
	--dark-text-hint:     #666;

	
	--bg:           var(--light-bg);
	--surface:      var(--light-surface);
	--surface-alt:  var(--light-surface-alt);
	--border:       var(--light-border);
	--text:         var(--light-text);
	--text-muted:   var(--light-text-muted);
	--text-hint:    var(--light-text-hint);

	
	--primary:   	#0247fe;
	--primary-fg:   #fff;
	--primary-hint: color-mix(in srgb, var(--primary) 10%, #fff);
	--primary-hover: color-mix(in srgb, var(--primary) 85%, #fff);
	--primary-active: color-mix(in srgb, var(--primary) 85%, #000);

	--accent:    	#f66429;
	--accent-fg:    #fff;
	--accent-hint: color-mix(in srgb, var(--accent) 10%, #fff);
	--accent-hover: color-mix(in srgb, var(--accent) 80%, #fff);
	--accent-active: color-mix(in srgb, var(--accent) 80%, #000);

	--success:   	#059669;
	--success-fg:   #fff;
	--success-hint: color-mix(in srgb, var(--success) 10%, #fff);
	--success-hover: color-mix(in srgb, var(--success) 80%, #fff);
	--success-active: color-mix(in srgb, var(--success) 80%, #000);

	--warning:   	#e1b12c;
	--warning-fg:   #fff;
	--warning-hint: color-mix(in srgb, var(--warning) 10%, #fff);
	--warning-hover: color-mix(in srgb, var(--warning) 80%, #fff);
	--warning-active: color-mix(in srgb, var(--warning) 80%, #000);

	--danger:    	#e84118;
	--danger-fg:    #fff;
	--danger-hint: color-mix(in srgb, var(--danger) 10%, #fff);
	--danger-hover: color-mix(in srgb, var(--danger) 80%, #fff);
	--danger-active: color-mix(in srgb, var(--danger) 80%, #000);

	--info:      	#0097e6;
	--info-fg:      #fff;
	--info-hint: color-mix(in srgb, var(--info) 15%, #fff);
	--info-hover: color-mix(in srgb, var(--info) 80%, #fff);
	--info-active: color-mix(in srgb, var(--info) 80%, #000);

	--neutral:   	#6b7280;
	--neutral-fg:   #fff;
	--neutral-hint: color-mix(in srgb, var(--neutral) 15%, #fff);
	--neutral-hover: color-mix(in srgb, var(--neutral) 80%, #fff);
	--neutral-active: color-mix(in srgb, var(--neutral) 80%, #000);

}


[data-theme="dark"] {
	--primary: 		color-mix(in srgb, #0247fe 75%, #fff);
	--bg: 			var(--dark-bg);
	--surface: 		var(--dark-surface);
	--surface-alt: 	var(--dark-surface-alt);
	--border: 		var(--dark-border);
	--text: 		var(--dark-text);
	--text-muted: 	var(--dark-text-muted);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--primary: 	   color-mix(in srgb, #0247fe 75%, #fff);
		--bg:          var(--dark-bg);
		--surface:     var(--dark-surface);
		--surface-alt: var(--dark-surface-alt);
		--border:      var(--dark-border);
		--text:        var(--dark-text);
		--text-muted:  var(--dark-text-muted);
	}
}

blockquote,body,dd,dl,dt,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,html,iframe,legend,li,ol,p,pre,textarea,ul { margin:0; padding:0; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:400; }
ul, ol { list-style-position: inside; }
ul[class] { list-style:none; }
button { outline:none; }
button,input,select { margin:0; }
html { box-sizing: border-box; background: var(--light-bg); -webkit-font-smoothing: antialiased; font-kerning:auto; }
html, body { min-height: 100dvh; }
*,::after,::before { box-sizing: border-box; }
img,video,iframe { height:auto; max-width:100%; border:0; outline:none; vertical-align: middle; }
table { border-collapse:collapse; border-spacing:0; }
td,th { padding:0; }
template, [hidden] { display: none; }
iframe { display: block; max-width: 100%; }
address { font-style: normal; margin:0 0 1rem; }
address span { display:block; }
picture { display:block; }
picture img { max-height: 100%; max-width: 100%; min-height: 100%; min-width: 100%; object-fit: cover; width: auto; height:auto; }
p { margin:0 0 1.4rem; }
sup { font-size:.9rem; line-height: 1; vertical-align: super; }
hr { border:0; border-bottom:1px solid var(--light-border); margin:3rem 0; }


html, body { background: var(--bg); color: var(--text); }
body { font: 16px/1.345 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, legend { margin:0 0 1.4rem 0; font:800 2rem/1.1 var(--font-header); }
h1, h2 { text-rendering: optimizeLegibility; }
h1 + h2 { font-size:1.3rem; margin:-1rem 0 1.4rem; color:#777; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1.15rem; }
legend { font-size: 1.2rem; }

::placeholder { color: #666; font:.9rem var(--font); text-overflow:ellipsis; }

a { color: var(--primary); }
a:not(.Button):hover { color: var(--primary-hover); }
a:not(.Button):active { color: var(--primary-active); }

.Page { display: flex; flex-direction: column; min-height: 100dvh; max-width: 1400px; margin: 0 auto; padding:0 1.4rem; }
.Page.full { max-width: 100%; }
.Page.window { padding: 1.4rem; }

.Page-Header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.Page-HeaderActions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex-shrink: 0; }
.Page-Content { flex: 1; padding:0 0 100px;}
.Page-Footer {}


.Page-Title { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.Page-Title h1, .Page-Title h2, .Page-Title h3 { margin: 0; font-family: var(--font-header); color: var(--text); }
.Page-Subtitle { margin: 0; font-size: 0.9rem; color: var(--text-muted); }


.Page-Actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; flex-shrink: 0; }
.Page-Actions.bottom { padding:1rem; position: fixed; bottom: 0; left:0; right: 0; z-index: 10; background: var(--surface); border-top: 1px solid var(--border); }




@media (max-width: 480px) {
	.Page-Header { flex-direction: column; align-items: flex-start; }
	.Page-HeaderActions { width: 100%; }
}





.Button {
	--button-bg: var(--button, var(--neutral));
	--button-fg: var(--neutral-fg);
	--button-border: var(--button, var(--neutral));

	background: var(--button-bg);
	border: 2px solid var(--button-border);
	color: var(--button-fg);

	display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.5rem 1.25rem; border-radius: 6px; font: 600 .9rem/1 var(--font); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; appearance: none;
}
.Button-Text { pointer-events: none; }
.Button-Icon { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; pointer-events: none; }




.Button.primary  { --button: var(--primary);  --button-fg: var(--primary-fg);  }
.Button.accent   { --button: var(--accent);   --button-fg: var(--accent-fg);   }
.Button.success  { --button: var(--success);  --button-fg: var(--success-fg);  }
.Button.warning  { --button: var(--warning);  --button-fg: var(--warning-fg);  }
.Button.danger   { --button: var(--danger);   --button-fg: var(--danger-fg);   }
.Button.info     { --button: var(--info);     --button-fg: var(--info-fg);     }

.Button.secondary 		   { --button-bg: transparent; --button-fg: var(--neutral); }
.Button.secondary.primary  { --button-border: var(--button, var(--primary));  --button-fg: var(--primary);  }
.Button.secondary.accent   { --button-border: var(--button, var(--accent));   --button-fg: var(--accent);   }
.Button.secondary.success  { --button-border: var(--button, var(--success));  --button-fg: var(--success);  }
.Button.secondary.warning  { --button-border: var(--button, var(--warning));  --button-fg: var(--warning);  }
.Button.secondary.danger   { --button-border: var(--button, var(--danger));   --button-fg: var(--danger);   }
.Button.secondary.info     { --button-border: var(--button, var(--info));     --button-fg: var(--info);     }

.Button.ghost		   { --button: transparent; --button-fg: var(--text-muted); }
.Button.ghost.primary  { --button-border: var(--button, var(--primary));  --button-fg: var(--primary);  }
.Button.ghost.accent   { --button-border: var(--button, var(--accent));   --button-fg: var(--accent);   }
.Button.ghost.success  { --button-border: var(--button, var(--success));  --button-fg: var(--success);  }
.Button.ghost.warning  { --button-border: var(--button, var(--warning));  --button-fg: var(--warning);  }
.Button.ghost.danger   { --button-border: var(--button, var(--danger));   --button-fg: var(--danger);   }
.Button.ghost.info     { --button-border: var(--button, var(--info));     --button-fg: var(--info);     }


.Button:hover 			{ --button-bg: var(--neutral-hover); 	--button-border: var(--neutral-hover);  --button-fg: var(--neutral-fg); }
.Button.ghost:hover 	{ --button-bg: var(--neutral-hover); 	--button-border: var(--neutral-hover);	--button-fg: var(--neutral-fg); }
.Button.primary:hover 	{ --button-bg: var(--primary-hover); 	--button-border: var(--primary-hover); 	--button-fg: var(--primary-fg); }
.Button.accent:hover 	{ --button-bg: var(--accent-hover); 	--button-border: var(--accent-hover); 	--button-fg: var(--accent-fg); }
.Button.success:hover 	{ --button-bg: var(--success-hover);	--button-border: var(--success-hover); 	--button-fg: var(--success-fg); }
.Button.warning:hover 	{ --button-bg: var(--warning-hover); 	--button-border: var(--warning-hover); 	--button-fg: var(--warning-fg); }
.Button.danger:hover 	{ --button-bg: var(--danger-hover); 	--button-border: var(--danger-hover);	--button-fg: var(--danger-fg); }
.Button.info:hover 		{ --button-bg: var(--info-hover); 		--button-border: var(--info-hover);		--button-fg: var(--info-fg); }


.Button:active  		{ --button-bg: var(--neutral-active); --button-border: var(--neutral-active);  --button-fg: var(--neutral-fg); box-shadow: inset 0 3px 6px rgba(0,0,0,0.3); }
.Button.ghost:active 	{ --button-bg: var(--neutral-active); --button-border: var(--neutral-active); 	--button-fg: var(--neutral-fg); }
.Button.primary:active  { --button-bg: var(--primary-active); --button-border: var(--primary-active);  --button-fg: var(--primary-fg); }
.Button.accent:active   { --button-bg: var(--accent-active); --button-border: var(--accent-active);   --button-fg: var(--accent-fg); }
.Button.success:active  { --button-bg: var(--success-active); --button-border: var(--success-active);  --button-fg: var(--success-fg); }
.Button.warning:active  { --button-bg: var(--warning-active); --button-border: var(--warning-active);  --button-fg: var(--warning-fg); }
.Button.danger:active   { --button-bg: var(--danger-active); --button-border: var(--danger-active);  --button-fg: var(--danger-fg); }
.Button.info:active     { --button-bg: var(--info-active); --button-border: var(--info-active);    --button-fg: var(--info-fg);  }



.Button.compact { padding: 0.3rem 0.85rem; font-size: 0.8rem; }
.Button.large { padding: 0.7rem 1.75rem; font-size: 1rem; }


.Button[disabled], .Button[data-disabled] { opacity: 0.3; cursor: not-allowed; pointer-events: none; }


.IconButton { background: 0; border: 0; outline: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0.4rem; border-radius: 6px; color: var(--text-muted); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; }
.IconButton:before { content: ''; display: block; width: 16px; height: 16px; flex-shrink: 0; background-color: currentColor; mask-size: contain; mask-position: center; mask-repeat: no-repeat; }
.IconButton:hover  { background: var(--primary-hover); }
.IconButton:hover:before { color: var(--primary-fg); }
.IconButton:active  { background: var(--primary-active); box-shadow: inset 0 3px 6px rgba(0,0,0,0.3); }
.IconButton-Text { font:0/0 a; }

.IconButton.plain { padding:0; background:0; border-radius: 0; }
.IconButton.plain:active { box-shadow: none;}


.IconButton.edit:before   { mask-image: url('/assets/img/icons/edit.svg'); }
.IconButton.hide:before   { mask-image: url('/assets/img/icons/hide.svg'); }
.IconButton.delete:before { mask-image: url('/assets/img/icons/trash.svg'); }


.IconButton.delete:hover,
.IconButton.hide:hover { background: var(--danger-hover); }
.IconButton.delete:hover:before,
.IconButton.hide:hover:before { color: var(--danger-fg); }
.IconButton.delete:active,
.IconButton.hide:active	{ background: var(--danger-active); }


.IconButton.toggle:before { mask-image: url('/assets/img/icons/chevron-right-square.svg'); }
.IconButton.toggle.plain { transition: transform 300ms ease; }
.IconButton.plain.toggle:hover:before { color: var(--info-hover); }
.IconButton.plain.toggle:active:before { color: var(--info-active); }

.IconButton.toggle[data-toggled] { transform: rotate(90deg); }

.IconButton[disabled], .IconButton[data-disabled] { opacity: 0.3; cursor: not-allowed; pointer-events: none; }



meter, progress {
	display: block;
	width: 100%;
	height: 0.5rem;
	border: none;
	border-radius: 9999px;
	overflow: hidden;
	background: var(--border);
	color: var(--primary);
	appearance: none;
	-webkit-appearance: none;
	vertical-align: middle;
}


meter::-webkit-meter-bar                        { background: var(--border); border: none; border-radius: 9999px; }
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value       { background: var(--primary); border-radius: 9999px; }
progress::-webkit-progress-bar                  { background: var(--border); border-radius: 9999px; }
progress::-webkit-progress-value                { background: var(--primary); border-radius: 9999px; transition: width 0.3s ease; }


progress::-moz-progress-bar                     { background: var(--primary); border-radius: 9999px; transition: width 0.3s ease; }


.Bar { display: flex; align-items: center; gap: 0.5rem; }
.Bar meter, .Bar progress { flex: 1; margin: 0; }
.Bar-Text { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }


.Bar.success meter::-webkit-meter-optimum-value,
.Bar.success meter::-webkit-meter-suboptimum-value,
.Bar.success meter::-webkit-meter-even-less-good-value { background: var(--success); }
.Bar.success progress::-webkit-progress-value          { background: var(--success); }
.Bar.success progress::-moz-progress-bar               { background: var(--success); }

.Bar.danger meter::-webkit-meter-optimum-value,
.Bar.danger meter::-webkit-meter-suboptimum-value,
.Bar.danger meter::-webkit-meter-even-less-good-value  { background: var(--danger); }
.Bar.danger progress::-webkit-progress-value           { background: var(--danger); }
.Bar.danger progress::-moz-progress-bar                { background: var(--danger); }

.Bar.warning meter::-webkit-meter-optimum-value,
.Bar.warning meter::-webkit-meter-suboptimum-value,
.Bar.warning meter::-webkit-meter-even-less-good-value { background: var(--warning); }
.Bar.warning progress::-webkit-progress-value          { background: var(--warning); }
.Bar.warning progress::-moz-progress-bar               { background: var(--warning); }

.Bar.info meter::-webkit-meter-optimum-value,
.Bar.info meter::-webkit-meter-suboptimum-value,
.Bar.info meter::-webkit-meter-even-less-good-value    { background: var(--info); }
.Bar.info progress::-webkit-progress-value             { background: var(--info); }
.Bar.info progress::-moz-progress-bar                  { background: var(--info); }

.Bar.accent meter::-webkit-meter-optimum-value,
.Bar.accent meter::-webkit-meter-suboptimum-value,
.Bar.accent meter::-webkit-meter-even-less-good-value  { background: var(--accent); }
.Bar.accent progress::-webkit-progress-value           { background: var(--accent); }
.Bar.accent progress::-moz-progress-bar                { background: var(--accent); }


.Tag {
	
	--tag-bg: color-mix(in srgb, var(--neutral) 25%, #fff);
	--tag-fg: color-mix(in srgb, var(--neutral-active) 100%, #000);
	--tag-success-bg: color-mix(in srgb, var(--success) 25%, #fff);
	--tag-success-fg: color-mix(in srgb, var(--success-active) 100%, #000);
	--tag-danger-bg:  color-mix(in srgb, var(--danger) 25%, #fff);
	--tag-danger-fg:  color-mix(in srgb, var(--danger-active) 100%, #000);
	--tag-warning-bg: color-mix(in srgb, var(--warning) 25%, #fff);
	--tag-warning-fg: color-mix(in srgb, var(--warning-active) 100%, #000);
	--tag-info-bg:    color-mix(in srgb, var(--info) 25%, #fff);
	--tag-info-fg:    color-mix(in srgb, var(--info-active) 100%, #000);
	--tag-accent-bg:  color-mix(in srgb, var(--accent) 25%, #fff);
	--tag-accent-fg:  color-mix(in srgb, var(--accent-active) 100%, #000);
	--tag-primary-bg: color-mix(in srgb, var(--primary) 25%, #fff);
	--tag-primary-fg: color-mix(in srgb, var(--primary-active) 100%, #000);

	background: var(--tag-bg);  color: var(--tag-fg); display: inline-flex; gap:.3rem; padding: 4px 8px; border-radius: 4px; font: 600 .75rem/1 var(--font); white-space: nowrap; vertical-align: middle; align-items: center; justify-content: center; text-decoration: none;
}
small.Tag, .Tag.compact { font-size: .65rem; padding: 2px 6px; border-radius: 3px; }


.Tag.success  { background: var(--tag-success-bg); color: var(--tag-success-fg); }
.Tag.danger   { background: var(--tag-danger-bg);  color: var(--tag-danger-fg);  }
.Tag.warning  { background: var(--tag-warning-bg); color: var(--tag-warning-fg); }
.Tag.info     { background: var(--tag-info-bg);    color: var(--tag-info-fg);    }


.Tag.primary  { background: var(--tag-primary-bg);  color: var(--tag-primary-fg);   }
.Tag.accent   { background: var(--tag-accent-bg);   color: var(--tag-accent-fg);   }


.Tag.dot:before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }



.Card { background: var(--surface); color: var(--text); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); overflow: hidden; margin: 0 0 1.2rem; }
.Card-Header, .Card-Content, .Card-Footer { padding: 1rem 1.5rem; }
.Card-Header { border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.Card-Header h1, .Card-Header h2, .Card-Header h3, .Card-Header h4 { margin: 0; }
.Card-Title { font-size: 1.3rem; }
.Card-Title + .Card-Subtitle { margin-top: .3rem; }
.Card-Subtitle { font-size: 0.8rem; color: var(--text-muted); display:flex; gap:.4rem; align-items:center; }
.Card-Footer { border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }

fieldset.Card legend.Card-Header { background: var(--surface); border-radius: 8px 8px 0 0; }


.Card.flat { box-shadow: none; }
.Card.short { max-width: 320px; }
.Card.compact .Card-Header { margin:0 ; }
.Card.compact .Card-Header,
.Card.compact .Card-Content,
.Card.compact .Card-Footer { padding: 0.5rem 1rem; }


.Card.profile .Card-Header, .Card.profile .Card-Content, .Card.profile .Card-Footer { padding: 0.75rem 1rem; }
.Card.profile .Card-Header { gap: 0.75rem; }


.Card.header .Card-Header { border-bottom: 0; align-items: flex-start; }
.Card.header .Card-Title { font-size: 1.7rem; }


.Table caption + thead th:first-child { border-top-left-radius: 0; }
.Table caption + thead th:last-child { border-top-right-radius: 0; }

.Table { width: 100%; border-collapse: collapse; font-family: var(--font); font-size: 0.85rem; background: var(--surface); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); overflow-x: auto; -webkit-overflow-scrolling: touch; margin:0 0 1.4rem; }
.Table caption { text-align: left; padding: 0.75rem; font-weight: 600; font-size: 0.9rem; color: var(--text-muted); caption-side: top; background: var(--surface); border-radius: 8px 8px 0 0; }
.Table th { position: sticky; top: 0; z-index: 1; background: var(--surface-alt); padding: 0.6rem 0.75rem; text-align: left; font-weight: 600; color: var(--text); white-space: nowrap; border-bottom: 1px solid var(--border); }
.Table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.Table td.toggle, .Table th.toggle { max-width: 50px; }
.Table td.toggle button, .Table th.toggle button { display:flex; }
.Table tr:last-child td { border-bottom: none; }
.Table tr:not(.detail):hover td { background: var(--primary-hint); color: var(--light-text); }

.Table-Caption { display:flex; justify-content: space-between; align-items: center; }
.Table-Row th:first-child { border-top-left-radius: 8px; }
.Table-Row th:last-child { border-top-right-radius: 8px; }
.Table-Row:last-child td:first-child { border-bottom-left-radius: 8px; }
.Table-Row:last-child td:last-child { border-bottom-right-radius: 8px; }


.Table tr[data-clickable] { cursor: pointer; }
.Table tr.muted td { opacity: 0.4; }
.Table tr.warning td { background: var(--warning-hint); color: var(--light-text); }
.Table tr.danger td { background: var(--danger-hint); color: var(--light-text); }
.Table tr.success td { background: var(--success-hint); color: var(--light-text); }

.Table-Row.detail { display:none; background: var(--surface-alt); }
.Table-Row.detail td { padding: 1rem 1.4rem; }


.Table-Row th.center, .Table-Row td.center { text-align: center; }
.Table-Row th.right,  .Table-Row td.right  { text-align: right; }


.Table.compact th { padding: 0.5rem 0.6rem; }
.Table.compact td { padding: 0.24rem 0.6rem; }
.Table.compact .Table-Row.detail td	{ padding:.8rem 1.2rem; }

@media (max-width: 720px) {
	.Table.stacked thead { display: none; }
	.Table.stacked .Table-Row { display: block; margin-bottom: 0.75rem; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
	.Table.stacked .Table-Row td { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; border-bottom: 1px solid var(--border); text-align: right; }
	.Table.stacked .Table-Row td:last-child { border-bottom: none; }
	.Table.stacked .Table-Row td:before { content: attr(data-label); font-weight: 600; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; text-align: left; flex-shrink: 0; }
}




.Form { display: flex; flex-direction: column; margin: 0 0 1rem; }
.Form.inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap:.8rem; }
.Form.inline .Form-Field { margin: 0; }

.Form-Field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 .4rem;}
.Form-Label { font-family: var(--font); font-size: 0.875rem; font-weight: 600; color: var(--text); }
.Form-Field.required .Form-Label:after, .Form-Label.required:after { content: " *"; color: var(--danger); }
.Form-Help { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.Form-Error { font-size: 0.8rem; color: var(--danger); margin: 0; }
.Form-Actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }

.Form fieldset { border: none; padding: 0; margin: 0; }
.Form legend { margin:0 0 .8rem; display: block; width: 100%; top:0; }





.Form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.Form select, .Form textarea, .Input { display: block; width: 100%; padding: 0.3rem 0.65rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font-family: var(--font); font-size: 0.9rem; line-height: 1.5; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; }
.Form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.5rem; }
.Form textarea { resize: vertical; min-height:75px; }


.Form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):focus,
.Form select:focus,
.Form textarea:focus,
.Input:focus { outline: none; border-color: var(--primary-hover); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-hover) 20%, transparent); }


.Form input:disabled,
.Form select:disabled,
.Form textarea:disabled,
.Input:disabled { opacity: 0.5; cursor: not-allowed; background: var(--surface-alt); }


.Form-Field[data-invalid] input,
.Form-Field[data-invalid] select,
.Form-Field[data-invalid] textarea { border-color: var(--danger); }


.InputGroup { display:flex; gap:.4rem; align-items: center; }
.Input[data-invalid] { border-color: var(--danger); }
.Input[data-invalid]:focus { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }

.Input[data-valid] { border-color: var(--success); }
.Input[data-valid]:focus { border-color: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent); }

.InputGroup.dob label { flex: 1; max-width:80px; display:flex; gap:.4rem; align-items: center; }
.InputGroup.dob label:after { content: "/"; display:inline-flex; }
.InputGroup.dob label:last-child { flex: 2; max-width: 100px; }
.InputGroup.dob label:last-child:after { content: ""; }


.Checkbox { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9rem; color: var(--text); }
.Checkbox input[type="checkbox"],
.Checkbox input[type="radio"] { width: 1rem; height: 1rem; flex-shrink: 0; cursor: pointer; accent-color: var(--primary); }


.Form.grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.Form.grid > * { margin: 0; }



.Input[type="date"]::-webkit-calendar-picker-indicator,
.Input[type="time"]::-webkit-calendar-picker-indicator,
.Input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; filter: invert(0); }


[data-theme="dark"] .Input::-webkit-calendar-picker-indicator { filter: invert(1); }


.Input.range { width: 100%; }
.Input.range input { flex: 1; min-width: 0; }
.Input-Separator { flex-shrink: 0; color: var(--text-muted); font-size: 0.85rem; pointer-events: none; }



@media (min-width: 720px) {
	.Form.grid { grid-template-columns: 1fr 1fr; }

	
	.Form.grid > .Form-Field.full,
	.Form.grid > .Form-Actions,
	.Form.grid > .Card.full { grid-column: 1 / -1; }


	.Form-Group { display: flex; gap: 0.8rem; margin:0 0 .4rem; }
	.Form-Group .Form-Field { margin:0; flex: 1; }
}



.Stat { background: var(--surface); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); padding: 1rem 1.2rem; color: var(--text); text-decoration: none; }
.Stat-Label { font: 600 .75rem/1 var(--font); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.Stat-Value { font: 700 1.5rem/1.2 var(--font-header); font-size: 1.5rem; }
.Stat-Value.compact { font-size: .8rem; }
.Stat-Sub { font-size: 0.8rem; color: var(--text-hint); margin-top: 0.15rem; display: block; }

a.Stat { position: relative; display: block; cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; }
a.Stat:after { content: ''; position: absolute; top: 0.5rem; right: 0.5rem; width: 0.75rem; height: 0.75rem; background-color: var(--text-hint); mask: url("/assets/img/icons/external-link.svg") center/contain no-repeat; opacity: 0.5; transition: opacity 0.15s ease, background-color 0.15s ease; }
a.Stat:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-1px); }
a.Stat:hover:after { opacity: 1; background-color: var(--primary); }


.Stat.success .Stat-Value { color: var(--success); }
.Stat.warning .Stat-Value { color: var(--warning); }
.Stat.danger  .Stat-Value { color: var(--danger);  }
.Stat.info    .Stat-Value { color: var(--info);    }
.Stat.accent  .Stat-Value { color: var(--accent);  }
.Stat.neutral .Stat-Value { color: var(--neutral); }
.Stat.primary .Stat-Value { color: var(--primary); }


.StatsGroup { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 1.2rem; }
.StatsGroup .Stat { flex: 1; min-width: 140px; }
.StatsGroup .Stat.half { flex: .5; }
.StatsGroup .Stat.double { flex: 2; }
	
.StatsGroup.compact { margin-bottom: 1rem; }
.StatsGroup.compact .Stat { padding: 0.6rem 0.75rem; min-width: 100px; }
.StatsGroup.compact .Stat-Label { font-size: 0.65rem; }
.StatsGroup.compact .Stat-Value { font-size: 1rem; }
.StatsGroup.compact .Stat-Value.compact { font-size: .85rem; }
.StatsGroup.compact .Stat-Sub { font-size: 0.7rem; margin-top: 0.1rem; }



.List { list-style: none; margin: 0; padding: 0; background: var(--surface); }
.List-Item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); color: var(--text); }
.List-Item:last-child { border-bottom: none; }

.List-Item-Title { flex: 1; font-size: 0.9rem; font-weight: 600; color: var(--text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.List-Item-Meta { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.List-Item-Actions { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }



.List.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.List.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.List.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.List.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.List.grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.List.grid .List-Item { border:0; display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; }
.List.grid .List-Item.full { grid-column: 1 / -1; }


.List.compact .List-Item { padding: 0.45rem 1rem; }


.List.definition { grid-template-columns: repeat(4, 1fr); justify-content: flex-start; background:none; margin:0 0 1rem; gap:.8rem; }
.List.definition .List-Item { padding:0; }
.List.definition strong { font-size: 0.68rem; font-weight: 600; color: var(--text); border-bottom: 1px solid #888}
.List.definition p { font-size:.9rem; margin: 0;  }



.List-Item[data-active] { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.List-Item[data-active] .List-Item-Title { color: var(--primary); }





.Alert { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; border-radius: 6px; border: 1px solid var(--border); border-left-width: 4px; background: var(--surface); color: var(--text); font-family: var(--font); font-size: 0.9rem; }
.Alert-Icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.1rem; }
.Alert-Body { flex: 1; min-width: 0; }
.Alert-Title { display: block; font-weight: 600; margin-bottom: 0.15rem; }
.Alert-Message { margin: 0; color: var(--text-muted); font-size: 0.85rem; }

.Alert-Close { flex-shrink: 0; padding: 0; background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--text-muted); opacity: 0.7; transition: opacity 0.15s ease; margin-top: -0.05rem; }
.Alert-Close:hover { opacity: 1; }


.Alert.success { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.Alert.success .Alert-Icon { color: var(--success); }

.Alert.warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }
.Alert.warning .Alert-Icon { color: var(--warning); }

.Alert.danger { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.Alert.danger .Alert-Icon { color: var(--danger); }

.Alert.info { border-left-color: var(--info); background: color-mix(in srgb, var(--info) 8%, var(--surface)); }
.Alert.info .Alert-Icon { color: var(--info); }


.Alert[data-dismissing] { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; overflow: hidden; transition: opacity 0.2s ease, max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease; }



.Pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; font-family: var(--font); }
.Pagination-Link { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 0.875rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; -webkit-user-select: none; user-select: none; }
.Pagination-Link:hover { background: var(--surface-alt); border-color: var(--border); color: var(--text); }


.Pagination-Link[data-active],
.Pagination-Link[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); font-weight: 600; pointer-events: none; }


.Pagination-Link[data-disabled],
.Pagination-Link[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }


.Pagination-Gap { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2.25rem; color: var(--text-muted); font-size: 0.875rem; pointer-events: none; user-select: none; }


.Pagination.compact .Pagination-Link { min-width: 1.75rem; height: 1.75rem; font-size: 0.8rem; border-radius: 4px; }
.Pagination.compact .Pagination-Gap { height: 1.75rem; font-size: 0.8rem; }




.Overlay { padding:0; margin: auto; border: none; max-width: 100%; background: var(--surface); color: var(--text); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); flex-direction: column; overflow: hidden; }
.Overlay::backdrop { background: rgba(0, 0, 0, 0.8); }
.Overlay[open] { display: flex; }


.Overlay-Header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.Overlay-Header h1,
.Overlay-Header h2,
.Overlay-Header h3,
.Overlay-Header h4 { margin: 0; font:bold 1.4rem/1.2 var(--font-header); }

.Overlay-Close { flex-shrink: 0; background: none; border: none; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--text-muted); padding: 0.1rem 0.3rem; border-radius: 4px; transition: background 0.12s ease, color 0.12s ease; }
.Overlay-Close:hover { background: var(--surface-alt); color: var(--text); }

.Overlay-Content { flex: 1; overflow-y: auto; padding: 1.5rem; position: relative; }
.Overlay-Content p:last-child { margin-bottom: 0; }

.Overlay-Footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); flex-shrink: 0; }


.Overlay.compact { width: min(400px, calc(100vw - 2rem)); }
.Overlay.large { width: min(760px, calc(100vw - 2rem)); }
.Overlay.full  { width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); }

@media (max-width: 480px) {
	.Overlay { margin-bottom: 0;  width: calc(100vw - 1rem); border-radius: 8px 8px 0 0; position: fixed; bottom: 0; left: 0.5rem; right: 0.5rem; max-height: 90vh; }
}


.Overlay[data-loading] .Overlay-Content:after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--surface) 80%, transparent); display: flex; align-items: center; justify-content: center; z-index: 1; }
.Overlay[data-loading] .Overlay-Content:before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 3px solid var(--border); border-top-color: var(--info); border-radius: 50%; animation: modal-spin 0.7s linear infinite; }

@keyframes modal-spin {
	to { transform: rotate(360deg); }
}




.ToastRegion { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 1100; display: flex; flex-direction: column-reverse; gap: 0.5rem; pointer-events: none; width: min(360px, calc(100vw - 2.5rem)); }

.ToastRegion.top-right { top: 1.25rem; bottom: auto; flex-direction: column; }
.ToastRegion.top-left { top: 1.25rem; bottom: auto; left: 1.25rem; right: auto; flex-direction: column; }
.ToastRegion.bottom-left { bottom: 1.25rem; left: 1.25rem; right: auto; }
.ToastRegion.bottom-center { bottom: 1.25rem; left: 50%; right: auto; transform: translateX(-50%); align-items: center; }


.Toast { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.875rem 1rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--neutral); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); font-family: var(--font); font-size: 0.875rem; pointer-events: auto; width: 100%; }


.Toast-Icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.1rem; }
.Toast-Body { flex: 1; min-width: 0; }
.Toast-Title { display: block; font-weight: 600; margin-bottom: 0.1rem; }
.Toast-Message { margin: 0; color: var(--text-muted); font-size: 0.82rem; }

.Toast-Close { flex-shrink: 0; background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--text-muted); padding: 0; opacity: 0.6; transition: opacity 0.12s ease; }
.Toast-Close:hover { opacity: 1; }


.Toast.success { border-left-color: var(--success); }
.Toast.success .Toast-Icon { color: var(--success); }

.Toast.warning { border-left-color: var(--warning); }
.Toast.warning .Toast-Icon { color: var(--warning); }

.Toast.danger  { border-left-color: var(--danger); }
.Toast.danger  .Toast-Icon { color: var(--danger); }

.Toast.info    { border-left-color: var(--info); }
.Toast.info    .Toast-Icon { color: var(--info); }


.Toast[data-entering] { animation: toast-in 0.22s ease forwards; }
.Toast[data-leaving] { animation: toast-out 0.22s ease forwards; }

@keyframes toast-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
	from { opacity: 1; transform: translateY(0); max-height: 200px; }
	to   { opacity: 0; transform: translateY(4px); max-height: 0; padding: 0; margin: 0; }
}


@media (prefers-reduced-motion: reduce) {
	.Toast[data-entering],
	.Toast[data-leaving] { animation: none; }
}



.Tooltip { position: relative; display: inline-block; }
.Tooltip:after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); background: var(--text); color: var(--bg); font: 500 .75rem/1.4 var(--font); padding: 0.35rem 0.6rem; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; max-width: 200px; white-space: normal; text-align: center; z-index: 500; }
.Tooltip:before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--text); pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 500; }


.Tooltip:hover:after,
.Tooltip:hover:before,
.Tooltip:focus-within:after,
.Tooltip:focus-within:before { opacity: 1; }


.Tooltip.wide:after { max-width: 280px; }


.Tooltip.bottom:after { bottom: auto; top: calc(100% + 8px); }
.Tooltip.bottom:before { bottom: auto; top: calc(100% + 2px); border-top-color: transparent; border-bottom-color: var(--text); }


.Tooltip.left:after { left: auto; right: calc(100% + 8px); bottom: 50%; transform: translateY(50%); }
.Tooltip.left:before { left: auto; right: calc(100% + 2px); bottom: 50%; transform: translateY(50%); border-top-color: transparent; border-left-color: var(--text); }


.Tooltip.right:after { left: calc(100% + 8px); bottom: 50%; transform: translateY(50%); }
.Tooltip.right:before { left: calc(100% + 2px); bottom: 50%; transform: translateY(50%); border-top-color: transparent; border-right-color: var(--text); }


@media (prefers-reduced-motion: reduce) {
	.Tooltip:after,
	.Tooltip:before { transition: none; }
}



.Dropdown { position: relative; display: inline-block; }


.Dropdown-Trigger { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font:500 .875rem/1.1 var(--font); cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; transition: background 0.12s ease, border-color 0.12s ease; }
.Dropdown-Trigger::-webkit-details-marker { display: none; }
.Dropdown-Trigger::marker { display: none; }
.Dropdown-Trigger:hover { background: var(--surface-alt); border-color: var(--border); }

.Dropdown[open] .Dropdown-Trigger { background: var(--surface-alt); border-color: var(--border); }


.Dropdown-Caret { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.15s ease; }
.Dropdown[open] .Dropdown-Caret { transform: rotate(180deg); }


.Dropdown-Menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: max(180px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); padding: 0.35rem 0; z-index: 100; animation: dropdown-open 0.12s ease; }

@keyframes dropdown-open {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}


.Dropdown.right .Dropdown-Menu { left: auto; right: 0; }


.Dropdown.up .Dropdown-Menu { top: auto; bottom: calc(100% + 4px); }


.Dropdown-Item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 1rem; background: none; border: none; text-align: left; font: .875rem/1.2 var(--font); color: var(--text); cursor: pointer; transition: background 0.1s ease; text-decoration: none; -webkit-appearance: none; }
.Dropdown-Item:hover,
.Dropdown-Item:focus-visible { background: var(--surface-alt); outline: none; }

.Dropdown-Item.danger { color: var(--danger); }
.Dropdown-Item.danger:hover { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }

.Dropdown-Item[data-disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }


.Dropdown-Divider { border: none; border-top: 1px solid var(--border); margin: 0.35rem 0; }


@media (prefers-reduced-motion: reduce) {
	.Dropdown-Menu { animation: none; }
	.Dropdown-Caret { transition: none; }
}



.FileInput { display: inline-flex; align-items: center; gap: 0.65rem; cursor: pointer; font-family: var(--font); position: relative; }
.FileInput input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; pointer-events: none; }


.FileInput-Button { display: inline-flex; align-items: center; flex-shrink: 0; padding: 0.45rem 1rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 0.875rem; font-weight: 600; transition: background 0.12s ease, border-color 0.12s ease; white-space: nowrap; }
.FileInput:hover .FileInput-Button { background: var(--surface-alt); }


.FileInput input[type="file"]:focus-visible + .FileInput-Button { outline: 2px solid var(--accent); outline-offset: 2px; }


.FileInput-Text { font-size: 0.875rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }


.FileInput[data-invalid] .FileInput-Button { border-color: var(--danger); color: var(--danger); }


.FileInput[data-disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }


.FileInput.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 2rem 1.5rem; border: 2px dashed var(--border); border-radius: 8px; background: var(--surface); text-align: center; width: 100%; transition: border-color 0.15s ease, background 0.15s ease; }
.FileInput.dropzone:hover,
.FileInput.dropzone[data-dragover] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.FileInput.dropzone .FileInput-Button { background: var(--surface-alt); }
.FileInput.dropzone .FileInput-Text { font-size: 0.85rem; max-width: none; }



.Search { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 0.6rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 1rem; font-family: var(--font); }
.Search-Field { flex: 1; min-width: 180px; }
.Search .Input { width: 100%; }

.Search-Group { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }

.Search-Divider { width: 1px; height: 1.5rem; background: var(--border); flex-shrink: 0; }
.Search-Spacer { flex: 1; }


.Search.stacked { flex-direction: column; align-items: stretch; }
.Search.stacked .Search-Search,
.Search.stacked .Search-Group { width: 100%; }
.Search.stacked .Search-Divider { width: 100%; height: 1px; }
.Search.stacked .Search-Spacer { display: none; }

@media (max-width: 480px) {
	.Search { flex-direction: column; align-items: stretch; }
	.Search-Search { min-width: 0; }
	.Search-Divider { width: 100%; height: 1px; }
	.Search-Spacer { display: none; }
}



.Skeleton { position: relative; overflow: hidden; background: var(--surface-alt); border-radius: 4px; display: block; }
.Skeleton:after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--surface) 60%, transparent) 50%, transparent 100% ); background-size: 200% 100%; animation: skeleton-shimmer 1.4s infinite linear; }

@keyframes skeleton-shimmer {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}


@media (prefers-reduced-motion: reduce) {
	.Skeleton:after { display: none; }
}


.Skeleton.line { width: 100%; height: 1rem; margin-bottom: 0.5rem; }
.Skeleton.line.short { width: 60%; }

.Skeleton.circle { border-radius: 50%; }

.Skeleton.block { width: 100%; height: 8rem; border-radius: 8px; }





.Detail { }
.Detail-Header { display: flex; gap: 1rem; justify-content: space-between; align-items: center; margin:0 0 1.2rem; }
.Detail-Title { margin:0; display:flex; align-items:center; gap:.4rem; }




.Detail.summary h2.Detail-Title { font-size: 1.4rem; }
.Detail.summary h3.Detail-Title { font-size: 1.2rem; }
.Detail.summary .Detail-Title:before { content:""; width: 10px; height: 10px; border-radius: 50%; background: var(--info); display: inline-block; }
.Detail.summary .Detail-Header { justify-content: flex-start; }
.Detail.summary .Detail-Header + .List { padding-left: calc(.4rem + 10px); }