@font-face{
	font-family:"JiYing Round";
	src:url("../fonts/jiying-round.woff2") format("woff2");
	font-weight:100 900;
	font-style:normal;
	font-display:swap;
}


/* ==========================================================================
   WebLM 2.x — dark theme (matches the official WebLM 3.x look)
   All legacy ids/classes used by the PHP pages and JS are preserved.
   ========================================================================== */

/* ---- themes ---- */
:root,
html[data-theme="dark"]{
	--bg:#0d0e18; --panel:#191a2b; --panel-2:#1d1d31; --panel-3:#252943;
	--line:#252533; --line-2:#1c1c29; --ctrl-border:rgba(48,52,77,1);
	--text:#ffffff; --text-2:rgba(255,255,255,.8); --muted:rgba(255,255,255,.4); --muted-2:rgba(129,131,161,1);
	--input-bg:#111222; --input-hover:#181a2f; --input-focus:#1a1c34; --input-disabled:rgba(255,255,255,.03);
	--btn-hover:rgba(44,49,77,1); --chip-bg:rgba(255,255,255,.05); --chip-hover:rgba(255,255,255,.09);
	--thead-bg:rgba(0,0,0,.2); --table-bg:rgba(0,0,0,.1); --toolbar-bg:rgba(0,0,0,.15);
	--row-hover:#1d1d31; --rail-icon:rgba(226,238,255,.55); --rail-hover:#e2eeff;
	--blue:#0473fd; --blue-2:#1382ff; --red:#ce3752; --red-2:#ff4365;
	--green:#3fb950; --amber:#d29922; --violet:#a371f7;
	--shadow:0 4px 12px rgba(0,0,0,.25);
}

html[data-theme="light"]{
	--bg:#eef1f6; --panel:#ffffff; --panel-2:#f6f8fb; --panel-3:#eef2f7;
	--line:#e2e7ee; --line-2:#eef1f5; --ctrl-border:#d3dae4;
	--text:#141a24; --text-2:#2c3542; --muted:#8a93a3; --muted-2:#6b7484;
	--input-bg:#ffffff; --input-hover:#f8fafc; --input-focus:#ffffff; --input-disabled:#f3f5f9;
	--btn-hover:#e6ecf3; --chip-bg:#eef2f7; --chip-hover:#e2e8f0;
	--thead-bg:#f8fafc; --table-bg:#ffffff; --toolbar-bg:#f8fafc;
	--row-hover:#f6f9fc; --rail-icon:#5b6675; --rail-hover:#141a24;
	--blue:#0473fd; --blue-2:#1382ff; --red:#d92d4b; --red-2:#e64563;
	--green:#1a7f37; --amber:#b45309; --violet:#7c3aed;
	--shadow:0 8px 24px rgba(16,24,40,.08);
}

html[data-theme="midnight"]{
	--bg:#070b16; --panel:#0e1524; --panel-2:#131c2e; --panel-3:#1a2740;
	--line:#1d2a44; --line-2:#16203a; --ctrl-border:#22314e;
	--text:#e8efff; --text-2:rgba(232,239,255,.82); --muted:rgba(232,239,255,.4); --muted-2:#7f8db0;
	--input-bg:#0b1220; --input-hover:#101a2c; --input-focus:#122038; --input-disabled:rgba(255,255,255,.03);
	--btn-hover:#20304c; --chip-bg:rgba(255,255,255,.05); --chip-hover:rgba(255,255,255,.09);
	--thead-bg:rgba(0,0,0,.25); --table-bg:rgba(0,0,0,.12); --toolbar-bg:rgba(0,0,0,.18);
	--row-hover:#131c2e; --rail-icon:rgba(210,226,255,.6); --rail-hover:#ffffff;
	--blue:#2f81f7; --blue-2:#4a93ff; --red:#e5534b; --red-2:#ff6b62;
	--green:#3fb950; --amber:#d29922; --violet:#a371f7;
	--shadow:0 4px 12px rgba(0,0,0,.35);
}

html[data-theme="violet"]{
	--bg:#0f0b18; --panel:#171226; --panel-2:#1e1733; --panel-3:#2a2045;
	--line:#2a2140; --line-2:#221a38; --ctrl-border:#342a52;
	--text:#f3edff; --text-2:rgba(243,237,255,.82); --muted:rgba(243,237,255,.4); --muted-2:#9a8fb8;
	--input-bg:#130f1f; --input-hover:#1a142c; --input-focus:#1f1836; --input-disabled:rgba(255,255,255,.03);
	--btn-hover:#332852; --chip-bg:rgba(255,255,255,.05); --chip-hover:rgba(255,255,255,.09);
	--thead-bg:rgba(0,0,0,.22); --table-bg:rgba(0,0,0,.12); --toolbar-bg:rgba(0,0,0,.18);
	--row-hover:#1e1733; --rail-icon:rgba(230,215,255,.6); --rail-hover:#ffffff;
	--blue:#a371f7; --blue-2:#b98cff; --red:#e5534b; --red-2:#ff6b62;
	--green:#3fb950; --amber:#d29922; --violet:#c9a2ff;
	--shadow:0 4px 12px rgba(0,0,0,.35);
}

