:root{
	--bg:#0b1220;
	--panel:#0f1624;
	--text:#e7edf6;
	--muted:#8ea1b6;
	--line:rgba(255,255,255,.10);
	--brand:#f5a623;
	--brand-2:#ff8a00;
	--ok:#34d399;
	--warn:#f59e0b;
	--danger:#ef4444;
}
[data-theme=light]{
	--bg:#f9fbff;
	--panel:#ffffff;
	--text:#0b1220;
	--muted:#4a5568;
	--line:rgba(15,23,42,.12);
	--brand:#f59e0b;
	--brand-2:#f97316;
}
*{
	box-sizing:border-box
}
html,body{
	height:100%
}
body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
	line-height:1.5
}
a{
	color:var(--brand);
	text-decoration:none
}
h1,h2,h3{
	margin:0 0 6px
}
h1,h2{
	color:var(--brand)
}
.app{
	display:grid;
	grid-template-columns:260px 1fr;
	min-height:100%
}
.sidebar{
	border-right:1px solid var(--line);
	background:var(--panel);
	padding:22px 18px;
	position:sticky;
	top:0;
	height:100vh;
	overflow:auto
}
.content{
	padding:26px 28px 60px
}
.card{
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:16px;
	padding:16px
}
.grid{
	display:grid;
	gap:14px
}
.grid.cols-2{
	grid-template-columns:1fr 1fr
}
.grid.cols-3{
	grid-template-columns:repeat(3,1fr)
}
.toolbar{
	display:flex;
	gap:8px;
	align-items:center;
	flex-wrap:wrap
}
.btn{
	all:unset;
	cursor:pointer;
	padding:9px 12px;
	border-radius:10px;
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:14px;
	border:1px solid var(--line);
	background:rgba(255,255,255,.05);
	color:var(--text);
	transition:background .15s ease,opacity .15s ease
}
.btn:hover{
	background:rgba(255,255,255,.08)
}
.btn:disabled{
	opacity:.45;
	cursor:default;
	pointer-events:none
}
.btn.primary{
	border:0;
	background:linear-gradient(180deg,var(--brand),var(--brand-2));
	color:#0b0f14;
	font-weight:800
}
.btn.ghost{
	background:transparent;
	border-color: #2f3541;
}
.btn.danger{
	border:1px solid rgba(239,68,68,.55);
	background:rgba(239,68,68,.18);
	color:#f87171;
	font-weight:700
}
.btn.danger:hover:not(:disabled){
	background:rgba(239,68,68,.26)
}
.btn.small{
	padding:6px 8px;
	font-size:12px;
	margin:2px 0
}
.btn.danger-soft{
	color:var(--danger);
	border-color:transparent
}
.btn.action-auth{
	border:1px solid rgba(52,211,153,.4);
	background:rgba(52,211,153,.12);
	color:#34d399;
	font-weight:600
}
.btn.action-auth:hover:not(:disabled){
	background:rgba(52,211,153,.2)
}
.btn.action-revoke{
	border:1px solid rgba(249,115,22,.4);
	background:rgba(249,115,22,.12);
	color:#f97316;
	font-weight:600
}
.btn.action-revoke:hover:not(:disabled){
	background:rgba(249,115,22,.2)
}
.btn.action-add{
	border:1px solid color-mix(in oklab, var(--brand) 45%, transparent);
	background:color-mix(in oklab, var(--brand) 18%, rgba(255,255,255,.02));
	color:var(--brand);
	font-weight:700
}
.btn.action-add:hover:not(:disabled){
	background:color-mix(in oklab, var(--brand) 26%, rgba(255,255,255,.06));
}
input,select,textarea{
	width:100%;
	background:rgba(255,255,255,.05);
	border:1px solid var(--line);
	color:var(--text);
	padding:9px 10px;
	border-radius:10px;
	font-size:14px
}
input:focus,select:focus,textarea:focus{
	outline:2px solid color-mix(in oklab, var(--brand) 60%, transparent);
	outline-offset:1px
}
input.inline{
	background:transparent;
	border:1px solid transparent;
	padding:6px 8px;
	border-radius:6px
}
input.inline:hover{
	border-color:var(--line);
	background:rgba(255,255,255,.03)
}
input.inline:focus{
	border-color:var(--brand);
	background:rgba(255,255,255,.05)
}
.inline-edit{
	position:relative;
	display:flex;
	align-items:center
}
.inline-edit > input.inline,.inline-edit > .net-input,.inline-edit > .net-number{
	padding-right:34px
}
.inline-edit .inline-save{
	all:unset;
	position:absolute;
	top:50%;
	right:6px;
	transform:translateY(-50%);
	width:26px;
	height:26px;
	border-radius:8px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	color:var(--muted);
	background:rgba(255,255,255,.04);
	opacity:0;
	pointer-events:none;
	transition:opacity .15s ease,color .15s ease,background .15s ease
}
.inline-edit.is-dirty .inline-save{
	opacity:1;
	pointer-events:auto
}
.inline-edit .inline-save:hover{
	color:var(--brand);
	background:rgba(255,255,255,.08)
}
.inline-edit .inline-save[data-busy='true']{
	opacity:1;
	pointer-events:none;
	color:var(--brand)
}
.inline-edit.range-inline{
	display:block;
	width:100%;
	padding-right:42px
}
.inline-edit.range-inline .range-fields{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
	gap:10px
}
.inline-edit.range-inline .range-fields input.inline{
	width:100%;
	padding-right:10px
}
.inline-edit.range-inline .inline-save{
	right:10px
}
.settings-toggle{
	margin:10px 0 4px;
	display:flex;
	align-items:center
}
.settings-toggle .switch{
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-weight:600;
	color:var(--text)
}
.settings-toggle .switch input{
	appearance:none;
	-webkit-appearance:none;
	width:44px;
	height:24px;
	border-radius:999px;
	background:rgba(255,255,255,.08);
	border:1px solid var(--line);
	position:relative;
	cursor:pointer;
	transition:background .2s ease,border-color .2s ease
}
.settings-toggle .switch input::after{
	content:"";
	position:absolute;
	top:3px;
	left:3px;
	width:18px;
	height:18px;
	border-radius:50%;
	background:var(--muted);
	transition:transform .2s ease,background .2s ease
}
.settings-toggle .switch input:checked{
	background:color-mix(in oklab,var(--brand) 45%,rgba(255,255,255,.08));
	border-color:color-mix(in oklab,var(--brand) 55%,transparent)
}
.settings-toggle .switch input:checked::after{
	transform:translateX(20px);
	background:var(--brand)
}
.settings-toggle .switch input:focus-visible{
	outline:2px solid color-mix(in oklab,var(--brand) 60%,transparent);
	outline-offset:3px
}
.settings-toggle .switch span{
	font-size:13px
}
.range-section{
	display:flex;
	flex-direction:column;
	gap:10px;
	margin:10px 0 0
}
.range-section.is-hidden{
	display:none
}
.range-list{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin:10px 0;
	padding:0
}
.range-list:empty{
	min-height:0;
	margin:0
}
.range-list:empty::after{
	content:"No ranges defined";
	display:block;
	font-size:12px;
	color:var(--muted);
	padding:4px 0
}
.range-item{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:10px 12px;
	border:1px dashed var(--line);
	border-radius:12px;
	background:rgba(255,255,255,.02);
	gap:12px;
}
.range-item .range-details{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:11px;
}
.range-item .range-arrow{
	color:var(--muted);
	font-size:12px
}
.range-item .range-actions{
	display:flex;
	align-items:center;
	gap:6px
}
.range-item .range-actions .btn{
	padding:6px 8px
}
.range-item.is-active{
	border-style:solid;
	border-color:color-mix(in oklab,var(--brand) 40%,transparent);
	background:color-mix(in oklab,var(--brand) 12%,transparent)
}
.range-footer{
	margin:8px 0 6px
}
.inline-edit.just-saved > input,.inline-edit.just-saved > .net-input,.inline-edit.just-saved > .net-number{
	animation:inlineSaved 1s ease
}
@keyframes inlineSaved{
	0%{
		box-shadow:0 0 0 0 rgba(52,211,153,.4)
}
	100%{
		box-shadow:0 0 0 0 rgba(52,211,153,0)
}
}
.inline-edit > input:disabled + .inline-save{
	display:none
}
.row{
	display:grid;
	grid-template-columns:200px 1fr;
	gap:14px;
	align-items:center;
	margin:8px 0
}
.form-card{
	display:flex;
	flex-direction:column;
	gap:18px
}
.form-card h2{
	margin-bottom:4px
}
.form-card .row{
	margin:0;
	align-items:flex-start
}
.form-card .row label{
	font-weight:600;
	color:var(--text);
	font-size:13px;
	letter-spacing:.01em;
	padding-top:4px
}
.form-card .row label+*{
	min-width:0
}
.form-card .row label+div{
	display:flex;
	flex-direction:column;
	gap:10px
}
.form-card input:not(.inline),.form-card select,.form-card textarea{
	min-height:42px
}
.form-card .grid{
	gap:12px
}
.form-card .help{
	margin-top:0
}
.dns-grid .tools-card-body{
	display:flex;
	flex-direction:column;
	gap:12px
}
.dns-grid .tools-card-body > .help{
	margin:0;
	color:var(--muted)
}
.dns-list{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	align-items:center;
	padding:10px;
	border-radius:12px;
	border:1px dashed var(--line);
	background:rgba(255,255,255,.02);
	min-height:44px
}
.dns-list:empty::before{
	content:'No entries yet';
	font-size:12px;
	color:var(--muted)
}
.dns-inline-form{
	display:flex;
	gap:10px;
	flex-wrap:wrap
}
.dns-inline-form input{
	flex:1 1 220px
}
.dns-inline-form .btn{
	flex:0 0 auto
}
.logo{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:16px
}
.logo .dot{
	width:14px;
	height:14px;
	border-radius:50%;
	background:var(--brand)
}
.section{
	margin-top:22px
}
.section-title{
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.14em;
	color:var(--muted);
	margin:2px 0 10px;
	font-weight:700
}
.nav a{
	display:flex;
	gap:10px;
	align-items:center;
	padding:10px 12px;
	border-radius:10px;
	color:var(--text);
	font-weight:700;
	margin: 4px 0px;
}
.nav a .fa-fw{
	color:var(--muted)
}
.nav a:hover,.nav a.active{
	background:rgba(255,255,255,.06)
}
.nav a.active{
	color:var(--brand)
}
.nav a.active .fa-fw{
	color:var(--brand)
}
.header{
	display:flex;
	gap:12px;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	margin-bottom:16px
}
.header .toolbar{
	flex:1 1 auto;
	min-width:0
}
.header .header-title{
	flex:0 0 auto;
	justify-content:flex-start
}
.header .header-actions{
	justify-content:flex-end
}
.network-id-display{
	display:inline-flex;
	align-items:center;
	padding:8px 12px;
	border:1px solid var(--line);
	border-radius:10px;
	font-family:ui-monospace,Menlo,Consolas,monospace;
	font-size:13px;
	background:rgba(255,255,255,.04);
	min-height:42px;
	color:var(--text);
}
.network-select{
	width:220px;
	max-width:100%;
	min-height:42px;
}
.badge{
	padding:4px 10px;
	border-radius:999px;
	font-size:12px;
	font-weight:800;
	border:1px solid var(--line);
	display:inline-flex;
	gap:6px;
	align-items:center;
	min-height:32px
}
.network-badge{
	gap:10px;
	padding-right:6px
}
.network-badge .name{
	display:inline-flex;
	align-items:center;
	gap:6px
}
.network-badge .badge-copy{
	all:unset;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:26px;
	height:26px;
	border-radius:50%;
	border:1px solid color-mix(in oklab, var(--brand) 24%, transparent);
	background:rgba(255,255,255,.08);
	color:inherit;
	cursor:pointer;
	transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease
}
.network-badge .badge-copy:hover{
	background:rgba(255,255,255,.14);
	transform:translateY(-1px)
}
.network-badge .badge-copy:focus-visible{
	outline:2px solid color-mix(in oklab, var(--brand) 60%, transparent);
	outline-offset:2px
}
.network-badge .badge-copy:disabled{
	opacity:.5;
	cursor:default;
	pointer-events:none
}
.live-badge{
	gap:10px;
	padding-right:6px
}
.live-badge .label{
	font-weight:800
}
.live-badge .live-refresh{
	all:unset;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:26px;
	height:26px;
	border-radius:50%;
	border:1px solid rgba(52,211,153,.3);
	background:rgba(52,211,153,.18);
	color:#34d399;
	cursor:pointer;
	transition:transform .15s ease,background .15s ease,border-color .15s ease
}
.live-badge .live-refresh:hover{
	transform:rotate(-12deg);
	background:rgba(52,211,153,.26)
}
.live-badge .live-refresh:focus-visible{
	outline:2px solid color-mix(in oklab, var(--brand) 60%, transparent);
	outline-offset:2px
}
.live-badge .live-refresh:disabled{
	opacity:.6;
	cursor:default;
	pointer-events:none;
	transform:none
}
.badge-btn{
	all:unset;
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:4px 12px;
	border-radius:999px;
	font-size:12px;
	font-weight:800;
	border:1px solid var(--line);
	background:rgba(255,255,255,.04);
	color:var(--text);
	cursor:pointer;
	transition:background .15s ease,color .15s ease,border-color .15s ease;
	min-height:32px
}
.badge-btn:hover{
	background:rgba(255,255,255,.08)
}
.badge-btn:disabled{
	opacity:.5;
	cursor:default;
	pointer-events:none
}
.badge-btn .label{
	font-size:12px
}
.badge-btn.icon-only{
	padding:0;
	justify-content:center;
	width:32px;
	height:32px
}
.badge-btn.icon-only i{
	font-size:14px
}
.ok{
	background:rgba(52,211,153,.14);
	color:#34d399;
	border-color:rgba(52,211,153,.25)
}
.warn{
	background:rgba(245,158,11,.15);
	color:#f59e0b;
	border-color:rgba(245,158,11,.25)
}
.bad{
	background:rgba(239,68,68,.14);
	color:#ef7777;
	border-color:rgba(239,68,68,.25)
}
.help{
	color:var(--muted);
	font-size:12px
}
.about-grid{
	display:grid;
	gap:24px;
	margin-top:24px
}
@media (min-width:900px){
	.about-grid{
		grid-template-columns:repeat(2,minmax(0,1fr))
}
}
.about-section{
	border:1px solid color-mix(in srgb, var(--border) 65%, transparent);
	border-radius:14px;
	padding:20px;
	background:color-mix(in srgb, var(--panel) 92%, transparent)
}
.about-section h3{
	margin:0 0 16px;
	font-size:18px;
	font-weight:700
}
.about-list{
	margin:0;
	display:flex;
	flex-direction:column;
	gap:14px
}
.about-list div{
	display:flex;
	flex-direction:column;
	gap:4px
}
.about-list dt{
	font-weight:600;
	color:var(--text)
}
.about-list dd{
	margin:0;
	color:var(--muted);
	font-size:13px;
	line-height:1.6
}
.about-list .nested-detail{
	padding-left:16px;
	border-left:2px solid color-mix(in srgb, var(--border) 80%, transparent)
}
.sr-only{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0
}
.muted{
	color:var(--muted)
}
.mono{
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}
.filter-card{
	display:grid;
	gap:10px
}
.seg{
	display:flex;
	gap:6px;
	flex-wrap:wrap
}
.chip-row{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	align-items:center
}
.networks-table{
	width:100%;
	border-collapse:separate;
	border-spacing:0;
	font-size:13px
}
.networks-table thead th{
	padding:12px 14px;
	text-align:left;
	text-transform:uppercase;
	font-size:12px;
	letter-spacing:.08em;
	font-weight:700;
	color:var(--muted);
	background:rgba(255,255,255,.02);
	border-bottom:1px solid var(--line)
}
.networks-table tbody tr{
	transition:background .15s ease
}
.networks-table tbody tr:hover{
	background:rgba(255,255,255,.03)
}
.networks-table tbody tr.active td{
	background:color-mix(in oklab, var(--brand) 12%, transparent)
}
.networks-table td{
	padding:12px 14px;
	border-bottom:1px solid var(--line);
	vertical-align:middle
}
.networks-table td:last-child{
	text-align:right
}
.networks-table .net-input{
	width:100%;
	background:transparent;
	border:1px solid transparent;
	padding:6px 8px;
	border-radius:6px;
	color:var(--text);
	font-size:13px
}
.networks-table .net-input:hover{
	border-color:var(--line);
	background:rgba(255,255,255,.03)
}
.networks-table .net-input:focus{
	border-color:color-mix(in oklab, var(--brand) 60%, transparent);
	background:rgba(255,255,255,.05);
	outline:none
}
.networks-table .net-input:disabled{
	opacity:.55;
	cursor:not-allowed;
	background:transparent;
	border-color:transparent
}
.networks-table .net-select{
	width:100%;
	font-size:13px
}
.networks-table .pill-select{
	appearance:none;
	-webkit-appearance:none;
	width:100%;
	display:inline-block;
	border-radius:999px;
	border:1px solid color-mix(in oklab, var(--brand) 55%, transparent);
	padding:6px 28px 6px 14px;
	font-size:12px;
	font-weight:700;
	background-color:rgba(245,166,35,.14);
	color:var(--brand);
	cursor:pointer;
	transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%2334d399' d='M5 6 0 0h10z'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 12px center;
	background-size:10px
}
.networks-table .pill-select:hover:not(:disabled){
	background-color:rgba(245,166,35,.2);
	border-color:color-mix(in oklab, var(--brand) 70%, transparent)
}
.networks-table .pill-select:focus{
	outline:2px solid color-mix(in oklab, var(--brand) 60%, transparent);
	outline-offset:2px
}
.networks-table .pill-select.is-private,.networks-table .pill-select.is-enabled{
	border-color:rgba(52,211,153,.45);
	background-color:rgba(52,211,153,.18);
	color:#34d399
}
.networks-table .pill-select.is-public,.networks-table .pill-select.is-disabled{
	border-color:rgba(249,115,22,.45);
	background-color:rgba(249,115,22,.18);
	color:#f97316
}
.networks-table .pill-select:disabled{
	opacity:.55;
	cursor:not-allowed;
	background-color:rgba(255,255,255,.04);
	border-color:transparent;
	color:var(--muted)
}
.networks-table .net-number{
	width:100%;
	background:transparent;
	border:1px solid var(--line);
	border-radius:6px;
	padding:6px 8px;
	font-size:13px;
	color:var(--text)
}
.networks-table .net-number:hover{
	border-color:color-mix(in oklab, var(--brand) 40%, transparent)
}
.networks-table .net-number:focus{
	border-color:color-mix(in oklab, var(--brand) 55%, transparent);
	outline:none;
	background:rgba(255,255,255,.05)
}
.networks-table .net-number:disabled{
	opacity:.55;
	cursor:not-allowed;
	background:transparent;
	border-color:transparent
}
.networks-table .net-name-main{
	font-weight:600
}
.networks-table .net-alias{
	margin-top:4px;
	font-size:11px;
	color:var(--muted)
}
.networks-table .id-mono{
	font-family:ui-monospace,Menlo,Consolas,monospace;
	font-size:12px;
	color:var(--muted)
}
.networks-table .id-cell{
	display:inline-flex;
	align-items:center;
	gap:8px
}
.networks-table .network-copy-btn{
	all:unset;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:28px;
	height:28px;
	border-radius:8px;
	background:rgba(255,255,255,.06);
	color:var(--muted);
	cursor:pointer;
	transition:background .15s ease,color .15s ease
}
.networks-table .network-copy-btn:hover{
	background:rgba(255,255,255,.12);
	color:var(--text)
}
.networks-table .network-copy-btn:focus-visible{
	outline:2px solid color-mix(in oklab, var(--brand) 55%, transparent);
	outline-offset:2px
}
.networks-table .network-copy-btn i{
	pointer-events:none
}
.networks-table .status-pill{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 12px;
	border-radius:999px;
	font-size:12px;
	font-weight:700;
	border:1px solid color-mix(in oklab, var(--brand) 55%, transparent);
	background:rgba(245,166,35,.14);
	color:var(--brand)
}
.networks-table .status-pill.ok{
	border-color:rgba(52,211,153,.45);
	background:rgba(52,211,153,.18);
	color:#34d399
}
.networks-table .status-pill.warn{
	border-color:rgba(249,115,22,.45);
	background:rgba(249,115,22,.18);
	color:#f97316
}
.networks-table .net-actions .toolbar{
	justify-content:flex-end;
	gap:6px;
	flex-wrap:wrap
}
.networks-table .empty-row td{
	padding:18px 14px;
	text-align:center;
	color:var(--muted);
	font-style:italic
}
.chip{
	all:unset;
	cursor:pointer;
	padding:7px 10px;
	border:1px solid var(--line);
	border-radius:999px;
	display:inline-flex;
	gap:8px;
	align-items:center;
	background:rgba(255,255,255,.02);
	font-size:12px
}
.chip.on{
	background:color-mix(in oklab, var(--brand) 22%, transparent);
	border-color:color-mix(in oklab, var(--brand) 40%, transparent);
	color:var(--brand);
	font-weight:800
}
.chip .count{
	font-weight:800
}
.members-head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:24px;
	padding-bottom:12px;
	margin-bottom:18px;
	border-bottom:1px solid var(--line)
}
.members-head .toolbar{
	gap:10px;
	justify-content:flex-end
}
.members-intro{
	display:flex;
	flex-direction:column;
	gap:10px;
	flex:1
}
.manual-add-row{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	align-items:center
}
.manual-add-row input{
	flex:0 1 320px;
	min-width:200px;
	width:100%
}
.filters-row{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
	margin-top:6px;
	width:100%;
	justify-content:space-between
}
.filter-controls{
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap
}
.filters-row .search-wrap{
	margin-left:auto;
	flex:0 1 360px
}
.search-wrap{
	position:relative;
	display:flex;
	align-items:center;
	width:360px;
	max-width:100%
}
.search-wrap input{
	width:100%;
	padding-right:34px
}
.search-clear{
	position:absolute;
	right:10px;
	background:none;
	border:none;
	color:var(--muted);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:24px;
	height:24px;
	cursor:pointer;
	font-size:14px;
	opacity:0;
	pointer-events:none;
	transition:opacity .15s ease
}
.search-wrap.has-value .search-clear{
	opacity:1;
	pointer-events:auto
}
.search-clear:hover{
	color:var(--text)
}
.tools-grid{
	gap:16px;
	align-items:stretch;
	grid-template-columns:repeat(auto-fit,minmax(280px,1fr))
}
.settings-grid{
	grid-template-columns:minmax(0,1fr)
}
.stack-grid{
	grid-template-columns:minmax(0,1fr)
}
@media(min-width:960px){
	.stack-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}
