@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&family=ZCOOL+XiaoWei&display=swap');

:root {
    /* Qingyun Sect Blue */
    --qingyun-blue: #1565c0;
    --qingyun-light: #bbdefb;
    
    /* Ghost King Sect Dark */
    --ghost-dark: #212121;
    --ghost-green: #00e676;
    
    /* Tianyin Temple Gold */
    --tianyin-gold: #ffb300;
    
    /* Bamboo Peak Green */
    --bamboo-green: #2e7d32;
    
    /* Backgrounds */
    --parchment-bg: #f5f5f5;
    --jade-bg: #e8f5e9;
    
    /* Fonts */
    --font-title: "Ma Shan Zheng", cursive;
    --font-body: "Noto Serif SC", serif;
    --font-code: "Consolas", "Monaco", monospace;
}

body {
    background-color: #cfd8dc;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2390a4ae' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
    font-family: var(--font-body);
    margin: 0;
    padding: 20px;
    color: #37474f;
}

/* =========================================
   Layout Containers
   ========================================= */

.jade-scroll {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fdfdfd;
    border: 1px solid #cfd8dc;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    position: relative;
    padding: 40px;
    background-image: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%), url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e0e0e0' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* Top & Bottom Border Decorations (Cloud Pattern) */
.jade-scroll::before, .jade-scroll::after {
    content: "";
    display: block;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg width='40' height='10' viewBox='0 0 40 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10c5-5 10-10 20-10s15 5 20 10H0z' fill='%231565c0' fill-opacity='0.2'/%3E%3C/svg%3E") repeat-x;
    margin: -20px -40px 20px -40px;
}
.jade-scroll::after {
    transform: rotate(180deg);
    margin: 20px -40px -20px -40px;
}

/* =========================================
   Typography
   ========================================= */

h1 {
    font-family: var(--font-title);
    color: var(--qingyun-blue);
    text-align: center;
    font-size: 3rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    margin-bottom: 10px;
}

h2 {
    font-family: var(--font-title);
    color: var(--bamboo-green);
    border-bottom: 2px solid var(--bamboo-green);
    padding-bottom: 10px;
    margin-top: 40px;
    font-size: 2rem;
}

h3 {
    font-family: var(--font-title);
    color: #5d4037;
    font-size: 1.5rem;
}

.subtitle {
    text-align: center;
    font-family: var(--font-title);
    color: #78909c;
    font-size: 1.2rem;
    margin-bottom: 40px;
}

/* =========================================
   Navigation
   ========================================= */

.sect-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.nav-btn {
    background: var(--qingyun-blue);
    color: #fff;
    padding: 10px 25px;
    text-decoration: none;
    border-radius: 30px;
    font-family: var(--font-title);
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-btn:hover {
    background: #0d47a1;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.nav-btn.home { background: var(--tianyin-gold); color: #3e2723; }

/* =========================================
   Comic & Characters
   ========================================= */

.comic-panel {
    background: #fff;
    border: 3px solid #37474f;
    padding: 20px;
    margin: 30px 0;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.1);
    position: relative;
}

.character {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 15px;
}

.character:nth-child(even) { flex-direction: row-reverse; }

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px var(--qingyun-blue);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    background-color: #eee;
}

/* Character Avatars (SVG Placeholders for now) */
.avatar.xiaobao { /* Zhang Xiaofan */
    box-shadow: 0 0 0 3px #795548;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23d7ccc8'/%3E%3Crect x='30' y='60' width='40' height='40' fill='%235d4037'/%3E%3Ccircle cx='35' cy='40' r='5' fill='%233e2723'/%3E%3Ccircle cx='65' cy='40' r='5' fill='%233e2723'/%3E%3Cpath d='M40,70 Q50,80 60,70' fill='none' stroke='%233e2723' stroke-width='2'/%3E%3Ctext x='50' y='90' font-size='12' text-anchor='middle' font-family='serif'%3E小凡%3C/text%3E%3C/svg%3E");
}