html[data-theme="forest"]{
	--bg:#08120d; --panel:#0e1b13; --panel-2:#13241a; --panel-3:#1b3223;
	--line:#1c3324; --line-2:#16291c; --ctrl-border:#24402d;
	--text:#e9f6ed; --text-2:rgba(233,246,237,.82); --muted:rgba(233,246,237,.4); --muted-2:#7f9a88;
	--input-bg:#0b1710; --input-hover:#0f1f15; --input-focus:#12261a; --input-disabled:rgba(255,255,255,.03);
	--btn-hover:#223d2a; --chip-bg:rgba(255,255,255,.05); --chip-hover:rgba(255,255,255,.09);
	--thead-bg:rgba(0,0,0,.22); --table-bg:rgba(0,0,0,.12); --toolbar-bg:rgba(0,0,0,.18);
	--row-hover:#13241a; --rail-icon:rgba(210,240,220,.6); --rail-hover:#ffffff;
	--blue:#3fb950; --blue-2:#57cf6b; --red:#e5534b; --red-2:#ff6b62;
	--green:#3fb950; --amber:#d29922; --violet:#a371f7;
	--shadow:0 4px 12px rgba(0,0,0,.35);
}


*{ margin:0; padding:0; box-sizing:border-box; }

hr{ border:none; border-top:1px solid var(--line); margin:10px 0; }

html, body{ height:100%; width:100%; }

body{
	font-family: "JiYing Round", "Inter", "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
	font-size:13px;
	font-weight:300;
	letter-spacing:-0.22px;
	background: var(--bg);
	color: var(--text);
	-webkit-font-smoothing:antialiased;
}

:focus{ outline:none; }

h1,h2,h3{ font-weight:500; letter-spacing:-.02em; color:var(--text); }
h1{ font-size:15px; }
h2{ font-size:14px; }
h3{ font-size:13px; }

input, button, select, textarea{ font-family:inherit; }

a{ color: var(--blue); text-decoration:none; }
a:hover{ color: var(--blue-2); }

img{ border:none; }

table{ border-collapse:collapse; border-spacing:0; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
	background:#2c2e45;
	border-radius:900px;
	border:2px solid transparent;
	background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:#3a3d5a; background-clip:content-box; }

/* --------------------------------------------------------------------------
   Layout: icon rail + panel
   -------------------------------------------------------------------------- */
#menuDiv{
	position:fixed;
	left:0; top:0; bottom:0;
	width:80px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;
	padding:16px 0;
	z-index:30;
	gap:16px;
}

#railTop{
	flex:0 0 auto;
	display:flex;
	justify-content:center;
	align-items:center;
}
#railTop a{ display:flex; }
#logo, #railLogo{
	display:block;
	width:32px;
	height:32px;
	border-radius:8px;
	box-shadow:0 0 32px -2px rgba(0,113,255,.55);
}

.railMenu, .menu{
	list-style:none;
	flex:0 0 auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:20px;
	width:48px;
	background: var(--panel);
	border:1px solid var(--line);
	border-radius:10px;
	padding:14px 0;
	margin:0;
}

.menu li{ display:flex; justify-content:center; width:100%; }
.menu a{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:26px;
	color:var(--rail-icon);
	transition:color .12s ease, filter .12s ease;
}
.menu a svg{ width:22px; height:22px; display:block; }
.menu a:hover{ color:var(--rail-hover); filter:drop-shadow(0 0 8px rgba(255,255,255,.25)); }
.menu a.active{ color:var(--rail-hover); filter:drop-shadow(0 0 10px rgba(255,255,255,.35)); }
.menu a.active::after{
	content:"";
	position:absolute;
	left:-14px;
	top:50%;
	transform:translateY(-50%);
	width:2px;
	height:16px;
	border-radius:0 1px 1px 0;
	background:var(--blue);
	box-shadow:0 0 12px 0 rgba(4,115,253,1);
}

#railBottom{
	flex:0 0 auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:10px;
}
.railIcon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:32px; height:32px;
	border-radius:6px;
	color:var(--rail-icon);
}
.railIcon svg{ width:18px; height:18px; }
.railIcon:hover{ color:var(--rail-hover); background:var(--chip-bg); }
.railLogout:hover{ color:var(--red-2); }

#mainDiv{
	margin-left:80px;
	height:100%;
	min-height:0;
	display:flex;
	flex-direction:column;
	padding:16px 16px 0 0;
}

#headerDiv{ display:none; }

#contentDiv{
	flex:1 1 auto;
	min-height:0;
	display:flex;
	flex-direction:column;
	background: var(--panel);
	border:1px solid var(--line);
	border-radius:12px;
	padding:16px;
	gap:14px;
	overflow:auto;
}

