/* ============================================================
   01. TOKENS
   ============================================================ */
:root{
  /* Theme colors (dark-neutral) */
	--color-bg:											#020617;          	/* outer background */
	--color-bg-debug:								#d2d2d24d;					/* background raw debug */
	--color-bg-elevated:						#020617; 						/* alternative outer */
  --color-bg-transparent:					#ffffff06;					/* background trong suốt giống nền card */
	--color-text:										#e5e7eb;        		/* main text */
	--color-muted:									#888d96;      			/* secondary text */
  --color-border:									#94a3b829;     			/* borders */
	--color-shadow-soft:						#00000073;					/* shadow color */
	
	/* User Color */
	--color-white:									#ffffff;
	--color-white-light:						#ffffffd9;
  --color-red:										#ff0000e6;
	--color-red-dark:								#c80000e6;
  --color-green:									#00ff00e6;
	--color-green-light:						#00b400e6;
	--color-green-dark:							#009600e6;
  --color-blue:										#0000ffe6;
	--color-blue-light:							#6969ffe6;
	--color-blue-dark:							#0000b4e6;
	--color-yelow:									#ffff00e6;
	--color-yellow-neon:						#f5ff00e6;
	--color-yelow-dark:							#d2d200e6;
	--color-orange:									#ff9100e6;
	--color-orange-dark:						#ff7200e6;
	--color-amber:									#d97706e6;
	--color-grey:										#9ca3afe6;
	--color-grey-dark:							#828c9ce6;
	--color-accent:									#32aadce6;
	
	/* Alert Color */
	--color-alert-error:						#fecaca80;
	--color-alert-error-border:			#f8717199;
	--color-alert-success:					#bbf7d080;
	--color-alert-success-border:		#4ade8099;
	
	/* Card color */
	--color-card-background:				#ffffff06;
	--color-card-highlight:					#273137e6;
	--color-card-border:						#94a3b829;
	
	/* Menu color */
	--color-menu:										#32aadcd9;						/* menu */ 
	--color-menu-hover:							#ff8800f2;						/* menu hover */ 
	
	/* Button color */
	--btn-color-border:							#38bdf880;
	--btn-color-danger-background:	#7f1d1de6;
	--btn-color-danger-border:			#7f1d1de6;
	--btn-color-danger-hover:				#b91c1ce6;
	--btn-color-toggle-on:					#52d62ce6;
	--btn-color-toggle-off:					#f2342ae6;
	
	/* Modal color */
	--color-modal-overlay: 					#020617d1;
	--color-modal-background: 			var(--color-bg);
	
	/* Font & scale */
  --font: system-ui, Arial, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", 
          "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji",
          "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
	--size-08:8px;
	--size-09:9px;
	--size-10:10px;
	--size-11:11px;
	--size-12:12px; 
	--size-13:13px; 
	--size-14:14px; 
	--size-15:15px; 
	--size-16:16px;
	--size-17:17px;
	--size-18:18px; 
	--size-19:19px;
	--size-20:20px; 
	--size-21:21px; 
	--size-22:22px; 
	--size-24:24px;
	--size-26:26px;
	--size-28:28px;
	--size-30:30px;
	--size-32:32px;
	
	--size-title-site:		var(--size-22);
	--size-title-section:	var(--size-20);
	--size-title-card:		var(--size-16);
	--size-values-lg:			var(--size-30);
	
	/* Font style */
	--font-size:				var(--size-13);
	--font-weight2:			200;
	--font-weight3:			300;
	--font-weight4:			400;
	--font-weight5:			500;
	--font-weight6:			600;
	--font-weight7:			700;
	--font-weight8:			800;

	/* Line style */
	--line-height-05:		0.5;
	--line-height-10:		1.0;
	--line-height-12:		1.2;
	--line-height-15:		1.5;
	--line-height-20:		2.0;
	--line-color-solid:	var(--border-width) solid #94a3b838;

	/* Spacing & shape */
	--space-00:0px;
	--space-05:3px; 
	--space-10:6px;
	--space-15:9px;
	--space-20:12px;
	--space-25:15px;
	--space-30:18px;
	--space-35:21px;
	--space-40:24px;
	--space-45:27px;
	--space-50:30px;
	--space-55:33px;
	--space-top-bottom:6px;
	--space-left-right:3px;
	--space-separation:var(--space-15);
 
	--border-radius:5px; 
	--border-width:1px;
  --shadow-soft:0 10px 30px var(color-shadow-soft);
	
	/* Controls standart height and width */
	--std-height:										30px;
	--std-min-height:								30px;
	--std-width:										60px;
	--std-min-width:								60px;

}