.avatar.biyao { /* Biyao */
    box-shadow: 0 0 0 3px var(--bamboo-green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23c8e6c9'/%3E%3Cpath d='M20,20 Q50,0 80,20' fill='%232e7d32'/%3E%3Ccircle cx='35' cy='45' r='5' fill='%231b5e20'/%3E%3Ccircle cx='65' cy='45' r='5' fill='%231b5e20'/%3E%3Cpath d='M40,70 Q50,80 60,70' fill='none' stroke='%231b5e20' stroke-width='2'/%3E%3Ctext x='50' y='90' font-size='12' text-anchor='middle' font-family='serif'%3E碧瑶%3C/text%3E%3C/svg%3E");
}

.avatar.xueqi { /* Lu Xueqi */
    box-shadow: 0 0 0 3px var(--qingyun-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%23e3f2fd'/%3E%3Cpath d='M20,20 Q50,0 80,20' fill='%231565c0'/%3E%3Ccircle cx='35' cy='45' r='5' fill='%230d47a1'/%3E%3Ccircle cx='65' cy='45' r='5' fill='%230d47a1'/%3E%3Ctext x='50' y='90' font-size='12' text-anchor='middle' font-family='serif'%3E雪琪%3C/text%3E%3C/svg%3E");
}

.bubble {
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    position: relative;
    border: 1px solid #cfd8dc;
    flex: 1;
    font-size: 1.1rem;
    line-height: 1.6;
}

.character:nth-child(odd) .bubble { margin-left: 20px; background: #fff; }
.character:nth-child(even) .bubble { margin-right: 20px; background: #e0f7fa; }

/* =========================================
   Code & Magic
   ========================================= */

/* The Scroll of Heaven (Code Block) */
.heaven-scroll {
    background: #263238;
    color: #eceff1;
    padding: 20px;
    border-radius: 5px;
    font-family: var(--font-code);
    overflow-x: auto;
    border-left: 5px solid var(--tianyin-gold);
    margin: 20px 0;
    position: relative;
}

.heaven-scroll::before {
    content: "天书残卷";
    position: absolute;
    top: 0; right: 0;
    background: var(--tianyin-gold);
    color: #3e2723;
    padding: 2px 10px;
    font-family: var(--font-title);
    font-size: 0.8rem;
    border-bottom-left-radius: 5px;
}

code {
    font-family: var(--font-code);
    background: #eceff1;
    color: #c62828;
    padding: 2px 5px;
    border-radius: 3px;
}

.heaven-scroll code {
    background: none;
    color: inherit;
    padding: 0;
}

/* Syntax Highlighting (Simulated) */
.sql-keyword { color: #82b1ff; font-weight: bold; }
.sql-string { color: #a5d6a7; }
.sql-comment { color: #78909c; font-style: italic; }

/* =========================================
   Educational Components
   ========================================= */

/* Sect Edict (Explanation) */
.sect-edict {
    background: #fff8e1;
    border: 2px solid #ffecb3;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    position: relative;
}

.sect-edict h3 {
    margin-top: 0;
    color: #f57f17;
    display: flex;
    align-items: center;
}

.sect-edict h3::before {
    content: "📜";
    margin-right: 10px;
}

/* Practice Area (Cultivation Ground) */
.cultivation-ground {
    background: #e8f5e9;
    border: 2px dashed #66bb6a;
    padding: 20px;
    border-radius: 10px;
    margin-top: 40px;
}

.cultivation-ground h3 {
    color: #2e7d32;
    text-align: center;
}

/* Footer */
footer {
    text-align: center;
    margin-top: 50px;
    font-family: var(--font-title);
    color: #78909c;
    border-top: 1px solid #cfd8dc;
    padding-top: 20px;
}

/* Tables (Sect Roster) */
table.sect-roster {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: var(--font-body);
}

table.sect-roster th {
    background: var(--qingyun-blue);
    color: #fff;
    padding: 10px;
    font-family: var(--font-title);
}

table.sect-roster td {
    border: 1px solid #cfd8dc;
    padding: 8px;
    text-align: center;
}

table.sect-roster tr:nth-child(even) {
    background: #f5f5f5;
}