:root {
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --text-color: #333;
    --bg-color: #f4f6f8;
    --card-bg: #ffffff;
    --header-bg: #ffffff;
    --border-color: #e1e4e8;
    --shadow: 0 2px 8px rgba(0,0,0,0.05);
    --sidebar-width: 240px;
    --gap: 20px;
}

[data-theme="dark"] {
    --primary-color: #5dade2;
    --secondary-color: #ecf0f1;
    --text-color: #e0e0e0;
    --bg-color: #1a1a1a;
    --card-bg: #2d2d2d;
    --header-bg: #2d2d2d;
    --border-color: #404040;
    --shadow: 0 2px 8px rgba(0,0,0,0.3);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: background-color 0.3s, color 0.3s;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

ul {
    list-style: none;
}

/* Header */
.header {
    background-color: var(--header-bg);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-content {
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--secondary-color);
}

.nav ul {
    display: flex;
    gap: 20px;
}

.nav a {
    color: var(--text-color);
    font-weight: 500;
}

.nav a:hover {
    color: var(--primary-color);
}

#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.3s;
}

#theme-toggle:hover {
    background-color: rgba(0,0,0,0.1);
}

/* Layout - The Double Wing (双飞翼) Core */
.wrapper {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px; /* Outer gutter */
    overflow: hidden; /* Clearfix */
    min-height: calc(100vh - 140px); /* Footer push */
}

/* Common column styles */
.col-main, .col-left, .col-right {
    float: left;
    min-height: 1px; /* Prevent collapse */
}

.col-main {
    width: 100%;
}

.main-wrap {
    /* Margin leaves space for sidebars: Sidebar Width + Gap */
    margin: 0 calc(var(--sidebar-width) + var(--gap)) 0 calc(var(--sidebar-width) + var(--gap));
}

.col-left {
    width: var(--sidebar-width);
    margin-left: -100%;
}

.col-right {
    width: var(--sidebar-width);
    margin-left: calc(-1 * var(--sidebar-width));
}

/* Content Styling */
.content-card, .sidebar-card {
    background-color: var(--card-bg);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.profile-card {
    text-align: center;
}

.avatar-placeholder {
    width: 100px;
    height: 100px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    margin: 0 auto 15px;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-cloud li {
    background-color: rgba(52, 152, 219, 0.1);
    color: var(--primary-color);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
}

.banner-placeholder {
    width: 100%;
    height: 150px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 8px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 15px;
    font-style: italic;
    color: var(--secondary-color);
    margin: 15px 0;
}

.timeline-item {
    border-left: 2px solid var(--border-color);
    padding-left: 20px;
    margin-left: 5px;
    margin-bottom: 20px;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 5px;
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
    border-radius: 50%;
}

.date {
    font-size: 0.85rem;
    color: #888;
    display: block;
    margin-bottom: 5px;
}

.portfolio-list li {
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.portfolio-list li:last-child {
    border-bottom: none;
}

.portfolio-list strong {
    display: block;
    color: var(--text-color);
}

.portfolio-list span {
    font-size: 0.85rem;
    color: #888;
}

/* Footer */
.footer {
    background-color: var(--card-bg);
    padding: 20px 0;
    text-align: center;
    color: #888;
    border-top: 1px solid var(--border-color);
    margin-top: 20px;
}

/* Responsive Design */
@media (max-width: 900px) {
    /* Tablet: Stack columns */
    .col-main, .col-left, .col-right {
        float: none;
        width: 100%;
        margin: 0;
    }

    .main-wrap {
        margin: 0;
    }

    /* Reorder for mobile (Flexbox helper for visual order if needed, 
       but standard block stacking usually puts Main first which is good. 
       If we want sidebar first on mobile, we'd need flexbox parent) 
    */
    
    .wrapper {
        display: flex;
        flex-direction: column;
    }

    /* Standard block flow: Main -> Left -> Right */
    /* If we want Profile (Left) to be on top on mobile, we use order */
    .col-left { order: 1; }
    .col-main { order: 2; }
    .col-right { order: 3; }
}

@media (max-width: 600px) {
    .nav {
        display: none; /* In a real app, use a hamburger menu */
    }
    
    .header-content {
        justify-content: space-between;
    }
}