#footerDiv{
	flex:0 0 34px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	color:var(--muted);
	font-size:12px;
	padding:0 2px;
}

#outer_content{
	width:100%;
	overflow:auto;
	flex:1 1 auto;
	min-height:0;
}

#inner_content{
	width:100%;
	min-height:100%;
	background:var(--table-bg);
	border:1px solid var(--line);
	border-radius:6px;
	overflow:hidden;
}
#navPanelBottom{ display:none; }

#log{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	display:none;
	align-items:center;
	gap:8px;
	padding:10px 18px;
	background:var(--panel);
	border:1px solid var(--line);
	color:var(--text-2);
	font-size:12.5px;
	border-radius:8px;
	box-shadow:var(--shadow);
	z-index:200;
}
#log::before{
	content:"";
	width:14px; height:14px;
	border:2px solid rgba(255,255,255,.25);
	border-top-color:#fff;
	border-radius:50%;
	animation:vmp-spin .7s linear infinite;
}
@keyframes vmp-spin{ to{ transform:rotate(360deg); } }

/* --------------------------------------------------------------------------
   Page head: title chip + actions + search
   -------------------------------------------------------------------------- */
#actions{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:10px;
	flex:0 0 auto;
}
#actions h1{
	display:inline-flex;
	align-items:center;
	height:32px;
	padding:0 12px;
	background:var(--panel-2);
	border:1px solid var(--line);
	border-radius:6px;
	color:var(--text-2);
	font-size:13px;
	font-weight:400;
	white-space:nowrap;
	box-shadow:0 0 8px rgba(0,0,0,.08);
	margin-right:2px;
}
#actions #help{
	order:-1;
	flex:0 0 100%;
	background:rgba(4,115,253,.08);
	border:1px solid rgba(4,115,253,.25);
	color:rgba(255,255,255,.75);
	padding:10px 12px;
	border-radius:6px;
	font-size:12px;
	line-height:1.6;
}
#actions .cancelBtn{ float:none; margin-left:auto; }

.addLink, a.addLink{
	display:inline-flex;
	align-items:center;
	gap:6px;
	height:32px;
	padding:0 12px;
	background:var(--panel-3);
	border:1px solid var(--ctrl-border);
	border-radius:6px;
	color:var(--text-2) !important;
	font-size:13px;
	font-weight:300;
	box-shadow:0 4px 12px rgba(0,0,0,.05);
	white-space:nowrap;
	background-image:none !important;
}
.addLink::before{
	content:"+";
	font-size:15px;
	line-height:1;
	font-weight:400;
	color:var(--muted);
}
.addLink:hover{
	background:var(--btn-hover);
	color:var(--text) !important;
}

.importLink{
	display:inline-flex;
	align-items:center;
	height:32px;
	padding:0 12px;
	background:var(--panel-3);
	border:1px solid var(--ctrl-border);
	border-radius:6px;
	color:var(--text-2);
	font-size:13px;
	white-space:nowrap;
}
.importLink:hover{ background:var(--btn-hover); color:var(--text); }

#filterDiv{
	position:relative;
	display:flex;
	align-items:center;
	margin-left:auto;
}
#filterTxt{
	width:272px;
	height:32px;
	padding:0 12px 0 34px;
	background:var(--input-bg);
	border:1px solid var(--ctrl-border);
	border-radius:6px;
	color:var(--text);
	font-family:inherit;
	font-size:13px;
	font-weight:300;
	transition:100ms ease;
}
#filterTxt::placeholder{ color:rgba(255,255,255,.4); }
#filterTxt:hover{ background:var(--input-hover); }
#filterTxt:focus{ background:var(--input-focus); border-color:var(--blue); }
#filterDiv .search{
	position:absolute;
	left:10px;
	width:16px; height:16px;
	pointer-events:none;
	background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") center center no-repeat;
}

/* state filters */
#filters{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	flex:0 0 auto;
	font-size:12px;
	color:var(--muted-2);
}
#filters a{
	display:inline-flex;
	align-items:center;
	height:28px;
	padding:0 10px;
	border-radius:6px;
	color:var(--muted-2);
	border:1px solid transparent;
}
#filters a:hover{ background:var(--chip-bg); color:var(--text-2); }
#filters a.active{
	background:var(--panel-2);
	border-color:var(--line);
	color:var(--text-2);
	box-shadow:0 0 8px rgba(0,0,0,.08);
}
#filters .cnt{
	display:inline-block;
	min-width:18px;
	margin-left:6px;
	padding:0 6px;
	border-radius:999px;
	background:var(--chip-bg);
	color:var(--muted-2);
	font-size:11px;
	line-height:16px;
	text-align:center;
}
#filters a.active .cnt{ background:rgba(4,115,253,.2); color:#6badff; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
#listTbl{
	width:100%;
	border-collapse:separate;
	border-spacing:0;
}

