*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333}.index-body{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}.index-container{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 10px 40px #0003;overflow:hidden}.index-header{background:linear-gradient(135deg,#1e3c72,#2a5298);color:#fff;padding:50px 30px;text-align:center;position:relative}.index-header h1{font-size:2.2em;margin-bottom:10px}.index-header p{font-size:1.2em;opacity:.9}main{padding:40px 30px}.intro{text-align:center;margin-bottom:40px;padding:20px;background:#f8f9fa;border-radius:8px}.intro h2{color:#1e3c72;margin-bottom:15px}.guide-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;margin-bottom:40px}.card{background:#fff;border-radius:10px;padding:25px;box-shadow:0 4px 15px #0000001a;border-top:4px solid #2a5298;transition:transform .3s}.card:hover{transform:translateY(-5px)}.card h2{color:#1e3c72;margin-bottom:15px;font-size:1.5em}.card p{color:#555;margin-bottom:15px}.card ul{margin:15px 0;padding-left:20px}.card li{margin-bottom:8px;color:#444}.btn{display:inline-block;background:#2a5298;color:#fff;padding:12px 25px;border-radius:6px;text-decoration:none;margin-top:15px;font-weight:600;transition:background .3s}.btn:hover{background:#1e3c72}.section{margin:30px 0;padding:20px;background:#f8f9fa;border-radius:8px}.section h2{color:#1e3c72;margin-bottom:15px;border-bottom:2px solid #2a5298;padding-bottom:8px}.index-footer{background:#1e3c72;color:#fff;text-align:center;padding:20px;margin-top:30px}.guide-body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.7;color:#333;background:#f5f7fa;padding:20px}.guide-container{max-width:1200px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 5px 20px #0000001a;overflow:hidden}.guide-header{color:#fff;padding:40px 30px;text-align:center;position:relative}.guide-header h1{font-size:2em;margin-bottom:10px}.guide-header p{font-size:1.1em;opacity:.9}.user-guide-header{background:linear-gradient(135deg,#c2185b,#880e4f)}.admin-guide-header{background:linear-gradient(135deg,#1e3c72,#2a5298)}.guide-nav{padding:15px 30px;position:sticky;top:0;z-index:100}.user-guide-nav{background:#c2185b}.admin-guide-nav{background:#2a5298}.guide-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:20px;justify-content:center}.guide-nav a{color:#fff;text-decoration:none;padding:8px 16px;border-radius:4px;transition:background .3s;font-weight:500}.guide-nav a:hover{background:#fff3}.guide-main{padding:40px 30px}section{margin-bottom:40px;scroll-margin-top:80px}.user-guide-page h2{color:#880e4f;font-size:1.6em;margin-bottom:20px;padding-bottom:10px;border-bottom:3px solid #c2185b}.user-guide-page h3{color:#c2185b;font-size:1.3em;margin:25px 0 15px}.user-guide-page h4{color:#c2185b;font-size:1.1em;margin:20px 0 10px}.admin-guide-page h2{color:#1e3c72;font-size:1.6em;margin-bottom:20px;padding-bottom:10px;border-bottom:3px solid #2a5298}.admin-guide-page h3{color:#2a5298;font-size:1.3em;margin:25px 0 15px}.admin-guide-page h4{color:#2a5298;font-size:1.1em;margin:20px 0 10px}p,li{margin-bottom:12px;font-size:1.05em}ul,ol{margin-left:25px}.step-user{background:#fce4ec;border-left:4px solid #c2185b;padding:15px 20px;margin:15px 0;border-radius:0 8px 8px 0}.step-admin{background:#e8f4fd;border-left:4px solid #2a5298;padding:15px 20px;margin:15px 0;border-radius:0 8px 8px 0}.step-number-user{display:inline-block;background:#c2185b;color:#fff;width:28px;height:28px;border-radius:50%;text-align:center;line-height:28px;margin-right:10px;font-weight:700;font-size:.9em;flex-shrink:0}.step-number-admin{display:inline-block;background:#2a5298;color:#fff;width:28px;height:28px;border-radius:50%;text-align:center;line-height:28px;margin-right:10px;font-weight:700;font-size:.9em;flex-shrink:0}.note{background:#fff3cd;border-left:4px solid #ffc107;padding:12px 15px;margin:15px 0;border-radius:4px}.warning{background:#f8d7da;border-left:4px solid #dc3545;padding:12px 15px;margin:15px 0;border-radius:4px}.tip{background:#d1ecf1;border-left:4px solid #17a2b8;padding:12px 15px;margin:15px 0;border-radius:4px}.status-connected{background:#d4edda;color:#155724;padding:4px 12px;border-radius:20px;display:inline-block;font-weight:600}.status-disconnected{background:#f8d7da;color:#721c24;padding:4px 12px;border-radius:20px;display:inline-block;font-weight:600}.status-connecting{background:#fff3cd;color:#856404;padding:4px 12px;border-radius:20px;display:inline-block;font-weight:600}code{background:#e9ecef;padding:2px 6px;border-radius:3px;font-family:Courier New,monospace;color:#c2185b}table{width:100%;border-collapse:collapse;margin:20px 0}th,td{padding:12px;text-align:left;border-bottom:1px solid #ddd}th{background:#2a5298;color:#fff;font-weight:600}tr:hover{background:#f5f5f5}.user-guide-footer{background:#880e4f;color:#fff;text-align:center;padding:20px;margin-top:40px}.admin-guide-footer{background:#1e3c72;color:#fff;text-align:center;padding:20px;margin-top:40px}.back-link-user{display:inline-block;background:#c2185b;color:#fff;padding:10px 20px;border-radius:6px;text-decoration:none;margin-top:20px}.back-link-user:hover{background:#880e4f}.back-link-admin{display:inline-block;background:#2a5298;color:#fff;padding:10px 20px;border-radius:6px;text-decoration:none;margin-top:20px}.back-link-admin:hover{background:#1e3c72}.lang-toggle-btn{background:#fff3;border:1px solid rgba(255,255,255,.5);color:#fff;padding:6px 14px;border-radius:20px;cursor:pointer;font-size:.9em;font-weight:600;display:flex;align-items:center;gap:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .2s}.lang-toggle-btn:hover{background:#ffffff4d}.lang-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;overflow:hidden;min-width:140px;z-index:300}.lang-dropdown-item{display:block;width:100%;padding:10px 16px;border:none;cursor:pointer;font-size:.95em;text-align:left;color:#333;transition:background .15s}.lang-dropdown-item:hover{background:#f0f4ff}.lang-dropdown-item.active{background:#f0f4ff;font-weight:600}@media(max-width:768px){.guide-cards{grid-template-columns:1fr}.index-header h1{font-size:1.8em}.guide-header h1{font-size:1.6em}.guide-nav ul{gap:10px}}