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

.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);
}

/* 开发者工具目录页 */
.dev-directory-hero { background: radial-gradient(circle at 85% 20%, rgba(37,99,235,.12), transparent 30%), var(--hero-bg,#f8fafc); }
.dev-directory-hero kbd { display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;margin:0 3px;border:1px solid var(--border-main,#cbd5e1);border-bottom-width:2px;border-radius:5px;background:var(--card-bg,#fff);color:var(--text-main,#0f172a);font:12px inherit; }
.dev-directory-search { position:sticky;top:10px;z-index:20;margin-bottom:22px;padding:16px;border:1px solid var(--border-main,#e2e8f0);border-radius:14px;background:rgba(255,255,255,.94);box-shadow:0 12px 34px rgba(15,23,42,.08);backdrop-filter:blur(12px); }
.dev-search-box { position:relative; }
.dev-search-box>i { position:absolute;top:50%;left:16px;color:var(--text-faint,#94a3b8);transform:translateY(-50%); }
.dev-search-box input { width:100%;height:48px;padding:0 46px;border:1px solid var(--border-main,#cbd5e1);border-radius:10px;outline:0;background:var(--card-bg,#fff);color:var(--text-main,#0f172a);font-size:14px;transition:.2s; }
.dev-search-box input:focus { border-color:var(--brand,#2563eb);box-shadow:0 0 0 3px var(--brand-soft,#dbeafe); }
.dev-search-box button { position:absolute;top:50%;right:10px;display:none;width:30px;height:30px;border:0;border-radius:50%;background:var(--card-muted-bg,#f1f5f9);color:var(--text-muted,#64748b);transform:translateY(-50%); }
.dev-search-box button.show { display:block; }
.dev-filter-chips { display:flex;flex-wrap:wrap;gap:8px;margin-top:12px; }
.dev-filter-chips button { padding:7px 13px;border:1px solid var(--border-main,#dbe2ea);border-radius:999px;background:var(--card-bg,#fff);color:var(--text-muted,#64748b);font-size:13px;font-weight:600;transition:.2s; }
.dev-filter-chips button:hover,.dev-filter-chips button.active { border-color:var(--brand,#2563eb);background:var(--brand,#2563eb);color:#fff; }
.dev-directory-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:34px; }
.dev-directory-summary>div { display:flex;align-items:baseline;gap:10px;padding:18px 20px;border:1px solid var(--border-main,#e2e8f0);border-radius:12px;background:var(--card-bg,#fff); }
.dev-directory-summary strong { color:var(--brand,#2563eb);font-size:26px; }
.dev-directory-summary span { color:var(--text-muted,#64748b);font-size:13px; }
.dev-tool-group { margin-bottom:38px; }
.dev-tool-group[hidden] { display:none; }
.dev-group-heading,.dev-group-heading>div { display:flex;align-items:center; }
.dev-group-heading { justify-content:space-between;gap:16px;margin-bottom:16px; }
.dev-group-heading>div { gap:12px; }
.dev-group-heading h2 { margin:0 0 4px;color:var(--text-main,#0f172a);font-size:20px;font-weight:800; }
.dev-group-heading p { margin:0;color:var(--text-muted,#64748b);font-size:13px; }
.dev-group-heading>span { color:var(--text-faint,#94a3b8);font-size:12px;white-space:nowrap; }
.dev-group-icon,.dev-card-icon { display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff; }
.dev-group-icon { width:42px;height:42px;border-radius:12px;font-size:17px; }
.dev-card-icon { width:44px;height:44px;border-radius:12px;font-size:18px; }
.is-blue { background:linear-gradient(135deg,#60a5fa,#2563eb); }.is-cyan { background:linear-gradient(135deg,#22d3ee,#0891b2); }.is-green { background:linear-gradient(135deg,#34d399,#059669); }.is-orange { background:linear-gradient(135deg,#fbbf24,#ea580c); }.is-purple { background:linear-gradient(135deg,#c084fc,#7c3aed); }.is-indigo { background:linear-gradient(135deg,#818cf8,#4f46e5); }.is-yellow { background:linear-gradient(135deg,#facc15,#ca8a04); }.is-pink { background:linear-gradient(135deg,#f472b6,#db2777); }.is-red { background:linear-gradient(135deg,#fb7185,#dc2626); }.is-slate { background:linear-gradient(135deg,#94a3b8,#475569); }
.dev-tool-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.dev-tool-card { display:flex;align-items:center;gap:13px;min-height:92px;padding:16px;border:1px solid var(--border-main,#e2e8f0);border-radius:12px;background:var(--card-bg,#fff);box-shadow:0 3px 12px rgba(15,23,42,.035);transition:.2s; }
.dev-tool-card[hidden] { display:none; }
.dev-tool-card:hover { transform:translateY(-2px);border-color:var(--brand,#2563eb);box-shadow:0 12px 28px rgba(37,99,235,.11); }
.dev-tool-card>span:nth-child(2) { min-width:0;flex:1; }
.dev-tool-card strong { display:block;margin-bottom:5px;color:var(--text-main,#0f172a);font-size:15px; }
.dev-tool-card small { display:block;overflow:hidden;color:var(--text-muted,#64748b);font-size:12px;text-overflow:ellipsis;white-space:nowrap; }
.dev-tool-card em { display:inline-block;margin-top:7px;padding:2px 7px;border-radius:999px;background:var(--card-muted-bg,#f1f5f9);color:var(--text-faint,#64748b);font-size:10px;font-style:normal; }
.dev-tool-card>i { color:var(--text-faint,#94a3b8);transition:.2s; }.dev-tool-card:hover>i { color:var(--brand,#2563eb);transform:translateX(3px); }
.dev-empty-state { display:none;padding:60px 20px;text-align:center;color:var(--text-muted,#64748b); }.dev-empty-state.show { display:block; }.dev-empty-state i { display:block;margin-bottom:14px;color:var(--text-faint,#94a3b8);font-size:34px; }.dev-empty-state strong { display:block;color:var(--text-main,#0f172a);font-size:18px; }.dev-empty-state p { margin:8px 0 0; }
.dev-directory-info { display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:34px;margin-top:12px;padding:34px;border-radius:16px;background:linear-gradient(135deg,#eff6ff,#f8fafc 55%,#f0fdf4); }
.dev-info-copy h2 { margin:16px 0 10px;color:#0f172a;font-size:24px;font-weight:800; }.dev-info-copy>p { color:#475569;line-height:1.75; }.dev-info-copy ul { display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none; }.dev-info-copy li { color:#334155;font-size:13px; }.dev-info-copy li i { margin-right:8px;color:#16a34a; }
.dev-info-steps { display:grid;gap:10px; }.dev-info-steps>div { position:relative;padding:15px 16px 15px 58px;border:1px solid rgba(148,163,184,.28);border-radius:11px;background:rgba(255,255,255,.84); }.dev-info-steps span { position:absolute;top:16px;left:16px;color:#2563eb;font-size:12px;font-weight:800; }.dev-info-steps strong { color:#0f172a; }.dev-info-steps p { margin:4px 0 0;color:#64748b;font-size:12px; }
.dev-faq-section { margin-top:42px; }.dev-section-title { margin-bottom:18px;text-align:center; }.dev-section-title span { color:var(--brand,#2563eb);font-size:11px;font-weight:800;letter-spacing:1.6px; }.dev-section-title h2 { margin:5px 0 0;color:var(--text-main,#0f172a);font-size:23px;font-weight:800; }.dev-faq-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:14px; }.dev-faq-grid>div { padding:20px;border:1px solid var(--border-main,#e2e8f0);border-radius:12px;background:var(--card-bg,#fff); }.dev-faq-grid strong { color:var(--text-main,#0f172a); }.dev-faq-grid p { margin:8px 0 0;color:var(--text-muted,#64748b);font-size:13px;line-height:1.7; }

/* 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-base64encode-page .row>.col-md-6,.dev-base64decode-page .row>.col-md-6,.dev-htmlencode-page .row>.col-md-6,.dev-htmldecode-page .row>.col-md-6,.dev-urlencode-page .row>.col-md-6,.dev-urldecode-page .row>.col-md-6 { padding-left:7px;padding-right:7px; }
.dev-base64encode-page .row,.dev-base64decode-page .row,.dev-htmlencode-page .row,.dev-htmldecode-page .row,.dev-urlencode-page .row,.dev-urldecode-page .row { margin-left:-7px;margin-right:-7px; }
.dev-jsonformat-page .dev-textarea,.dev-sqlformat-page .dev-textarea,.dev-jsformat-page .dev-textarea,.dev-htmlformat-page .dev-textarea,.dev-cssformat-page .dev-textarea { min-height:330px; }
.dev-jsonvalidate-page .dev-textarea,.dev-markdownformat-page .dev-textarea,.dev-yamlformat-page .dev-textarea,.dev-xmlformat-page .dev-textarea { min-height:300px; }
.dev-randompassword-page #passResult,.dev-randomstring-page #strOutput,.dev-uuid-page #uuidOutput { border-color:var(--dev-accent-border)!important;background:var(--dev-accent-soft)!important;color:var(--dev-accent)!important; }
.dev-randompassword-page #passResult { height:62px!important;border-radius:10px;font-size:22px!important; }
.dev-randompassword-page input[type="range"] { accent-color:var(--dev-accent); }
.dev-randompassword-page .form-group>label { color:#334155;font-weight:600; }
.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)); }
.dev-hash-page .dev-code-output,.dev-md5-page .dev-code-output,.dev-sha256-page .dev-code-output { color:var(--dev-accent);font-weight:700;letter-spacing:.25px; }

@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);
}