#listTbl th{
	height:40px;
	padding:0 16px;
	background:var(--thead-bg);
	border-bottom:1px solid var(--line);
	color:var(--muted-2);
	font-size:12px;
	font-weight:400;
	text-align:left;
	white-space:nowrap;
}

#listTbl td{
	padding:10px 16px;
	border-bottom:1px solid var(--line-2);
	color:var(--text-2);
	font-size:13px;
	font-weight:300;
	vertical-align:middle;
	background:transparent;
}

#listTbl tr:last-child td{ border-bottom:none; }
#listTbl tr:hover td{ background:var(--panel-2); }

#listTbl td.blocked{ color:var(--muted); }
#listTbl tr:has(td.blocked) td{ background:var(--row-hover); }

#listTbl td.empty, #listTbl td.emptylast{ width:26px; padding:0; }

.listItemActions{
	visibility:hidden;
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin-top:6px;
}
.listItemActions a{
	padding:2px 8px;
	border-radius:6px;
	background:var(--chip-bg);
	border:1px solid transparent;
	color:var(--text-2);
	font-size:11.5px;
	line-height:16px;
}
.listItemActions a:hover{ background:var(--chip-hover); color:var(--text); }
.listItemActions a.editLink:hover{ background:rgba(4,115,253,.15); color:#6badff; }
.listItemActions a.copyLink{ color:#5bc8af; }
.listItemActions a.copyLink:hover{ background:rgba(63,185,80,.14); color:#7ee2a8; }
.listItemActions a.blockLink{ color:#e3b341; }
.listItemActions a.blockLink:hover{ background:rgba(210,153,34,.14); color:#f0c674; }
.listItemActions a.deleteLink{ color:#ff6b81; }
.listItemActions a.deleteLink:hover{ background:rgba(206,55,82,.18); color:#ff8fa0; }
.listItemActions a.unbindLink{ color:var(--violet); }
.listItemActions a.unbindLink:hover{ background:rgba(163,113,247,.16); color:#c9a2ff; }

#listTbl th.chkCol, #listTbl td.chkCol{ width:44px; padding-left:16px; padding-right:4px; }
#listTbl .chkCol input{ width:16px; height:16px; accent-color:var(--blue); cursor:pointer; }

.listTools{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	padding:10px 14px;
	background:var(--toolbar-bg);
	border-bottom:1px solid var(--line);
}
.listTools .copyMsg{ margin-left:6px; color:#6badff; font-size:12px; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.navPanel{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:8px 2px;
	color:var(--muted-2);
	font-size:12px;
	flex:0 0 auto;
}
.navPanelControls{ display:flex; align-items:center; gap:8px; }
.navPanelControls > div{ display:flex; align-items:center; gap:8px; padding:0 6px; color:var(--muted-2); }

.navPanel button{
	width:32px; height:32px;
	border:1px solid var(--ctrl-border);
	background:var(--panel-3);
	border-radius:6px;
	cursor:pointer;
	position:relative;
	color:transparent;
	font-size:0;
	transition:100ms ease;
}
.navPanel button:hover:not(:disabled){ background:var(--btn-hover); }
.navPanel button:disabled{ opacity:.4; cursor:default; }
.navPanel button span{ display:none; }
.navPanel button::after{
	color:var(--text-2);
	font-size:15px;
	line-height:1;
	position:absolute;
	left:0; right:0; top:50%;
	transform:translateY(-50%);
	text-align:center;
}
.firstBtn::after{ content:"\00AB"; }
.prevBtn::after{ content:"\2039"; }
.nextBtn::after{ content:"\203A"; }
.lastBtn::after{ content:"\00BB"; }

.curTxt{
	width:56px !important;
	height:32px;
	border:1px solid var(--ctrl-border);
	border-radius:6px;
	background:var(--input-bg);
	text-align:center;
	font-size:13px;
	color:var(--text);
}
.maxTxt, .totalCountTxt{ color:var(--text-2); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
a.greenBtn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:32px;
	padding:0 14px;
	background:var(--blue);
	border:1px solid rgba(255,255,255,.2);
	border-radius:6px;
	color:#fff !important;
	font-size:13px;
	font-weight:400;
	box-shadow:0 4px 12px rgba(0,0,0,.05);
	cursor:pointer;
	transition:100ms ease;
	text-decoration:none !important;
}
a.greenBtn:hover{ background:var(--blue-2); color:#fff !important; }
a.greenBtn span{
	background:none !important;
	background-image:none !important;
	display:inline;
	height:auto;
	line-height:normal;
	min-width:0;
	margin:0;
	padding:0;
	color:inherit;
	font-weight:400;
}
a.greenBtn em{ display:none; }

.cancelBtn, .cancel2Btn, .saveBtn, .copyBtn, .deleteBtn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:32px;
	min-width:88px;
	padding:0 14px;
	border-radius:6px;
	border:1px solid var(--ctrl-border);
	background:var(--panel-3);
	color:var(--text-2);
	font-family:inherit;
	font-size:13px;
	font-weight:300;
	cursor:pointer;
	background-image:none;
	transition:100ms ease;
}
.cancelBtn:hover, .cancel2Btn:hover{ background:var(--btn-hover); color:var(--text); }
.saveBtn, .copyBtn{ background:var(--blue); border-color:rgba(255,255,255,.2); color:#fff; }
.saveBtn:hover, .copyBtn:hover{ background:var(--blue-2); }
.deleteBtn{ background:var(--red); border-color:rgba(255,255,255,.2); color:#fff; }
.deleteBtn:hover{ background:var(--red-2); }

#zeroHolder{ display:inline-block; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.formDiv{
	background:var(--table-bg);
	border:1px solid var(--line);
	border-radius:6px;
	padding:18px 20px;
	max-height:85%;
	overflow:auto;
}

.formTbl{
	width:100%;
	max-width:780px;
	margin:0 auto;
	border-collapse:collapse;
}
.formTbl th{
	width:190px;
	text-align:left;
	vertical-align:middle;
	padding:8px 16px 8px 0;
	color:var(--muted-2);
	font-size:12px;
	font-weight:400;
	white-space:nowrap;
}
.formTbl td{
	padding:6px 0;
	vertical-align:middle;
	text-align:left;
}

.formTbl input[type="text"],
.formTbl input[type="password"],
.formTbl input[type="number"],
.formTbl textarea,
.formTbl select{
	width:100%;
	max-width:420px;
	height:32px;
	padding:0 12px;
	background:var(--input-bg);
	border:1px solid var(--ctrl-border);
	border-radius:6px;
	color:var(--text);
	font-family:inherit;
	font-size:13px;
	font-weight:300;
	transition:100ms ease;
}
.formTbl textarea{
	height:auto;
	min-height:72px;
	padding:8px 12px;
	line-height:1.5;
	resize:vertical;
}
.formTbl input:hover, .formTbl textarea:hover, .formTbl select:hover{ background:var(--input-hover); }
.formTbl input:focus, .formTbl textarea:focus, .formTbl select:focus{
	background:var(--input-focus);
	border-color:var(--blue);
}

.formTbl input.checkbox{
	width:16px;
	height:16px;
	padding:0;
	accent-color:var(--blue);
	cursor:pointer;
}

.formTbl input.noedit,
.formTbl input:disabled,
.formTbl select:disabled{
	background:var(--input-disabled);
	color:var(--muted);
	cursor:not-allowed;
}

input.date, .formTbl input.date{
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='2'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M16 3v4M8 3v4M3 11h18'/></svg>");
	background-repeat:no-repeat;
	background-position:right 10px center;
	padding-right:32px;
}

.emptyText{ color:var(--muted); }

.formTbl .error, .error{
	display:inline-block;
	margin-left:8px;
	color:var(--red-2);
	font-size:12px;
	font-style:normal;
}
.errorField{ border-color:var(--red) !important; box-shadow:0 0 0 2px rgba(206,55,82,.2) !important; }
.error2{ color:var(--red-2); }

.hidden{ display:none !important; }

.vmpHint{ color:var(--muted-2); font-size:12px; }

.ipeditor{ display:flex; align-items:center; gap:4px; color:var(--muted); }
.ipeditor input{
	width:56px !important;
	max-width:56px !important;
	height:32px !important;
	padding:0 6px !important;
	text-align:center;
}
.iprange{ font-family:Consolas, "Courier New", monospace; font-size:12.5px; padding:4px 0; color:var(--text-2); }

#inTableContentRow td{
	background:rgba(0,0,0,.15) !important;
	padding:16px 18px !important;
}
#inTableContent h1{ font-size:14px; margin-bottom:12px; }
#inTableContent .formTbl{ max-width:none; }
#inTableContent textarea{
	width:100% !important;
	max-width:640px;
	min-height:96px;
	padding:8px 12px;
	background:var(--input-bg);
	border:1px solid var(--ctrl-border);
	border-radius:6px;
	color:var(--text);
	font-family:Consolas, "Courier New", monospace;
	font-size:12px;
	line-height:1.5;
}
#bottom{ height:0; }
#closeInTableContent{ display:none; }

/* --------------------------------------------------------------------------
   Login / install / offline
   -------------------------------------------------------------------------- */
#loginHeaderDiv{ display:none; }

#loginContentDiv{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:100vh;
	padding:24px;
	background:var(--bg);
}

#loginFormDiv{
	width:328px;
	max-width:100%;
	background:transparent;
	border:none;
	box-shadow:none;
	padding:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:24px;
}

#loginBrand{ display:flex; flex-direction:column; align-items:center; gap:16px; }
#loginBrand svg{ border-radius:10px; box-shadow:0 0 32px -2px rgba(0,113,255,.45); }
#loginTitle{ display:none; }

#loginFormDiv form{ width:100%; }
#loginFormTbl tr:first-child{ display:none; }
#loginFormTblCenter, #loginFormTblCenter tbody, #loginFormTblCenter tr, #loginFormTblCenter td,
#loginFormTbl, #loginFormTbl tbody, #loginFormTbl tr, #loginFormTbl td, #loginFormTbl th{
	display:block;
	width:100% !important;
}

#loginFormTbl h1{
	width:100%;
	text-align:center;
	font-size:16px;
	font-weight:400;
	color:var(--text);
	margin-bottom:16px;
}

#loginFormTbl th{
	text-align:left;
	padding:0 0 6px;
	color:var(--text);
	font-size:12px;
	font-weight:400;
}
#loginFormTbl td{ padding:0 0 14px; }

#loginFormTbl input[type="text"],
#loginFormTbl input[type="password"]{
	width:100%;
	height:32px;
	padding:0 12px;
	background:var(--input-bg);
	border:1px solid var(--ctrl-border);
	border-radius:6px;
	color:var(--text);
	font-family:inherit;
	font-size:13px;
	transition:100ms ease;
}
#loginFormTbl input:hover{ background:var(--input-hover); }
#loginFormTbl input:focus{ background:var(--input-focus); border-color:var(--blue); }

#loginFormTbl a.greenBtn{
	width:100%;
	height:32px;
	margin-top:2px;
	justify-content:center;
}
#loginFormTbl a[href="forgot.php"]{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:32px;
	margin-top:8px;
	background:var(--panel-3);
	border:1px solid var(--ctrl-border);
	border-radius:6px;
	color:var(--text-2);
	font-weight:300;
}
#loginFormTbl a[href="forgot.php"]:hover{ background:var(--btn-hover); color:var(--text); }

