:root{--c-primary:#4464dc;--c-primary-light:#eef1fc;--c-primary-dark:#2a3fa8;--c-secondary:#fc941c;--c-text:#4d4d4d;--c-text-light:#888;--c-text-dark:#2d2d2d;--c-bg:#f4f5f7;--c-bg-container:#fff;--c-border:#e2e5ea;--radius:10px;--radius-lg:16px;--shadow-sm:0 1px 3px rgba(0,0,0,0.04);--shadow-md:0 4px 16px rgba(68,100,220,0.08);--shadow-lg:0 8px 32px rgba(68,100,220,0.12)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Roboto',sans-serif;background:var(--c-bg);color:var(--c-text);line-height:1.6;-webkit-font-smoothing:antialiased}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
.content-page{padding-top:32px;padding-bottom:40px}
.header{background:var(--c-primary);position:relative;overflow:hidden}
.header::before{content:'';position:absolute;top:-60%;right:-10%;width:500px;height:500px;background:rgba(255,255,255,0.04);border-radius:50%}
.header-inner{max-width:1100px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.header-nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.logo-icon{width:38px;height:38px;background:rgba(255,255,255,0.15);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.logo-text{font-size:16px;font-weight:500}
.logo-text span{opacity:0.6;font-weight:400;margin-left:6px}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{color:rgba(255,255,255,0.7);text-decoration:none;font-size:14px;transition:color 0.2s}
.nav-links a:hover{color:#fff}
.nav-btn{background:rgba(255,255,255,0.15)!important;color:#fff!important;padding:8px 18px;border-radius:6px;font-weight:500}
.nav-btn:hover{background:rgba(255,255,255,0.25)!important}
.hero{text-align:center;padding:48px 0 64px}
.hero h1{color:#fff;font-size:32px;font-weight:600;margin-bottom:10px}
.hero p{color:rgba(255,255,255,0.65);font-size:16px;font-weight:300;margin-bottom:32px}
.search-wrap{max-width:580px;margin:0 auto;position:relative}
.search-wrap svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--c-text-light)}
.search-input{width:100%;padding:16px 20px 16px 50px;border:none;border-radius:var(--radius);font-size:15px;font-family:inherit;background:#fff;color:var(--c-text-dark);box-shadow:var(--shadow-lg);outline:none}
.search-input::placeholder{color:#b0b0b0}
.search-input:focus{box-shadow:0 8px 32px rgba(68,100,220,0.2)}
.categories{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:-32px 0 48px;position:relative;z-index:2}
.cat-card{background:var(--c-bg-container);border:1px solid var(--c-border);border-radius:var(--radius);padding:24px;cursor:pointer;transition:all 0.25s ease;text-decoration:none;color:inherit;display:block}
.cat-card:hover{border-color:var(--c-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.cat-icon{font-size:28px;margin-bottom:12px;display:block}
.cat-card h3{font-size:15px;font-weight:600;color:var(--c-text-dark);margin-bottom:6px}
.cat-count{font-size:12px;color:var(--c-primary);font-weight:500}
.section-title{font-size:20px;font-weight:600;color:var(--c-text-dark);margin-bottom:6px}
.section-sub{font-size:14px;color:var(--c-text-light);margin-bottom:24px}
.popular-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-bottom:48px}
.popular-list.single-col{grid-template-columns:1fr;max-width:700px}
.popular-item{display:flex;align-items:center;gap:14px;background:var(--c-bg-container);border:1px solid var(--c-border);border-radius:var(--radius);padding:16px 20px;cursor:pointer;transition:all 0.2s;text-decoration:none;color:inherit}
.popular-item:hover{border-color:var(--c-primary);box-shadow:var(--shadow-sm)}
.popular-icon{font-size:22px;min-width:36px;text-align:center}
.popular-text h4{font-size:14px;font-weight:500;color:var(--c-text-dark);margin-bottom:2px}
.popular-text span{font-size:12px;color:var(--c-text-light)}
.popular-item .arrow{margin-left:auto;color:var(--c-text-light);opacity:0;transition:all 0.2s}
.popular-item .arrow svg{width:16px;height:16px}
.popular-item:hover .arrow{opacity:1;color:var(--c-primary)}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--c-text-light);margin-bottom:24px;flex-wrap:wrap}
.breadcrumb a{color:var(--c-primary);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb svg{width:14px;height:14px;flex-shrink:0}
.category-header{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.category-icon{font-size:36px}
.category-header h1{font-size:26px;font-weight:600;color:var(--c-text-dark)}
.tutorial-content{background:var(--c-bg-container);border:1px solid var(--c-border);border-radius:var(--radius);padding:40px;margin-bottom:40px}
.tutorial-content h1{font-size:26px;font-weight:600;color:var(--c-text-dark);margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--c-border)}
.tutorial-body h2{font-size:20px;font-weight:600;color:var(--c-text-dark);margin:32px 0 12px;padding-top:8px}
.tutorial-body h3{font-size:16px;font-weight:600;color:var(--c-text-dark);margin:24px 0 8px}
.tutorial-body p{font-size:15px;color:var(--c-text);margin-bottom:16px;line-height:1.7}
.tutorial-body ul,.tutorial-body ol{margin:0 0 16px 24px;font-size:15px;line-height:1.8}
.tutorial-body li{margin-bottom:4px}
.tutorial-body strong{color:var(--c-text-dark)}
.tutorial-body hr{border:none;border-top:1px solid var(--c-border);margin:32px 0}
.tutorial-body blockquote{border-left:3px solid var(--c-primary);background:#eef6ff;border-radius:0 8px 8px 0;padding:16px 20px;margin:20px 0;font-size:14px}
.tutorial-body blockquote p{margin:0}
.tutorial-body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.tutorial-body th{text-align:left;padding:10px 14px;background:var(--c-bg);border:1px solid var(--c-border);font-weight:600;color:var(--c-text-dark)}
.tutorial-body td{padding:10px 14px;border:1px solid var(--c-border)}
.tutorial-body code{background:var(--c-bg);padding:2px 6px;border-radius:4px;font-size:13px}
.tutorial-nav{display:flex;justify-content:space-between;margin-top:32px;padding-top:24px;border-top:1px solid var(--c-border);gap:16px}
.tut-nav-btn{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--c-primary);font-weight:500;text-decoration:none;transition:opacity 0.2s;max-width:45%}
.tut-nav-btn:hover{opacity:0.7}
.tut-nav-btn svg{width:16px;height:16px;flex-shrink:0}
.contact-banner{background:var(--c-bg-container);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:40px;text-align:center;margin-bottom:48px}
.contact-banner h2{font-size:20px;font-weight:600;color:var(--c-text-dark);margin-bottom:8px}
.contact-banner p{font-size:14px;color:var(--c-text-light);margin-bottom:24px}
.contact-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.contact-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;transition:all 0.2s;text-decoration:none;border:none}
.contact-btn svg{width:18px;height:18px}
.contact-btn.primary{background:var(--c-primary);color:#fff}
.contact-btn.primary:hover{background:var(--c-primary-dark)}
.contact-btn.outline{background:transparent;color:var(--c-primary);border:1px solid var(--c-primary)}
.contact-btn.outline:hover{background:var(--c-primary-light)}
.error-page{text-align:center;padding:80px 0}
.error-page h1{font-size:48px;color:var(--c-text-light);margin-bottom:12px}
.error-page p{font-size:16px;color:var(--c-text);margin-bottom:28px}
.footer{border-top:1px solid var(--c-border);padding:32px 0;text-align:center}
.footer p{font-size:13px;color:var(--c-text-light)}
.footer a{color:var(--c-primary);text-decoration:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.cat-card{animation:fadeUp 0.5s ease both}
.cat-card:nth-child(1){animation-delay:0.05s}.cat-card:nth-child(2){animation-delay:0.1s}.cat-card:nth-child(3){animation-delay:0.15s}.cat-card:nth-child(4){animation-delay:0.2s}.cat-card:nth-child(5){animation-delay:0.25s}.cat-card:nth-child(6){animation-delay:0.3s}.cat-card:nth-child(7){animation-delay:0.35s}.cat-card:nth-child(8){animation-delay:0.4s}.cat-card:nth-child(9){animation-delay:0.45s}
@media(max-width:768px){.hero h1{font-size:24px}.hero{padding:32px 0 48px}.categories{grid-template-columns:1fr 1fr}.popular-list{grid-template-columns:1fr}.nav-links{display:none}.contact-banner{padding:28px 20px}.tutorial-content{padding:24px}.tutorial-content h1{font-size:22px}.tutorial-nav{flex-direction:column;gap:12px}.tut-nav-btn{max-width:100%}}
@media(max-width:480px){.categories{grid-template-columns:1fr;gap:10px}}