:root{
	--bg:#f7f9fc;
	--card:#fff;
	--accent:#0b5fff;
	--text:#0b1320;
	--muted:#6b7280;
	--card-variant:#ffffff;
	--card-border: rgba(0,0,0,0.10);
	--shadow-sm: 0 6px 16px rgba(12,30,80,0.05);
	--shadow-md: 0 10px 30px rgba(12,30,80,0.06);
}
*{box-sizing:border-box;font-family:Segoe UI,Roboto,'Helvetica Neue',Arial}
body{background:var(--bg);color:var(--text);margin:0;padding:20px;line-height:1.45}
.container{width:100%;max-width:1680px;padding:0 16px;margin:0 auto}
header h1{margin:.2rem 0;font-size:1.6rem;letter-spacing:0.2px}
header p{color:var(--muted);margin-top:4px}

/* resource card */
.resource-card{display:flex;align-items:center;justify-content:space-between;gap:16px}
.resource-left{min-width:0}
.resource-title{font-weight:900;font-size:1.05rem;letter-spacing:0.2px}
.resource-subtitle{margin-top:4px;color:var(--muted);font-size:13px}
.resource-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}
.resource-btn{text-decoration:none;white-space:nowrap}
.resource-btn.is-disabled{opacity:0.55;pointer-events:none}

/* resource card inside top header */
.resource-card--header{margin-top:10px;padding:10px 0 0;border-radius:0;background:transparent;border:none;border-top:1px solid rgba(255,255,255,0.12)}
.resource-card--header .resource-title{color:#fff;font-size:1rem}
.resource-card--header .resource-subtitle{color:rgba(255,255,255,0.58)}
.resource-card--header .pill{background:linear-gradient(180deg,rgba(11,95,255,0.36),rgba(11,95,255,0.22));border:1px solid rgba(255,255,255,0.28);color:#fff}
.resource-card--header .resource-btn{position:relative;cursor:pointer;font-weight:800;box-shadow:0 0 0 1px rgba(11,95,255,0.26),0 6px 16px rgba(11,95,255,0.28);transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease}
.resource-card--header .resource-btn::before{content:"↗";display:inline-block;margin-right:6px;font-weight:900;font-size:12px;line-height:1;opacity:.95}
.resource-card--header .resource-btn::after{content:"新窗口";display:inline-block;margin-left:7px;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,0.20);border:1px solid rgba(255,255,255,0.26);font-size:10px;font-weight:700;line-height:1.35;color:rgba(255,255,255,0.95)}
.resource-card--header .resource-btn:hover{background:linear-gradient(180deg,rgba(11,95,255,0.48),rgba(11,95,255,0.30));border-color:rgba(255,255,255,0.44);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(11,95,255,0.36),0 10px 20px rgba(11,95,255,0.34)}
.resource-card--header .resource-btn:active{transform:translateY(0);box-shadow:0 0 0 1px rgba(11,95,255,0.32),0 6px 16px rgba(11,95,255,0.28)}
.resource-card--header .resource-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,0.22), 0 0 0 6px rgba(11,95,255,0.28)}
.resource-card--header .resource-btn--pulse{animation:resource-btn-pulse 2.8s ease-in-out infinite}

@keyframes resource-btn-pulse{
	0%,100%{box-shadow:0 0 0 1px rgba(11,95,255,0.26),0 6px 16px rgba(11,95,255,0.28)}
	50%{box-shadow:0 0 0 1px rgba(11,95,255,0.40),0 8px 22px rgba(11,95,255,0.38)}
}

@media (prefers-reduced-motion: reduce){
	.resource-card--header .resource-btn--pulse{animation:none}
}