#loginFooterDiv{
	position:absolute;
	bottom:12px;
	left:0; right:0;
	text-align:center;
	color:var(--muted-2);
	font-size:12px;
}

#captchaRow th{ display:block; text-align:left; }
#captcha{ vertical-align:middle; border-radius:6px; border:1px solid var(--line); }
#captchaReload{ display:inline-block; margin-left:10px; font-size:12px; color:var(--blue); }

/* install */
#installFormDiv{
	width:660px;
	max-width:calc(100% - 40px);
	margin:36px auto;
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:12px;
	padding:24px 28px;
}
#installFormTblCenter{ width:100%; }
#modulesTbl{ width:100%; margin-top:6px; }
#modulesTbl th, #modulesTbl td{
	padding:10px 12px;
	border-bottom:1px solid var(--line-2);
	text-align:left;
	font-size:13px;
}
#modulesTbl th{ color:var(--muted-2); font-weight:400; width:200px; }
#installFormDiv h1{ margin:8px 0 14px; }
#installFormDiv table.formTbl th{ width:150px; }

/* offline activation */
#offlineContentDiv{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:100vh;
	padding:24px;
	background:var(--bg);
}
#offlineFormDiv{
	width:680px;
	max-width:100%;
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:12px;
	padding:24px 26px;
}
#offlineFormTbl, #offlineFormTblCenter{ width:100%; }
#offlineFormTbl h1{ font-size:15px; margin-bottom:14px; }
#offlineFormTbl textarea{
	width:100% !important;
	min-height:110px;
	padding:8px 12px;
	background:var(--input-bg);
	border:1px solid var(--ctrl-border);
	border-radius:6px;
	color:var(--text);
	font-family:Consolas, "Courier New", monospace;
	font-size:12px;
}
#offlineFormTbl textarea:focus{ border-color:var(--blue); }
.greenMsg{ display:none; color:#6badff; font-size:12px; margin-left:10px; }

/* --------------------------------------------------------------------------
   Badges / event log
   -------------------------------------------------------------------------- */
.badge{
	display:inline-block;
	padding:1px 9px;
	border-radius:6px;
	font-size:11.5px;
	font-weight:400;
	line-height:18px;
}
.badge-ok{ color:#7ee2a8; background:rgba(63,185,80,.08); border:1px solid rgba(63,185,80,.25); }
.badge-warn{ color:#f0c674; background:rgba(210,153,34,.08); border:1px solid rgba(210,153,34,.25); }
.badge-bad{ color:#ff8fa0; background:rgba(206,55,82,.08); border:1px solid rgba(206,55,82,.25); }

.vmpAlert{
	background:rgba(206,55,82,.08);
	border:1px solid rgba(206,55,82,.28);
	color:#ffb3bd;
	padding:12px 14px;
	border-radius:6px;
	font-size:12.5px;
	line-height:1.6;
}

.evtTime{ font-size:13px; color:var(--text-2); }
.evtIp{ font-size:12px; color:var(--muted-2); font-family:Consolas,"Courier New",monospace; }
.evtBadge{
	display:inline-block;
	padding:1px 8px;
	border-radius:6px;
	font-size:11.5px;
	font-weight:400;
	line-height:17px;
	white-space:nowrap;
	border:1px solid transparent;
}
.evt-activate{ color:#7ee2a8; background:rgba(63,185,80,.08); border-color:rgba(63,185,80,.25); }
.evt-deactivate{ color:#8ab4ff; background:rgba(4,115,253,.08); border-color:rgba(4,115,253,.25); }
.evt-unbind{ color:#c9a2ff; background:rgba(163,113,247,.08); border-color:rgba(163,113,247,.25); }
.evt-block{ color:#f0c674; background:rgba(210,153,34,.08); border-color:rgba(210,153,34,.25); }
.evt-unblock{ color:rgba(255,255,255,.6); background:var(--chip-bg); border-color:rgba(255,255,255,.1); }
.evt-delete{ color:#ff8fa0; background:rgba(206,55,82,.08); border-color:rgba(206,55,82,.25); }

.evtTbl{ width:100%; font-size:12.5px; }
.evtTbl th{
	text-align:left;
	padding:8px 10px;
	color:var(--muted-2);
	font-size:11.5px;
	font-weight:400;
	border-bottom:1px solid var(--line);
	white-space:nowrap;
}
.evtTbl td{
	padding:7px 10px;
	border-bottom:1px solid var(--line-2);
	color:var(--text-2);
}
.evtTbl tr:last-child td{ border-bottom:none; }

/* --------------------------------------------------------------------------
   jQuery UI dialog / datepicker
   -------------------------------------------------------------------------- */
.ui-dialog{
	border:1px solid var(--line) !important;
	border-radius:10px !important;
	box-shadow:0 24px 60px rgba(0,0,0,.5) !important;
	background:var(--panel) !important;
	padding:0 !important;
	overflow:hidden;
	font-family:inherit !important;
}
.ui-dialog .ui-dialog-titlebar{
	background:var(--panel) !important;
	border:none !important;
	border-bottom:1px solid var(--line) !important;
	border-radius:10px 10px 0 0 !important;
	padding:14px 18px !important;
	font-size:13px !important;
	font-weight:400 !important;
	color:var(--text) !important;
}
.ui-dialog .ui-dialog-titlebar-close{ right:12px !important; top:50% !important; margin-top:-8px !important; }
.ui-dialog .ui-dialog-content{
	padding:16px !important;
	background:var(--panel) !important;
	color:var(--text-2) !important;
}
.ui-dialog .ui-dialog-buttonpane{
	background:rgba(0,0,0,.15) !important;
	border:none !important;
	border-top:1px solid var(--line) !important;
	margin:0 !important;
	padding:10px 14px !important;
}
.ui-dialog .ui-dialog-buttonpane button{
	background:var(--blue) !important;
	border:1px solid rgba(255,255,255,.2) !important;
	color:#fff !important;
	border-radius:6px !important;
	padding:6px 16px !important;
	font-weight:400 !important;
	cursor:pointer;
}
.ui-dialog .ui-dialog-buttonpane button:hover{ background:var(--blue-2) !important; }
.ui-widget-overlay{ background:#000 !important; opacity:.55 !important; }

.ui-datepicker{
	background:var(--panel) !important;
	border:1px solid var(--line) !important;
	border-radius:8px !important;
	box-shadow:0 16px 40px rgba(0,0,0,.5) !important;
	padding:8px !important;
	font-size:12px !important;
	color:var(--text-2) !important;
}
.ui-datepicker .ui-datepicker-header{
	background:transparent !important;
	border:none !important;
	color:var(--text) !important;
	font-weight:400;
}
.ui-datepicker td a, .ui-datepicker td span{ text-align:center; border-radius:6px !important; color:var(--text-2) !important; }
.ui-datepicker .ui-state-active{ background:var(--blue) !important; border-color:var(--blue) !important; color:#fff !important; }
.ui-datepicker .ui-state-hover{ background:rgba(255,255,255,.06) !important; }

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 1100px){
	#filterTxt{ width:200px; }
	#contentDiv{ padding:12px; }
}

@media (max-width: 860px){
	#menuDiv{ width:60px; }
	#mainDiv{ margin-left:60px; }
	#filterDiv{ margin-left:0; width:100%; }
	#filterTxt{ width:100%; }
}

/* login title */
.loginAppTitle{
	font-size:16px;
	font-weight:400;
	color:var(--text);
	letter-spacing:-.02em;
	text-align:center;
}
#loginFormTbl h1{ display:none; }
/* login brand block */
.loginBrand{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:16px;
	width:100%;
}
.loginBrand svg{
	border-radius:10px;
	box-shadow:0 0 32px -2px rgba(0,113,255,.45);
}

/* bare page title (pages without #actions) */
#contentDiv > h1{
	display:inline-flex;
	align-items:center;
	align-self:flex-start;
	height:32px;
	padding:0 12px;
	background:var(--panel-2);
	border:1px solid var(--line);
	border-radius:6px;
	color:var(--text-2);
	font-size:13px;
	font-weight:400;
	white-space:nowrap;
	box-shadow:0 0 8px rgba(0,0,0,.08);
}
#contentDiv > p{ color:var(--text-2); max-width:960px; }


/* ---- light theme adjustments ---- */
html[data-theme="light"] .badge-ok{ color:#15803d; background:#dcfce7; border-color:#bbf7d0; }
html[data-theme="light"] .badge-warn{ color:#b45309; background:#fef3c7; border-color:#fde68a; }
html[data-theme="light"] .badge-bad{ color:#b91c1c; background:#fee2e2; border-color:#fecaca; }
html[data-theme="light"] .evt-activate{ color:#15803d; background:#dcfce7; border-color:#bbf7d0; }
html[data-theme="light"] .evt-deactivate{ color:#1d4ed8; background:#dbeafe; border-color:#bfdbfe; }
html[data-theme="light"] .evt-unbind{ color:#6d28d9; background:#ede9fe; border-color:#ddd6fe; }
html[data-theme="light"] .evt-block{ color:#b45309; background:#fef3c7; border-color:#fde68a; }
html[data-theme="light"] .evt-unblock{ color:#475569; background:#f1f5f9; border-color:#e2e8f0; }
html[data-theme="light"] .evt-delete{ color:#b91c1c; background:#fee2e2; border-color:#fecaca; }
html[data-theme="light"] .vmpAlert{ color:#b91c1c; background:#fef2f2; border-color:#fecaca; }
html[data-theme="light"] .listItemActions a.copyLink{ color:#0f766e; }
html[data-theme="light"] .listItemActions a.blockLink{ color:#b45309; }
html[data-theme="light"] .listItemActions a.deleteLink{ color:#b91c1c; }
html[data-theme="light"] .listItemActions a.unbindLink{ color:#6d28d9; }
html[data-theme="light"] #listTbl th{ background:#f8fafc; }
html[data-theme="light"] #filterDiv .search{
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7484' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
}
html[data-theme="light"] #inner_content{ background:#ffffff; }
html[data-theme="light"] .menu a.active::after{ box-shadow:0 0 12px 0 rgba(4,115,253,.5); }
html[data-theme="light"] .ui-widget-overlay{ opacity:.35 !important; }
html[data-theme="light"] .ui-dialog{ box-shadow:0 24px 60px rgba(15,23,42,.18) !important; }

/* ---- theme picker ---- */
#themePop{
	position:fixed;
	left:88px;
	bottom:84px;
	width:224px;
	padding:12px;
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:10px;
	box-shadow:0 16px 40px rgba(0,0,0,.35);
	z-index:120;
	display:none;
}
#themePop.open{ display:block; }
.tpTitle{ font-size:11px; color:var(--muted-2); margin:2px 0 8px; }
.tpList{ display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.tpItem{
	display:flex; align-items:center; gap:8px;
	height:30px; padding:0 8px;
	border:1px solid transparent; border-radius:6px;
	background:transparent; color:var(--text-2);
	font-family:inherit; font-size:12.5px; font-weight:300;
	text-align:left; cursor:pointer;
}
.tpItem:hover{ background:var(--chip-bg); }
.tpItem.active{ border-color:var(--blue); background:rgba(4,115,253,.1); color:var(--text); }
.tpItem i{
	display:inline-block; width:14px; height:14px; border-radius:4px;
	border:1px solid var(--ctrl-border); flex:0 0 auto;
}
.tpAccent{ display:flex; align-items:center; gap:8px; }
.tpAccent input[type="color"]{
	width:42px; height:28px; padding:0; border:1px solid var(--ctrl-border);
	border-radius:6px; background:transparent; cursor:pointer;
}
.tpReset{
	height:28px; padding:0 10px; border:1px solid var(--ctrl-border);
	border-radius:6px; background:var(--panel-3); color:var(--text-2);
	font-family:inherit; font-size:12px; cursor:pointer;
}
.tpReset:hover{ background:var(--btn-hover); color:var(--text); }

.failDetail{ max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted-2); }

/* ---- brute force guard ---- */
.guardSummary{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:2px 2px 0; }
.guardForm{
	background:var(--table-bg);
	border:1px solid var(--line);
	border-radius:6px;
	padding:14px 16px;
}
.guardForm .guardRow{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.guardForm .guardRow label{ min-width:110px; color:var(--muted-2); font-size:12px; }
.guardForm .guardRow input[type="number"]{
	width:110px; height:30px; padding:0 10px;
	background:var(--input-bg); border:1px solid var(--ctrl-border);
	border-radius:6px; color:var(--text); font-family:inherit; font-size:13px;
}
.guardForm .guardRow input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--blue); }
.guardForm .guardRow .saveBtn, .guardForm .guardRow .cancelBtn{ min-width:76px; height:30px; }
.guardBans{ margin-top:2px; }
.guardBans h2{ font-size:13px; color:var(--text-2); }
.guardBans .evtTbl a{ font-size:12px; }