/* ============================================================
   02. BASE / RESET MIGRATED
   ============================================================ */
	/* Nền trang web màu đen */
	body{
		margin:var(--space-00);
		padding:var(--space-00);
		font-family:var(--font);
		font-size:var(--font-size);
		line-height:var(--line-height-15);
		background:radial-gradient(circle at top, #020617 0, #020617 38%, #020617 100%);
		color:var(--color-text);
	}


/* ============================================================
   03. LAYOUT PRIMITIVES
   ============================================================ */

	/* ===== Layout Containers ===== */
		.container{
		max-width:100%;
		margin-inline:auto;
		margin-bottom:var(--space-00);
		padding:var(--space-top-bottom) var(--space-left-right);
	}
	
	@media (min-width: 980px){
		.container{
			max-width:1120px;
		}
	}
	
	/* ===== Site Header ===== */
	.site-header{
		backdrop-filter:blur(18px);
		background:transparent;
	}
	
	/* ===== Site Header Inner ===== */
	.site-header-inner{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:var(--space-20);
	}
	
	/* ===== Site Title ===== */
	.site-title{
		font-size:var(--size-title-site);
		margin-left:var(--space-20);
	}
	
	/* ===== Site Header: User ===== */
	.site-header-user{
		display:flex;
		flex-direction:column;
		align-items:flex-end;
		justify-content:center;
		gap:var(--space-05);
		margin-right:var(--space-10);
		min-width:max-content;
		font-size:var(--size-13);
	}

	.site-header-user .site-header-login{
		margin-left:var(--space-00); 
		line-height:var(--line-height-12);
		white-space:nowrap;
	}

	.site-header-user .site-header-datetime{
		margin-left:var(--space-00); 
		line-height:var(--line-height-12);
		white-space:nowrap;
	}
	
	/* ===== Site Footer ===== */
	.site-footer {
		margin:var(--space-00) var(--space-00); 
		padding:var(--space-00) var(--space-15);
		font-size:var(--size-12); 
		text-align: left;
		color: var(--color-muted);
	}

	/* Nếu muốn tên + số điện thoại đậm, hơi to hơn */
	.site-footer strong {
		font-size:var(--size-12); 
		font-weight:var(--font-weight6);
	}

	/* Điện thoại: font nhỏ hơn nữa */
	@media (max-width: 480px) {
		.site-footer {
			font-size:var(--size-08); 
		}
		.site-footer strong {
			font-size:var(--size-08); 
		}
	}
	
	/* ===== Layout Menu ===== */
	.site-nav{
		display:flex;
		align-items:center;
		flex-wrap:wrap;
		height:auto;
		min-height:auto;
		column-gap:var(--space-00);
		row-gap:var(--space-05);
		margin:var(--space-05) var(--space-15);
		border:transparent;
		background:transparent;
	}
	
	.site-nav .btn-ghost{
		margin:var(--space-05) var(--space-05);
	}
	
	.site-nav > a{
		margin:var(--space-00) var(--space-00);
		border:1px solid transparent;
		border-radius:999px;
		font-size:var(--size-13);
		color:var(--color-menu);
		text-decoration:none;
	}

	.site-nav > a:hover{
		color:var(--color-menu-hover);
		text-decoration:none;
	}

	.site-nav > a:focus-visible{
		box-shadow:0 0 0 2px #22d3eecc;
		border-color:#38bdf8e6;
	}

	.section-header-actions > a{
		margin-top:var(--space-10);
		border:1px solid transparent;
		border-radius:999px;
		font-size:var(--size-13);
		color:var(--color-menu);
		text-decoration:none;		
	}
	
	.section-header-actions > a:hover{
		color:var(--color-menu-hover);
		text-decoration:none;
	}

	.section-header-actions > a:focus-visible{
		box-shadow:0 0 0 2px #22d3eecc;
		border-color:#38bdf8e6;
	}

	/* ===== Layout Sections ===== */
	.section{
		margin-block:var(--space-00);
		padding:var(--space-10) var(--space-10);
		border-radius:var(--border-radius);
		background:var(--color-bg-transparent);
		border:1px solid var(--color-border);
		box-shadow:var(--shadow-soft);
	}
	
	.section-header{
		display:flex;
		flex-wrap:wrap;
		align-items:flex-start;
		justify-content:space-between;
		margin:var(--space-00) var(--space-05);
		padding-bottom:var(--space-00);
		background:transparent;
	}
	
	.section-header-main{
		margin:var(--space-00);
		padding:var(--space-00);
	}

	.section-header-name{
		display:flex;
		flex-wrap:wrap;
		align-items:flex-start;
		justify-content:space-between;
		font-family:var(--font);
		font-size: var(--size-title-section);
		font-weight:var(--font-weight6);
		line-height:var(--line-height-10);
		margin:var(--space-10) var(--space-00);
		padding-bottom:var(--space-00);
	}
	
	.section-header-actions{
		display:flex;
		flex-wrap:wrap;
		gap:var(--space-05) var(--space-10);
		padding-right:var(--space-20);
	}
	
	
	/* ===== Layout Cards ===== */
	.card{
		display:flex;
		flex-direction:column;
		font-family:var(--font);
		margin:var(--space-00);
		padding:var(--space-05) var(--space-10);
		border-radius:var(--border-radius);
		box-shadow:var(--color-shadow-soft);
		background:var(--color-card-background);
		border:1px solid var(--color-card-border);
	}
	
	.cards-list{
		display:grid;
		grid-template-columns:1fr;
		gap:var(--space-05);
	}
	
	.card-header{
		display:flex;
		justify-content:space-between;
		align-items:flex-start;
		gap:var(--space-20);
	}
	
	.card-footer{
		display:inline-flex;
		align-items:center;
		justify-content:flex-end;
		gap:var(--space-00);
		flex:0 0 auto;
		margin-left:auto;
	}
	
	.card-title{
		display:flex;
		justify-content:space-between;
		align-items:flex-start;
		margin:var(--space-00) var(--space-05);
		gap:var(--space-20);
		color:var(--color-white-light);
		font-size:var(--size-title-card);
		font-weight:var(--font-weight6); 
	}
	
	.card-title-left{}
	
	.card-title-right{
		display:flex;
    align-items:center;
    gap:var(--space-10);
	}
	
	.card-subtitle{
		display:flex;
		justify-content:space-between;
		align-items:flex-start;
		font:var(--font);
		font-size:var(--size-12); 
		color:var(--color-blue-light);
		font-weight:var(--font-weight5);
		padding-left:var(--space-05);
	}
	
	.card-actions{
		display:inline-flex;
		align-items:center;
		justify-content:flex-end;
		gap:var(--space-10);
		flex:0 0 auto;
		margin:var(--space-05);
	}

	.card.card-actions-bottom .card-actions{
		margin-top:auto;
	}

	.card-grid{
		display:grid;
		grid-template-columns:1fr;
		gap:var(--space-10);
		padding:var(--space-top-bottom) var(--space-00);
		margin-bottom:var(--space-15);
	}
	
	.card-body{
		display:grid;
		margin:var(--space-00) var(--space-20);
		gap:var(--space-00);
		padding:var(--space-00);
	}
	
	.card-meta{
		font-size:var(--size-13);
		color:var(--color-text);
		font-weight:var(--font-weight6);
	}
	
	/* Card grid 2 cột ở màn hình tablet */
	@media (min-width: 768px){
		.card-grid{
			grid-template-columns:repeat(2, minmax(0,1fr));
		}
	}
	
	/* Card grid 4 cột ở màn hình PC */
	@media (min-width: 1120px){
		.card-grid{
			grid-template-columns:repeat(4, minmax(0,1fr));
		}
	}

	/* ===== Layout Buttons ===== */
	.btn{
		display:inline-flex; 
		align-items:center; 
		cursor:pointer; 
		text-decoration:none;
		font-size:var(--size-13);
		font-weight:var(--font-weight6);
		justify-content:center; 
		white-space: nowrap;
		width:auto;
		min-width:60px;
		height:var(--std-height);
		min-height:var(--std-min-height);
		white-space:nowrap;
		padding:var(--space-00) var(--space-10); 
		gap:var(--space-10);
		border: var(--border-width) solid var(--btn-color-border);
		border-radius:var(--border-radius);
		color:var(--color-text);
		background:transparent;
	}

	.btn:hover{
		border-color:var(--color-bg-transparent);
	}

	/* Variants */
	.btn-primary{
		border-color:rgba(56,189,248,.5);
		background:radial-gradient(circle at top, rgba(56,189,248,.35) 0, rgba(8,47,73,1) 35%);
	}
	
	.btn-primary:hover{
		background:radial-gradient(circle at top, rgba(56,189,248,.45) 0, rgba(8,47,73,1) 35%);
	}
	
	.btn-ghost{
		background:transparent;
		border-color:transparent;
		height:auto;
		min-height:auto;
		padding:var(--space-05);
		width:auto;
		min-width:auto;
	}
	
	.btn-ghost:hover{
		background:transparent;
		border-color:transparent;
	}

	.btn-danger{
		background:var(--btn-color-danger-background);
		border-color:var(--btn-color-danger-border);
	}
	
	.btn-danger:hover{
		background:var(--btn-color-danger-hover);
}

	.btn-edit-channel-catalog{
		height:var(--std-height);
		min-height:var(--std-min-height);
		margin-top:var(--space-10);
		padding:var(--space-10) var(--space-20);
		border-radius:var(--border-radius);
	}

	.btn-special{
		border:none;
		background:transparent;
		color:var(--color-orange);
		cursor:pointer;
		font-size:var(--size-18);
		line-height:var(--line-height-10);
		padding:var(--space-05) var(--space-10);
		min-width:auto;
		width:auto;
		height:auto;
		min-height:auto;
	}

	.btn-special:hover{
		border:none;
		background:transparent;
		color:var(--color-menu-hover);
	}


	/* ===== Layout Inputs ===== */
	.input{
		width:100%;
		height:var(--std-height);
		min-height:var(--std-min-height);
		box-sizing:border-box;
		padding:0 var(--space-15);
		border-radius:var(--border-radius);
		border:1px solid var(--color-border);
		background:transparent;
		color:var(--color-text);
		font-size:var(--size-13);
		line-height:var(--line-height-10);
	}
	
	.input::placeholder{
		color:var(--color-muted);
		opacity:1;
	}

	.input:focus,
	.input:focus-visible,
	select.input:focus,
	select.input:focus-visible,
	textarea.input:focus,
	textarea.input:focus-visible{
		outline:none;
		border-color:var(--btn-color-border);
		box-shadow:0 0 0 2px rgba(56,189,248,.35);
	}

/* ============================================================
   04. SHARED COMPONENTS
   ============================================================ */
	/* Alerts */
	.alert{
		display:block;
		padding:var(--space-00) var(--space-10);
		gap:var(--space-05);
		border-radius:var(--border-radius);
		font-size:var(--size-12);
		visibility:hidden;
		min-height:var(--space-25);
	}

	.alert.alert-error{
		background:var(--color-alert-error);
		border:1px solid var(--color-alert-error-border);
		color:var(--color-alert-error);
	}

	.alert.alert-success{
		background:var(--color-alert-success);
		border:1px solid var(--color-alert-success-border);
		color:var(--color-alert-success);
	}

	.alert.is-soft-hidden{
		visibility:hidden;
		background:transparent;
		color:transparent;
		border-color:transparent;
	}

	.alert.is-visible{
		visibility:visible;
	}
	
	.label-strong{
		font-weight:var(--font-weight6);
		padding-left:var(--space-05);
	}
	
/* ============================================================
   05. FORMS / TABLES
   ============================================================ */
/* ===== Layout Forms ===== */
	.form{
		display:flex;
		flex-direction:column;
		margin:var(--space-00);
		padding:var(--space-00);
		gap:var(--space-00);
	}

	.form-group{
		display:flex;
		flex-direction:column;
		gap:var(--space-05);
		margin-top:var(--space-15);
	}

	.form-group label{
		font-weight:var(--font-weight5);
	}

	.form-grid{ 
		display:grid; 
		grid-template-columns: 1fr; 
		gap:var(--space-20); 
	}

	.form-row{ 
		display:grid; 
		grid-template-columns: 1fr; 
		gap:var(--space-15); 
		margin-top:var(--space-05); 
	}
	
	.form-actions{
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		margin:var(--space-05) var(--space-05);
		gap:var(--space-10); 
	}
	
	.form-row label{
		padding-left:var(--space-10);
	}
	
	@media (min-width: 980px){
		.form-row{
			grid-template-columns: 160px minmax(0, 1fr);
			align-items:center;
		}
	}
	
	/* Toolbar form – dùng chung cho các thanh filter (label + control) */
	.form-toolbar{
		display:flex;
		flex-wrap:wrap;
		margin: var(--space-15) var(--space-05);
		gap:var(--space-15);
		border-radius:var(--border-radius);
		align-items:flex-end;
	}

	.form-group{
		display:flex;
		flex-direction:column;
		gap:var(--space-05);
		margin-top:var(--space-15);
	}
	
	.form-group label{
		font-weight:var(--font-weight5);
	}

	.form-toolbar .form-group{
		margin-top:var(--space-00);
	}

	/* ===== Layout Table ===== */
	.table{
		width:100%;
		margin-bottom:var(--space-20);
		border-collapse:collapse;
		table-layout:fixed;
	}

	.table th,
	.table td{
		padding:var(--space-10) var(--space-15);
		border-bottom:1px solid var(--color-border);
		vertical-align:top;
		text-align:left;
	}

	.table thead th{
		font-size:var(--size-12);
		font-weight:var(--font-weight6);
		color:var(--color-white);
		white-space:nowrap;
	}

	.table tbody td{
		font-size:var(--size-11);
		color:var(--color-text);
		word-break:break-word;
	}

	.table td ul{
		margin:0;
		padding-left:var(--space-30);
	}

	select.input{
		height:var(--std-height);
		min-height:var(--std-min-height);
		padding:0 var(--space-15);
		box-sizing:border-box;
		color:var(--color-white);
		background:var(--color-bg-transparent);
		font-size:var(--size-13);
		line-height:var(--line-height-10);
	}

	select.input option{
		color:var(--color-white);
		background:var(--color-bg);
	}
	
	/* ===== Layout List ===== */
	.smh-list{
		margin:var(--space-05) 0 var(--space-10) 0;
		padding-left:var(--space-30);
	}
	
	.smh-list-item{
		margin:var(--space-00);
		padding:var(--space-00);
		font-size:var(--size-12);
		line-height:var(--line-height-10);
		color:var(--color-muted);
	}
	
	.smh-list-meta{
		color:var(--color-blue-light);
		font-weight:var(--font-weight5);
	}

	.smh-list-status.is-active{
		color:var(--color-green);
		font-weight:var(--font-weight6);
	}

	.smh-list-status.is-inactive{
		color:var(--color-red);
		font-weight:var(--font-weight5);
	}

/* ============================================================
   06. DASHBOARD
   ============================================================ */
	.card .metric-card-name{
		font-size:var(--size-19);
		font-weight:var(--font-weight6);
		padding:var(--space-00) var(--space-15);
	}

	.card .metric-card-value{
		font-size:var(--size-32);
		font-weight:bold;
		padding:var(--space-00) var(--space-25);
		color:var(--color-orange); 
	}
	
	.card .metric-card-note{
		font-size:var(--size-12);
		color:var(--color-muted);
		padding-left:var(--space-15);
	}

	/* ===== Dashboard device summary ===== */
	.dashboard-device-card{
		padding:var(--space-10) var(--space-15);
		margin-bottom:var(--space-20);
		border:1px solid var(--color-card-background);
	}

	.dashboard-device-header{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:var(--space-05);
		margin-top:var(--space-00);
	}

	.dashboard-device-line{
		font-family:var(--font);
		font-size:var(--size-12);
		color:var(--color-white-light);
		padding:0 var(--space-25) var(--space-15) var(--space-25);
		margin:var(--space-05) 0 var(--space-05) var(--space-20);
	}

	.dashboard-device-note{
		font-size:var(--size-13);
		margin-top:var(--space-15);
	}

	.dashboard-device-list{
		display:grid;
		grid-template-columns:1fr;
		gap:var(--space-05);
	}

	@media (min-width: 980px){
		.dashboard-device-list{
			grid-template-columns:repeat(2, minmax(0, 1fr));
			align-items:start;
		}
	}

	/* ===== Dashboard device status ===== */
	.dashboard-device-row{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:var(--space-15);
		padding:var(--space-05) var(--space-15);
		border:1px solid var(--color-card-border);
		border-radius:var(--border-radius);
		background:var(--color-card-background);
	}

	.dashboard-device-main{
		display:flex;
		align-items:center;
		gap:var(--space-15);
		min-width:var(--space-00);
	}

	.station-link-dot{
		display:inline-block;
		width:var(--space-10);
		height:var(--space-10);
		border-radius:50%;
		flex:0 0 auto;
		box-shadow:0 0 0 1px rgba(255,255,255,.08);
	}

	.station-link-dot.is-online,
	.tele-chip-dot.is-online,
	.tele-chip-dot.is-active,
	.control-chip-dot.is-online,
	.control-chip-dot.is-done{
		background:var(--color-green);
	}

	.tele-chip-dot.is-stale,
	.control-chip-dot.is-stale,
	.control-chip-dot.is-doing{
		background:var(--color-orange);
	}	

	.station-link-dot.is-offline,
	.tele-chip-dot.is-offline,
	.tele-chip-dot.is-inactive,
	.control-chip-dot.is-offline,
	.control-chip-dot.is-fail{
		background:var(--color-red);
	}

	.tele-chip-dot.is-unknown,
	.control-chip-dot.is-unknown{
		background:var(--color-grey);
	}

	.dashboard-device-text{
		min-width:var(--space-00);
	}

	.dashboard-device-title{
		font-size:var(--size-13);
		font-weight:var(--font-weight6);
		color:var(--color-white);
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}

	.dashboard-device-sub{
		font-size:var(--size-12);
		color:var(--color-muted);
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}

	.dashboard-device-meta{
		display:flex;
		flex-wrap:wrap;
		justify-content:flex-end;
		gap:var(--space-10) var(--space-15);
		font-size:var(--size-12);
		white-space:nowrap;
	}
	
	.dashboard-device-status{
		font-weight:var(--font-weight6);
	}

	.dashboard-device-status.is-online{
		color:var(--color-green);
	}

	.dashboard-device-status.is-offline{
		color:var(--color-red);
	}

	@media (max-width: 640px){
		.dashboard-device-row{
			align-items:flex-start;
			flex-direction:column;
		}

		.dashboard-device-meta{
			justify-content:flex-start;
			padding-left:var(--space-25);
		}
	}

/* ============================================================
   06. TELEMETRY + CONTROL
   ============================================================ */
	.tele-station-info,
	.ctrl-station-info{
		padding:var(--space-05) var(--space-15);
		border:1px solid var(--color-card-border);
		border-radius:var(--border-radius);
		background:var(--color-card-highlight);
		margin-top:var(--space-05);
	}

	.tele-location,
	.ctrl-location{
		font-family:var(--font);
		font-weight:var(--font-weight6);
		color:var(--color-accent);
	}

	.tele-card-header,
	.ctrl-card-header{
		display:flex;
		justify-content:space-between;
		align-items:flex-start;
		gap:var(--space-20);
		margin-bottom:var(--space-20);
	}

	.tele-station-grid{
		display:grid;
		grid-template-columns:1fr;
		gap:var(--space-05);
		align-items:start;
		margin-top:var(--space-05);
	}
	
	.tele-card,
	.control-card{
		padding:var(--space-10) var(--space-20);
		border:1px solid var(--color-border);
		border-radius:var(--border-radius);
		background:var(--smh-card-bg);
	}
	
	.tele-card{
		padding:var(--space-10) var(--space-15);
	}

	/* Card grid (dùng cho control, telemetry) */
	.tele-ctrl-card-grid{
		display:grid;
		grid-template-columns:1fr;
		gap:var(--space-15);
		align-items:start;
		grid-column:1 / -1;
		margin-top:var(--space-05);
	}
	
	.tele-ctrl-card-title{
		display:flex;
		justify-content:space-between;
		align-items:flex-start;
		gap:var(--space-20);
		margin-bottom:var(--space-10);
		border-bottom:var(--line-color-solid);
	}
	
	.tele-title,
	.control-title{
		margin:0;
		line-height:var(--line-height-10);
		font-size:var(--size-18);
		font-weight:var(--font-weight6);
		color:var(--color-white-light);
	}

	.tele-ctrl-badge{
		display:flex;
		align-items:center;
		gap:var(--space-15);
		flex-wrap:nowrap;
		justify-content:flex-end;
		flex:0 0 auto;
	}
	
	.tele-card-values-section{
		padding-top:var(--space-00);
	}
	
	.tele-card-values-row{
		display:flex;
		align-items:flex-end;
		justify-content:space-between;
		flex-wrap:nowrap;
		gap:var(--space-20);
	}
	
	.tele-card-snapshot-group{
		min-width:0;
		flex:1 1 auto;
		display:flex;
		align-items:flex-end;
		flex-wrap:nowrap;
		padding-left:var(--space-20);
		gap:var(--space-00);
	}
	
	.tele-card-snapshot-value,
	.tele-card-setpoint-value{
		font-size:var(--size-values-lg);
		font-weight:var(--font-weight7);
		line-height:var(--line-height-10);
		white-space:nowrap;
		padding:var(--space-00);
	}
	
	.tele-card-snapshot-unit,
	.tele-card-setpoint-unit{
		font-size:var(--size-16);
		line-height:var(--line-height-12);
		white-space:nowrap;
	}
	
	.tele-card-setpoint-group{
		display:flex;
		align-items:flex-end;
		justify-content:flex-start;
		gap:var(--space-15);
		flex:0 0 auto;
		min-width:150px;
		padding-left:var(--space-20);
		flex-wrap:nowrap;
	}
	
	.tele-card-setpoint-value-group{
		display:flex;
		align-items:flex-end;
		gap:var(--space-00);
		white-space:nowrap;
	}
	
	.tele-card-setpoint-label{
		font-size:var(--size-13);
		line-height:var(--line-height-15);
		white-space:nowrap;
	}

	.tele-card-chart-title{
		display:flex;
		justify-content:space-between;
		align-items:center;
		gap:var(--space-15);
		margin-bottom:var(--space-10);
		flex-wrap:wrap;
	}
	
	.tele-card-chart-title-left{
		 font-size:var(--size-13);
		 color:var(--color-muted);
	}

	.tele-card-chart-title-right{
		display:flex;
		flex-wrap:wrap;
		gap:var(--space-10);
	}
	
	.tele-card-chart-message{
	height:180px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
}

	.tele-card-chart-message-text{
		font-size:var(--size-13);
	}

	.tele-card-chart-layout{
		display:grid;
		grid-template-columns:43px 1fr;
		gap:var(--space-05);
		align-items:stretch;
	}

	.tele-card-chart-y-axis{
		height:180px;
		display:flex;
		flex-direction:column;
		justify-content:space-between;
		align-items:flex-end;
		padding:var(--space-05) 0;
	}

	.tele-card-chart-y-label{
		font-size:var(--size-11);
		color:var(--color-muted);
	}

	.tele-card-chart-plot{
		position:relative;
		height:180px;
		border-left:2px solid rgba(255,215,0,.3);
		border-bottom:2px solid rgba(255,215,0,.3);
	}

	.tele-card-chart-grid-bg{
		position:absolute;
		inset:0;
		background:
			repeating-linear-gradient(
				to top,
				transparent 0,
				transparent 43px,
				rgba(255,215,0,.10) 44px
			);
	}

	.tele-card-chart-vline{
		position:absolute;
		top:0;
		bottom:0;
		width:1px;
		background:rgba(255,215,0,.10);
	}

	.tele-card-chart-svg{
		position:absolute;
		inset:0;
		width:100%;
		height:100%;
		overflow:visible;
	}

	.tele-card-chart-x-axis{
		position:relative;
		margin-top:var(--space-10);
		padding:0 var(--space-05);
		min-height:var(--space-30);
		overflow:visible;
	}

	.tele-card-chart-x-label{
		position:absolute;
		top:0;
		font-size:var(--size-11);
		white-space:nowrap;
		color:var(--color-muted);
	}

	.tele-card-chart-x-label.is-left{
		text-align:left;
	}

	.tele-card-chart-x-label.is-right{
		text-align:right;
	}

	.tele-card-chart-x-label.is-center{
		transform:translateX(-50%);
	}

	.tele-card-chart-range-btn{
		padding:var(--space-05) var(--space-15);
		border:1px solid #cbd5e1;
		border-radius:999px;
		background:var(--color-white);
		color:#374151;
		font-size:var(--size-12);
		line-height:1.4;
		cursor:pointer;
	}

	.tele-card-chart-range-btn.is-active{
		background:#111827;
		color:var(--color-white);
		cursor:default;
	}

@media (min-width: 980px){
  .tele-station-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   07. STATION CONTROL
   ============================================================ */

	/* ===== Station control grid ===== */
	.control-channel-grid{
		display:grid;
		grid-template-columns:1fr;
		gap:var(--space-05);
		align-items:start;
		margin-top:var(--space-05);
	}

	@media (min-width: 980px){
		.control-channel-grid{
			grid-template-columns:repeat(2, minmax(0, 1fr));
		}
	}

	/* ===== Station control status ===== */
	.control-status-wrap{
		margin-top:var(--space-00);
		margin-bottom:var(--space-05);
	}

	.control-status-slot{
		position:relative;
		height:var(--space-25);
	}

	.control-status-box{
		display:block;
		margin:var(--space-00);
		height:var(--space-45);
		padding:var(--space-05) var(--space-15);
		line-height:var(--space-30);
		box-sizing:border-box;
		overflow:hidden;
	}

	.control-status-box + .control-status-box{
		margin-top:var(--space-10);
	}

	/* ===== Control card shell ===== */
	.control-card-head-left{
		min-width:0;
		flex:1;
	}
	
	.tele-card-zone,
	.control-card-zone{
		font-size:var(--size-12);
	}

	.control-status-badges{
		display:inline-flex;
		align-items:center;
		gap:var(--space-10);
		flex-wrap:wrap;
	}
	
	.tele-chip,
	.control-chip{
		display:inline-flex;
		align-items:center;
		gap:var(--space-10);
		min-height:20px;
		padding:0 var(--space-10);
		border:1px solid var(--color-card-border);
		border-radius:999px;
		background:var(--color-bg-transparent);
		color:var(--color-text);
		font-size:var(--size-10);
		line-height:var(--space-30);
		white-space:nowrap;
	}
	
	.tele-chip-dot,
	.control-chip-dot{
		display:inline-block;
		width:var(--space-10);
		height:var(--space-10);
		border-radius:50%;
		flex:0 0 var(--space-10);
		box-shadow:0 0 0 1px rgba(255,255,255,.08);
	}

	.control-set-rules-chip{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		min-height:var(--space-35);
		height:var(--space-35);
		padding:0 var(--space-15);
		border-radius:999px;
		font-size:var(--size-11);
		font-weight:var(--font-weight6);
		line-height:var(--space-30);
		white-space:nowrap;
	}

	.control-set-rules-btn{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		width:auto;
		min-width:auto;
		height:var(--space-35);
		min-height:var(--space-35);
		padding:0 var(--space-15);
		border:1px solid var(--color-orange);
		border-radius:999px;
		background:var(--color-orange);
		color:#111827;
		font-size:var(--size-11);
		font-weight:var(--font-weight6);
		line-height:var(--line-height-20);
		box-sizing:border-box;
	}

	.control-set-rules-btn:hover{
		background:#D97706;
		border-color:#B45309;
		color:#111827;
	}

	.control-rules-block{
		padding-top:var(--space-00);
		margin-top:var(--space-00);
	}

	.control-overwrite-block{
		border-top:var(--line-color-solid);
		padding-top:var(--space-10);
		margin-top:var(--space-10);
	}

	.control-rules-empty{
		font-size:var(--size-13);
	}

	.control-empty-state{
		margin-top:var(--space-30);
		padding:var(--space-20);
	}

	/* ===== Rule row: base ===== */
	.control-rule-layout{
		display:grid;
		grid-template-columns:
			minmax(0,3.2fr)
			minmax(64px,84px)
			56px
			76px
			64px
			82px;
		gap:1px 4px;
		align-items:start;
	}

	.control-rule-col-name,
	.control-rule-col-snapshot,
	.control-rule-col-operator,
	.control-rule-col-setpoint,
	.control-rule-col-action,
	.control-rule-col-priority{
		min-width:0;
	}

	.control-rule-title{
		font-size:var(--size-14);
		font-weight:var(--font-weight6);
		line-height:1.35;
		color:var(--color-white);
	}

	.control-rule-sub{
		font-size:var(--size-12);
		line-height:1.35;
		color:var(--color-muted);
	}

	.control-rule-zone{
		font-size:var(--size-12);
		line-height:1.35;
		color:var(--color-muted);
	}

	.control-rule-head-label{
		display:block;
		font-size:var(--size-12);
		line-height:var(--line-height-10);
		color:var(--color-muted);
		margin-bottom:var(--space-10);
	}

	.control-rule-head-label.is-center{
		text-align:center;
	}

	.control-rule-head-label.is-right{
		text-align:right;
	}

	.control-rule-snapshot-wrap{
		text-align:left;
		white-space:nowrap;
		padding-top:var(--space-00);
	}

	.control-rule-snapshot-value{
		font-size:var(--size-26);
		line-height:1;
		font-weight:var(--font-weight7);
		color:var(--color-white);
	}

	.control-rule-snapshot-unit{
		margin-left:4px;
		font-size:var(--size-16);
		font-weight:var(--font-weight6);
		line-height:1;
		color:var(--color-muted);
	}

	.control-rule-operator-wrap,
	.control-rule-setpoint-wrap,
	.control-rule-action-wrap,
	.control-rule-priority-wrap{
		text-align:center;
	}

	.control-rule-setpoint-wrap{
		display:flex;
		align-items:center;
		justify-content:center;
	}

	.control-rule-priority-wrap{
		display:flex;
		align-items:flex-start;
		justify-content:center;
		gap:4px;
	}
	
	.control-rule-operator-select,
	.control-rule-action-select,
	.control-rule-setpoint-input,
	.control-rule-priority-input{
		width:100%;
		min-width:0;
		height:var(--std-height);
		min-height:var(--std-min-height);
		padding:0 var(--space-10);
		font-size:var(--size-13);
		line-height:var(--line-height-10);
		box-sizing:border-box;
	}

	.control-rule-setpoint-input,
	.control-rule-priority-input{
		text-align:center;
	}
	
	.control-rule-operator-select,
	.control-rule-action-select{
		text-align:center;
		text-align-last:center;
	}

	.control-rule-priority-badge{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		width:12px;
		min-width:12px;
		height:34px;
		flex:0 0 12px;
	}

	.control-rule-priority-dot{
		display:inline-block;
		width:4px;
		height:4px;
		border-radius:50%;
		background:var(--color-grey);
		box-shadow:0 0 0 1px rgba(255,255,255,.08);
	}

	.control-rule-priority-dot.is-true{
		background:var(--color-green);
	}

	.control-rule-priority-dot.is-false{
		background:var(--color-red);
	}

	.control-rule-priority-dot.is-unknown{
		background:var(--color-grey);
	}

	/* ===== Rule row: PC ===== */
	@media (min-width: 641px){
		.control-rule-col-name{ grid-column:1; }
		.control-rule-col-snapshot{ grid-column:2; }
		.control-rule-col-operator{ grid-column:3; }
		.control-rule-col-setpoint{ grid-column:4; }
		.control-rule-col-action{ grid-column:5; }
		.control-rule-col-priority{ grid-column:6; }

		.control-rule-col-operator,
		.control-rule-col-action,
		.control-rule-col-priority{
			display:flex;
			flex-direction:column;
			justify-content:flex-start;
		}

		.control-rule-col-snapshot .control-rule-head-label,
		.control-rule-col-operator .control-rule-head-label,
		.control-rule-col-setpoint .control-rule-head-label,
		.control-rule-col-action .control-rule-head-label,
		.control-rule-col-priority .control-rule-head-label{
			display:block;
			text-align:center;
		}

		.control-rule-col-snapshot .control-rule-head-label{
			text-align:left;
		}
	}

	/* ===== Rule row: mobile ===== */
	@media (max-width: 640px){
		.control-rule-layout{
			grid-template-columns:minmax(0,1fr) 64px 84px 72px;
			grid-template-areas:
				"name name snapshot setpoint"
				". operator action priority";
			gap:10px 10px;
			align-items:start;
		}

		.control-rule-col-name{ grid-area:name; min-width:0; }
		.control-rule-col-snapshot{ grid-area:snapshot; min-width:0; }
		.control-rule-col-setpoint{ grid-area:setpoint; min-width:0; }
		.control-rule-col-operator{ grid-area:operator; min-width:0; }
		.control-rule-col-action{ grid-area:action; min-width:0; }
		.control-rule-col-priority{ grid-area:priority; min-width:0; }

		.control-rule-col-operator,
		.control-rule-col-action,
		.control-rule-col-priority{
			display:flex;
			flex-direction:column;
			justify-content:flex-start;
		}

		.control-rule-col-operator .control-rule-head-label,
		.control-rule-col-action .control-rule-head-label,
		.control-rule-col-priority .control-rule-head-label,
		.control-rule-col-setpoint .control-rule-head-label{
			display:block;
			text-align:center;
		}

		.control-rule-col-snapshot .control-rule-head-label{
			text-align:left;
		}

		.control-rule-title{
			font-size:var(--size-13);
			line-height:1.2;
		}

		.control-rule-sub,
		.control-rule-zone{
			font-size:var(--size-11);
			line-height:1.2;
		}

		.control-rule-head-label{
			font-size:var(--size-13);
			margin-bottom:var(--space-10);
		}

		.control-rule-operator-select,
		.control-rule-action-select,
		.control-rule-setpoint-input,
		.control-rule-priority-input{
			width:100%;
			min-width:0;
			height:var(--std-height);
			min-height:var(--std-min-height);
			padding:0 var(--space-10);
			border-radius:var(--border-radius);
			font-size:var(--size-13);
			line-height:var(--line-height-10);
			text-align:center;
			box-sizing:border-box;
		}

		.control-rule-operator-select,
		.control-rule-action-select{
			text-align-last:center;
			padding:0 var(--space-00);
		}

		.control-rule-priority-wrap{
			gap:var(--space-10);
		}

		.control-rule-priority-badge{
			width:var(--space-15); 
			min-width:var(--space-15);
			height:32px;
			flex:0 0 var(--space-15);
		}

		.control-rule-priority-dot{
			width:4px;
			height:4px;
		}
	}

	/* ===== Overwrite / manual controls ===== */
	.control-overwrite-layout{
		display:flex;
		justify-content:space-between;
		gap:var(--space-25);
		align-items:flex-start;
	}

	.control-col{
		min-width:0;
		flex:1;
	}

	.control-col-right{
		text-align:right;
	}

	.control-mode-label,
	.control-output-label,
	.control-overwrite-label{
		font-size:var(--size-13);
		margin-bottom:var(--space-05);
	}

	.control-mode-wrap{
		display:flex;
		align-items:center;
	}

	.control-output-wrap{
		display:flex;
		align-items:center;
		justify-content:flex-end;
	}

	.control-overwrite-center-wrap{
		min-width:0;
		flex:1;
		text-align:center;
	}

	.smh-toggle{
		position:relative;
		display:inline-flex;
		align-items:center;
		width:42px;
		height:22px;
		border-radius:999px;
		background:#52d62c;
		border:1px solid #52d62c;
		box-sizing:border-box;
		overflow:hidden;
	}

	.smh-toggle-slider{
		position:absolute;
		top:1px;
		left:2px;
		width:18px;
		height:18px;
		border-radius:50%;
		background:#e5e7eb;
		box-shadow:0 1px 3px rgba(0,0,0,.35);
		transition:left .18s ease;
		z-index:1;
	}

	.smh-toggle-text{
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		font-size:var(--size-10);
		font-weight:var(--font-weight6);
		line-height:var(--line-height-10);
		color:var(--color-white);
		z-index:0;
		pointer-events:none;
		user-select:none;
	}

	.smh-toggle-text-left{
		left:7px;
	}

	.smh-toggle-text-right{
		right:7px;
	}

	.smh-toggle .control-toggle-native-input:checked + .smh-toggle-slider{
		left:20px;
	}

	.smh-toggle.mode-toggle{
		background:var(--btn-color-toggle-on);
		border-color:var(--btn-color-toggle-on);
	}

	.smh-toggle.output-toggle{
		background:var(--btn-color-toggle-off);
		border-color:var(--btn-color-toggle-off);
	}

	.smh-toggle.output-toggle .control-toggle-native-input:checked ~ .smh-toggle-slider{
		left:20px;
	}

	.smh-toggle.output-toggle .control-toggle-native-input:checked{
	}

	.smh-toggle.output-toggle:has(.control-toggle-native-input:checked){
		background:#52d62c;
		border-color:#52d62c;
	}

	.smh-toggle.mode-toggle .smh-toggle-text-right,
	.smh-toggle.output-toggle .smh-toggle-text-right{
		opacity:.9;
	}

	.smh-toggle.mode-toggle .control-toggle-native-input:checked ~ .smh-toggle-text-left,
	.smh-toggle.output-toggle .control-toggle-native-input:checked ~ .smh-toggle-text-left{
		opacity:1;
	}

	.smh-toggle.mode-toggle .control-toggle-native-input:not(:checked) ~ .smh-toggle-text-left,
	.smh-toggle.output-toggle .control-toggle-native-input:not(:checked) ~ .smh-toggle-text-left{
		opacity:.9;
	}

	.smh-toggle.mode-toggle .control-toggle-native-input:checked ~ .smh-toggle-text-right,
	.smh-toggle.output-toggle .control-toggle-native-input:checked ~ .smh-toggle-text-right{
		opacity:.9;
	}

	.smh-toggle.mode-toggle .control-toggle-native-input:not(:checked) ~ .smh-toggle-text-right,
	.smh-toggle.output-toggle .control-toggle-native-input:not(:checked) ~ .smh-toggle-text-right{
		opacity:1;
	}

	.smh-toggle .control-toggle-native-input:disabled{
		cursor:default;
	}

	.smh-toggle .control-toggle-native-input:disabled + .smh-toggle-slider{
		opacity:1;
	}

	.smh-toggle .control-toggle-native-input:disabled ~ .smh-toggle-text{
		opacity:.55;
	}

	.control-native-toggle{
		position:absolute;
		inset:0;
		width:100%;
		height:100%;
		margin:0;
		opacity:0;
	}

	.control-toggle-native-input{
		position:absolute;
		inset:0;
		width:100%;
		height:100%;
		margin:0;
		padding:0;
		opacity:0;
		z-index:3;
		cursor:pointer;
		appearance:none;
		-webkit-appearance:none;
		border:0;
		background:transparent;
	}

	.control-input-overwrite-minute,
	.control-timer-select{
		height:var(--std-height);
		min-height:var(--std-min-height);
		width:65px;
		min-width:65px;
		padding:0 var(--space-15);
		border-radius:var(--border-radius);
		font-size:var(--size-13);
	}

	.control-time-select{
		width:65px;
		min-width:65px;
	}

	/* ===== Rules modal ===== */
	.control-rules-modal{
		position:fixed;
		inset:0;
		z-index:1000;
		background:transparent;
		backdrop-filter:none;
		padding:var(--space-25);
		overflow:auto;
	}

	.control-rules-modal-card{
		max-width:720px;
		margin:40px auto;
		padding:var(--space-25);
		position:relative;
		background:var(--color-bg);
		border:var(--line-color-solid);
		border-radius:var(--border-radius);
		box-shadow:0 18px 50px var(--color-shadow-soft);
	}

	.control-rules-modal-header{
		display:flex;
		justify-content:space-between;
		align-items:flex-start;
		gap:var(--space-15);
		margin-bottom:var(--space-00);
	}

	.control-rules-modal-title-wrap{
		min-width:0;
		flex:1;
	}

	.control-rules-modal-title{
		margin:0 0 var(--space-05) 0;
	}

	.control-rules-modal-subtitle{
		font-size:var(--size-13);
		color:var(--color-accent);
	}

	.control-rules-close-btn{
		min-width:auto;
		padding:0 var(--space-15);
		height:var(--space-55);
		line-height:var(--space-50);
	}

	.control-rules-picker-block{
		border-top:var(--line-color-solid);
		padding-top:var(--space-05);
	}

	.control-rules-picker-label{
		font-size:var(--size-12);
		margin-bottom:var(--space-10);
	}

	.control-rules-picker-list{
		display:grid;
		gap:var(--space-05);
		max-height:360px;
		overflow:auto;
		padding-right:var(--space-05);
	}

	.control-rule-picker-item{
		display:flex;
		gap:var(--space-05);
		align-items:flex-start;
		border:var(--line-color-solid);
		border-radius:var(--border-radius);
		padding:var(--space-05) var(--space-15);
		cursor:pointer;
		background:var(--color-bg-transparent);
	}

	.control-rule-picker-checkbox{
		margin-top:var(--space-05);
		flex:0 0 auto;
	}

	.control-rule-picker-body{
		min-width:0;
		flex:1;
	}

	.control-rule-picker-title{
		font-size:var(--size-14);
		font-weight:var(--font-weight6);
		line-height:var(--line-height-15);
		color:var(--color-text);
	}

	.control-rule-picker-meta{
		font-size:var(--size-12);
		line-height:var(--line-height-10);
	}

	.control-rule-picker-snapshot{
		font-size:var(--size-12);
		line-height:var(--line-height-10);
		margin-top:var(--space-00);
	}

	.control-rules-modal-actions{
		display:flex;
		justify-content:flex-end;
		gap:var(--space-15);
		margin-top:var(--space-05);
		border-top:var(--line-color-solid);
		padding-top:var(--space-10);
	}
	
/* ============================================================
   08. CRUD PAGES
   ============================================================ */
	
	/* ===== Guest Page ===== */
	.guests-header-actions{
		flex:0 0 auto;
		margin-top:var(--space-05);
	}

	/* Guest cards */
	.guest-card{
		gap:var(--space-10);
		padding:var(--space-05) var(--space-15);
	}

	.guest-cards-list{
		margin-top:var(--space-05);
		display:grid;
		grid-template-columns:1fr;
		gap:var(--space-05);
	}

	.guest-card .guest-slug{
		font-size:var(--size-13);
		color:var(--color-blue-light);
	}

	.guest-card .card-meta{
		font-size:var(--size-13);
		color:var(--color-text);
		font-weight:var(--font-weight6);
	}
	
	.guest-users-intro{
		margin: var(--space-20) var(--space-00);
		padding: var(--space-00) var(--space-15);
	}

	.guest-users-title{
		margin: var(--space-00) var(--space-05);
		font-size:var(--size-16);
		font-weight:var(--font-weight6);
	}

	.guest-users-subtitle{
		margin:0;
		font-size:var(--size-13);
	}

	.guest-users-legend{
		margin:var(--space-05) 0 0;
		padding-left:var(--space-30);
		font-size:var(--size-13);
		color: var(--color-white-light);
	}
	
	.guest-users-table select.guest-role-select{
		width: 100%;
		max-width: 140px;
		font-size: var(--size-13);
		color:var(--muted);
		padding:var(--space-05) var(--space-10);
		background: rgba(15,23,42,.8);
		border-radius: var(--border-radius);
		border: 1px solid var(--color-border);
	}

	.guest-users-table .assigned-wrapper{
		display: inline-flex;
		align-items: center;
		gap: var(--space-10);
		font-size:var(--size-13);
	}

	.guest-users-table .assigned-wrapper input[type="checkbox"]{
		transform: translateY(1px);
	}

	.guest-users-table .assigned-wrapper span{
		opacity: .85;
	}
	
	/* Guest form panel */
	#guest-form-panel{
		display:none;
		margin-bottom:var(--space-20);
	}

	#guest-form-panel.is-visible{
		display:block;
	}

	#guest-form textarea{
		min-height:72px;
		resize:vertical;
	}

	/* Guest error visibility */
	#guests-error.is-hidden{
		display:none;
	}

	#guests-error.is-visible{
		display:block;
		visibility:visible;
	}	
	
	@media (min-width:768px){
		.guest-cards-list{
			grid-template-columns:repeat(2, minmax(0,1fr));
		}
  }
	
	@media (min-width:980px){
		.guest-cards-list{
			grid-template-columns:repeat(3, minmax(0,1fr));
		}
	}

	/* Location cards-list */
	.zone-cards-list,
	.location-cards-list{
		margin:var(--space-05) var(--space-00);
		display:grid;
		grid-template-columns:1fr;
		gap:var(--space-05);
	}
	
	@media (min-width:768px){
		.zone-cards-list,
		.location-cards-list{
			grid-template-columns:repeat(3, minmax(0,1fr));
		}
	}
	
	@media (min-width:980px){
		.zone-cards-list,
		.location-cards-list{
			grid-template-columns:repeat(4, minmax(0,1fr));
		}
	}
	
	/* ===== Guest-Users Page ===== */
	.guest-info-card{
		margin-top:var(--space-10);
		padding:var(--space-00);
		color: var(--color-white-light);
	}
	
	.guest-card-title{
		margin:var(--space-10) var(--space-20); 
		font-size:var(--size-18);
	}

	.guest-info-body{
		display:grid;
		grid-template-columns:1fr;
		gap:var(--space-00);
		padding:var(--space-00) var(--space-20) var(--space-10) var(--space-20);
	}

	.guest-info-main,
	.guest-info-contact{
		display:flex;
		flex-direction:column;
		gap:var(--space-05);
	}

	.guest-info-row{
		display:grid;
		grid-template-columns:90px minmax(0,1fr);
		align-items:baseline;
		column-gap:var(--space-10);
	}

	.guest-info-label{
		font-size:var(--size-12);
		text-transform:uppercase;
		letter-spacing:.04em;
		color:var(--color-muted);
		white-space:nowrap;
	}

	.guest-info-label::after{
		content:":";
	}

	.guest-info-value{
		min-width:0;
		font-size:var(--size-13);
		color:var(--color-white);
		word-break:break-word;
	}

	.guest-info-name-row .guest-info-value{
		font-size:var(--size-13);
		font-weight:var(--font-weight6);
	}

	.guest-users-footnote{
		margin-top:12px;
		font-size:10px;
	}
	
	@media (min-width: 768px){
		.guest-info-body{
			grid-template-columns:minmax(0,2fr) minmax(0,1fr);
			align-items:start;
			column-gap:var(--space-50);
		}

		.guest-info-main,
		.guest-info-contact{
			min-width:0;
		}
	}
	
	/* ----- Guest-Users table: mobile card layout ----- */
	@media (max-width: 640px){
		.guest-users-table{
			display:block;
			width:100%;
			border-collapse:separate;
			border-spacing:0;
			table-layout:auto;
		}

		.guest-users-table thead{
			display:none;
		}

		.guest-users-table tbody,
		.guest-users-table tr,
		.guest-users-table td{
			display:block;
			width:100%;
		}

		.guest-users-table tr{
			margin-bottom:var(--space-15);
			padding:var(--space-10) var(--space-15);
			border:1px solid var(--color-card-border);
			border-radius:var(--border-radius);
			background:var(--color-card-background);
		}

		.guest-users-table td{
			display:grid;
			grid-template-columns:105px minmax(0,1fr);
			align-items:center;
			gap:var(--space-10);
			padding:var(--space-05) var(--space-00);
			border-bottom:1px solid var(--color-border);
			font-size:var(--size-12);
		}

		.guest-users-table td:last-child{
			border-bottom:0;
		}

		.guest-users-table td::before{
			font-size:var(--size-11);
			font-weight:var(--font-weight6);
			color:var(--color-muted);
			text-transform:uppercase;
			letter-spacing:.04em;
			white-space:nowrap;
		}

		.guest-users-table td:nth-child(1)::before{
			content:"User";
		}

		.guest-users-table td:nth-child(2)::before{
			content:"Trạng thái";
		}

		.guest-users-table td:nth-child(3)::before{
			content:"System role";
		}

		.guest-users-table td:nth-child(4)::before{
			content:"Guest role";
		}

		.guest-users-table td:nth-child(5)::before{
			content:"Đang gán?";
		}

		.guest-users-table select.guest-role-select{
			width:100%;
			max-width:none;
		}

		.guest-users-table .assigned-wrapper{
			justify-content:flex-start;
		}
	}	

	.guest-users-table th,
	.guest-users-table td{
		vertical-align:middle;
	}

	.guest-users-table select.guest-role-select{
		display:block;
	}

	.guest-users-table .assigned-wrapper{
		align-items:center;
	}
	
	/* ===== Stations Page ===== */
	.section-header-actions .filter-row{
		display:flex;
		flex-wrap:wrap;
		gap:var(--space-10);
		justify-content:flex-end;
	}

	.section-header-actions .filter-row .form-group{
		min-width:160px;
		justify-content:center;
	}
	
	.station-footer{
		display:flex;
		flex-direction:row;
		align-items:center;
		justify-content:space-between;
		gap:var(--space-10);
		margin:var(--space-10) var(--space-05) var(--space-05) var(--space-05);
	}

	.station-reboot-block{
		display:inline-flex;
		align-items:center;
		gap:var(--space-10);
		min-width:0;
	}

	.station-reboot-checkbox{
		margin:0;
		flex:0 0 auto;
	}

	.station-reboot-label{
		font-size:var(--size-12);
		line-height:var(--line-height-12);
		color:var(--color-red);
		font-weight:var(--font-weight6);
		white-space:nowrap;
	}

	.station-footer-actions{
		display:inline-flex;
		align-items:center;
		justify-content:flex-end;
		gap:var(--space-10);
		flex:0 0 auto;
		margin-left:auto;
	}
	
	.station-header{
		align-items:center;
	}

	.station-header-right{
		display:inline-flex;
		align-items:center;
		justify-content:flex-end;
		gap:var(--space-05);
		line-height:var(--line-height-10);
	}

	.station-header-right .station-link-dot{
		display:inline-block;
		margin:0;
		vertical-align:middle;
	}
	
	/* ----- Stations - Modal Page ----- */
	.station-modal-overlay{
		display:none;
		position:fixed;
		inset:0;
		align-items:center;
		justify-content:center;
		padding:var(--space-25);
		overflow-y:auto;
		background:var(--color-modal-background);
		z-index:50;
	}

	.station-modal-card{
		width:min(100%, 380px);
		margin:var(--space-40) auto;
	}
	
	.station-modal-header{
		margin-bottom:var(--space-20);
	}

	.station-modal-body{
		display:flex;
		flex-direction:column;
		padding:var(--space-00) var(--space-10);
		gap:var(--space-05);
	}

	.station-modal-body .form-row{
		margin-top:var(--space-00);
		gap:var(--space-05);
	}

	.station-modal-body .form-row label{
		padding-left:var(--space-00);
	}

	.station-modal-footer{
		margin:var(--space-10) var(--space-15);
		display:flex;
		justify-content:flex-end;
		gap:var(--space-15);
	}

	@media (min-width:768px){
		#stations-list.cards-list{
			grid-template-columns:repeat(3, minmax(0,1fr));
		}
	}

	@media (min-width:980px){
		#stations-list.cards-list{
			grid-template-columns:repeat(4, minmax(0,1fr));
		}
	}
	
	/* ===== Channels Page ===== */
	.channel-form-grid{
		display:grid;
		grid-template-columns:1fr;
		gap:var(--space-20); 
		align-items:end;
	}
	
	.channels-alert{
		margin-bottom:var(--space-15);
	}

	.channels-alert.is-hidden,
	.is-hidden{
		display:none;
	}

	.channels-alert.is-visible{
		display:block;
		visibility:visible;
	}

	.channels-station-links{
		display:flex;
		flex-wrap:wrap;
		margin:0;
		padding:var(--space-05) var(--space-10);
		gap:var(--space-30);
	}

	.channels-form-section{
		margin:var(--space-10) 0 var(--space-35) 0;
	}

	.channels-form-title{
		margin-top:var(--space-00);
		font-size:var(--size-18);
		font-weight:var(--font-weight5);
	}

	.channel-form-field-default-wrap{
		align-items:flex-end;
	}

	.channel-checkbox-line{
		display:flex;
		align-items:center;
		gap:var(--space-15);
	}

	.channel-catalog-info-box{
		margin-top:var(--space-20);
		padding:var(--space-20);
		border:1px solid var(--color-card-border);
		border-radius:var(--border-radius);
	}

	.channel-catalog-info-body{
		margin-top:var(--space-15);
		font-size:var(--size-14);
		line-height:var(--line-height-15);
	}

	.channel-form-actions{
		margin-top:var(--space-20);
		display:flex;
		flex-wrap:wrap;
		gap:var(--space-15);
	}

	.channels-page-note{
		margin-top:var(--space-20);
		font-size:var(--size-13);
	}

	.channel-row-action-btn + .channel-row-action-btn{
		margin-left:var(--space-15);
	}

	@media (min-width: 980px){
		.channel-form-grid{
			grid-template-columns:
				minmax(200px, 1.15fr)
				minmax(180px, 1fr)
				minmax(120px, 0.55fr)
				minmax(130px, max-content)
				minmax(72px, max-content);
			gap:12px;
		}
	}	

	/* ===== Channel_Catalog Page ===== */
	.channel-catalog-header-actions{
		width:100%;
		display:flex;
		justify-content:flex-end;
		margin-left:auto;
		padding-bottom:var(--space-10);
	}

	.channel-catalog-header-actions #btn-new-channel-catalog{
		width:auto;
	}

	.channel-catalog-list{
		display:grid;
		margin: var(--space-00) var(--space-00);
		padding: var(--space-00);
		gap: var(--space-05);
	}
	
	.channel-catalog-list .cards-list{
		grid-template-columns:1fr;
	}

	@media (min-width: 980px){
		#channel-catalog-list.cards-list{
			grid-template-columns:repeat(3, minmax(0, 1fr));
			align-items:start;
		}
	}

	/* ===== Provisioning Page ===== */
	.badge{
		display:inline-flex;
		align-items:center;
		justify-content:center;
		min-height:var(--space-35);
		padding:0 var(--space-15);
		border:1px solid var(--color-card-border);
		border-radius:999px;
		background:var(--color-bg-transparent);
		color:var(--color-text);
		font-size:var(--size-11);
		font-weight:var(--font-weight6);
		line-height:var(--line-height-10);
		white-space:nowrap;
	}
	
	.badge-status-pending{
		border-color:var(--color-orange);
		background:#ff91001f;
		color:var(--color-orange);
	}

	.badge-status-claimed{
		border-color:var(--color-green);
		background:#00ff001f;
		color:var(--color-green);
	}

	.badge-status-rejected{
		border-color:var(--color-red);
		background:#ff00001f;
		color:var(--color-red);
	}
	
	.text-green{
		color:var(--color-green);
	}
		
	.prov-fields{
		margin-top:var(--space-10);
		display:grid;
		grid-template-columns: 1fr;
		gap:var(--space-05);
		padding-left:var(--space-15);
	}
	
	.prov-filter-row{
		display:grid;
		grid-template-columns:1fr;
		gap:var(--space-10);
		align-items:end;
	}

	.prov-filter-action{
		margin-top:var(--space-00);
	}

	@media (min-width: 641px){
		.prov-filter-row{
			grid-template-columns:minmax(220px, 260px) auto;
			align-items:end;
		}

		.prov-filter-row .form-group{
			margin-top:var(--space-00);
		}

		#prov-reload-btn{
			height:var(--std-height);
			min-height:var(--std-min-height);
		}
	}
	
	.prov-card{
		display:grid;
		margin:var(--space-00);
		padding:var(--space-10) var(--space-15);
		gap:var(--space-05);
	}

	.prov-sub{
		margin:var(--space-00) var(--space-05) var(--space-00) var(--space-05);
		font-size:var(--size-12);
		line-height:var(--line-height-10);
		color:var(--color-green);
	}

	.prov-times{
		margin:var(--space-10) var(--space-05) var(--space-00) var(--space-05);
		padding-left:var(--space-10);
		font-size:var(--size-12);
		line-height:var(--line-height-10);
		color:var(--color-muted);
	}

	.prov-actions{
		display:inline-flex;
		align-items:center;
		margin-top:var(--space-10);
		justify-content:flex-end;
		gap:var(--space-10);
		flex:0 0 auto;
	}

	.prov-actions .btn{
		min-height:var(--space-35);
		padding:var(--space-05) var(--space-20);
	}

	.prov-actions .btn-sm{
		font-size:var(--size-13);
	}

	@media (max-width: 480px){
		.prov-actions .btn{
			flex:1 1 auto;
		}
	}
	
	@media (min-width:768px){
		#prov-cards.cards-list{ 
			grid-template-columns: repeat(2, minmax(0,1fr)); 
		}
	}

	@media (min-width: 980px){
		.prov-fields .form-group{
			display:grid;
			grid-template-columns:72px minmax(0,1fr);
			align-items:center;
			gap:var(--space-10);
			margin-top:var(--space-00);
		}

		.prov-fields .form-group label{
			white-space:nowrap;
		}
		
		#prov-cards.cards-list{ 
			grid-template-columns: repeat(3, minmax(0,1fr)); 
		}
	}

	/* ===== Users Page ===== */
	.searchbar{
		margin-top:var(--space-05);
		display:flex;
		flex-wrap:wrap;
	}

	.badge-user-active{
		border-color:var(--color-green);
		background:#00ff001f;
		color:var(--color-green);
	}

	.badge-user-deactive{
		border-color:var(--color-red);
		background:#ff00001f;
		color:var(--color-red);
	}
	
	/* Users modal shell */
	.user-modal-overlay{
		position:fixed;
		inset:0;
		display:none;
		align-items:center;
		justify-content:center;
		padding:var(--space-25);
		overflow-y:auto;
		background:var(--color-modal-background);
		z-index:50;
	}

	.user-modal-overlay.is-create{
		z-index:60;
	}

	.user-modal-card{
		width:min(100%, 560px);
		max-width:640px;
		max-height:calc(100vh - 32px);
		overflow-y:auto;
		margin:auto;
	}

	.user-modal-header{
		margin-bottom:var(--space-10);
	}

	.user-modal-body{
		padding:var(--space-05);
		display:flex;
		flex-direction:column;
		gap:var(--space-00);
	}
	
	.user-modal-body-up,
	.user-modal-body-down{
		display:flex;
		flex-direction:column;
		padding:var(--space-05) var(--space-05);
		gap:var(--space-05);
	}
	
	.user-modal-body-up-title,
	.user-modal-body-down-title{
		padding:var(--space-00) var(--space-10);
		gap:var(--space-00);
		font-size:var(--size-16);
		font-weight:var(--font-weight5);
	}
	
	.user-modal-system-block{
		display:flex;
		flex-direction:column;
		gap:var(--space-00);
	}

	.user-modal-system-block .form-row{
		display:flex;
		flex-direction:column;
		gap:var(--space-00);
	}

	.user-modal-system-block .form-row > label{
		margin-left:var(--space-10);
		color: var(--color-muted);
	}

	.user-modal-system-block select,
	.user-guest-controls-right select{
		min-width:120px;
	}
	
	@media (max-width:767px){
		.user-modal-system-block .form-row{
			display:flex;
			flex-direction:column;
			align-items:stretch;
			gap:var(--space-05);
		}

		.user-modal-system-block .form-row > label{
			flex:none;
			width:100%;
			margin-left:var(--space-00);
			padding-left:var(--space-10);
		}

		.user-modal-system-block .form-row > .field{
			width:100%;
			flex:none;
			display:flex;
			flex-direction:column;
			align-items:stretch;
		}

		.user-modal-system-block .input,
		.user-modal-system-block select,
		.user-modal-system-block input[type="text"],
		.user-modal-system-block input[type="password"]{
			width:100%;
			min-width:0;
			box-sizing:border-box;
		}
	}
	
	.user-modal-system-block.is-spaced{
		margin-top:var(--space-00);
	}

	.user-modal-footer{
		margin:var(--space-10) var(--space-10);
		display:flex;
		justify-content:flex-end;
		gap:var(--space-15);
	}

	.user-checkbox-line{
		display:flex;
		align-items:center;
		gap:var(--space-10);
	}

	.user-times,
	.user-mfa-status{
		margin-top:var(--space-05);
		font-size:var(--size-11);
		color: var(--color-amber);
	}

	.user-mfa-note{
		margin-top:var(--space-10);
		font-size:var(--size-13);
	}

	.user-guests-container{
		margin:var(--space-00) var(--space-10);
		display:flex;
		flex-direction:column;
		gap:var(--space-05);
	}

	@media (min-width:768px){
		.user-modal-system-block .form-row{
			flex-direction:row;
			align-items:center;
		}

		.user-modal-system-block .form-row > label{
			flex:0 0 160px;
		}

		.user-modal-system-block .form-row > .field{
			flex:1 1 auto;
		}

		.user-modal-system-block .form-row.mfa-row{
			align-items:flex-start;
			margin-top:var(--space-20);
		}
	}

	.user-modal-system-block .form-row.mfa-row .field{
		flex-direction:column;
		align-items:flex-start;
	}

	.user-guest-row{
		display:flex;
		flex-direction:column;
		align-items:flex-start;
		gap:0;
		width:100%;
	}

	.user-guest-label{
		display:block;
		width:100%;
		font-weight:var(--font-weight5);
		margin:0 var(--space-10);
		text-align:left;
	}

	.user-guest-label-red{
		color:var(--color-red);
	}

	.user-guest-label-blue{
		color:var(--color-blue-light);
	}

	.user-guest-row .user-guest-controls{
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		width:100%;
		gap:var(--space-15);
		justify-content:space-between;
	}

	.user-guest-controls-left{
		display:flex;
		align-items:center;
		gap:var(--space-10);
		flex:0 0 auto;
	}

	.user-guest-controls-right{
		display:flex;
		align-items:center;
		gap:var(--space-15);
		flex:0 0 auto;
		margin-left:auto;
	}
	
	@media (max-width:767px){
		.user-guest-row .user-guest-controls{
			flex-direction:column;
			align-items:stretch;
			gap:var(--space-10);
		}

		.user-guest-controls-left,
		.user-guest-controls-right{
			width:100%;
			flex:none;
			margin-left:var(--space-00);
			justify-content:flex-start;
		}

		.user-guest-controls-right{
			display:flex;
			flex-direction:row;
			align-items:center;
			justify-content:flex-end;
			gap:var(--space-10);
		}

		.user-guest-controls-right label{
			width:auto;
			display:flex;
			flex-direction:row;
			align-items:center;
			gap:var(--space-05);
		}

		.user-guest-controls-right .guest-role{
			width:auto;
			min-width:96px;
			box-sizing:border-box;
		}

		.user-guest-controls-right .guest-active{
			flex:0 0 auto;
		}
	}

	.user-password-row .user-password-pair{
		display:grid;
		grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr) 42px;
		gap:var(--space-05);
		align-items:center;
		width:100%;
	}

	.user-password-box{
		min-width:0;
	}

	.user-password-repeat-label{
		margin:0;
		padding-left:0;
		white-space:nowrap;
		color:var(--color-muted);
	}

	.user-password-toggle{
		width:40px;
		min-width:40px;
		padding:0;
	}

	.user-eye-icon{
		display:inline-block;
		width:24px;
		height:24px;
		background:currentColor;
		-webkit-mask-repeat:no-repeat;
		mask-repeat:no-repeat;
		-webkit-mask-position:center;
		mask-position:center;
		-webkit-mask-size:24px 24px;
		mask-size:24px 24px;
	}

	.user-password-toggle .user-eye-icon{
		-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.58 10.58A2 2 0 0 0 13.42 13.42'/%3E%3Cpath d='M9.88 5.1A10.7 10.7 0 0 1 12 4.9c5 0 8.6 3.8 10 7.1a13.1 13.1 0 0 1-3.12 4.4'/%3E%3Cpath d='M6.1 6.1A13.4 13.4 0 0 0 2 12c1.4 3.3 5 7.1 10 7.1a10.7 10.7 0 0 0 4.05-.78'/%3E%3C/svg%3E");
		mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.58 10.58A2 2 0 0 0 13.42 13.42'/%3E%3Cpath d='M9.88 5.1A10.7 10.7 1 0 1 12 4.9c5 0 8.6 3.8 10 7.1a13.1 13.1 0 0 1-3.12 4.4'/%3E%3Cpath d='M6.1 6.1A13.4 13.4 0 0 0 2 12c1.4 3.3 5 7.1 10 7.1a10.7 10.7 0 0 0 4.05-.78'/%3E%3C/svg%3E");
	}

	.user-password-toggle.is-visible .user-eye-icon{
		-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.8-7 10-7 10 7 10 7-3.8 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
		mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.8-7 10-7 10 7 10 7-3.8 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	}

	@media (max-width:767px){
		.user-password-row .user-password-pair{
			display:grid;
			grid-template-columns:minmax(0, 1fr) 42px;
			grid-template-areas:
				"pwd toggle"
				"repeat-label repeat-label"
				"repeat repeat";
			column-gap:var(--space-05);
			row-gap:var(--space-00);
			align-items:center;
			width:100%;
		}

		.user-password-row .user-password-box:first-of-type{
			grid-area:pwd;
			min-width:0;
		}

		.user-password-repeat-label{
			grid-area:repeat-label;
			margin-left:var(--space-00);
			padding-left:var(--space-10);
		}

		.user-password-row .user-password-box:last-of-type{
			grid-area:repeat;
			min-width:0;
		}

		.user-password-toggle{
			grid-area:toggle;
			width:42px;
			min-width:42px;
			height:var(--std-height);
			align-self:center;
		}
	}

	.user-modal-system-block .input.is-invalid{
		background:rgba(127,29,29,.38);
		border-color:rgba(248,113,113,.9);
	}

	/* ===== Security Page ===== */
	.security-user-detail{
		
	}
	
	.security-user-detail-list{
		list-style:none;
		margin:var(--space-00);
		padding:var(--space-00) var(--space-20);
		display:flex;
		flex-direction:column;
		gap:var(--space-00);
	}
	
	.security-user-detail-item{
		display:grid;
		grid-template-columns:120px minmax(0, 1fr);
		align-items:center;
		gap:var(--space-10);
		margin:var(--space-00);
		padding:var(--space-05) var(--space-10);
		font-size:var(--size-13);	
	}
	
	.security-user-detail-label{
		color:var(--color-muted);
		font-weight:var(--font-weight5);
	}
	
	.security-user-detail-value{
		min-width:0;
		color:var(--color-white-light);
		font-weight:var(--font-weight6);
		word-break:break-word;
	}
	
	.security-section-logs{
		margin:var(--space-10) var(--space-00);
	}
	
	.sec-btn-array{
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		justify-content:flex-start;
		gap:var(--space-10);
		margin:var(--space-10) var(--space-20);
	}

	.sec-btn-array .btn{
		width:250px;
		min-width:250px;
		max-width:100%;
		padding:0 var(--space-15);
	}
	
	#security-detail .section{
		padding:var(--space-05) var(--space-10);
	}
	
	#security-detail .section-notes{
		margin-bottom:var(--space-05); 
	}
	
	#security-select-user .form-group,
	#security-select-user .note{
		padding:var(--space-00) var(--space-00);
	}

	/* ===== Login Page ===== */
	.login-card{
		box-sizing:border-box;
		width:calc(100% - var(--space-20));
		max-width:420px;
		margin:var(--space-40) auto;
		padding:var(--space-15);
	}
	
	.login-card-title{
		padding-top:var(--space-00);
		font-size:var(--size-20);
	}
	
	.login-card-header{
		display:flex;
		flex-direction:column;
		align-items:flex-start;
		justify-content:flex-start;
		gap:var(--space-00);
	}

	.login-card-subtitle{
		margin:var(--space-00) var(--space-05);
		font-size:var(--size-11);
	}

	.login-card-section-note{
		padding-top:var(--space-10);
		font-size:var(--size-11);
	}

	.login-message{
		margin:var(--space-10) var(--space-05);
		color:var(--color-alert-error);
		font-weight:var(--font-weight5);
		font-size:var(--size-12);
		line-height:var(--line-height-15);
	}

	.login-message.is-hidden{
		display:none;
	}

	.login-message.is-visible{
		display:block;
	}

	.login-actions{
		margin-top:var(--space-20);
	}	
	
	/* ===== MFA Verify Page ===== */
	.mfa-verify-container{
		max-width:480px;
		margin-top:var(--space-40);
	}

	.mfa-verify-error{
		margin:var(--space-10) var(--space-05);
		color:var(--color-alert-error);
		font-weight:var(--font-weight6);
		font-size:var(--size-13);
	}

	.mfa-verify-code-input{
		letter-spacing:.08em;
		font-weight:var(--font-weight6);
	}	
	
	/* ===== MFA Enroll Page ===== */
	.mfa-enroll-container{
		margin-top:var(--space-00);
	}

	.mfa-enroll-section{
		padding:var(--space-10) var(--space-20);
	}

	.mfa-enroll-message{
		margin:var(--space-10) var(--space-05);
		font-weight:var(--font-weight6);
		font-size:var(--size-13);
	}

	.mfa-enroll-message-error{
		color:var(--color-alert-error);
	}

	.mfa-enroll-message-success{
		color:var(--color-alert-success);
	}

	.mfa-enroll-manual-code{
		margin-top:var(--space-10);
		padding:var(--space-00) var(--space-10);
		color: var(--color-orange);
		font-size:var(--size-15);
		font-weight: var(--font-weight6);
	}

	.mfa-enroll-qr-block{
		margin:var(--space-10) var(--space-50);
	}

	.mfa-enroll-qrcode{
		width:200px;
		height:200px;
		margin-top:var(--space-10);
	}

	.mfa-enroll-form{
		margin-top:var(--space-15);
	}

	.mfa-enroll-code-input{
		letter-spacing:.08em;
		font-weight:var(--font-weight6);
	}

	.mfa-enroll-btn-action{
		margin-top:var(--space-10);
	}

	.mfa-enroll-backup-note{
		margin-top:var(--space-20);
	}
	
	/* ===== API Keys Page ===== */
	.api-keys-toolbar{
		margin:var(--space-10) var(--space-10);
		box-sizing:border-box;
	}

	#api-keys-filter-form{
		width:100%;
	}

	.api-keys-filter-row{
		width:100%;
		display:flex;
		align-items:flex-end;
		justify-content:flex-start;
		gap:var(--space-15);
		box-sizing:border-box;
	}

	.api-keys-filter-group{
		display:flex;
		flex-wrap:wrap;
		align-items:flex-end;
		gap:var(--space-10);
	}

	.api-keys-action-group{
		display:flex;
		flex-wrap:wrap;
		align-items:flex-end;
		justify-content:flex-end;
		gap:var(--space-10);
		margin-left:auto;
		flex:0 0 auto;
	}

	.api-keys-filter-group .form-group{
		min-width:160px;
	}

	.api-keys-action-group .btn{
		min-width:160px;
	}

	@media (max-width:767px){
		.api-keys-toolbar{
			margin:var(--space-10) var(--space-05) var(--space-15) var(--space-05);
		}

		.api-keys-filter-row{
			flex-direction:column;
			align-items:stretch;
		}

		.api-keys-filter-group,
		.api-keys-action-group{
			width:100%;
		}

		.api-keys-filter-group{
			flex-direction:column;
		}

		.api-keys-action-group{
			margin-left:0;
			justify-content:stretch;
			display:grid;
			grid-template-columns:1fr 1fr;
		}

		.api-keys-filter-group .form-group,
		.api-keys-action-group .btn{
			width:100%;
			min-width:0;
		}
	}

	@media (max-width:420px){
		.api-keys-action-group{
			grid-template-columns:1fr;
		}
	}
	
	#api-keys-cards.cards-list{
		margin-top:var(--space-10);
	}

	#api-keys-cards .card{
			min-width:0;
	}

	#api-keys-cards .card-header{
			min-width:0;
	}

	#api-keys-cards .card-title-left{
			min-width:0;
			flex:1 1 auto;
	}

	#api-keys-cards .card-title-right{
			flex:0 0 auto;
	}

	#api-keys-cards .card-subtitle{
			display:block;
			max-width:100%;
			overflow-wrap:anywhere;
			word-break:break-word;
	}

	#api-keys-cards .api-key-hash-line{
			display:flex;
			align-items:flex-start;
			gap:var(--space-05);
			max-width:100%;
	}

	#api-keys-cards .api-key-hash-label{
			flex:0 0 auto;
			white-space:nowrap;
	}

	#api-keys-cards .api-key-hash-value{
			min-width:0;
			overflow-wrap:anywhere;
			word-break:break-word;
	}

	@media (min-width:980px){
		#api-keys-cards.cards-list{
			grid-template-columns:repeat(3, minmax(0,1fr));
		}
	}
	
	.api-key-modal-overlay{
		position:fixed;
		inset:0;
		z-index:50;
		display:flex;
		align-items:center;
		justify-content:center;
		padding:var(--space-25);
		background:var(--color-modal-background);
	}

	.api-key-modal-overlay.is-hidden{
		display:none;
	}

	.api-key-modal-card{
		width:min(100%, 420px);
		max-height:calc(100vh - 40px);
		overflow:auto;
		background:var(--color-bg);
		border:1px solid var(--color-card-border);
		box-shadow:0 18px 50px var(--color-shadow-soft);
		padding:var(--space-10) var(--space-15);
	}

	.api-key-modal-header,
	.api-key-modal-footer{
		display:flex;
		align-items:flex-start;
		justify-content:space-between;
		gap:var(--space-15);
		margin-top:var(--space-05);
	}

	.api-key-modal-body{
		display:flex;
		flex-direction:column;
		gap:var(--space-00);
	}

	.api-key-modal-body-up{
		padding:var(--space-00) var(--space-10);
	}
	
	.api-key-modal-body-down{
		padding:var(--space-10) var(--space-20);
		margin-bottom:var(--space-05);
	}

	.api-key-modal-body.form-group{
		margin-top:var(--space-00);
	}
		
	.api-key-scope-list{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:var(--space-05) var(--space-20);
		padding:var(--space-00) var(--space-10);
	}

	.api-key-scope-list label{
		display:flex;
		align-items:center;
		gap:var(--space-10);
		font-size:var(--size-13);
		font-weight:var(--font-weight2);
		line-height:var(--line-height-12);
	}

	.api-key-scope-list input[type="checkbox"]{
		margin:0;
		flex:0 0 auto;
	}

	.api-key-created-row{
		display:flex;
		align-items:flex-start;
		gap:var(--space-10);
	}

	#api-key-scope-list.form-group{
		margin:0;
		padding:var(--space-10) var(--space-10);
	}

	#api-key-modal-created-key{
		flex:1 1 auto;
		min-width:0;
		min-height:44px;
		height:auto;
		line-height:var(--line-height-15);
		padding:var(--space-05) var(--space-10);
		box-sizing:border-box;
		text-align:left;
		resize:none;
		overflow:hidden;
		white-space:pre-wrap;
		overflow-wrap:anywhere;
		word-break:break-word;
		border:1px solid var(--color-border);
		border-radius:var(--border-radius);
		background:transparent;
		color:var(--color-text);
		font-size:var(--size-13);
	}

	#api-key-modal-copy{
		flex:0 0 auto;
		align-self:flex-start;
	}

	.api-key-created-box.is-hidden{
		display:none;
	}
	
	
