.app-container{max-width:1200px;width:100%;background:#fff;border-radius:6px;transition:all .2s ease;margin-top:20px}
.app-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px 24px;margin-bottom:28px;padding-bottom:20px;border-bottom:2px solid #eef2f6}
.app-header .logo-area{display:flex;align-items:center;gap:14px}
.app-header .logo-icon{width:44px;height:44px;background:linear-gradient(145deg,#2563eb,#1d4ed8);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;box-shadow:0 6px 14px rgba(37,99,235,.3)}
.app-header h1{font-size:26px;font-weight:700;letter-spacing:-.3px;background:linear-gradient(135deg,#0b1e3a,#1e3a6f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.app-header .header-tag{font-size:14px;color:#64748b;background:#f1f5f9;padding:6px 16px;border-radius:30px;font-weight:500;letter-spacing:.2px;border:1px solid #e2e8f0}
.tab-nav{display:flex;flex-wrap:wrap;margin-bottom:32px;background:#f8fafc;padding:6px;border-radius:18px;border:1px solid #eef2f6}
.tab-btn{flex:1 0 auto;min-width:96px;padding:12px 18px;border:none;background:0 0;border-radius:14px;font-size:15px;font-weight:600;color:#64748b;cursor:pointer;transition:all .25s ease;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;letter-spacing:.2px}
.tab-btn .tab-icon{font-size:18px;line-height:1}
.tab-btn:hover{background:#eef2f6;color:#1e293b}
.tab-btn.active{background:#fff;color:#1d4ed8;box-shadow:0 4px 12px rgba(37,99,235,.15);border:1px solid rgba(37,99,235,.15)}
.tab-btn.active .tab-icon{transform:scale(1.05)}
.tab-panel{display:none;animation:fadeUp .35s ease forwards}
.tab-panel.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:translateY(0)}
}
.panel-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.panel-header .panel-icon{font-size:28px}
.panel-header h2{font-size:22px;font-weight:700;color:#0b1e3a;letter-spacing:-.2px}
.panel-header .panel-count{margin-left:auto;font-size:14px;color:#94a3b8;background:#f1f5f9;padding:4px 14px;border-radius:30px;font-weight:500}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fafcff;border:1px solid #eef2f6;border-radius:16px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.faq-item:hover{border-color:#d0d9e8;box-shadow:0 2px 8px rgba(0,0,0,.03)}
.faq-item.open{border-color:#b3c9f0;box-shadow:0 4px 16px rgba(37,99,235,.06)}
.faq-question{display:flex;align-items:center;gap:14px;padding:18px 22px;cursor:pointer;user-select:none;transition:background .15s ease;background:0 0;border:none;width:100%;text-align:left;font-family:inherit;font-size:inherit;line-height:1.4;color:#1e293b}
.faq-question:hover{background:#f2f6fd}
.faq-question .q-marker{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#eef4ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;transition:all .2s ease}
.faq-item.open .faq-question .q-marker{background:#2563eb;color:#fff}
.faq-question .q-text{flex:1;font-weight:600;font-size:16px;color:#0b1e3a;transition:color .2s ease}
.faq-item.open .faq-question .q-text{color:#1d4ed8}
.faq-question .q-toggle{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:300;color:#94a3b8;transition:all .3s ease;line-height:1}
.faq-item.open .faq-question .q-toggle{background:#eef4ff;color:#2563eb;transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.33, 1, .68, 1),padding .3s ease,opacity .3s ease;opacity:0;padding:0 22px;color:#475569;line-height:1.7;font-size:15px}
.faq-item.open .faq-answer{max-height:400px;opacity:1;padding:0 22px 22px 22px}
.faq-answer p{margin:0}
.faq-answer .answer-meta{display:inline-block;margin-top:10px;font-size:13px;color:#94a3b8;background:#f8fafc;padding:2px 14px;border-radius:30px;border:1px solid #eef2f6}
@media (max-width:900px){.app-container{padding:24px 20px 3px;border-radius:24px}
.app-header h1{font-size:22px}
.tab-btn{min-width:72px;padding:10px 14px;font-size:14px}
.tab-btn .tab-icon{font-size:16px}
}
@media (max-width:640px){body{padding:12px}
.app-container{padding:16px 14px 20px;border-radius:18px}
.app-header{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:18px;padding-bottom:14px}
.app-header h1{font-size:20px}
.app-header .header-tag{font-size:12px;padding:4px 12px}
.tab-nav{gap:4px;padding:4px;border-radius:14px;margin-bottom:20px}
.tab-btn{min-width:52px;padding:8px 10px;font-size:12px;border-radius:10px;gap:4px;flex:1 1 0}
.tab-btn .tab-icon{font-size:14px}
.tab-btn .tab-label{font-size:11px}
.panel-header h2{font-size:18px}
.panel-header .panel-icon{font-size:22px}
.faq-question{padding:14px 16px;gap:10px}
.faq-question .q-text{font-size:14px}
.faq-question .q-marker{width:24px;height:24px;font-size:11px}
.faq-question .q-toggle{width:24px;height:24px;font-size:16px}
.faq-item.open .faq-answer{padding:0 16px 16px 16px}
.faq-answer{font-size:14px;padding:0 16px}
.faq-answer .answer-meta{font-size:12px;padding:2px 10px}
}
@media (max-width:420px){.tab-btn{min-width:40px;padding:6px 8px;font-size:11px}
.tab-btn .tab-icon{font-size:12px}
.tab-btn .tab-label{font-size:10px}
.app-header h1{font-size:17px}
.app-header .logo-icon{width:36px;height:36px;font-size:18px}
}
.faq-answer::-webkit-scrollbar{width:4px}
.faq-answer::-webkit-scrollbar-track{background:0 0}
.faq-answer::-webkit-scrollbar-thumb{background:#d0d9e8;border-radius:10px}