:root{--bg:#0f172a;--panel:#111827;--text:#e5e7eb;--muted:#9ca3af;--border:#1f2937;--accent:#22c55e}
[data-theme="light"]{--bg:#f8fafc;--panel:#ffffff;--text:#1e293b;--muted:#64748b;--border:#e2e8f0;--accent:#22c55e}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"}
.app-header,.app-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.app-header h1{margin:0;font-size:16px;font-weight:600;color:var(--text)}
.header-left{display:flex;align-items:center;gap:8px}
.header-nav{display:flex;gap:0;align-items:center}
.nav-separator{color:var(--border);margin:0 8px;user-select:none}
.nav-link{padding:4px 8px;text-decoration:none;color:var(--muted);font-size:14px;transition:color .15s;font-weight:400}
.nav-link:hover{color:var(--text)}
.nav-link.active{color:var(--text);font-weight:500}
.header-right{display:flex;align-items:center;gap:12px}
.app-footer{border-top:1px solid var(--border);border-bottom:none;color:var(--muted)}
.actions{display:flex;gap:8px}
button{background:var(--panel);color:var(--text);border:1px solid var(--border);padding:8px 12px;border-radius:8px;cursor:pointer}
button:hover{border-color:var(--accent);color:var(--accent)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;height:calc(100vh - 120px)}
.pane{display:flex;flex-direction:column;border-right:1px solid var(--border)}
.pane:last-child{border-right:none}
.pane h2{margin:0;padding:10px 12px;color:var(--muted);border-bottom:1px solid var(--border)}
#editor,#input,#output{flex:1;background:var(--panel);color:var(--text);border:none;resize:none;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
#output{background:var(--bg)}
#preview{flex:1;overflow:auto;padding:16px}
#preview pre{background:#0b1220;padding:12px;border-radius:8px;overflow:auto}
[data-theme="light"] #preview pre{background:#f1f5f9}
#preview code{background:#0b1220;padding:2px 4px;border-radius:4px}
[data-theme="light"] #preview code{background:#f1f5f9}
#preview h1,#preview h2,#preview h3,#preview h4,#preview h5,#preview h6{margin:16px 0 8px}
#preview p{margin:8px 0}
#preview ul,#preview ol{padding-left:22px}
#preview blockquote{border-left:4px solid var(--border);margin:8px 0;padding-left:10px;color:var(--muted)}
#preview a{color:#60a5fa;text-decoration:none}
#preview a:hover{text-decoration:underline}
.pane-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border)}
.pane-header h2{margin:0;color:var(--muted)}
.pane-header.no-border{border-bottom:none}

/* 复制成功提示 */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);background:var(--panel);color:var(--text);border:1px solid var(--border);padding:10px 14px;border-radius:10px;opacity:0;transition:opacity .18s ease, transform .18s ease;box-shadow:0 6px 24px rgba(0,0,0,.25);z-index:9999}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 首页工具栅格 */
.tools{padding:24px}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.tool-card{display:block;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;text-decoration:none;color:var(--text)}
.tool-card:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.tool-title{font-weight:600;margin-bottom:8px}
.tool-desc{color:var(--muted);font-size:13px}

/* 主题切换开关 */
.theme-toggle{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--border);padding:6px 10px;border-radius:8px;cursor:pointer;transition:all .2s}
.theme-toggle:hover{border-color:var(--accent)}
.theme-icon{width:16px;height:16px;fill:var(--text)}

/* 语言选择器 */
.lang-selector{position:relative}
.lang-toggle{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--border);padding:6px 10px;border-radius:8px;cursor:pointer;transition:all .2s;font-size:13px}
.lang-toggle:hover{border-color:var(--accent)}
.current-lang{color:var(--text)}
.lang-dropdown{position:absolute;top:calc(100% + 4px);right:0;background:var(--panel);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);min-width:140px;max-height:300px;overflow-y:auto;display:none;z-index:1000}
.lang-dropdown.show{display:block}
.lang-option{padding:8px 12px;cursor:pointer;transition:background .15s;font-size:13px;color:var(--text)}
.lang-option:hover{background:var(--bg)}
.lang-option.active{color:var(--accent);font-weight:500}
.lang-option:first-child{border-radius:8px 8px 0 0}
.lang-option:last-child{border-radius:0 0 8px 8px}