/* ============================================================
   09. LEGACY COMPATIBILITY
   ============================================================ */

/* ============================================================
   10. UTILITIES
   ============================================================ */
	 /* Text helpers */
	.muted{
		margin:var(--space-00) var(--space-05);
		font-size:var(--size-12);
		color:var(--color-muted);
	}
	
	.text-warning{
		margin:var(--space-00) var(--space-05);
		font-size:var(--size-12);
		color:var(--color-red);
	}
	
	.note{
		font-size:var(--size-12);
		padding:var(--space-00) var(--space-10);
		margin-top:var(--space-05);
		margin-bottom:var(--space-05);
		color:var(--color-muted);
	}
	
	.section-body{
		display:flex;
		flex-direction:column;
		gap:var(--space-20);
	}

	.field
		display:flex;
		gap:var(--space-00);
		font-size:var(--size-13);
	}

	.field label{
		margin:var(--space-10) var(--space-10);
	}

	.btn-disabled,
	.btn:disabled{
		opacity:.55;
		cursor:not-allowed;
	}
	
	.section-debug{
		margin-top:var(--space-05);
	}
	
	.section-notes{
		margin:var(--space-00) var(--space-10); 
		font-size:var(--size-12);
		color:var(--color-muted);
	}
	
	.section-notes.is-warning{
		color:var(--color-red);
	}
	
	.debug-card{
		margin-top:var(--space-separation);
		padding:var(--space-10);
	}
	
	.debug-card > summary{
		cursor:pointer;
		font-weight:var(--font-weight6);
	}
	
	.table > tbody{
		font-size:var(--size-11);
		color:var(--color-text);
	}

	.raw-preview{
		margin:var(--space-00);
		white-space:pre-wrap;
		word-break:break-word;
		background:var(--color-bg-debug);
		font-size:var(--size-11);
		color:var(--color-text);
		border:1px solid var(--color-border);
		border-radius:var(--border-radius);
		padding:var(--space-20);
		min-height:120px;
	}