.tools-grid.dns-grid{
	grid-template-columns:minmax(0,1fr)
}
@media(min-width:768px){
	.tools-grid.dns-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}
@media(min-width:1024px){
	.tools-grid.dns-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}
@media(min-width:980px){
	.settings-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}
.tools-card{
	display:flex;
	flex-direction:column;
	gap:14px;
	min-height:100%
}
.tools-card-head{
	display:flex;
	align-items:flex-start;
	gap:12px
}
.tools-card-head .help{
	margin:4px 0 0
}
.tools-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	border-radius:14px;
	background:rgba(52,211,153,.18);
	color:#34d399;
	font-size:18px;
	flex-shrink:0
}
.tools-icon.ok{
	background:rgba(176, 52, 211, 0.18);
	color:#b034d3;
}
.tools-icon.warn{
	background:rgba(249,115,22,.18);
	color:#f97316
}
.tools-card-body{
	display:flex;
	flex-direction:column;
	gap:12px
}
.tools-label{
	font-weight:600;
	font-size:13px
}
.tools-actions{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:12px
}
.tools-buttons{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap
}
.tools-status{
	font-size:12px;
	color:var(--muted)
}
.tools-status.ok{
	color:#34d399
}
.tools-status.warn{
	color:#f97316
}
.tools-status.bad{
	color:#f87171
}
.upload-btn{
	cursor:pointer
}
.tools-metrics{
	display:flex;
	flex-wrap:wrap;
	gap:14px
}
.metric{
	flex:1 1 240px;
	padding:12px;
	border-radius:12px;
	border:1px solid var(--line);
	background:rgb(22, 74, 68);
	display:flex;
	flex-direction:column;
	gap:8px;
	min-width:0
}
.metric-label{
	font-size:11px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--muted)
}
.metric-value{
	font-weight:700;
	font-size:14px
}
.metric-value.mono{
	font-family:ui-monospace,Menlo,Consolas,monospace
}
.diagnostics-card{
	grid-column:1/-1;
	background:linear-gradient(145deg,rgba(245,166,35,.08),rgba(15,22,36,.72));
	border:1px solid color-mix(in oklab,var(--brand) 25%, var(--line));
	box-shadow:0 18px 32px -26px rgba(0,0,0,.65)
}
.diagnostics-card .tools-icon{
	background:rgba(245,166,35,.18);
	color:var(--brand)
}
.diagnostics-card .metric{
	background:rgba(11,18,32,.42);
	border-color:rgba(255,255,255,.08)
}
.diagnostics-card .metric-label{
	color:color-mix(in oklab,var(--muted) 65%, #ffffff 35%)
}
.status-card {
	grid-column: 1/-1;
	background: linear-gradient(145deg,rgb(16, 45, 49),rgb(16, 45, 49));
	border: 1px solid color-mix(in oklab,#175046 25%, var(--line));
	box-shadow: 0 18px 32px -26px rgba(0,0,0,.65);
}
.settings-field{
	display:flex;
	flex-direction:column;
	gap:6px
}
.settings-field .help{
	margin:0;
	color:var(--muted)
}
.mono-input{
	font-family:ui-monospace,Menlo,Consolas,monospace
}
.settings-inline{
	display:grid;
	gap:10px;
	grid-template-columns:repeat(auto-fit,minmax(160px,1fr))
}
.settings-inline .settings-field{
	margin:0
}
.settings-chip-row{
	margin:4px 0 6px
}
.settings-card-count{
	margin-left:auto;
	font-weight:700;
	font-size:12px;
	color:var(--muted)
}
.routes-list{
	display:flex;
	flex-direction:column;
	gap:10px;
	padding:12px;
	border-radius:12px;
	border:1px dashed var(--line);
	background:rgba(255,255,255,.02);
	min-height:48px
}
.routes-list:empty::before{
	content:'No managed routes yet';
	font-size:12px;
	color:var(--muted)
}
.route-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:10px 12px;
	border-radius:8px;
	background:rgba(15,23,42,.4)
}
.route-row+.route-row{
	margin-top:8px
}
.route-details{
	display:flex;
	flex-direction:column;
	gap:4px;
	min-width:0
}
.route-target{
	font-weight:600
}
.route-via{
	font-size:12px;
	color:var(--muted)
}
.route-row .btn{
	flex:0 0 auto
}
.routes-inline-form{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	align-items:center
}
.routes-inline-form input{
	flex:1 1 220px;
	min-width:160px
}
.routes-inline-form .btn{
	flex:0 0 auto
}
.table-wrap{
	overflow:auto;
	margin-top:16px
}
table{
	width:100%;
	border-collapse:collapse;
	border-radius:12px;
	overflow:hidden
}
th,td{
	padding:12px;
	border-bottom:1px solid var(--line);
	text-align:left
}
th{
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:.08em;
	color:var(--muted);
	cursor:pointer;
	background:rgba(255,255,255,.02);
	position:sticky;
	top:0;
	z-index:1
}
th:hover{
	background:rgba(255,255,255,.05)
}
tr:hover td{
	background:rgba(255,255,255,.03)
}
.members-table{
	width:100%;
	border-collapse:separate;
	border-spacing:0;
	table-layout:auto
}
.members-table th{
	font-size:12px;
	letter-spacing:.12em;
	padding:12px 10px;
	background:rgba(255,255,255,.02);
	border-bottom:1px solid var(--line);
	text-align:center
}
.members-table td{
	font-size:13px;
	padding:12px 10px;
	border-bottom:1px solid var(--line);
	vertical-align:middle;
	text-align:center
}
.members-table tbody tr:nth-child(even) td{
	background:rgba(255,255,255,.02)
}
.members-table tbody tr:hover td{
	background:rgba(255,255,255,.05)
}
.members-table td:first-child{
	vertical-align:middle
}
.members-table th:first-child,.members-table td:first-child{
	text-align:center;
	width:72px
}
.members-table td:first-child input{
	margin:auto
}
.members-table input[type=checkbox]{
	-webkit-appearance:none;
	appearance:none;
	width:18px;
	height:18px;
	border-radius:6px;
	border:1px solid color-mix(in oklab, var(--line) 70%, rgba(15,23,42,.25));
	background:rgba(255,255,255,.06);
	cursor:pointer;
	position:relative;
	transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.members-table input[type=checkbox]:hover{
	border-color:color-mix(in oklab, var(--brand) 45%, rgba(255,255,255,.08));
	background:rgba(255,255,255,.12);
}
.members-table input[type=checkbox]:focus-visible{
	outline:2px solid color-mix(in oklab, var(--brand) 60%, transparent);
	outline-offset:2px;
}
.members-table input[type=checkbox]:active{
	transform:scale(.94)
}
.members-table input[type=checkbox]:checked{
	background:color-mix(in oklab, var(--brand) 72%, rgba(255,255,255,.04));
	border-color:color-mix(in oklab, var(--brand) 65%, rgba(255,255,255,.06));
}
.members-table input[type=checkbox]:checked::after{
	content:'';
	position:absolute;
	inset:0;
	margin:auto;
	width:5px;
	height:9px;
	border:2px solid #0b1220;
	border-top:0;
	border-left:0;
	transform:rotate(45deg);
}
[data-theme=light] .members-table input[type=checkbox]{
	background:rgba(255,255,255,.9);
	border-color:rgba(148,163,184,.4);
}
[data-theme=light] .members-table input[type=checkbox]:hover{
	background:rgba(255,255,255,1);
}
[data-theme=light] .members-table input[type=checkbox]:checked::after{
	border-color:#f59e0b;
}
.members-table input[type=checkbox]:disabled{
	cursor:default;
	opacity:.45;
	box-shadow:none
}
.members-table .cell-status{
	text-align:center;
	width:46px
}
.members-table .status-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:22px;
	height:22px;
	border-radius:50%;
	font-size:12px
}
.members-table .status-icon.ok{
	color:#34d399;
	background:rgba(52,211,153,.14)
}
.members-table .status-icon.pending{
	color:#f59e0b;
	background:rgba(245,158,11,.18)
}
.members-table .status-icon.hidden{
	color:#9ca3af;
	background:rgba(156,163,175,.18)
}
.members-table .cell-name{
	min-width:160px
}
.members-table .cell-notes{
	min-width:180px
}
.members-table .cell-node{
	min-width:160px
}
.members-table .cell-managed{
	min-width:160px
}
.members-table .cell-last{
	min-width:120px
}
.members-table .cell-version{
	min-width:90px
}
.members-table .cell-os{
	min-width:90px
}
.members-table .cell-actions{
	text-align:right;
	min-width:120px
}
.members-table .node-id{
	display:block;
	font-weight:700;
	letter-spacing:.05em;
	font-size:12px;
	white-space:nowrap;
	margin-bottom:3px
}
.members-table .node-ip{
	display:block;
	font-size:11px;
	color:var(--muted)
}
.members-table .ip-token{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:rgba(255,255,255,.05);
	border:1px solid var(--line);
	border-radius:8px;
	padding:4px 8px;
	font-size:12px
}
.members-table .cell-managed .ip-chips{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:6px;
	margin-top:0
}
.members-table .cell-last .ago-value{
	font-variant-numeric:tabular-nums;
	font-size:13px
}
.members-table .cell-version .mono{
	font-size:12px
}
.members-table input.inline{
	font-size:13px;
	border-radius:10px;
	background:rgba(255,255,255,.03);
	border:1px solid transparent;
	padding:9px 10px;
	width:100%;
	box-sizing:border-box
}
.members-table input.inline:focus{
	border-color:color-mix(in oklab, var(--brand) 45%, transparent);
	background:rgba(255,255,255,.06)
}
.members-table .cell-name input.inline{
	min-height:38px;
	text-align:center;
	margin:0 auto
}
.members-table .cell-notes input.inline{
	min-height:46px;
	text-align:center;
	margin:0 auto
}
.members-table .os-label{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:4px 10px;
	border-radius:999px;
	border:1px solid var(--line);
	background:rgba(255,255,255,.04);
	font-size:12px;
	text-transform:capitalize
}
#root[data-theme=light],body[data-theme=light]{
	background:var(--bg);
	color:var(--text);
}
[data-theme=light] .sidebar,[data-theme=light] .card,[data-theme=light] .members-table tbody tr{
	background:var(--panel);
	box-shadow:0 12px 32px rgba(15,23,42,.08);
}
[data-theme=light] .members-table td{
	border-bottom:0;
	color:var(--text);
}
[data-theme=light] .members-table th{
	background:rgba(15,23,42,.06);
	color:var(--text);
}
[data-theme=light] .members-table th:hover{
	background:rgba(15,23,42,.1);
}
[data-theme=light] .members-table tbody tr:nth-child(even) td{
	background:rgba(15,23,42,.03);
}
[data-theme=light] .members-table tr:hover td{
	background:rgba(15,23,42,.05);
}
[data-theme=light] .btn{
	background:#ffffff;
	border:1px solid rgba(15,23,42,.14);
	color:#0b1220;
	box-shadow:0 1px 2px rgba(15,23,42,.08);
}
[data-theme=light] .btn:hover{
	background:#edf2fb;
}
[data-theme=light] .btn.ghost{
	background:transparent;
	border-color:rgba(15,23,42,.14);
	color:#0b1220;
}
[data-theme=light] .btn.ghost:hover{
	background:rgba(15,23,42,.07);
}
[data-theme=light] .btn.primary{
	color:#0b1220;
}
[data-theme=light] .btn.action-auth{
	border:1px solid rgba(34,197,94,.2);
	background:rgba(34,197,94,.12);
	color:#166534;
}
[data-theme=light] .btn.action-auth:hover:not(:disabled){
	background:rgba(34,197,94,.18);
}
[data-theme=light] .btn.action-revoke{
	border:1px solid rgba(234,88,12,.22);
	background:rgba(234,88,12,.12);
	color:#b45309;
}
[data-theme=light] .btn.action-revoke:hover:not(:disabled){
	background:rgba(234,88,12,.18);
}
[data-theme=light] .btn.action-add{
	border:1px solid color-mix(in srgb, var(--brand) 40%, transparent);
	background:color-mix(in srgb, var(--brand) 16%, rgba(255,255,255,.6));
	color:var(--brand);
}
[data-theme=light] .btn.action-add:hover:not(:disabled){
	background:color-mix(in srgb, var(--brand) 22%, rgba(255,255,255,.75));
}
[data-theme=light] input,[data-theme=light] select,[data-theme=light] textarea{
        background:#ffffff;
        border:1px solid rgba(15,23,42,.14);
        box-shadow:0 1px 2px rgba(15,23,42,.04);
        color:var(--text);
}
[data-theme=light] .members-table select,[data-theme=light] .page-size-control select{
        background:rgba(255,255,255,.05);
        border:1px solid var(--line);
        box-shadow:none;
        color:var(--text);
}
[data-theme=light] input.inline{
	background:transparent;
	border-color:rgba(15,23,42,.12);
}
[data-theme=light] input.inline:hover{
	background:rgba(15,23,42,.04);
}
[data-theme=light] input.inline:focus{
	background:#ffffff;
	border-color:color-mix(in oklab,var(--brand) 55%,transparent);
}
[data-theme=light] .help,[data-theme=light] .muted{
	color:#475569;
}
[data-theme=light] .chip{
	background:#ffffff;
	border:1px solid rgba(15,23,42,.12);
	color:#0b1220;
	box-shadow:0 1px 2px rgba(15,23,42,.04);
}
[data-theme=light] .chip.on{
	background:color-mix(in oklab,var(--brand) 20%,white);
	border-color:color-mix(in oklab,var(--brand) 40%,transparent);
	color:var(--brand);
}
[data-theme=light] .networks-table thead th{
	background:rgba(15,23,42,.06);
	color:#475569;
	border-bottom:1px solid rgba(15,23,42,.14);
}
[data-theme=light] .networks-table tbody tr:hover{
	background:rgba(15,23,42,.04);
}
[data-theme=light] .networks-table tbody tr.active td{
	background:color-mix(in oklab,var(--brand) 22%, #ffffff);
}
[data-theme=light] .networks-table td{
	border-bottom:1px solid rgba(15,23,42,.12);
}
[data-theme=light] .networks-table .net-input:hover{
	background:rgba(15,23,42,.04);
}
[data-theme=light] .networks-table .net-input:focus{
	background:#ffffff;
	border-color:color-mix(in oklab,var(--brand) 55%, transparent);
}
[data-theme=light] .networks-table .net-select{
	color:#0b1220;
}
[data-theme=light] .networks-table .pill-select{
	background-color:#ffffff;
	border:1px solid rgba(15,23,42,.14);
	color:var(--brand);
	box-shadow:0 1px 2px rgba(15,23,42,.08);
}
[data-theme=light] .networks-table .pill-select:hover:not(:disabled){
	background-color:rgba(15,23,42,.08);
}
[data-theme=light] .networks-table .pill-select:focus{
	background-color:#ffffff;
	border-color:color-mix(in oklab,var(--brand) 55%, transparent);
}
[data-theme=light] .networks-table .net-number{
	background:#ffffff;
	border:1px solid rgba(15,23,42,.14);
	color:#0b1220;
	box-shadow:0 1px 2px rgba(15,23,42,.04);
}
[data-theme=light] .networks-table .net-number:focus{
	background:#ffffff;
	border-color:color-mix(in oklab,var(--brand) 55%, transparent);
}
[data-theme=light] .networks-table .pill-select.is-private,[data-theme=light] .networks-table .pill-select.is-enabled{
	background-color:rgba(34,197,94,.18);
	border-color:rgba(34,197,94,.36);
	color:#166534;
}
[data-theme=light] .networks-table .pill-select.is-public,[data-theme=light] .networks-table .pill-select.is-disabled{
	background-color:rgba(249,115,22,.22);
	border-color:rgba(249,115,22,.4);
	color:#9a3412;
}
[data-theme=light] .networks-table .pill-select:disabled{
	background-color:rgba(241,245,249,.9);
	border-color:rgba(148,163,184,.32);
	color:#94a3b8;
}
[data-theme=light] .badge-btn{
	background:#ffffff;
	border:1px solid rgba(15,23,42,.18);
	color:#0b1220;
	box-shadow:0 1px 2px rgba(15,23,42,.08);
}
[data-theme=light] .badge-btn:hover{
	background:rgba(15,23,42,.08);
}
[data-theme=light] .network-badge .badge-copy{
	background:#fef9eb;
	border:1px solid color-mix(in oklab,var(--brand) 30%, transparent);
	color:inherit;
}
[data-theme=light] .network-badge .badge-copy:hover{
	background:color-mix(in oklab,var(--brand) 22%, #ffffff);
}
[data-theme=light] .badge-btn.icon-only{
	background:#f8fafc;
	border-color:rgba(15,23,42,.14);
}
[data-theme=light] .live-badge .live-refresh{
	background:rgba(34,197,94,.16);
	border:1px solid rgba(34,197,94,.36);
	color:#047857;
}
[data-theme=light] .live-badge .live-refresh:hover{
	background:rgba(34,197,94,.22);
}
[data-theme=light] .tools-icon{
	background:#f8fafc;
	color:var(--brand)
}
[data-theme=light] .tools-icon.ok{
	background:rgba(34,197,94,.18);
	color:#166534
}
[data-theme=light] .tools-icon.warn{
	background:rgba(249,115,22,.18);
	color:#9a3412
}
[data-theme=light] .metric{
	background:#ffffff;
	border-color:rgba(15,23,42,.1)
}
[data-theme=light] .metric-label{
	color:#6b7280
}
[data-theme=light] .tools-status{
	color:#475569
}
[data-theme=light] .tools-status.ok{
	color:#15803d
}
[data-theme=light] .tools-status.warn{
	color:#b45309
}
[data-theme=light] .tools-status.bad{
	color:#dc2626
}
[data-theme=light] .network-id-display{
	background:#ffffff;
	border-color:rgba(15,23,42,.14);
	color:#0b1220;
}
[data-theme=light] .members-table .status-icon.ok{
	background:rgba(34,197,94,.16);
	color:#166534;
}
[data-theme=light] .members-table .status-icon.pending{
	background:rgba(234,88,12,.16);
	color:#b45309;
}
[data-theme=light] .members-table .status-icon.hidden{
	background:rgba(148,163,184,.18);
	color:#475569;
}
[data-theme=light] .members-table .ip-token{
	background:#f0f4ff;
	border:1px solid rgba(15,23,42,.12);
	color:var(--text);
}
[data-theme=light] .members-table input.inline{
	background:#ffffff;
	border:1px solid rgba(15,23,42,.12);
}
[data-theme=light] .members-table .cell-os select{
	background:#ffffff;
	border:1px solid rgba(15,23,42,.16);
	color:var(--text);
}
[data-theme=light] .members-table .os-label{
	background:#f0f4ff;
	border:1px solid rgba(15,23,42,.14);
	color:var(--text);
}
[data-theme=light] .badge{
	border-color:rgba(15,23,42,.18);
	background:#ffffff;
	color:var(--text);
}
[data-theme=light] .dns-list{
	background:#f8fafc;
	border-color:rgba(15,23,42,.16)
}
[data-theme=light] .routes-list{
	background:#f8fafc;
	border-color:rgba(15,23,42,.14)
}
[data-theme=light] .route-row{
	background:#ffffff;
	border:1px solid rgba(15,23,42,.12)
}
[data-theme=light] .route-via{
	color:#64748b
}
[data-theme=light] .ok{
	background:rgba(34,197,94,.12);
	color:#166534;
	border-color:rgba(34,197,94,.26);
}
[data-theme=light] .warn{
	background:rgba(234,179,8,.18);
	color:#92400e;
	border-color:rgba(234,179,8,.3);
}
[data-theme=light] .bad{
	background:rgba(239,68,68,.16);
	color:#b91c1c;
	border-color:rgba(239,68,68,.28);
}
[data-theme=light] .diagnostics-card{
	background:linear-gradient(145deg,rgba(245,158,11,.16),#ffffff);
	border-color:rgba(245,158,11,.28);
	box-shadow:0 18px 32px -26px rgba(245,158,11,.45)
}
[data-theme=light] .diagnostics-card .tools-icon{
	background:rgba(245,158,11,.24);
	color:#92400e
}
[data-theme=light] .diagnostics-card .metric{
	background:#ffffff;
	border-color:rgba(15,23,42,.08)
}
[data-theme=light] .diagnostics-card .metric-label{
	color:#475569
}
[data-theme=light] .nav a{
	color:#0b1220;
}
[data-theme=light] .nav a .fa-fw{
	color:#475569;
}
[data-theme=light] .nav a:hover,[data-theme=light] .nav a.active{
	background:rgba(15,23,42,.08);
}
[data-theme=light] .members-table .cell-notes input.inline,[data-theme=light] .members-table .cell-name input.inline{
	background:#ffffff;
}
[data-theme=light] .ip-chip{
	background:#ffffff;
	border:1px solid rgba(15,23,42,.12);
	color:var(--text);
}
[data-theme=light] .ip-chip button{
	color:#475569;
}
[data-theme=light] .tag{
	background:#ffffff;
	border-color:rgba(15,23,42,.16);
	color:#3f4a63;
}
[data-theme=light] .counter{
	color:#3f4a63;
}
[data-theme=light] .kbd{
	background:#f5f7fb;
	border:1px solid rgba(15,23,42,.16);
	color:var(--text);
}
[data-theme=light] .modal{
	background:rgba(15,23,42,.18);
}
.ip-chips{
	display:flex;
	gap:6px;
	flex-wrap:wrap;
	align-items:center
}
.ip-chip{
	display:inline-flex;
	gap:6px;
	align-items:center;
	padding:4px 8px;
	border-radius:999px;
	border:1px solid var(--line);
	background:rgba(255,255,255,.04);
	font-size:12px
}
.ip-chip button{
	all:unset;
	cursor:pointer;
	color:var(--muted)
}
.add-ip{
	all:unset;
	cursor:pointer;
	border:1px dashed var(--line);
	padding:4px 8px;
	border-radius:8px;
	font-size:12px;
	color:var(--muted)
}
.add-ip:hover{
	color:var(--brand);
	border-color:color-mix(in oklab, var(--brand) 40%, transparent)
}
.pagination{
	display:flex;
	gap:12px;
	align-items:center;
	justify-content:space-between;
	margin-top:12px;
	padding-top:12px;
	border-top:1px solid var(--line);
	flex-wrap:wrap
}
.pagination-info{
	display:flex;
	gap:16px;
	align-items:center;
	flex-wrap:wrap
}
.page-size-control{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:12px;
	color:var(--muted)
}
.page-size-control select{
	width:auto;
	min-width:80px;
	padding:6px 8px;
	font-size:13px
}
.counter{
	font-size:12px;
	color:var(--muted)
}
.kbd{
	font:12px ui-monospace,Menlo,Consolas,monospace;
	background:rgba(255,255,255,.06);
	border:1px solid var(--line);
	padding:2px 6px;
	border-radius:6px
}
.modal{
	position:fixed;
	inset:0;
	display:none;
	place-items:center;
	background:rgba(0,0,0,.45);
	backdrop-filter:blur(4px);
	z-index:1000
}
.modal.open{
	display:grid
}
.confirm-card{
	width:min(420px,92vw)
}
.confirm-body{
	display:flex;
	flex-direction:column;
	gap:14px
}
.confirm-message{
	margin:0;
	color:var(--muted)
}
.confirm-extra{
	display:flex;
	gap:8px;
	flex-wrap:wrap
}
.confirm-actions{
	display:flex;
	justify-content:flex-end;
	gap:8px;
	flex-wrap:wrap
}
.toast{
	position:fixed;
	right:22px;
	bottom:22px;
	display:flex;
	pointer-events:none;
	opacity:0;
	transform:translateY(14px) scale(.96);
	transition:opacity .24s ease,transform .24s ease;
	z-index:1200
}
.toast.visible{
	opacity:1;
	transform:translateY(0) scale(1)
}
.toast-surface{
	display:flex;
	align-items:center;
	gap:12px;
	min-width:240px;
	max-width:360px;
	padding:16px 20px;
	border-radius:16px;
	background:color-mix(in oklab,var(--panel) 88%,transparent);
	border:1px solid color-mix(in oklab,var(--line) 65%,transparent);
	color:var(--text);
	box-shadow:0 18px 36px rgba(8,12,22,.46)
}
.toast-message{
	font-size:14px;
	font-weight:600;
	line-height:1.45;
	letter-spacing:.01em
}
.toast-icon{
	flex:0 0 auto;
	width:34px;
	height:34px;
	border-radius:12px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:rgba(59,130,246,.2);
	color:#93c5fd
}
.toast-icon i{
	font-size:16px
}
.toast[data-variant=success] .toast-icon{
	background:rgba(34,197,94,.2);
	color:#34d399
}
.toast[data-variant=warn] .toast-icon{
	background:rgba(245,158,11,.18);
	color:#fbbf24
}
.toast[data-variant=danger] .toast-icon{
	background:rgba(239,68,68,.2);
	color:#fda4af
}
[data-theme=light] .toast-surface{
	background:#ffffff;
	border-color:rgba(15,23,42,.08);
	color:#0b1220;
	box-shadow:0 18px 32px rgba(15,23,42,.2)
}
[data-theme=light] .toast-icon{
	background:rgba(59,130,246,.14);
	color:#1d4ed8
}
[data-theme=light] .toast[data-variant=success] .toast-icon{
	background:rgba(34,197,94,.14);
	color:#047857
}
[data-theme=light] .toast[data-variant=warn] .toast-icon{
	background:rgba(245,158,11,.16);
	color:#b45309
}
[data-theme=light] .toast[data-variant=danger] .toast-icon{
	background:rgba(239,68,68,.16);
	color:#b91c1c
}
@media (prefers-reduced-motion:reduce){
	.toast{
		transition:none;
		transform:none
}
	.toast.visible{
		opacity:1
}
}
.tag{
	font-size:12px;
	padding:4px 8px;
	border-radius:999px;
	border:1px solid var(--line);
	color:var(--muted);
	display:inline-flex;
	gap:6px;
	align-items:center
}
@media(max-width:1100px){
	.app{
		grid-template-columns:1fr
}
	.sidebar{
		position:static;
		height:auto;
		border-right:none;
		border-bottom:1px solid var(--line)
}
	.row{
		grid-template-columns:1fr
}
	.grid.cols-2,.grid.cols-3{
		grid-template-columns:1fr
}
	.form-card{
		gap:14px
}
	.form-card .row label{
		padding-top:0
}
}
@media(max-width:768px){
	.content,.sidebar{
		padding:16px
}
	.card{
		padding:12px
}
	th,td{
		padding:8px
}
	.network-id-display,.network-select{
		width:100%;
	}
	.header .header-actions{
		justify-content:flex-start
}
	.tools-grid{
		grid-template-columns:1fr
}
	.tools-actions{
		flex-direction:column;
		align-items:flex-start
}
	.tools-buttons{
		width:100%
}
	.tools-buttons .btn{
		flex:1
}
}
.extension-integration {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}
.extension-btn {
	background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
	color: white;
	position: relative;
}
.extension-btn.detected {
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	color: #fff;
}
.extension-btn.detected::after {
	content: '';
	position: absolute;
	top: -8px;
	right: -5px;
	width: 12px;
	height: 12px;
	background: #22c55e;
	border: 2px solid white;
	border-radius: 50%;
	animation: pulse 2s infinite;
}
.extension-status {
	margin-top: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.extension-status.connected {
	color: var(--success);
}
.extension-status.error {
	color: var(--danger);
}
.extension-status .status-indicator {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--muted);
}
.extension-status.connected .status-indicator {
	background: var(--success);
	box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}
.extension-status.error .status-indicator {
	background: var(--danger);
	box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}
@keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}
.extension-notification {
	position: fixed;
	top: 20px;
	right: 20px;
	background: white;
	border: 2px solid #8b5cf6;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 4px 20px rgba(139, 92, 246, 0.2);
	z-index: 1000;
	max-width: 350px;
	animation: slideInRight 0.3s ease-out;
}
.extension-notification.success {
	border-color: #22c55e;
	box-shadow: 0 4px 20px rgba(34, 197, 94, 0.2);
}
.extension-notification.error {
	border-color: #ef4444;
	box-shadow: 0 4px 20px rgba(239, 68, 68, 0.2);
}
.extension-notification-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.extension-notification-icon {
	font-size: 20px;
}
.extension-notification-title {
	font-weight: 700;
	color: var(--text);
}
.extension-notification-message {
	color: var(--text-muted);
	font-size: 14px;
}
@keyframes slideInRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}