:root {
    --bg: #f4f2ef;
    --card-bg: #ffffff;
    --primary: #f4796e;
    --primary-hover: #e8685d;
    --primary-light: #fff5f4;
    --text: #1e1e24;
    --text-secondary: #5a5a66;
    --text-muted: #8e8e98;
    --border: #e8e5e2;
    --border-light: #f0edeb;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    --shadow: 0 4px 16px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
*:focus, *:focus-visible { outline: none !important; }
html { font-size:16px; -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--text); min-height:100vh; display:flex; flex-direction:column; align-items:center; line-height:1.6; background-attachment:fixed; }
.top-accent { width:100%; height:4px; background:linear-gradient(90deg, #f4796e 0%, #f5a88d 30%, #5b8def 60%, #4caf84 100%); position:fixed; top:0; left:0; z-index:100; }
.main-container { width:100%; max-width:720px; padding:36px 20px 48px; margin-top:4px; flex:1; }
.header { text-align:center; margin-bottom:32px; padding-top:20px; }
.header .logo-icon { display:inline-block; width:56px; height:56px; background:linear-gradient(135deg, #f4796e 0%, #f5a88d 100%); border-radius:16px; margin-bottom:14px; position:relative; box-shadow:0 8px 24px rgba(244,121,110,0.25); }
.header .logo-icon::after { content:'💬'; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:26px; line-height:1; }
.header .brand-name { font-size:0.85rem; font-weight:500; color:var(--primary); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:6px; }
.header h1 { font-size:1.75rem; font-weight:700; color:var(--text); letter-spacing:0.02em; }
.header .highlight { background:linear-gradient(135deg, #f4796e 0%, #e8685d 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.header .subtitle { font-size:0.9rem; color:var(--text-muted); margin-top:6px; }
.card { background:var(--card-bg); border-radius:var(--radius-xl); padding:28px 30px; margin-bottom:20px; box-shadow:var(--shadow); border:1px solid var(--border-light); transition:var(--transition); }
.card:hover { box-shadow:var(--shadow-lg); }
.card-header { font-size:1.05rem; font-weight:600; color:var(--text); margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.card-header .dot { width:8px; height:8px; border-radius:50%; background:var(--primary); flex-shrink:0; }
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:0.9rem; font-weight:600; color:var(--text); margin-bottom:8px; }
.form-label .required { color:var(--primary); margin-left:3px; }
.form-input { width:100%; padding:13px 16px; font-size:0.95rem; font-family:var(--font); border:2px solid var(--border); border-radius:var(--radius); background:#fafaf9; color:var(--text); transition:var(--transition); -webkit-appearance:none; }
.form-input::placeholder { color:#c0bfbb; }
.form-input:hover { border-color:#d5d2ce; background:#fdfdfc; }
.form-input:focus { border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px rgba(244,121,110,0.06); }
.type-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.type-card { position:relative; padding:18px 14px; border-radius:var(--radius); border:2px solid var(--border); cursor:pointer; text-align:center; transition:var(--transition); background:#fafaf9; user-select:none; }
.type-card:hover { border-color:#d5d2ce; transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.type-card:active { transform:scale(0.97); }
.type-card .type-icon { font-size:1.8rem; margin-bottom:6px; display:block; }
.type-card .type-name { font-size:0.85rem; font-weight:600; color:var(--text-secondary); }
.type-card.bug { --tc:#f4796e; --tbg:#fff5f4; --tbd:#fdd8d5; }
.type-card.feature { --tc:#5b8def; --tbg:#f4f8ff; --tbd:#d4e2fc; }
.type-card.suggest { --tc:#4caf84; --tbg:#f4fcf7; --tbd:#c8eed8; }
.type-card.active { border-color:var(--tc); background:var(--tbg); }
.type-card.active .type-name { color:var(--tc); }
.editor-wrapper { border:2px solid var(--border); border-radius:var(--radius); overflow:visible; transition:var(--transition); background:#fafaf9; }
.editor-wrapper:focus-within { border-color:var(--primary); box-shadow:0 0 0 4px rgba(244,121,110,0.06); background:#fff; }
.editor-toolbar { display:flex; flex-wrap:wrap; gap:3px; padding:8px 10px; background:#fdfdfc; border-bottom:1px solid var(--border-light); align-items:center; border-radius:calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0; }
.toolbar-divider { width:1px; height:20px; background:var(--border); margin:0 4px; flex-shrink:0; }
.tool-btn { width:34px; height:34px; border-radius:7px; border:none; background:transparent; cursor:pointer; font-size:0.95rem; display:flex; align-items:center; justify-content:center; transition:var(--transition); color:var(--text-secondary); flex-shrink:0; position:relative; }
.tool-btn:hover { background:#f3f1ee; color:var(--text); }
.tool-btn:active { background:#e8e5e1; transform:scale(0.93); }
.color-presets { display:flex; gap:4px; align-items:center; }
.color-preset { width:20px; height:20px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:var(--transition); }
.color-preset:hover { transform:scale(1.2); }
.editor-content { min-height:200px; max-height:500px; padding:16px; overflow-y:auto; font-size:0.95rem; line-height:1.7; color:var(--text); word-break:break-word; cursor:text; background:#fff; border-radius:0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px); }
.editor-content:empty::before { content:'请在此详细描述您的反馈内容...'; color:#c0bfbb; pointer-events:none; }
.editor-content img { max-width:100%; border-radius:8px; margin:8px 0; box-shadow:var(--shadow-sm); }
.emoji-toggle-wrapper { position:relative; display:inline-flex; align-items:center; }
.emoji-panel { display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:1px solid var(--border); padding:12px; z-index:200; width:300px; max-width:90vw; grid-template-columns:repeat(8,1fr); gap:4px; margin-bottom:8px; pointer-events:none; }
.emoji-panel.show { display:grid; pointer-events:auto; }
.emoji-item { width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; cursor:pointer; border-radius:6px; transition:var(--transition); border:none; background:transparent; }
.emoji-item:hover { background:#f5f3f0; transform:scale(1.2); }
.submit-btn { width:100%; padding:15px 28px; font-size:1rem; font-weight:600; font-family:var(--font); letter-spacing:0.04em; border:none; border-radius:var(--radius); background:linear-gradient(135deg, #f4796e 0%, #f06055 100%); color:#fff; cursor:pointer; transition:var(--transition); box-shadow:0 6px 20px rgba(244,121,110,0.3); }
.submit-btn:hover { background:linear-gradient(135deg, #f5857b 0%, #e8685d 100%); box-shadow:0 8px 26px rgba(244,121,110,0.38); transform:translateY(-1px); }
.submit-btn:active { transform:scale(0.97); }
.submit-btn:disabled { opacity:0.6; cursor:not-allowed; }
.query-row { display:flex; gap:10px; align-items:center; }
.query-btn { padding:13px 22px; font-size:0.9rem; font-weight:600; font-family:var(--font); border:2px solid var(--border); border-radius:var(--radius); background:#fff; color:var(--text-secondary); cursor:pointer; white-space:nowrap; transition:var(--transition); }
.query-btn:hover { border-color:#c5c2be; color:var(--text); background:#fdfdfc; }
.result-area { display:none; margin-top:18px; padding:20px 22px; background:#fafdf9; border-radius:var(--radius); border:1px solid #d8ead5; animation:fadeSlideIn 0.35s ease-out; }
.result-area.show { display:block; }
@keyframes fadeSlideIn { from{opacity:0; transform:translateY(-12px);} to{opacity:1; transform:translateY(0);} }
.result-query-code { display:inline-block; font-size:1.5rem; font-weight:700; letter-spacing:0.08em; color:var(--primary); background:#fff; padding:8px 18px; border-radius:10px; border:2px dashed #fdd8d5; margin:8px 0; font-family:'SF Mono','Consolas','Monaco','Courier New',monospace; }
.overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(30,30,36,0.45); z-index:500; justify-content:center; align-items:center; }
.overlay.show { display:flex; }
.success-modal { background:#fff; border-radius:var(--radius-xl); padding:32px 28px 26px; text-align:center; max-width:420px; width:90%; box-shadow:var(--shadow-lg); animation:popIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popIn { from{opacity:0; transform:scale(0.85) translateY(20px);} to{opacity:1; transform:scale(1) translateY(0);} }
.success-icon { width:64px; height:64px; border-radius:50%; background:#e8f7ef; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-size:2rem; }
.query-code-display { font-size:1.6rem; font-weight:700; letter-spacing:0.1em; color:var(--primary); background:#fff5f4; padding:10px 20px; border-radius:12px; display:inline-block; margin:14px 0; font-family:'SF Mono','Consolas','Monaco','Courier New',monospace; border:2px dashed #fdd8d5; cursor:pointer; }
.close-modal-btn { margin-top:12px; padding:11px 32px; font-size:0.9rem; font-weight:600; font-family:var(--font); border:none; border-radius:25px; background:var(--primary); color:#fff; cursor:pointer; transition:var(--transition); }
.close-modal-btn:hover { background:var(--primary-hover); }
.toast { position:fixed; top:24px; left:50%; transform:translateX(-50%); background:#1e1e24; color:#fff; padding:12px 22px; border-radius:25px; font-size:0.85rem; font-weight:500; z-index:999; pointer-events:none; opacity:0; transition:opacity 0.3s; box-shadow:0 8px 24px rgba(0,0,0,0.2); }
.toast.show { opacity:1; }
.footer { text-align:center; padding:20px; color:var(--text-muted); font-size:0.82rem; width:100%; max-width:720px; }
.footer a { color:var(--primary); text-decoration:none; font-weight:500; }
.divider-dot { display:inline-block; width:4px; height:4px; border-radius:50%; background:#d5d2ce; margin:0 8px; vertical-align:middle; }
.result-reply-bubble { margin:10px 0 8px; padding:14px 18px; background:linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%); border-radius:var(--radius); border-left:4px solid #5b8def; box-shadow:0 2px 8px rgba(91,141,239,0.08); }
.result-reply-bubble .reply-meta { font-size:0.8rem; color:var(--text-muted); margin-bottom:6px; font-weight:600; }
.result-reply-bubble .reply-content { font-size:0.95rem; line-height:1.7; color:var(--text); background:#fff; padding:10px 14px; border-radius:8px; }
.status-pending,.status-processing { color:#f4796e !important; font-weight:600; }
.status-replied { color:#4caf84 !important; font-weight:600; }
@media (max-width:768px) {
    .main-container { padding:20px 14px 36px; }
    .card { padding:20px 16px; border-radius:var(--radius-lg); }
    .header h1 { font-size:1.35rem; }
    .type-selector { grid-template-columns:1fr; gap:8px; }
    .type-card { padding:14px 16px; display:flex; align-items:center; gap:12px; text-align:left; }
    .type-card .type-icon { font-size:1.5rem; margin-bottom:0; }
    .query-row { flex-direction:column; }
    .query-btn { width:100%; }
    .editor-content { min-height:160px; }
}