*{margin:0;padding:0;box-sizing:border-box} :root{ --primary-color:#2563eb; --primary-dark:#1d4ed8; --success-color:#16a34a; --warning-color:#f59e0b; --danger-color:#ef4444; --text-primary:#0f172a; --text-secondary:#64748b; --border-color:rgba(15,23,42,.12); --bg:#f8fafc; --bg-elevated:#ffffff; --bg-soft:#f1f5f9; --bg-light:#e5e7eb; --shadow:0 10px 35px rgba(15,23,42,.12); --shadow-lg:0 18px 60px rgba(15,23,42,.16); --ring:0 0 0 3px rgba(37,99,235,.25); --radius:16px; --radius-sm:10px;
} body{ font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; background:#f8fafc; color:var(--text-primary); min-height:100vh;
} .container{ max-width:1400px; margin:0 auto; padding:28px 20px 40px;
} /* 顶部区域：偏 IDE/控制台 风格 */
.page-header{ margin-bottom:24px; padding:18px 18px 16px; border-radius:18px; background:#ffffff; border:1px solid rgba(148,163,184,.25); box-shadow:0 8px 30px rgba(15,23,42,.08);
} .header-main{ display:flex; align-items:center; gap:18px;
} .logo-block{ padding:10px; border-radius:14px; background:#0f172a; display:flex; align-items:center; justify-content:center;
} .title-block h1{ margin:0 0 6px; font-size:1.9rem; font-weight:720; letter-spacing:-.03em; color:#0f172a;
} .subtitle{ margin:0; font-size:.96rem; color:#64748b; max-width:640px;
} .meta-block{ margin-left:auto; display:flex; flex-direction:column; gap:6px; align-items:flex-end;
} .badge{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; background:radial-gradient(circle at 0 0,#22c55e,#16a34a); color:#022c22; box-shadow:0 0 0 1px rgba(34,197,94,.25),0 10px 30px rgba(22,163,74,.75);
} .badge-text{ font-size:.84rem; color:#64748b;
} /* 工具栏 */
.toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; padding:10px 14px; border-radius:14px; background:#ffffff; border:1px solid rgba(148,163,184,.45); box-shadow:0 10px 30px rgba(15,23,42,.06); flex-wrap:wrap; gap:10px;
} .toolbar-left,
.toolbar-right{ display:flex; align-items:center; flex-wrap:wrap; gap:8px;
} .btn{ position:relative; padding:8px 15px; border-radius:10px; border:1px solid transparent; font-size:.88rem; font-weight:550; cursor:pointer; display:inline-flex; align-items:center; gap:6px; color:#0f172a; background:#f9fafb; transition:background .18s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease;
} .btn .icon{ font-size:1rem;
} .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(15,23,42,.08); border-color:rgba(148,163,184,.9);
} .btn:active{ transform:translateY(0); box-shadow:none;
} .btn-primary{ background:linear-gradient(135deg,#2563eb,#22d3ee); border-color:rgba(96,165,250,.9); color:#eff6ff;
} .btn-primary:hover{ background:linear-gradient(135deg,#1d4ed8,#0ea5e9);
} .btn-secondary{ background:rgba(30,64,175,.85); border-color:rgba(129,140,248,.9);
} .btn-success{ background:linear-gradient(135deg,#16a34a,#22c55e); border-color:rgba(74,222,128,.9);
} .btn-danger{ background:linear-gradient(135deg,#b91c1c,#ef4444); border-color:rgba(248,113,113,.9);
} .btn-info{ background:linear-gradient(135deg,#0ea5e9,#22d3ee); border-color:rgba(56,189,248,.95);
} .btn-outline{ background:transparent; border-color:rgba(148,163,184,.85); color:#0f172a;
} .btn-outline:hover{ background:rgba(15,23,42,.85);
} /* 上传按钮在深色标题条上的可读性优化 */
.file-upload .btn-outline{ color:#e5e7eb; border-color:rgba(148,163,184,.85);
} .file-upload .btn-outline:hover{ color:#f9fafb; border-color:rgba(148,163,184,1);
} .select{ padding:7px 12px; border-radius:9px; border:1px solid rgba(148,163,184,.8); background:#ffffff; color:#0f172a; font-size:.86rem; outline:none;
} .select:focus-visible{ box-shadow:var(--ring); border-color:rgba(129,140,248,1);
} /* 主内容区域 */
.main-content{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:22px;
} .editor-section,
.result-section{ background:#ffffff; border-radius:18px; border:1px solid rgba(148,163,184,.35); box-shadow:0 16px 40px rgba(15,23,42,.06); overflow:hidden;
} .section-header{ padding:0 18px; border-bottom:1px solid rgba(148,163,184,.55); display:flex; align-items:center; justify-content:space-between; gap:10px; height:56px; background:#0f172a;
} .section-header h3{ margin:0; font-size:1rem; color:#e5e7eb; letter-spacing:.01em;
} .file-upload{ display:flex; align-items:center; flex-wrap:wrap; gap:10px;
} .drag-hint{ font-size:.78rem; color:#94a3b8;
} .editor-container{ position:relative; height:480px; background:var(--bg-soft);
} #yamlInput{ width:100%; height:100%; border:none; outline:0; background:transparent; color:var(--text-primary); font-family:Monaco,Menlo,"Ubuntu Mono",monospace; font-size:13px; line-height:1.55; padding:16px 18px 18px; resize:none;
} .CodeMirror{ height:100%!important; font-family:Monaco,Menlo,"Ubuntu Mono",monospace; font-size:13px; line-height:1.55;
} .result-container{ height:480px; display:flex; flex-direction:column; overflow:auto; background:var(--bg-soft);
} .output-area{ flex:1; min-height:0; padding:16px 18px 18px; font-family:Monaco,Menlo,"Ubuntu Mono",monospace; font-size:13px; line-height:1.55; color:var(--text-primary); white-space:pre-wrap; word-wrap:break-word;
} .status-indicator{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:#e5e7eb;
} .status-icon{ width:11px; height:11px; border-radius:999px; box-shadow:0 0 0 1px rgba(15,23,42,.9),0 0 12px rgba(52,211,153,.8);
} .status-icon.ready{ background:#22c55e;
} .status-icon.error{ background:#ef4444; box-shadow:0 0 0 1px rgba(15,23,42,.9),0 0 12px rgba(248,113,113,.95);
} .status-icon.processing{ background:#facc15; animation:statusPulse 1.5s infinite;
} @keyframes statusPulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.25);opacity:.55}
} .error-panel{ padding:14px 18px 18px; background:rgba(185,28,28,.1); border-top:1px solid rgba(248,113,113,.65); border-left:3px solid rgba(248,113,113,.9); max-height:260px; overflow-y:auto;
} .error-panel.hidden{ display:none!important;
} .error-panel h4{ margin:0 0 8px; font-size:.96rem; color:#fecaca;
} .error-intro{ margin:0 0 8px; font-size:.86rem; font-weight:500; color:#fee2e2;
} .error-item{ background:rgba(15,23,42,.9); border:1px solid rgba(248,113,113,.7); border-radius:10px; padding:10px 12px; margin-bottom:8px; color:#fecaca; font-size:.82rem;
} .error-message{ margin-bottom:4px; font-weight:600; color:#fee2e2;
} .error-location{ margin-bottom:4px; color:#fca5a5; font-weight:500;
} .error-suggestion{ margin-top:6px; padding:6px 8px; background:rgba(250,250,250,.02); border-radius:8px; border:1px dashed rgba(252,211,77,.7); color:#fef9c3; font-size:.78rem;
} .fix-actions{ margin-top:8px; display:flex; flex-wrap:wrap; gap:6px;
} .btn-sm{ padding:5px 10px; font-size:.78rem;
} .manual-fix-guide{ margin:8px 0; padding:8px; background:rgba(15,23,42,.9); border-radius:8px; border:1px solid rgba(148,163,184,.6);
} .manual-fix-guide ul{ margin:0; padding-left:18px;
} .manual-fix-guide li{ margin:2px 0; font-size:.78rem; color:#e5e7eb;
} .diff-content{ margin:6px 0; padding:8px; background:rgba(15,23,42,.95); border-radius:8px; border:1px solid rgba(148,163,184,.7); font-family:Monaco,Menlo,"Ubuntu Mono",monospace; font-size:.78rem; max-height:180px; overflow-y:auto;
} .diff-line{ margin:1px 0;
} .diff-original{ color:#fecaca;
} .diff-fixed{ color:#bbf7d0;
} .error-line{ background:rgba(248,113,113,.15)!important; border-left:2px solid rgba(248,113,113,.95)!important;
} .error-char{ background:#ef4444!important; color:#fff!important; border-radius:3px; padding:1px 2px;
} /* 信息面板 & 底部信息（更偏开发者风格） */
.info-section{ max-width:1400px; margin:18px auto 0; padding:0 4px 32px;
} .info-grid{ display:grid; grid-template-columns:1.05fr 1.05fr .9fr; gap:18px;
} .info-card{ background:#ffffff; border-radius:18px; border:1px solid rgba(148,163,184,.35); box-shadow:0 12px 38px rgba(15,23,42,.06); padding:16px 18px 16px;
} .info-card h4{ margin:0 0 8px; font-size:.98rem; font-weight:600; color:#0f172a;
} .info-card ul{ margin:0; padding-left:18px; font-size:.86rem; color:#64748b;
} .info-card li{ margin-bottom:4px;
} .info-card code{ font-family:Monaco,Menlo,"Ubuntu Mono",monospace; font-size:.84rem; padding:1px 4px; border-radius:4px; background:var(--bg-soft); border:1px solid rgba(148,163,184,.35);
} .info-card.info-meta ul{ list-style-type:none; padding-left:0;
} .info-card.info-meta li{ position:relative; padding-left:16px;
} .info-card.info-meta li:before{ content:""; position:absolute; left:4px; top:10px; width:4px; height:4px; border-radius:999px; background:#38bdf8;
} .info-footer{ margin-top:18px; padding:10px 14px 0; border-top:1px solid rgba(148,163,184,.35); display:flex; align-items:flex-start; justify-content:space-between; gap:16px; font-size:.82rem; color:#6b7280;
} .info-footer-title{ font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#4b5563; margin-bottom:6px;
} .info-footer-label{ font-size:.8rem; font-weight:500; color:#9ca3af; margin-bottom:4px;
} .info-footer-left,
.info-footer-right{ display:flex; flex-direction:column; gap:4px;
} .info-footer-links{ display:flex; flex-wrap:wrap; gap:6px;
} .info-footer-links a{ display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; border:1px solid rgba(148,163,184,.6); background:#f9fafb; color:#4b5563; text-decoration:none; font-size:.78rem; transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
} .info-footer-links a:hover{ background:#2563eb; border-color:#1d4ed8; color:#eff6ff; transform:translateY(-1px);
} @media (max-width:1024px){ .info-grid{ grid-template-columns:1fr 1fr; }
} @media (max-width:768px){ .info-grid{ grid-template-columns:1fr; } .info-section{ padding-bottom:24px; } .info-footer{ flex-direction:column; align-items:flex-start; }
} /* 弹窗 & 通知 */
.modal{ position:fixed; inset:0; background:rgba(15,23,42,.35); display:flex; align-items:center; justify-content:center; z-index:1000;
} .modal-content{ background:#ffffff; border-radius:16px; width:92%; max-width:480px; box-shadow:0 20px 60px rgba(15,23,42,.12); border:1px solid rgba(148,163,184,.45);
} .modal-header{ padding:14px 16px 10px; border-bottom:1px solid rgba(51,65,85,.9); display:flex; align-items:center; justify-content:space-between;
} .modal-header h3{ margin:0; font-size:1rem; color:#0f172a;
} .close-btn{ background:transparent; border:none; font-size:1.2rem; cursor:pointer; color:#94a3b8;
} .modal-body{ padding:12px 16px 16px;
} .share-options{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;
} .share-link{ display:flex; gap:8px;
} .share-link input{ flex:1; padding:6px 8px; border-radius:8px; border:1px solid rgba(148,163,184,.8); background:#f9fafb; color:#0f172a; font-size:.86rem;
} .notification{ position:fixed; top:16px; right:16px; padding:10px 14px; border-radius:999px; color:#e5e7eb; font-size:.86rem; font-weight:500; transform:translateX(120%); transition:transform .25s ease; z-index:1100;
} .notification.show{ transform:translateX(0);
} .notification.success{ background:linear-gradient(135deg,#16a34a,#22c55e);
} .notification.error{ background:linear-gradient(135deg,#b91c1c,#ef4444);
} .notification.info{ background:linear-gradient(135deg,#0ea5e9,#22d3ee);
} .hidden{ display:none!important;
} @media (max-width:900px){ .header-main{ flex-direction:row; align-items:flex-start; } .meta-block{ align-items:flex-start; } .page-header{ padding:16px 14px; } .title-block h1{ font-size:1.65rem; }
} @media (max-width:768px){ .main-content{ grid-template-columns:1fr; } .toolbar{ flex-direction:column; align-items:flex-start; } .info-panel{ grid-template-columns:1fr; } .editor-container, .result-container{ height:420px; }
} :root{ --primary-color:#2563eb; --primary-dark:#1d4ed8; --success-color:#16a34a; --warning-color:#f59e0b; --danger-color:#ef4444; --text-primary:#0f172a; --text-secondary:#64748b; --border-color:rgba(15,23,42,.12); --bg:#f8fafc; --bg-elevated:#ffffff; --bg-soft:#f1f5f9; --bg-light:#e5e7eb; --shadow:0 10px 35px rgba(15,23,42,.12); --shadow-lg:0 18px 60px rgba(15,23,42,.16); --ring:0 0 0 3px rgba(37,99,235,.25); --radius:16px; --radius-sm:10px;
} body{ font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; background:#f8fafc; color:var(--text-primary); min-height:100vh;
} .container{ max-width:1400px; margin:0 auto; padding:28px 20px 40px;
} /* 顶部区域：偏 IDE/控制台 风格 */
.page-header{ margin-bottom:24px; padding:18px 18px 16px; border-radius:18px; background:#ffffff; border:1px solid rgba(148,163,184,.25); box-shadow:0 8px 30px rgba(15,23,42,.08);
} .header-main{ display:flex; align-items:center; gap:18px;
} .logo-block{ padding:10px; border-radius:14px; background:#0f172a; display:flex; align-items:center; justify-content:center;
} .title-block h1{ margin:0 0 6px; font-size:1.9rem; font-weight:720; letter-spacing:-.03em; color:#0f172a;
} .subtitle{ margin:0; font-size:.96rem; color:#64748b; max-width:640px;
} .meta-block{ margin-left:auto; display:flex; flex-direction:column; gap:6px; align-items:flex-end;
} .badge{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; background:radial-gradient(circle at 0 0,#22c55e,#16a34a); color:#022c22; box-shadow:0 0 0 1px rgba(34,197,94,.25),0 10px 30px rgba(22,163,74,.75);
} .badge-text{ font-size:.84rem; color:#64748b;
} /* 工具栏 */
.toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; padding:10px 14px; border-radius:14px; background:#ffffff; border:1px solid rgba(148,163,184,.45); box-shadow:0 10px 30px rgba(15,23,42,.06); flex-wrap:wrap; gap:10px;
} .toolbar-left,
.toolbar-right{ display:flex; align-items:center; flex-wrap:wrap; gap:8px;
} .btn{ position:relative; padding:8px 15px; border-radius:10px; border:1px solid transparent; font-size:.88rem; font-weight:550; cursor:pointer; display:inline-flex; align-items:center; gap:6px; color:#0f172a; background:#f9fafb; transition:background .18s ease,transform .18s ease,box-shadow .18s ease,border-color .18s ease;
} .btn .icon{ font-size:1rem;
} .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(15,23,42,.08); border-color:rgba(148,163,184,.9);
} .btn:active{ transform:translateY(0); box-shadow:none;
} .btn-primary{ background:linear-gradient(135deg,#2563eb,#22d3ee); border-color:rgba(96,165,250,.9); color:#eff6ff;
} .btn-primary:hover{ background:linear-gradient(135deg,#1d4ed8,#0ea5e9);
} .btn-secondary{ background:rgba(30,64,175,.85); border-color:rgba(129,140,248,.9);
} .btn-success{ background:linear-gradient(135deg,#16a34a,#22c55e); border-color:rgba(74,222,128,.9);
} .btn-danger{ background:linear-gradient(135deg,#b91c1c,#ef4444); border-color:rgba(248,113,113,.9);
} .btn-info{ background:linear-gradient(135deg,#0ea5e9,#22d3ee); border-color:rgba(56,189,248,.95);
} .btn-outline{ background:transparent; border-color:rgba(148,163,184,.85); color:#0f172a;
} .btn-outline:hover{ background:rgba(15,23,42,.85);
} .select{ padding:7px 12px; border-radius:9px; border:1px solid rgba(148,163,184,.8); background:#ffffff; color:#0f172a; font-size:.86rem; outline:none;
} .select:focus-visible{ box-shadow:var(--ring); border-color:rgba(129,140,248,1);
} /* 主内容区域 */
.main-content{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:22px;
} .editor-section,
.result-section{ background:#ffffff; border-radius:18px; border:1px solid rgba(148,163,184,.35); box-shadow:0 16px 40px rgba(15,23,42,.06); overflow:hidden;
} .section-header{ padding:14px 18px 12px; border-bottom:1px solid rgba(51,65,85,.9); display:flex; align-items:center; justify-content:space-between; gap:10px;
} .section-header h3{ margin:0; font-size:1rem; color:#0f172a; letter-spacing:.01em;
} .file-upload{ display:flex; align-items:center; flex-wrap:wrap; gap:10px;
} .drag-hint{ font-size:.78rem; color:#94a3b8;
} .editor-container{ position:relative; height:480px; background:var(--bg-soft);
} #yamlInput{ width:100%; height:100%; border:none; outline:0; background:transparent; color:var(--text-primary); font-family:Monaco,Menlo,"Ubuntu Mono",monospace; font-size:13px; line-height:1.55; padding:16px 18px 18px; resize:none;
} .CodeMirror{ height:100%!important; font-family:Monaco,Menlo,"Ubuntu Mono",monospace; font-size:13px; line-height:1.55;
} .result-container{ height:480px; display:flex; flex-direction:column; overflow:auto; background:var(--bg-soft);
} .output-area{ flex:1; min-height:0; padding:16px 18px 18px; font-family:Monaco,Menlo,"Ubuntu Mono",monospace; font-size:13px; line-height:1.55; color:var(--text-primary); white-space:pre-wrap; word-wrap:break-word;
} .status-indicator{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:#e5e7eb;
} .status-icon{ width:11px; height:11px; border-radius:999px; box-shadow:0 0 0 1px rgba(15,23,42,.9),0 0 12px rgba(52,211,153,.8);
} .status-icon.ready{ background:#22c55e;
} .status-icon.error{ background:#ef4444; box-shadow:0 0 0 1px rgba(15,23,42,.9),0 0 12px rgba(248,113,113,.95);
} .status-icon.processing{ background:#facc15; animation:statusPulse 1.5s infinite;
} @keyframes statusPulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.25);opacity:.55}
} .error-panel{ padding:14px 18px 18px; background:rgba(185,28,28,.1); border-top:1px solid rgba(248,113,113,.65); border-left:3px solid rgba(248,113,113,.9); max-height:260px; overflow-y:auto;
} .error-panel.hidden{ display:none!important;
} .error-panel h4{ margin:0 0 8px; font-size:.96rem; color:#fecaca;
} .error-intro{ margin:0 0 8px; font-size:.8rem; color:#fecaca;
} .error-item{ background:rgba(15,23,42,.9); border:1px solid rgba(248,113,113,.7); border-radius:10px; padding:10px 12px; margin-bottom:8px; color:#fecaca; font-size:.82rem;
} .error-message{ margin-bottom:4px;
} .error-location{ margin-bottom:4px; color:#fca5a5; font-weight:500;
} .error-suggestion{ margin-top:6px; padding:6px 8px; background:rgba(250,250,250,.02); border-radius:8px; border:1px dashed rgba(252,211,77,.7); color:#fef9c3; font-size:.78rem;
} .fix-actions{ margin-top:8px; display:flex; flex-wrap:wrap; gap:6px;
} .btn-sm{ padding:5px 10px; font-size:.78rem;
} .manual-fix-guide{ margin:8px 0; padding:8px; background:rgba(15,23,42,.9); border-radius:8px; border:1px solid rgba(148,163,184,.6);
} .manual-fix-guide ul{ margin:0; padding-left:18px;
} .manual-fix-guide li{ margin:2px 0; font-size:.78rem; color:#e5e7eb;
} .diff-content{ margin:6px 0; padding:8px; background:rgba(15,23,42,.95); border-radius:8px; border:1px solid rgba(148,163,184,.7); font-family:Monaco,Menlo,"Ubuntu Mono",monospace; font-size:.78rem; max-height:180px; overflow-y:auto;
} .diff-line{ margin:1px 0;
} .diff-original{ color:#fecaca;
} .diff-fixed{ color:#bbf7d0;
} .error-line{ background:rgba(248,113,113,.15)!important; border-left:2px solid rgba(248,113,113,.95)!important;
} .error-char{ background:#ef4444!important; color:#fff!important; border-radius:3px; padding:1px 2px;
} /* 信息面板 & 深度内容 */
.info-panel{ display:grid; grid-template-columns:1fr 1fr; gap:16px;
} .info-item{ background:#ffffff; border-radius:16px; border:1px solid rgba(148,163,184,.35); box-shadow:0 14px 36px rgba(15,23,42,.05); padding:16px 18px 18px;
} .info-item h4{ margin:0 0 10px; font-size:.98rem; color:#0f172a;
} .info-item ul{ list-style:none; padding:0; margin:0;
} .info-item li{ position:relative; padding:6px 0 6px 16px; font-size:.84rem; color:#64748b;
} .info-item li:before{ content:""; position:absolute; left:4px; top:12px; width:4px; height:4px; border-radius:999px; background:#38bdf8;
} .usage-section{ margin:34px auto 0; max-width:1400px; padding:0 4px 10px;
} .usage-container{ background:#ffffff; border-radius:18px; border:1px solid rgba(148,163,184,.45); box-shadow:0 20px 60px rgba(15,23,42,.08); padding:18px 20px 22px; color:#0f172a;
} .usage-container h2,
.usage-container h3{ font-weight:620; letter-spacing:.01em; margin-bottom:10px;
} .usage-container h2{ font-size:1.25rem;
} .usage-container h3{ font-size:1.05rem; margin-top:12px;
} .usage-container p{ font-size:.9rem; color:#64748b; margin:6px 0 10px;
} .usage-container ul,
.usage-container ol{ padding-left:20px; margin:4px 0 10px; font-size:.88rem; color:#64748b;
} .usage-container li{ margin-bottom:3px;
} .usage-container code{ font-family:Monaco,Menlo,"Ubuntu Mono",monospace; font-size:.84rem; padding:1px 4px; border-radius:4px; background:var(--bg-soft); border:1px solid rgba(148,163,184,.4);
} .usage-container pre{ background:var(--bg-soft); border-radius:10px; padding:10px 12px; border:1px solid rgba(148,163,184,.45); overflow-x:auto; margin:6px 0 10px;
} .usage-container pre code{ border:none; background:transparent;
} /* 弹窗 & 通知 */
.modal{ position:fixed; inset:0; background:rgba(15,23,42,.35); display:flex; align-items:center; justify-content:center; z-index:1000;
} .modal-content{ background:#ffffff; border-radius:16px; width:92%; max-width:480px; box-shadow:0 20px 60px rgba(15,23,42,.12); border:1px solid rgba(148,163,184,.45);
} .modal-header{ padding:14px 16px 10px; border-bottom:1px solid rgba(51,65,85,.9); display:flex; align-items:center; justify-content:space-between;
} .modal-header h3{ margin:0; font-size:1rem; color:#0f172a;
} .close-btn{ background:transparent; border:none; font-size:1.2rem; cursor:pointer; color:#94a3b8;
} .modal-body{ padding:12px 16px 16px;
} .share-options{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;
} .share-link{ display:flex; gap:8px;
} .share-link input{ flex:1; padding:6px 8px; border-radius:8px; border:1px solid rgba(148,163,184,.8); background:#f9fafb; color:#0f172a; font-size:.86rem;
} .notification{ position:fixed; top:16px; right:16px; padding:10px 14px; border-radius:999px; color:#e5e7eb; font-size:.86rem; font-weight:500; transform:translateX(120%); transition:transform .25s ease; z-index:1100;
} .notification.show{ transform:translateX(0);
} .notification.success{ background:linear-gradient(135deg,#16a34a,#22c55e);
} .notification.error{ background:linear-gradient(135deg,#b91c1c,#ef4444);
} .notification.info{ background:linear-gradient(135deg,#0ea5e9,#22d3ee);
} .hidden{ display:none!important;
} @media (max-width:900px){ .header-main{ flex-direction:row; align-items:flex-start; } .meta-block{ align-items:flex-start; } .page-header{ padding:16px 14px; } .title-block h1{ font-size:1.65rem; }
} @media (max-width:768px){ .main-content{ grid-template-columns:1fr; } .toolbar{ flex-direction:column; align-items:flex-start; } .info-panel{ grid-template-columns:1fr; } .editor-container, .result-container{ height:420px; }
}