/* 开发者工具专用的美化与布局样式 */

.dev-editor-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-main, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    margin-bottom: 24px;
    overflow: hidden;
}

.dev-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: var(--card-head-bg, #f8fafc);
    border-bottom: 1px solid var(--border-soft, #e2e8f0);
    flex-wrap: wrap;
    gap: 10px;
}

.dev-editor-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-main, #0f172a);
}

.dev-editor-title i {
    color: var(--brand, #2563eb);
}

.dev-editor-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dev-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border-main, #cbd5e1);
    background: var(--card-bg, #ffffff);
    color: var(--text-main, #1e293b);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dev-btn:hover {
    background: var(--brand-soft, #eff6ff);
    border-color: var(--brand, #2563eb);
    color: var(--brand, #2563eb);
}

.dev-btn-primary {
    background: var(--brand, #2563eb);
    border-color: var(--brand, #2563eb);
    color: #ffffff;
}

.dev-btn-primary:hover {
    background: var(--brand-hover, #1d4ed8);
    border-color: var(--brand-hover, #1d4ed8);
    color: #ffffff;
}

.dev-btn-success {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

.dev-btn-success:hover {
    background: #059669;
    border-color: #059669;
    color: #ffffff;
}

.dev-textarea {
    width: 100%;
    min-height: 280px;
    padding: 14px 16px;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-main, #0f172a);
    background: var(--card-bg, #ffffff);
    border: none;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

.dev-textarea:focus {
    box-shadow: inset 0 0 0 2px var(--brand-soft, #bfdbfe);
}

.dev-code-output {
    width: 100%;
    min-height: 280px;
    max-height: 550px;
    padding: 14px 16px;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-main, #0f172a);
    background: var(--code-bg, #f8fafc);
    border: none;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    box-sizing: border-box;
}

.dev-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--card-head-bg, #f8fafc);
    border-top: 1px solid var(--border-soft, #e2e8f0);
    font-size: 12px;
    color: var(--text-muted, #64748b);
}

.dev-status-valid {
    color: #10b981;
    font-weight: 600;
}

.dev-status-invalid {
    color: #ef4444;
    font-weight: 600;
}

.dev-control-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.dev-option-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted, #475569);
}

.dev-option-group select,
.dev-option-group input[type="text"],
.dev-option-group input[type="number"] {
    padding: 5px 10px;
    border: 1px solid var(--border-main, #cbd5e1);
    border-radius: 6px;
    background: var(--card-bg, #ffffff);
    color: var(--text-main, #0f172a);
    font-size: 13px;
}

/* Toast 提示 */
.dev-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background: rgba(15, 23, 42, 0.9);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.dev-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* 28 个开发者工具的精细化页面体系 */
.dev-profile-page { --dev-accent:#2563eb;--dev-accent-soft:#eff6ff;--dev-accent-border:#bfdbfe; }
.dev-profile-page .tool-hero { position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--dev-accent-soft) 44%,#fff) 100%); }
.dev-profile-page .tool-hero::after { content:"";position:absolute;right:-120px;top:-180px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--dev-accent) 13%,transparent),transparent 68%);pointer-events:none; }
.dev-profile-page .tool-hero>.container { position:relative;z-index:1; }
.dev-profile-page .tool-badge { border-color:var(--dev-accent-border);background:var(--dev-accent-soft);color:var(--dev-accent); }
.dev-profile-page .tool-hero h1 { max-width:780px;letter-spacing:-.5px; }
.dev-profile-page .tool-hero__main { align-items:stretch; }
.dev-profile-page .tool-hero__copy { display:flex;align-items:flex-start;flex-direction:column;justify-content:center; }
.dev-profile-page .tool-hero__meta span { border-color:color-mix(in srgb,var(--dev-accent-border) 60%,#e2e8f0);background:rgba(255,255,255,.82); }
.dev-profile-page .tool-hero__meta i { color:var(--dev-accent); }
.dev-hero-focus { width:330px;flex:0 0 330px;padding:20px;border:1px solid color-mix(in srgb,var(--dev-accent-border) 72%,#e2e8f0);border-radius:14px;background:rgba(255,255,255,.88);box-shadow:0 12px 32px color-mix(in srgb,var(--dev-accent) 10%,transparent);backdrop-filter:blur(8px); }
.dev-focus-label { display:inline-flex;align-items:center;gap:7px;margin-bottom:13px;color:var(--dev-accent);font-size:12px;font-weight:800;letter-spacing:.3px; }
.dev-hero-focus>strong { display:block;margin-bottom:8px;color:#0f172a;font-size:18px;line-height:1.4; }
.dev-hero-focus>p { margin:0;color:#64748b;font-size:13px;line-height:1.7; }
.dev-focus-note { display:flex;align-items:flex-start;gap:7px;margin-top:15px;padding-top:13px;border-top:1px dashed color-mix(in srgb,var(--dev-accent-border) 72%,#e2e8f0);color:#475569;font-size:11px;line-height:1.55; }
.dev-focus-note i { margin-top:2px;color:var(--dev-accent); }
.dev-profile-page .tool-main { background:linear-gradient(180deg,color-mix(in srgb,var(--dev-accent-soft) 28%,#f8fafc),#f8fafc 240px); }
.dev-profile-page .tool-workspace { position:relative;padding:22px;border-color:color-mix(in srgb,var(--dev-accent-border) 45%,#e2e8f0);border-radius:14px;box-shadow:0 18px 45px rgba(15,23,42,.07); }
.dev-workspace-lead { display:flex;align-items:center;justify-content:space-between;gap:22px;margin:-4px 0 18px;padding:0 2px 16px;border-bottom:1px solid #e8edf3; }
.dev-workspace-lead>div { display:flex;align-items:center;gap:10px;min-width:0; }
.dev-workspace-lead span { flex:0 0 auto;padding:4px 8px;border-radius:6px;background:var(--dev-accent-soft);color:var(--dev-accent);font-size:11px;font-weight:800; }
.dev-workspace-lead strong { overflow:hidden;color:#334155;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap; }
.dev-workspace-lead small { flex:0 0 auto;color:#94a3b8;font-size:11px;white-space:nowrap; }
.dev-workspace-lead small i { margin-right:5px;color:var(--dev-accent); }
.dev-profile-page .dev-control-bar { justify-content:flex-start!important;margin:0 0 16px!important;padding:12px;border:1px solid #e8edf3;border-radius:10px;background:#f8fafc; }
.dev-profile-page .dev-btn { min-height:36px;border-radius:8px; }
.dev-profile-page .dev-btn-primary { border-color:var(--dev-accent);background:var(--dev-accent);box-shadow:0 6px 14px color-mix(in srgb,var(--dev-accent) 20%,transparent); }
.dev-profile-page .dev-btn-primary:hover { border-color:color-mix(in srgb,var(--dev-accent) 84%,#000);background:color-mix(in srgb,var(--dev-accent) 84%,#000); }
.dev-profile-card { position:relative;border-color:#e5eaf0;border-radius:12px;box-shadow:0 5px 18px rgba(15,23,42,.045); }
.dev-profile-card::after { content:attr(data-stage);position:absolute;right:13px;bottom:9px;color:color-mix(in srgb,var(--dev-accent) 12%,transparent);font-size:34px;font-weight:900;line-height:1;pointer-events:none; }
.dev-profile-card .dev-editor-header { min-height:48px;padding:11px 16px;background:linear-gradient(180deg,#fbfdff,#f8fafc); }
.dev-profile-card .dev-editor-title { color:#1e293b; }
.dev-profile-card .dev-editor-title i { color:var(--dev-accent); }
.dev-profile-card.is-result-card { border-color:color-mix(in srgb,var(--dev-accent-border) 55%,#e2e8f0); }
.dev-profile-card.is-result-card .dev-editor-header { background:linear-gradient(180deg,var(--dev-accent-soft),#fff); }
.dev-profile-page .dev-textarea { min-height:250px;padding:17px 18px;font-size:13px;line-height:1.72; }
.dev-profile-page textarea[readonly],.dev-profile-page input[readonly] { background:color-mix(in srgb,var(--dev-accent-soft) 24%,#fff); }
.dev-profile-page .dev-status-bar { position:relative;z-index:1;background:#fbfdff; }
.dev-live-stats { margin-left:auto;color:#94a3b8;font-variant-numeric:tabular-nums; }
.dev-status-bar-auto { justify-content:flex-end; }

.dev-tool-detail { padding:8px 0 52px;background:#f8fafc; }
.dev-detail-heading { display:grid;grid-template-columns:minmax(0,.72fr) minmax(320px,1.28fr);gap:28px;align-items:end;margin-bottom:18px; }
.dev-detail-heading span { color:var(--dev-accent);font-size:11px;font-weight:900;letter-spacing:1.2px; }
.dev-detail-heading h2 { margin:5px 0 0;color:#0f172a;font-size:23px;font-weight:800;line-height:1.35; }
.dev-detail-heading>p { margin:0;padding-left:22px;border-left:2px solid var(--dev-accent-border);color:#64748b;font-size:13px;line-height:1.8; }
.dev-detail-layout { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:16px; }
.dev-flow-panel,.dev-tips-panel { padding:22px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;box-shadow:0 6px 22px rgba(15,23,42,.045); }
.dev-panel-title { display:flex;align-items:center;gap:11px;margin-bottom:18px; }
.dev-panel-title>i { display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:var(--dev-accent-soft);color:var(--dev-accent);font-size:16px; }
.dev-panel-title strong,.dev-panel-title small { display:block; }.dev-panel-title strong { color:#1e293b;font-size:15px; }.dev-panel-title small { margin-top:3px;color:#94a3b8;font-size:11px;font-weight:400; }
.dev-flow-list { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
.dev-flow-list>div { position:relative;min-height:132px;padding:17px 15px;border:1px solid #e8edf3;border-radius:11px;background:linear-gradient(180deg,#fff,#fbfdff); }
.dev-flow-list b { display:block;margin-bottom:22px;color:var(--dev-accent);font-size:12px;letter-spacing:1px; }
.dev-flow-list b::after { content:"";position:absolute;top:42px;left:15px;width:28px;height:2px;background:var(--dev-accent); }
.dev-flow-list strong,.dev-flow-list small { display:block; }.dev-flow-list strong { color:#1e293b;font-size:13px; }.dev-flow-list small { margin-top:6px;color:#64748b;font-size:11px;line-height:1.6; }
.dev-tips-panel ul { display:grid;gap:10px;margin:0;padding:0;list-style:none; }
.dev-tips-panel li { display:flex;align-items:flex-start;gap:9px;padding:10px 11px;border-radius:9px;background:#f8fafc;color:#475569;font-size:12px;line-height:1.55; }
.dev-tips-panel li i { margin-top:3px;color:var(--dev-accent); }
.dev-boundary { display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:13px;border:1px solid var(--dev-accent-border);border-radius:10px;background:var(--dev-accent-soft); }
.dev-boundary>i { margin-top:2px;color:var(--dev-accent); }.dev-boundary strong,.dev-boundary small { display:block; }.dev-boundary strong { color:#1e293b;font-size:12px; }.dev-boundary small { margin-top:3px;color:#64748b;font-size:11px;line-height:1.55; }
.dev-related-strip { display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:16px;padding:17px 20px;border:1px solid #e2e8f0;border-radius:13px;background:#fff; }
.dev-related-strip>div:first-child span,.dev-related-strip>div:first-child strong { display:block; }.dev-related-strip>div:first-child span { color:var(--dev-accent);font-size:10px;font-weight:900;letter-spacing:1px; }.dev-related-strip>div:first-child strong { margin-top:3px;color:#1e293b;font-size:14px; }
.dev-related-links { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px; }
.dev-related-links a { display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#475569;font-size:12px;font-weight:600;transition:.2s; }
.dev-related-links a i { color:var(--dev-accent);font-size:10px; }.dev-related-links a:hover { border-color:var(--dev-accent-border);background:var(--dev-accent-soft);color:var(--dev-accent);transform:translateY(-1px); }

/* 不同工具类型的工作区重点 */
.dev-sqlformat-page .dev-textarea,.dev-jsformat-page .dev-textarea,.dev-htmlformat-page .dev-textarea,.dev-cssformat-page .dev-textarea  { min-height:330px; }
.dev-markdownformat-page .dev-textarea,.dev-yamlformat-page .dev-textarea,.dev-xmlformat-page .dev-textarea  { min-height:300px; }
.dev-uuid-page #uuidOutput  { border-color:var(--dev-accent-border)!important;background:var(--dev-accent-soft)!important;color:var(--dev-accent)!important; }
.dev-colorconvert-page input[type="color"] { border:5px solid #fff!important;border-radius:12px!important;box-shadow:0 0 0 1px var(--dev-accent-border),0 8px 20px rgba(15,23,42,.08); }
.dev-colorconvert-page #colorPreview { border-radius:12px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.dev-timestamp-page .dev-editor-card:first-of-type { border-color:var(--dev-accent-border);background:linear-gradient(135deg,var(--dev-accent-soft),#fff 70%); }
.dev-timestamp-page [id^="currentTimestamp"] { color:var(--dev-accent)!important;font-variant-numeric:tabular-nums; }
.dev-cron-page #cronResult { border-color:var(--dev-accent-border)!important;border-radius:10px!important;background:var(--dev-accent-soft)!important;color:var(--dev-accent)!important;letter-spacing:1px; }
.dev-cron-page .btn-cron-template { margin:4px 3px;padding:9px 13px; }
.dev-regex-page #regexInput { border-color:var(--dev-accent-border);font-family:Consolas,monospace; }
.dev-jwt-page .dev-editor-card { border-left:3px solid var(--dev-accent-border); }
.dev-useragent-page .dev-editor-card:last-child { background:linear-gradient(180deg,#fff,var(--dev-accent-soft)); }

@media (max-width:991px) {
    .dev-profile-page .tool-hero__main { flex-direction:column; }
    .dev-hero-focus { display:grid;width:100%;grid-template-columns:150px 1fr;flex-basis:auto;column-gap:18px; }
    .dev-hero-focus .dev-focus-label { grid-column:1;grid-row:1 / 4;align-self:start; }
    .dev-hero-focus>strong,.dev-hero-focus>p,.dev-hero-focus>.dev-focus-note { grid-column:2; }
    .dev-detail-layout { grid-template-columns:1fr; }
    .dev-detail-heading { grid-template-columns:1fr;gap:10px; }
    .dev-detail-heading>p { padding-left:0;border-left:0; }
    .dev-related-strip { align-items:flex-start;flex-direction:column; }
    .dev-related-links { justify-content:flex-start; }
}
@media (max-width:767px) {
    .dev-profile-page .tool-hero__main { flex-direction:column; }
    .dev-hero-focus { display:block;width:100%;flex-basis:auto;margin-top:18px; }
    .dev-workspace-lead { align-items:flex-start;flex-direction:column;gap:8px; }
    .dev-workspace-lead>div { align-items:flex-start;flex-direction:column; }
    .dev-workspace-lead strong { overflow:visible;white-space:normal; }
    .dev-flow-list { grid-template-columns:1fr; }
    .dev-flow-list>div { min-height:auto; }
    .dev-related-links { display:grid;width:100%;grid-template-columns:1fr 1fr; }
    .dev-related-links a { justify-content:flex-start; }
    .dev-profile-page .tool-workspace { padding:14px; }
}

/* 精简信息区：由卡片堆叠改为连续内容流 */
.dev-tool-detail { padding:18px 0 54px;background:var(--page-bg); }
.dev-detail-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid var(--border-main); }
.dev-detail-heading>div { flex:0 0 auto; }
.dev-detail-heading h2 { color:var(--text-main); }
.dev-detail-heading>p { max-width:560px;padding:0;border:0;color:var(--text-muted); }
.dev-detail-layout { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:42px; }
.dev-flow-panel,.dev-tips-panel { padding:0;border:0;border-radius:0;background:transparent;box-shadow:none; }
.dev-tips-panel { padding-left:38px;border-left:1px solid var(--border-main); }
.dev-panel-title { margin-bottom:22px; }
.dev-panel-title>i { width:34px;height:34px;border-radius:9px;background:var(--dev-accent-soft);color:var(--dev-accent); }
.dev-panel-title strong { color:var(--text-main); }
.dev-panel-title small { color:var(--text-faint); }
.dev-flow-list { position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:28px; }
.dev-flow-list::before { content:"";position:absolute;top:13px;right:7%;left:7%;height:1px;background:linear-gradient(90deg,var(--dev-accent-border),var(--border-main)); }
.dev-flow-list>div { position:relative;min-height:0;padding:38px 0 0;border:0;border-radius:0;background:transparent; }
.dev-flow-list b { position:absolute;top:0;left:0;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;margin:0;border:1px solid var(--dev-accent-border);border-radius:50%;background:var(--page-bg);color:var(--dev-accent);font-size:10px; }
.dev-flow-list b::after { display:none; }
.dev-flow-list strong { color:var(--text-main);font-size:14px; }
.dev-flow-list small { max-width:190px;color:var(--text-muted);font-size:12px;line-height:1.7; }
.dev-tips-panel ul { gap:0; }
.dev-tips-panel li { gap:10px;padding:8px 0;border-bottom:1px dashed var(--border-soft);border-radius:0;background:transparent;color:var(--text-muted); }
.dev-tips-panel li:last-child { border-bottom:0; }
.dev-boundary { margin-top:16px;padding:15px 0 0;border:0;border-top:1px solid var(--dev-accent-border);border-radius:0;background:transparent; }
.dev-boundary strong { color:var(--text-main); }
.dev-boundary small { color:var(--text-muted); }
.dev-related-strip { display:grid;grid-template-columns:220px 1fr;align-items:center;gap:28px;margin-top:34px;padding:22px 0 0;border:0;border-top:1px solid var(--border-main);border-radius:0;background:transparent; }
.dev-related-strip>div:first-child strong { color:var(--text-main); }
.dev-related-links { justify-content:flex-start;gap:0; }
.dev-related-links a { padding:4px 16px;border:0;border-right:1px solid var(--border-main);border-radius:0;background:transparent;color:var(--text-muted); }
.dev-related-links a:first-child { padding-left:0; }
.dev-related-links a:last-child { border-right:0; }
.dev-related-links a:hover { border-color:var(--border-main);background:transparent;color:var(--dev-accent);transform:none; }

/* 统一使用主题变量，确保夜间模式可读 */
.dev-profile-page .tool-hero { background:linear-gradient(180deg,var(--hero-bg) 0%,color-mix(in srgb,var(--dev-accent-soft) 42%,var(--hero-bg)) 100%); }
.dev-profile-page .tool-hero h1,.dev-hero-focus>strong,.dev-workspace-lead strong,.dev-profile-card .dev-editor-title { color:var(--text-main); }
.dev-hero-focus { border-color:color-mix(in srgb,var(--dev-accent-border) 72%,var(--border-main));background:color-mix(in srgb,var(--card-bg) 92%,transparent);box-shadow:var(--shadow-card); }
.dev-hero-focus>p,.dev-focus-note { color:var(--text-muted); }
.dev-focus-note { border-color:color-mix(in srgb,var(--dev-accent-border) 72%,var(--border-main)); }
.dev-profile-page .tool-main { background:linear-gradient(180deg,color-mix(in srgb,var(--dev-accent-soft) 24%,var(--page-bg)),var(--page-bg) 240px); }
.dev-profile-page .tool-workspace { border-color:var(--border-main);background:var(--card-bg);box-shadow:var(--shadow-card); }
.dev-workspace-lead { border-color:var(--border-main); }
.dev-workspace-lead small,.dev-live-stats { color:var(--text-faint); }
.dev-profile-page .dev-control-bar { border-color:var(--border-main);background:var(--card-muted-bg); }
.dev-profile-card { border-color:var(--border-main);background:var(--card-bg);box-shadow:none; }
.dev-profile-card .dev-editor-header { border-color:var(--border-main);background:var(--card-muted-bg); }
.dev-profile-card.is-result-card { border-color:var(--dev-accent-border); }
.dev-profile-card.is-result-card .dev-editor-header { background:color-mix(in srgb,var(--dev-accent-soft) 58%,var(--card-bg)); }
.dev-profile-page .dev-textarea,.dev-profile-page .dev-code-output { background:var(--input-bg);color:var(--text-main); }
.dev-profile-page textarea[readonly],.dev-profile-page input[readonly] { background:color-mix(in srgb,var(--dev-accent-soft) 28%,var(--input-bg));color:var(--text-main); }
.dev-profile-page .dev-status-bar { border-color:var(--border-main);background:var(--card-muted-bg); }
.dev-useragent-page .dev-editor-card:last-child { background:linear-gradient(180deg,var(--card-bg),color-mix(in srgb,var(--dev-accent-soft) 34%,var(--card-bg))); }
.dev-timestamp-page .dev-editor-card:first-of-type { background:linear-gradient(135deg,var(--dev-accent-soft),var(--card-bg) 70%); }
.dev-colorconvert-page input[type="color"] { border-color:var(--card-bg)!important; }

html[data-theme="dark"] .dev-profile-page {
    --dev-accent-soft:color-mix(in srgb,var(--dev-accent) 12%,#111827);
    --dev-accent-border:color-mix(in srgb,var(--dev-accent) 30%,#263548);
}
html[data-theme="dark"] .dev-profile-page .tool-hero::after { opacity:.48; }
html[data-theme="dark"] .dev-profile-page .tool-hero__meta span { border-color:var(--border-main);background:rgba(23,34,52,.78);color:var(--text-muted); }
html[data-theme="dark"] .dev-profile-page .dev-btn:not(.dev-btn-primary):not(.dev-btn-success) { border-color:var(--border-main);background:var(--card-bg);color:var(--text-sub); }
html[data-theme="dark"] .dev-profile-page .form-control,html[data-theme="dark"] .dev-profile-page select,html[data-theme="dark"] .dev-profile-page input[type="text"],html[data-theme="dark"] .dev-profile-page input[type="number"] { border-color:var(--border-strong);background:var(--input-bg);color:var(--text-main); }
html[data-theme="dark"] .dev-profile-page label { color:var(--text-sub)!important; }
html[data-theme="dark"] .dev-profile-card::after { color:color-mix(in srgb,var(--dev-accent) 10%,transparent); }
html[data-theme="dark"] .dev-flow-list b { background:var(--page-bg); }

@media (max-width:991px) {
    .dev-detail-layout { gap:28px; }
    .dev-tips-panel { padding-left:28px; }
    .dev-related-strip { grid-template-columns:1fr;gap:14px; }
}
@media (max-width:767px) {
    .dev-detail-heading { align-items:flex-start;flex-direction:column;gap:10px; }
    .dev-detail-layout { grid-template-columns:1fr;gap:30px; }
    .dev-tips-panel { padding:26px 0 0;border-left:0;border-top:1px solid var(--border-main); }
    .dev-flow-list { grid-template-columns:1fr;gap:18px; }
    .dev-flow-list::before { top:0;bottom:0;left:13px;width:1px;height:auto; }
    .dev-flow-list>div { padding:0 0 0 44px; }
    .dev-flow-list b { top:0; }
    .dev-related-links { display:flex; }
    .dev-related-links a { padding:5px 10px;border-right:0; }
    .dev-related-links a:first-child { padding-left:0; }
}

/* 行内工具主题变量的夜间模式兜底 */
html[data-theme="dark"] .dev-profile-page {
    --dev-accent-soft:#162238!important;
    --dev-accent-border:#33465d!important;
}
html[data-theme="dark"] .dev-profile-card,
html[data-theme="dark"] .dev-profile-card.is-result-card,
html[data-theme="dark"] .dev-useragent-page .dev-editor-card:last-child {
    background:var(--card-bg)!important;
}
html[data-theme="dark"] .dev-profile-card .dev-editor-header,
html[data-theme="dark"] .dev-profile-card.is-result-card .dev-editor-header {
    background:var(--card-muted-bg)!important;
    color:var(--text-main);
}
html[data-theme="dark"] .dev-hero-focus {
    background:rgba(23,34,52,.9);
}
html[data-theme="dark"] .dev-profile-page .tool-badge,
html[data-theme="dark"] .dev-workspace-lead span,
html[data-theme="dark"] .dev-panel-title>i {
    background:var(--dev-accent-soft);
}

/* Shared workspace for tools with multiple related operations. */
#mergedTool .dev-control-bar { justify-content: flex-start; }
#mergedTool .dev-control-bar label { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-weight: 500; }
#mergedTool select,
#mergedTool input[type="number"] { min-height: 36px; padding: 6px 10px; border: 1px solid var(--border-main, #dbe3ee); border-radius: 7px; background: var(--card-bg, #fff); color: var(--text-main, #0f172a); }
#mergedTool input[type="checkbox"] { accent-color: var(--brand, #2563eb); margin: 0; }
#mergedTool #run { background: var(--brand, #2563eb); border-color: var(--brand, #2563eb); color: #fff; }
#mergedTool .dev-textarea { border: 1px solid var(--border-main, #dbe3ee); border-radius: 9px; margin: 8px 0; min-height: 270px; }
#mergedTool .form-control { color: var(--text-main, #0f172a); background: var(--card-bg, #fff); }
#mergedTool #status { min-height: 20px; }
@media (max-width: 767px) {
    #mergedTool .dev-control-bar { gap: 8px !important; }
    #mergedTool .dev-textarea { min-height: 200px; }
    #mergedTool .tool-workspace { padding: 18px; }
}

/* JSON actions stay inside the editor they belong to. */
#mergedTool[data-kind="json"] .json-operation-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#mergedTool[data-kind="json"] #indentControl[hidden] { display: none; }
#mergedTool[data-kind="json"] #status { margin: 16px 0; overflow-wrap: anywhere; }
#mergedTool[data-kind="json"] .json-editor-label { display: block; margin-bottom: 10px; }
#mergedTool[data-kind="json"] .json-editor-box { border: 1px solid var(--border-main, #dbe3ee); border-radius: 10px; overflow: hidden; background: var(--card-bg, #fff); }
#mergedTool[data-kind="json"] .json-editor-box:focus-within { border-color: var(--brand, #2563eb); box-shadow: 0 0 0 2px rgba(37,99,235,.08); }
#mergedTool[data-kind="json"] .json-editor-box .dev-textarea { display: block; width: 100%; height: 310px; min-height: 200px; margin: 0; border: 0; border-radius: 0; box-shadow: none; outline: none; resize: vertical; }
#mergedTool[data-kind="json"] .json-editor-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; padding: 8px 12px; border-top: 1px solid var(--border-soft, #edf1f6); background: var(--card-head-bg, #f8fafc); }
#mergedTool[data-kind="json"] .json-editor-footer .dev-btn { min-height: 30px; padding: 4px 9px; gap: 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-muted, #64748b); font-size: 12px; font-weight: 400; line-height: 20px; box-shadow: none; transition: color .15s, background .15s, border-color .15s; }
#mergedTool[data-kind="json"] .json-editor-footer .dev-btn i { width: 14px; text-align: center; font-size: 12px; }
#mergedTool[data-kind="json"] .json-editor-footer #copy { color: var(--brand, #2563eb); }
#mergedTool[data-kind="json"] .json-editor-footer #clear:hover { color: #dc3545; }
#mergedTool[data-kind="json"] .json-editor-footer .dev-btn:hover { background: var(--card-bg, #fff); border-color: var(--border-main, #dbe3ee); }
#mergedTool[data-kind="json"] .json-clear-button { margin-left: auto; }

#mergedTool .json-operation-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border-main, #e2e8f0); border-radius: 9px; background: var(--card-head-bg, #f4f6fa); }
#mergedTool .json-operation-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 6px 15px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-muted, #64748b); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
#mergedTool .json-operation-tab:hover { color: var(--brand, #2563eb); }
#mergedTool .json-operation-tab[aria-selected="true"] { background: var(--card-bg, #fff); border-color: var(--border-soft, #e8edf4); color: var(--brand, #2563eb); box-shadow: 0 1px 3px rgba(15,23,42,.08); }
#mergedTool .json-operation-tab:focus-visible,
#mergedTool[data-kind="json"] .json-editor-footer .dev-btn:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 2px; }
@media (max-width: 767px) {
    #mergedTool .json-operation-tabs { width: 100%; }
    #mergedTool .json-operation-tab { flex: 1; padding: 6px 10px; }
}

#mergedTool[data-kind="json"] .json-editor-columns { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); gap: 12px; align-items: center; }
#mergedTool[data-kind="json"] .json-editor-column { min-width: 0; }
#mergedTool[data-kind="json"] .json-swap-control { display: flex; justify-content: center; padding-top: 28px; }
#mergedTool[data-kind="json"] .json-swap-button { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; background: var(--card-bg, #fff); color: var(--text-muted, #64748b); border: 1px solid var(--border-main, #dbe3ee); box-shadow: 0 2px 6px rgba(15,23,42,.05); }
#mergedTool[data-kind="json"] .json-swap-button:hover { color: var(--brand, #2563eb); border-color: var(--brand, #2563eb); background: var(--card-head-bg, #f8fafc); }
#mergedTool[data-kind="json"] .json-swap-button:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 3px; }
@media (max-width: 991px) {
    #mergedTool[data-kind="json"] .json-editor-columns { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    #mergedTool[data-kind="json"] .json-swap-control { padding-top: 0; }
    #mergedTool[data-kind="json"] .json-swap-button i { transform: rotate(90deg); }
}

/* Common developer editor layout and compact, contextual actions. */
.dev-ux-page .dev-ux-editor-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; gap: 24px; margin: 0; }
.dev-ux-page .dev-ux-editor-row::before, .dev-ux-page .dev-ux-editor-row::after { display: none; }
.dev-ux-page .dev-ux-editor-row > div { float: none; width: auto; min-width: 0; padding: 0; display: flex; }
.dev-ux-page .dev-ux-editor.dev-editor-card { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; width: 100%; padding: 0; margin: 0 0 20px; border: 1px solid var(--border-main, #dbe3ee); background: var(--card-bg, #fff); box-shadow: none; }
.dev-ux-page .dev-ux-editor::after { display: none; }
.dev-ux-page .dev-ux-editor .dev-editor-header { display: flex; align-items: center; flex: 0 0 auto; min-height: 48px; width: 100%; margin: 0; padding: 11px 16px; border-bottom: 1px solid var(--border-main, #dbe3ee); background: var(--card-head-bg, #f8fafc); }
.dev-ux-page .dev-ux-editor .dev-editor-header label { margin: 0; }
.dev-ux-page .dev-ux-editor .dev-textarea,
#mergedTool.dev-ux-page .dev-ux-editor .dev-textarea { display: block; flex: 0 0 310px; width: 100%; height: 310px; min-height: 310px; margin: 0; border: 0; border-radius: 0; background: var(--card-bg, #fff); box-shadow: none; resize: none; }
.dev-ux-page .dev-ux-editor:focus-within { border-color: var(--brand, #2563eb); }
.dev-ux-page .dev-ux-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; min-height: 48px; padding: 8px 12px; border-top: 1px solid var(--border-soft, #edf1f6); background: var(--card-head-bg, #f8fafc); }
.dev-ux-page .dev-ux-editor .dev-ux-footer { width: 100%; align-self: stretch; margin-top: auto; }
.dev-ux-page .dev-ux-footer .dev-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 4px 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-muted, #64748b); font-size: 12px; font-weight: 400; line-height: 20px; box-shadow: none; }
.dev-ux-page .dev-ux-footer .dev-btn i { width: 14px; font-size: 12px; text-align: center; }
.dev-ux-page .dev-ux-footer .dev-btn:hover { color: var(--brand, #2563eb); border-color: var(--border-main, #dbe3ee); background: var(--card-bg, #fff); }
.dev-ux-page .dev-ux-footer .dev-btn:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 2px; }
.dev-ux-page .dev-ux-footer [id*="Copy"], .dev-ux-page .dev-ux-footer #copy { color: var(--brand, #2563eb); }
.dev-ux-page .dev-ux-footer .dev-ux-stats { width: auto; padding: 0; margin-left: auto; background: transparent; border: 0; font-size: 11px; }
.dev-ux-page .dev-ux-field-copy { margin-top: 6px; font-size: 12px; }
@media (max-width: 991px) {
    .dev-ux-page .dev-ux-editor-row { grid-template-columns: minmax(0,1fr); gap: 0; }
    .dev-ux-page .dev-ux-editor .dev-textarea,
    #mergedTool.dev-ux-page .dev-ux-editor .dev-textarea { height: 240px; min-height: 240px; flex-basis: 240px; }
}

.dev-ux-page .dev-live-modes { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border-main, #e2e8f0); border-radius: 8px; background: var(--card-head-bg, #f4f6fa); }
.dev-ux-page .dev-live-mode { min-height: 32px; padding: 5px 14px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--text-muted, #64748b); font-size: 13px; cursor: pointer; }
.dev-ux-page .dev-live-mode[aria-pressed="true"] { color: var(--brand, #2563eb); background: var(--card-bg, #fff); border-color: var(--border-soft, #edf1f6); box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.dev-ux-page .dev-live-mode:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 2px; }

/* All reversible codecs use the same central exchange control. */
.dev-ux-page .dev-codec-editors { display: grid; grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr); gap: 12px; align-items: center; }
.dev-ux-page .dev-codec-column { min-width: 0; }
.dev-ux-page .dev-codec-editors .dev-ux-editor { margin-bottom: 0; }
.dev-ux-page .dev-codec-swap { display: flex; justify-content: center; }
.dev-ux-page .dev-codec-swap .dev-btn { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; border: 1px solid var(--border-main, #dbe3ee); color: var(--text-muted, #64748b); background: var(--card-bg, #fff); box-shadow: 0 2px 6px rgba(15,23,42,.05); }
.dev-ux-page .dev-codec-swap .dev-btn:hover { color: var(--brand, #2563eb); border-color: var(--brand, #2563eb); }
.dev-ux-page .dev-codec-swap .dev-btn:focus-visible { outline: 2px solid var(--brand, #2563eb); outline-offset: 3px; }
@media (max-width: 991px) {
    .dev-ux-page .dev-codec-editors { grid-template-columns: minmax(0,1fr); }
    .dev-ux-page .dev-codec-swap i { transform: rotate(90deg); }
}
@media (max-width: 767px) {
    #mergedTool[data-kind="random"] .json-operation-tabs { flex-wrap: wrap; }
    #mergedTool[data-kind="random"] .json-operation-tab { flex-basis: calc(50% - 4px); }
}