/* header card */
header.page-header{background:#2c3e50;padding:16px 22px 14px;border-radius:16px;border:none;box-shadow:0 8px 24px rgba(0,0,0,0.12);margin-bottom:18px;color:#fff}

.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap}
.header-left{display:flex;align-items:center;gap:12px;flex-shrink:0}
.header-title{margin:0;font-size:1.25rem;font-weight:800;color:#fff;white-space:nowrap}
.topbar-badge{font-size:11px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.85);white-space:nowrap;font-weight:600}
.topbar-link{color:rgba(255,255,255,0.7);text-decoration:none;font-weight:600;font-size:13px;white-space:nowrap;flex-shrink:0}
.topbar-link:hover{color:#fff;text-decoration:underline}

.header-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
.header-steps{display:flex;gap:8px;flex-wrap:nowrap;align-items:center}
.step{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.08);white-space:nowrap;flex-shrink:0}
.step-num{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#e67e22;color:#fff;font-weight:700;font-size:12px;flex-shrink:0}
.step-num--green{background:#9b59b6}
.step-num--dark{background:#2ac55e}
.step-text{font-weight:700;font-size:13px;color:#fff}
.step small{color:rgba(255,255,255,0.45);font-size:11px;margin-left:2px}

.header-desc{margin:8px 0 0;font-size:13px;color:rgba(255,255,255,0.55)}
.header-desc code{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);padding:1px 6px;border-radius:4px;font-size:12px;color:rgba(255,255,255,0.8)}

/* left column container */
.section-body{padding-top:8px}
h2{margin:0}
h2 .toggle{all:unset;cursor:pointer;color:var(--accent);font-weight:600}
.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.section-title-row .toggle{font-size:1.02rem}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:linear-gradient(180deg,#e8f2ff,#ffffff);color:#1a73e8;font-size:12px;border:1px solid rgba(26,115,232,0.2)}
.collapsed .section-body{display:none}
.section h2{margin-bottom:6px}
label{display:block;margin:6px 0}

.card{background:var(--card);padding:16px 18px;border-radius:14px;box-shadow:var(--shadow-sm);border:1px solid var(--card-border);margin-bottom:16px}
.generate-card h3{margin:0 0 8px 0}
.hint-card h4{margin:0 0 8px 0}
.primary.large{display:block;width:100%;background:var(--accent);color:#fff;border:none;padding:14px;border-radius:10px;font-size:16px}

/* 生成配置卡片 */
.generate-card-new{
	background:var(--card);
	border:1px solid var(--card-border);
	border-radius:16px;
	padding:20px 22px;
	box-shadow:var(--shadow-sm);
}
.gen-header{
	display:flex;
	align-items:center;
	gap:14px;
	margin-bottom:18px;
}
.gen-icon{
	font-size:28px;
	width:48px;height:48px;
	display:flex;align-items:center;justify-content:center;
	border-radius:14px;
	background:linear-gradient(135deg,#eef3ff,#f8fbff);
	border:1px solid rgba(11,95,255,0.1);
}
.gen-header h3{margin:0;font-size:1.05rem}
.gen-subtitle{margin:4px 0 0;color:var(--muted);font-size:13px}
.gen-buttons{display:flex;flex-direction:column;gap:10px}
.gen-btn{
	display:flex;align-items:center;justify-content:center;gap:8px;
	padding:14px 20px;
	border-radius:12px;
	font-size:15px;font-weight:600;
	cursor:pointer;
	border:none;
	transition:transform .12s ease, box-shadow .12s ease;
}
.gen-btn:hover{transform:translateY(-1px)}
.gen-btn:active{transform:translateY(0)}
.gen-btn-icon{font-size:16px}
.gen-btn-primary{
	background:linear-gradient(135deg,#0b5fff,#3b82f6);
	color:#fff;
	box-shadow:0 8px 24px rgba(11,95,255,0.22);
}
.gen-btn-primary:hover{box-shadow:0 12px 32px rgba(11,95,255,0.28)}
.gen-btn-secondary{
	background:var(--card);
	color:var(--text);
	border:1px solid rgba(0,0,0,0.1);
	box-shadow:0 4px 12px rgba(12,30,80,0.04);
}
.gen-btn-secondary:hover{box-shadow:0 6px 18px rgba(12,30,80,0.08)}
.gen-tip{
	margin:14px 0 0;
	padding:10px 14px;
	border-radius:10px;
	background:linear-gradient(180deg,#fffbf0,#ffffff);
	border:1px solid rgba(255,183,3,0.2);
	font-size:13px;
	color:#7a6520;
}
.empty-hint{color:var(--muted);padding:12px;border-radius:8px;background:linear-gradient(180deg,#f8fbff,#fff);border:1px dashed rgba(0,0,0,0.04);text-align:center}
input[type=text],input[type=number],select,input,textarea{padding:10px 12px;border-radius:10px;border:1px solid #d9e1ef;width:100%;background:#fff;transition:box-shadow .15s ease, border-color .15s ease}
input[type=text]:focus,input[type=number]:focus,select:focus,input:focus,textarea:focus{outline:none;border-color:rgba(11,95,255,0.45);box-shadow:0 0 0 4px rgba(11,95,255,0.10)}

.switches-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}

/* switch pill - compact inline toggle */
.switch-pill{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:8px 14px;
	border-radius:999px;
	border:1px solid rgba(0,0,0,0.08);
	background:linear-gradient(180deg,#f8fbff,#ffffff);
	cursor:pointer;
	transition:all .15s ease;
	user-select:none;
	position:relative;
}
.switch-pill:hover{border-color:rgba(11,95,255,0.25);box-shadow:0 2px 8px rgba(11,95,255,0.08)}
/* Don't use display:none here; keep it togglable via label click */
.switch-pill input{
	position:absolute;
	top:0;
	left:0;
	width:1px;
	height:1px;
	padding:0;
	margin:0;
	border:0;
	opacity:0;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
}
.switch-pill-slider{
	position:relative;
	width:34px;height:18px;
	border-radius:999px;
	background:#dfe7f5;
	transition:background .2s ease;
	flex-shrink:0;
}
.switch-pill-slider::before{
	content:"";position:absolute;
	width:14px;height:14px;top:2px;left:2px;
	border-radius:50%;background:#fff;
	box-shadow:0 1px 4px rgba(0,0,0,0.18);
	transition:transform .2s ease;
}
.switch-pill input:checked + .switch-pill-slider{background:rgba(11,95,255,0.85)}
.switch-pill input:checked + .switch-pill-slider::before{transform:translateX(16px)}
.switch-pill-text{font-weight:600;font-size:13px;color:#1f2a44;white-space:nowrap}
.switch-pill input:checked ~ .switch-pill-text{color:var(--accent)}

/* system config fields */
.sys-fields{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin-bottom:10px;
}
.sys-field{
	display:flex;
	flex-direction:column;
	gap:4px;
	margin:0;
	padding:12px 14px;
	border-radius:12px;
	border:1px solid rgba(0,0,0,0.06);
	background:linear-gradient(180deg,#ffffff,#fbfdff);
}
.sys-field-label{font-weight:600;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.3px}
.sys-field-input input{
	padding:8px 10px;
	border-radius:8px;
	border:1px solid #e2e8f0;
	font-size:14px;
	background:#fff;
}
.sys-field-input input:focus{
	outline:none;
	border-color:rgba(11,95,255,0.45);
	box-shadow:0 0 0 3px rgba(11,95,255,0.08);
}
@media (max-width:600px){
	.sys-fields{grid-template-columns:1fr}
}

/* full-width field (spans both columns) */
.sys-field-full{grid-column:1 / -1}

/* divider inside system card */
.sys-sms-divider{
	height:1px;
	background:linear-gradient(90deg,transparent,rgba(0,0,0,0.08),transparent);
	margin:6px 0 10px 0;
}

/* compact SMS whitelist textarea */
.sms-whitelist-compact{
	width:100%;
	min-height:80px;
	line-height:1.5;
	padding:10px 12px;
	border-radius:10px;
	border:1px solid #e2e8f0;
	background:#fff;
	resize:vertical;
	font-size:13px;
}
.sms-whitelist-compact:focus{
	outline:none;
	border-color:rgba(11,95,255,0.45);
	box-shadow:0 0 0 3px rgba(11,95,255,0.08);
}

button{background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:12px;cursor:pointer;box-shadow:0 8px 18px rgba(11,95,255,0.14);transition:transform .12s ease, box-shadow .12s ease, filter .12s ease}
button:hover{transform:translateY(-1px);filter:saturate(1.02);box-shadow:0 12px 24px rgba(11,95,255,0.18)}
button:active{transform:translateY(0);box-shadow:0 8px 18px rgba(11,95,255,0.14)}
button#preview{background:#099db1;box-shadow:0 8px 18px rgba(9,157,177,0.18)}
#errors{
	position:fixed;
	top:32px;
	left:50%;
	transform:translateX(-50%);
	z-index:10000;
	padding:16px 36px;
	border-radius:14px;
	font-size:16px;
	font-weight:700;
	pointer-events:none;
	opacity:0;
	transition:opacity .3s ease, transform .3s ease;
	box-shadow:0 12px 40px rgba(0,0,0,0.2);
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
	white-space:nowrap;
	max-width:90vw;
	text-align:center;
	letter-spacing:0.3px;
}
#errors.msg-show{opacity:1;transform:translateX(-50%) translateY(0)}
#errors.msg-hide{opacity:0;transform:translateX(-50%) translateY(-16px)}
#errors.msg-error{color:#fff;background:rgba(192,57,43,0.88);border:1px solid rgba(192,57,43,0.4)}
#errors.msg-ok{color:#fff;background:rgba(39,174,96,0.88);border:1px solid rgba(39,174,96,0.4)}
.hint{color:#666;font-size:0.9rem}

/* form validation highlight */
.invalid-field{
	border-color: rgba(192,57,43,0.75) !important;
	box-shadow: 0 0 0 4px rgba(192,57,43,0.12) !important;
}

/* animations */
section{transition:all 220ms ease}
section.collapsed{opacity:0.95}
.section-body{transition:height 200ms ease, opacity 200ms ease}

.section-group{margin:14px 0 22px 0;padding:14px;border-radius:18px;border:1px solid rgba(0,0,0,0.06);background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 10px 26px rgba(12,30,80,0.04)}
.section-group:last-of-type{border-bottom:none}
.group-header{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.group-header h3{margin:0;font-size:1.05rem}
.group-subtitle{margin:0;color:var(--muted);font-size:0.9rem}
.notify-debug{margin:2px 0 0;display:inline-flex;align-items:center;gap:8px;max-width:100%;width:fit-content;padding:4px 10px;border-radius:999px;background:linear-gradient(180deg,#f2f7ff,#ffffff);border:1px solid rgba(11,95,255,0.18);font-size:12px;color:#41536b;line-height:1.3;box-shadow:0 2px 8px rgba(11,95,255,0.06)}
.notify-debug::before{content:"🔔 已选通知";display:inline-flex;align-items:center;justify-content:center;padding:1px 7px;border-radius:999px;background:rgba(11,95,255,0.10);color:var(--accent);font-size:11px;font-weight:700;letter-spacing:0.2px}
.notify-debug strong{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;background:#fff;border:1px solid rgba(11,95,255,0.20);color:var(--accent);font-weight:800}
.notify-debug.is-empty strong{border-color:rgba(107,114,128,0.25);color:#6b7280;background:#f9fafb}
.card-subtitle{margin:6px 0 10px 0;color:var(--muted);font-size:0.88rem}

/* layout */
.layout{display:block}
.grid-main{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.3fr);gap:20px;align-items:start}
.grid-item--others{grid-column:1}
.grid-item--notify{grid-column:2}
.checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}

/* 通知服务工具栏 */

/* Channels 上下布局：上方复选列表，下方详细配置面板 */
#channelsSection .section-body{display:flex;flex-direction:column;gap:16px}
#channelsSection .checkbox-grid{width:100%;display:flex;flex-wrap:wrap;gap:8px;align-items:center;align-content:flex-start;padding:10px;background:var(--card);border:1px solid rgba(0,0,0,0.06);border-radius:12px;box-shadow:0 6px 16px rgba(12,30,80,0.04)}
#channelsSection .svc-configs-panel{width:100%;max-height:640px;overflow:auto}
/* inner grid: responsive columns to prevent horizontal overflow */
/* stack service config blocks vertically (one per row) to avoid horizontal overflow */
#svcConfigsInner{display:flex;flex-direction:column;gap:12px}

/* each service config: responsive two-column layout (like “left-right” fields) */
.svc-config-block{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
	gap:12px 14px;
	padding:12px;
	border:1px solid rgba(0,0,0,0.04);
	background:var(--card);
	border-radius:8px;
	margin:0;
}

.svc-config-block + .svc-config-block{margin-top:6px}
.svc-config-title{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:700}
.svc-config-body{display:block}

/* field: label on top, input below */
.svc-config-block label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:12px;margin:0}
.svc-config-block label input,
.svc-config-block label textarea,
.svc-config-block label select{margin:0}

@media (max-width:900px){
	.grid-main{grid-template-columns:1fr}
	#channelsSection .section-body{flex-direction:column}
	#channelsSection .checkbox-grid{grid-template-columns:repeat(2,1fr)}
	#channelsSection .svc-configs-panel{max-height:none}
	.header-row{flex-wrap:wrap}
	.header-right{width:100%;justify-content:space-between}
	.header-steps{flex-wrap:wrap}
	.resource-card{flex-direction:column;align-items:flex-start}
	.resource-actions{justify-content:flex-start}
}
/* service config inside each svc-row: hidden by default, shown when checkbox checked */
.svc-row{border-left:2px solid transparent;padding-left:6px}
.svc-row .service-config{display:none;margin-top:6px;padding-left:8px;border-left:2px solid #eef;}
.svc-row label{display:flex;align-items:center;gap:6px;padding:2px 6px;border-radius:6px}
.svc-row label:hover{background:linear-gradient(90deg,#f5f8ff, #ffffff)}

/* Tooltip help for each service label using data-help attr */
label[data-help]{position:relative;cursor:pointer}
label[data-help]::after{content:attr(data-help);position:absolute;left:0;top:calc(100% + 8px);white-space:normal;width:260px;background:rgba(0,0,0,0.82);color:#fff;font-size:12px;padding:8px 10px;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,0.2);opacity:0;transform:translateY(6px);transition:opacity .12s ease, transform .12s ease;pointer-events:none;z-index:30}
label[data-help]:hover::after{opacity:1;transform:translateY(0)}
.svc-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;color:#fff;font-weight:700;font-size:0;letter-spacing:0;overflow:hidden;flex-shrink:0;background-size:cover;background-position:center}
.svc-icon::before{display:none}
.svc-name{font-weight:600;color:#243b55;font-size:13px}
.checkbox-grid .svc-row{background:#fafbfd;border:1px solid rgba(0,0,0,0.06);padding:6px 10px;border-radius:10px;min-height:34px;line-height:20px;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-width:120px;transition:all .12s ease}
.checkbox-grid .svc-row:hover{border-color:rgba(11,95,255,0.25);background:linear-gradient(90deg,#f5f8ff,#ffffff)}
.checkbox-grid .svc-row input[type="checkbox"]{width:14px;height:14px;margin-right:6px}
.checkbox-grid .svc-name{font-weight:600;color:#243b55;font-size:13px;letter-spacing:0.2px}
.checkbox-grid .svc-row label{width:100%;justify-content:flex-start}
.checkbox-grid .svc-row label input[type="checkbox"]:checked + .svc-icon{
	box-shadow:0 0 0 2px rgba(26,115,232,0.25);
	transform:scale(1.05);
	transition:all .15s ease;
}
.checkbox-grid .svc-row label input[type="checkbox"]:checked + .svc-icon + .svc-name{
	color:#1a3d8f;
}
.checkbox-grid .svc-row label input[type="checkbox"]:checked{
	accent-color:#1a73e8;
}
.checkbox-grid .svc-row label input[type="checkbox"]:checked ~ .svc-name{
	color:#1a3d8f;
}

/* 缩小复选框尺寸并美化 */
.svc-row label input[type="checkbox"]{width:12px;height:12px;margin-right:8px;vertical-align:middle;accent-color:var(--accent);}

/* 语音消息推送栏 */
.voice-push-bar{margin-top:4px;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#f0f5ff,#fff);border:1px solid rgba(11,95,255,0.18);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
.voice-push-left{display:flex;flex-direction:column;gap:8px;min-width:0}
.voice-push-head{display:flex;flex-direction:column;gap:2px}
.voice-push-title{font-weight:800;font-size:14px;color:#1f2a44}
.voice-push-subtitle{font-size:12px;color:var(--muted)}
.voice-push-subtitle--hl{align-self:flex-start;display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:rgba(11,95,255,0.10);border:1px solid rgba(11,95,255,0.18);color:var(--accent);font-weight:800}
.voice-push-bar .switch-pill{margin:0;align-self:flex-start}
.voice-push-note{margin:0;font-size:12px;line-height:1.45}
.voice-push-em{font-weight:900;color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px;letter-spacing:0.2px}

/* Keep highlight visible when user selects text */
.voice-push-note::selection,
.voice-push-note *::selection{
	background:rgba(255,183,3,0.35);
	color:inherit;
}
.voice-push-em::selection{
	background:rgba(11,95,255,0.18);
	color:inherit;
}
.voice-push-bar.is-disabled{opacity:0.65}

@media (max-width:900px){
	.voice-push-bar{grid-template-columns:1fr}
}

/* 合并的服务配置面板 */
.svc-configs-panel{margin-top:10px;padding:12px;border-radius:8px;background:var(--card);box-shadow:0 6px 18px rgba(12,30,80,0.05);border:1px solid var(--card-border)}
.svc-configs-panel h3{margin:0 0 8px;font-size:0.95rem}
#svcConfigsEmpty{padding:20px 16px;text-align:center;color:var(--muted);font-size:13px;border:1px dashed rgba(0,0,0,0.08);border-radius:10px;background:linear-gradient(180deg,#f8fbff,#fff)}

/* preview.html uses these via link stylesheet */
.comment{color:#7fb07f}
.string{color:#ffd88a}
.preview ol{list-style:decimal-leading-zero;margin:0;padding-left:2.2rem}

/* Dark mode */
body.dark{--bg:#0b0f14;--text:#e6eef8;--card:#0f1720;--card-variant:#0f1720;--muted:#9aa6b2;--accent:#3b82f6;--card-border: rgba(255,255,255,0.06)}

/* service icons — inline SVG */
.svc-icon--bark{background-color:#F4513B;background-image:url("icons/bark.png");background-size:cover;border-radius:6px}
.svc-icon--telegram{background-color:#26A5E4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%2326A5E4'/%3E%3Cpath d='M6.5 15.5l18-7.5c.8-.3 1.5.5 1.2 1.3l-4 17c-.3.8-1.2 1-1.8.4l-4.2-3.5-2 2.5c-.3.4-1 .2-1-.3v-4.5L6.5 17c-.8-.3-.8-1.2 0-1.5z' fill='%23fff'/%3E%3Cpath d='M12.7 21.2l.5-4.8 8-7.2c.3-.3 0-.4-.2-.2l-10 6.3' fill='%23D2E4EF'/%3E%3C/svg%3E")}
.svc-icon--pushdeer{background-color:#F4A261;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%23F4A261'/%3E%3Cpath d='M16 7c-3 0-5.5 2-5.5 4.5 0 1 .4 2 1 2.8l-1 6.2c-.1.5.3 1 .8 1h9.4c.5 0 .9-.5.8-1l-1-6.2c.6-.8 1-1.8 1-2.8C21.5 9 19 7 16 7z' fill='%23fff'/%3E%3Cellipse cx='14' cy='12' rx='1' ry='1.2' fill='%23F4A261'/%3E%3Cellipse cx='18' cy='12' rx='1' ry='1.2' fill='%23F4A261'/%3E%3Cpath d='M10 10c-1-1-2.5-.5-2.5 1s1 2.5 2.5 2M22 10c1-1 2.5-.5 2.5 1s-1 2.5-2.5 2' stroke='%23fff' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M14 15h4' stroke='%23F4A261' stroke-width='.8' stroke-linecap='round'/%3E%3Crect x='13' y='22' width='6' height='3' rx='1.5' fill='%23fff' opacity='.5'/%3E%3C/svg%3E")}
.svc-icon--dingtalk{background-color:#0089FF;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230089FF'/%3E%3Cpath d='M23.5 14.5c-.2-.3-2-2.5-5-4.5-2-1.3-3.5-2.5-4-3-.3-.3-.2-.7.2-.7h2c.3 0 .2-.4 0-.5l-5-2.3c-.4-.2-.7.1-.5.5l1.5 3.5c.1.3-.1.5-.4.4L9.5 7c-.4-.1-.6.3-.3.6l4 4c.2.2.1.5-.2.5h-2c-.3 0-.4.4-.1.6l6 4.5c.3.2.1.6-.2.5l-2.5-.5c-.3-.1-.5.3-.2.5l5.5 4c.3.2.7 0 .6-.4l-1-3c-.1-.3.1-.6.4-.5l3 .7c.4.1.7-.3.4-.6l-2.5-2.3c-.2-.2 0-.5.3-.4l2.5.5c.4.1.6-.3.3-.6z' fill='%23fff'/%3E%3C/svg%3E")}
.svc-icon--feishu{background-color:#3370FF;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%233370FF'/%3E%3Cpath d='M8 11c0 0 4-3 8-3s8 4 8 8c0 0-3-3-8-3-4 0-7 2-8 3v-5z' fill='%23fff'/%3E%3Cpath d='M8 16c1-1 4-3 8-3 5 0 8 3 8 3 0 4-3.5 8-8 8s-8-4-8-8z' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='16' cy='18' r='2' fill='%233370FF'/%3E%3C/svg%3E")}
.svc-icon--wecom-webhook{background-color:#07C160;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%2307C160'/%3E%3Cpath d='M11 9c-3.3 0-6 2.4-6 5.3 0 1.7.9 3.2 2.3 4.2l-.6 2.3 2.5-1.3c.6.2 1.2.2 1.8.2.3 0 .7 0 1-.1-.2-.5-.3-1.1-.3-1.6 0-3.4 3.1-6.2 7-6.2.2 0 .5 0 .7 0C18.5 10.2 15 9 11 9z' fill='%23fff'/%3E%3Cpath d='M25.5 18c0-2.5-2.7-4.5-6-4.5S13.5 15.5 13.5 18s2.7 4.5 6 4.5c.5 0 1 0 1.5-.1l2 1-.5-1.8c1.3-.8 2-2.1 2-3.6h1z' fill='%23fff' opacity='.75'/%3E%3C/svg%3E")}
.svc-icon--wecom-app{background-color:#2D8CF0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%232D8CF0'/%3E%3Crect x='7' y='8' width='18' height='16' rx='3' fill='%23fff'/%3E%3Crect x='9' y='10' width='6' height='6' rx='1' fill='%232D8CF0' opacity='.3'/%3E%3Crect x='17' y='10' width='6' height='6' rx='1' fill='%232D8CF0' opacity='.3'/%3E%3Crect x='9' y='18' width='14' height='2' rx='1' fill='%232D8CF0' opacity='.2'/%3E%3Crect x='9' y='21' width='8' height='1.5' rx='.75' fill='%232D8CF0' opacity='.15'/%3E%3C/svg%3E")}
.svc-icon--gotify{background-color:#6C47FF;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%236C47FF'/%3E%3Cpath d='M16 6a10 10 0 100 20 10 10 0 000-20zm0 3a7 7 0 110 14 7 7 0 010-14z' fill='%23fff' opacity='.3'/%3E%3Cpath d='M16 11l1.5 3 3.5.5-2.5 2.5.5 3.5L16 19l-3 1.5.5-3.5L11 14.5l3.5-.5z' fill='%23fff'/%3E%3C/svg%3E")}
.svc-icon--serverchan{background-color:#46BC87;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%2346BC87'/%3E%3Crect x='7' y='8' width='18' height='7' rx='2' fill='%23fff'/%3E%3Crect x='7' y='17' width='18' height='7' rx='2' fill='%23fff' opacity='.7'/%3E%3Ccircle cx='11' cy='11.5' r='1.5' fill='%2346BC87'/%3E%3Ccircle cx='11' cy='20.5' r='1.5' fill='%2346BC87'/%3E%3Crect x='15' y='10.5' width='7' height='2' rx='1' fill='%2346BC87' opacity='.3'/%3E%3Crect x='15' y='19.5' width='7' height='2' rx='1' fill='%2346BC87' opacity='.3'/%3E%3C/svg%3E")}
.svc-icon--pushplus{background-color:#2EC4B6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%232EC4B6'/%3E%3Ccircle cx='16' cy='16' r='8' fill='%23fff'/%3E%3Crect x='14.5' y='11' width='3' height='10' rx='1.5' fill='%232EC4B6'/%3E%3Crect x='11' y='14.5' width='10' height='3' rx='1.5' fill='%232EC4B6'/%3E%3C/svg%3E")}
.svc-icon--wxpusher{background-color:#07C160;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%2307C160'/%3E%3Cpath d='M11 9c-3.3 0-6 2.4-6 5.3 0 1.7.9 3.2 2.3 4.2l-.6 2.3 2.5-1.3c.6.2 1.2.2 1.8.2.3 0 .7 0 1-.1-.2-.5-.3-1.1-.3-1.6 0-3.4 3.1-6.2 7-6.2.2 0 .5 0 .7 0C18.5 10.2 15 9 11 9z' fill='%23fff'/%3E%3Cpath d='M25.5 18c0-2.5-2.7-4.5-6-4.5S13.5 15.5 13.5 18s2.7 4.5 6 4.5c.5 0 1 0 1.5-.1l2 1-.5-1.8c1.3-.8 2-2.1 2-3.6h1z' fill='%23fff' opacity='.75'/%3E%3Cpath d='M16 25l-1-2h2z' fill='%23fff' opacity='.5'/%3E%3C/svg%3E")}
.svc-icon--pushover{background-color:#249DF1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%23249DF1'/%3E%3Crect x='10' y='6' width='12' height='20' rx='3' fill='%23fff'/%3E%3Crect x='12' y='9' width='8' height='12' rx='1' fill='%23249DF1' opacity='.2'/%3E%3Ccircle cx='16' cy='24' r='1.2' fill='%23249DF1' opacity='.4'/%3E%3Cpath d='M14 13l2 2 4-4' stroke='%23249DF1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.svc-icon--inotify{background-color:#00B4D8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%2300B4D8'/%3E%3Cpath d='M16 7a9 9 0 100 18 9 9 0 000-18zm0 3c.8 0 1.4.6 1.4 1.4S16.8 12.8 16 12.8s-1.4-.6-1.4-1.4S15.2 10 16 10zm-2 5h3v7h-2v-5h-1v-2z' fill='%23fff'/%3E%3C/svg%3E")}
.svc-icon--nextsmtp{background-color:#4361EE;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%234361EE'/%3E%3Crect x='6' y='10' width='20' height='14' rx='2' fill='%23fff'/%3E%3Cpath d='M6 12l10 6 10-6' stroke='%234361EE' stroke-width='1.5' fill='none'/%3E%3Cpath d='M6 12l10 6 10-6' stroke='%23fff' stroke-width='1.5' fill='none' opacity='.3' transform='translate(0,-2)'/%3E%3C/svg%3E")}

/* 使用说明模态框 */
.modal-overlay{
	display:none;
	position:fixed;
	inset:0;
	z-index:9999;
	background:rgba(0,0,0,0.35);
	backdrop-filter:blur(4px);
	align-items:center;
	justify-content:center;
}
.modal-overlay.show{display:flex}
.modal-box{
	background:var(--card);
	border:1px solid var(--card-border);
	border-radius:18px;
	box-shadow:0 20px 60px rgba(0,0,0,0.18);
	width:92%;
	max-width:540px;
	max-height:85vh;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	animation:modalIn .2s ease;
}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(0.97)}to{opacity:1;transform:none}}
.modal-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:18px 22px;
	border-bottom:1px solid rgba(0,0,0,0.06);
}
.modal-title{font-weight:700;font-size:1.05rem}
.modal-close{
	all:unset;
	cursor:pointer;
	width:32px;height:32px;
	display:inline-flex;
	align-items:center;justify-content:center;
	border-radius:50%;
	font-size:20px;
	color:var(--muted);
	transition:background .12s ease, color .12s ease;
}
.modal-close:hover{background:rgba(0,0,0,0.06);color:var(--text)}
.modal-body{
	padding:18px 22px 24px;
	overflow-y:auto;
	line-height:1.7;
	font-size:14px;
}
.modal-body ol{
	margin:0;
	padding-left:1.4em;
}
.modal-body ol li{
	margin-bottom:12px;
}
.modal-body ol li:last-child{margin-bottom:0}
.modal-body code{
	background:linear-gradient(180deg,#f0f4ff,#fff);
	border:1px solid rgba(11,95,255,0.12);
	padding:2px 7px;
	border-radius:6px;
	font-size:13px;
	font-family:Consolas,'Courier New',monospace;
	color:#1a4ed6;
}
.help-cmds{
	margin-top:8px;
	padding:10px 14px;
	background:linear-gradient(180deg,#f8fbff,#ffffff);
	border:1px solid rgba(0,0,0,0.06);
	border-radius:10px;
	line-height:2;
	font-size:13px;
}
.help-cmds code{margin-right:6px}
.help-cmds span{color:var(--muted)}

/* 录音上传卡片 */
.upload-fields{
	margin-top:4px;
}
.upload-fields .sys-field-full{
	margin:0;
	padding:12px 14px;
	border-radius:12px;
	border:1px solid rgba(0,0,0,0.06);
	background:linear-gradient(180deg,#ffffff,#fbfdff);
}
.upload-fields .sys-field-full input{
	margin-top:4px;
}
.upload-fields .hint{
	margin-top:8px;
	font-size:12px;
}

/* select 下拉框美化 */
select{
	appearance:none;
	-webkit-appearance:none;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 12px center;
	padding-right:32px;
	cursor:pointer;
}