/* roulang page: index */
:root {
            --primary: #0F172A;
            --secondary: #334155;
            --accent: #D97706;
            --bg-base: #F8FAFC;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-base);
            color: #1E293B;
            line-height: 1.6;
        }
        .nav-dropdown:hover .dropdown-panel {
            display: block;
        }
        .code-preview {
            background: #090D16;
            font-family: Consolas, Monaco, "Andale Mono", monospace;
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #475569;
            border-radius: 3px;
        }

/* roulang page: category1 */
:root {
            --primary: #0F172A;
            --secondary: #334155;
            --accent: #D97706;
            --bg-base: #F8FAFC;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-base);
            color: #1E293B;
            line-height: 1.6;
        }
        .nav-dropdown:hover .dropdown-panel {
            display: block;
        }
        .card-hover-border {
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-hover-border:hover {
            border-color: #D97706;
            box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
            transform: translateY(-2px);
        }

/* roulang page: article */
:root {
            --primary: #0F172A;
            --secondary: #334155;
            --accent: #D97706;
            --bg-base: #F8FAFC;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-base);
            color: #1E293B;
            line-height: 1.6;
        }
        .nav-dropdown:hover .dropdown-panel {
            display: block;
        }
        .prose h2 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #0F172A;
            margin-top: 2rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #E2E8F0;
            padding-bottom: 0.5rem;
            letter-spacing: -0.02em;
        }
        .prose h3 {
            font-size: 1.25rem;
            font-weight: 600;
            color: #1E293B;
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
        }
        .prose p {
            color: #334155;
            line-height: 1.8;
            margin-bottom: 1.25rem;
        }
        .prose ul {
            list-style-type: disc;
            padding-left: 1.5rem;
            margin-bottom: 1.25rem;
            color: #334155;
        }
        .prose ol {
            list-style-type: decimal;
            padding-left: 1.5rem;
            margin-bottom: 1.25rem;
            color: #334155;
        }
        .prose li {
            margin-bottom: 0.5rem;
            line-height: 1.7;
        }
        .prose blockquote {
            border-left: 4px solid #D97706;
            background-color: #F1F5F9;
            padding: 1rem 1.25rem;
            border-radius: 0 0.375rem 0.375rem 0;
            margin: 1.5rem 0;
            color: #475569;
            font-style: italic;
        }
        .prose code {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            background-color: #E2E8F0;
            padding: 0.2rem 0.4rem;
            border-radius: 0.25rem;
            font-size: 0.875em;
            color: #0F172A;
        }
        .prose pre {
            background-color: #0F172A;
            color: #F8FAFC;
            padding: 1.25rem;
            border-radius: 0.5rem;
            overflow-x: auto;
            margin: 1.5rem 0;
        }
        .prose table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.5rem 0;
            font-size: 0.875rem;
        }
        .prose th {
            background-color: #0F172A;
            color: #F8FAFC;
            font-weight: 600;
            padding: 0.75rem 1rem;
            text-align: left;
        }
        .prose td {
            border-bottom: 1px solid #E2E8F0;
            padding: 0.75rem 1rem;
            color: #334155;
        }
        .prose tr:nth-child(even) td {
            background-color: #F8FAFC;
        }

/* roulang page: category2 */
:root {
            --primary: #0F172A;
            --secondary: #334155;
            --accent: #D97706;
            --bg-base: #F8FAFC;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-base);
            color: #1E293B;
            line-height: 1.6;
        }
        .nav-dropdown:hover .dropdown-panel {
            display: block;
        }

body{font-family:"Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.7;color:#1f2937;background:#f7f9fc}
  header,footer{background:#0f172a;color:#fff} header a,footer a{color:inherit;text-decoration:none}
  main section{padding:64px 0} .container{max-width:1180px}
  .hero,.site-hero{background:linear-gradient(135deg,#0f172a,#1d4ed8);color:#fff}
  .card,.feature-card,.service-card,.category-card{border:1px solid rgba(15,23,42,.08);box-shadow:0 12px 32px rgba(15,23,42,.08);border-radius:16px}
  .btn,.button,a[class*="btn"]{border-radius:999px;font-weight:700}
  img{max-width:100%;height:auto} @media(max-width:768px){main section{padding:42px 0} h1{font-size:2rem}}