/*
 * ============================================================
 * 鏂囦欢鍚? style.css
 * 鍔熻兘鎻忚堪: 鍏ㄥ眬鏍峰紡琛?
 *   瀹氫箟涓汉绠€浠嬪睍绀虹綉绔欑殑鍏ㄩ儴鏍峰紡锛屽寘鍚細
 *   - CSS 鑷畾涔夊睘鎬э紙璁捐浠ょ墝/Design Tokens锛?
 *   - 鍩虹閲嶇疆涓庢帓鐗?
 *   - 瀵艰埅鏍?
 *   - 鐧诲綍/娉ㄥ唽琛ㄥ崟
 *   - 涓汉绠€浠嬪崱鐗囧紡甯冨眬
 *   - 绠＄悊鍛樻帶鍒堕潰鏉?
 *   - 鍝嶅簲寮忓獟浣撴煡璇?
 *
 * 璁捐椋庢牸: 娌夌ǔ銆佺畝娲併€佷笓涓?鈥斺€?閫傚悎鍚慔R灞曠ず
 * 鑹插僵鏂规: 娣辨捣鍐涜摑(涓昏壊) + 鐧借壊鍗＄墖 + 娴呯伆鑳屾櫙 + 钃濊壊鐐圭紑
 *
 * CSS 鐭ヨ瘑鐐癸紙瀵瑰簲璇剧▼绗?璁诧級:
 *   - 閫夋嫨鍣ㄤ紭鍏堢骇: !important > 琛屽唴(1000) > ID(100) > 绫?10) > 鏍囩(1)
 *   - 鐩掑瓙妯″瀷: content 鈫?padding 鈫?border 鈫?margin
 *   - 鍚庝唬閫夋嫨鍣?绌烘牸) vs 瀛愪唬閫夋嫨鍣?>)
 * ============================================================
 */

/* ===== 1. CSS 鑷畾涔夊睘鎬э紙璁捐浠ょ墝锛?===== */
:root {
    /* 涓昏壊璋?*/
    --color-primary: #1d1d1f;      /* 娣辨捣鍐涜摑 鈥?瀵艰埅鏍忋€侀〉鑴氳儗鏅?*/
    --color-primary-light: #38383a; /* 绋嶄寒鐨勮摑鐏?鈥?鎮仠鐘舵€?*/
    --color-accent: #0071e3;       /* 钃濊壊鐐圭紑 鈥?閾炬帴銆佹寜閽€佹爣绛?*/
    --color-accent-hover: #0077ed;
    --color-accent-blue: #0071e3;
    --color-card: #ffffff; /* 娣辫摑 鈥?鎸夐挳鎮仠 */

    /* 涓€ц壊 */
    --color-bg: #f5f5f7;           /* 娴呯伆鑳屾櫙 鈥?椤甸潰搴曡壊 */
    --color-white: #ffffff;        /* 鐧借壊 鈥?鍗＄墖鑳屾櫙 */
    --color-text: #1d1d1f;         /* 涓绘枃瀛楄壊 鈥?娣辩伆钃?*/
    --color-text-light: #86868b;   /* 杈呭姪鏂囧瓧鑹?鈥?鐏?*/
    --color-border: #d2d2d7;       /* 杈规鑹?鈥?娴呯伆 */

    /* 鍔熻兘鑹?*/
    --color-success: #30d158;      /* 缁胯壊 鈥?鎴愬姛鐘舵€?*/
    --color-error: #ff453a;        /* 绾㈣壊 鈥?閿欒鐘舵€?*/
    --color-warning: #ffd60a;      /* 姗欒壊 鈥?璀﹀憡鐘舵€?*/
    --color-info: #0071e3;         /* 钃濊壊 鈥?淇℃伅鎻愮ず */

    /* 鎺掔増 */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'PingFang SC', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'PingFang SC', sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.9rem;
    --font-size-lg: 1.15rem;
    --font-size-xl: clamp(1.35rem, 2vw, 1.6rem);
    --font-size-2xl: clamp(1.75rem, 3vw, 2.25rem);
    --font-size-display: clamp(2rem, 3.5vw, 2.75rem);
    --font-size-xs: 0.8rem;

    /* 闂磋窛 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;

    /* 甯冨眬 */
    --max-width: 1000px;            /* 鍐呭鍖哄煙鏈€澶у搴?*/
    --border-radius: 16px;
    --border-radius-sm: 8px;
    --border-radius-lg: 20px;
    --border-radius-full: 980px;          /* 缁熶竴鍦嗚 */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.07);
    --shadow-lg: 0 12px 48px rgba(0,0,0,0.1); /* 鍗＄墖闃村奖 */
    --transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);   /* 缁熶竴杩囨浮鍔ㄧ敾 */
}

/* ===== 2. CSS Reset & 鍩虹鎺掔増 ===== */
*,
*::before,
*::after {
    box-sizing: border-box;  /* 灏唒adding鍜宐order璁″叆鍏冪礌鎬诲楂橈紝鏇存柟渚垮竷灞€璁＄畻 */
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth; /* 骞虫粦婊氬姩锛岀敤浜庨敋鐐瑰鑸?*/
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;  /* 琛岄珮 1.6 鍊嶏紝鎻愬崌涓枃鍙鎬?*/
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 閾炬帴鍩虹鏍峰紡 */
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: var(--transition);
}
a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

/* 鍥剧墖鑷€傚簲 */
img {
    max-width: 100%;
    height: auto;
}

/* ===== 3. 绔欑偣瀵艰埅鏍?===== */
.site-header {
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--spacing-md) 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
.site-brand { color: white; font-size: 1.2rem; font-weight: bold; }
.site-brand a { color: white; text-decoration: none; }
.site-brand a:hover { color: var(--color-accent); }
.site-nav { list-style: none; display: flex; gap: var(--spacing-lg); align-items: center; }
.site-nav a { color: rgba(255, 255, 255, 0.85); font-size: var(--font-size-sm); font-weight: 500; padding: var(--spacing-xs) var(--spacing-sm); border-radius: 4px; transition: var(--transition); }
.site-nav a:hover { color: var(--color-white); background: rgba(255, 255, 255, 0.1); text-decoration: none; }
.nav-username { color: rgba(255, 255, 255, 0.6); font-size: var(--font-size-sm); margin-right: var(--spacing-sm); }
.nav-logout { color: var(--color-error) !important; }
.nav-logout:hover { background: rgba(231, 76, 60, 0.2) !important; }
.layout-switcher-li { display: flex; align-items: center; }
.layout-switcher-btn { display: inline-flex; align-items: center; gap: 5px; padding: var(--spacing-xs) 10px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 4px; color: rgba(255, 255, 255, 0.75); font-size: var(--font-size-sm); font-family: var(--font-body); cursor: pointer; transition: var(--transition); white-space: nowrap; line-height: 1.5; }
.layout-switcher-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--color-white); border-color: rgba(255, 255, 255, 0.5); }
.layout-switcher-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.layout-icon { display: inline-block; font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; }
.layout-label { font-weight: 500; }
/* ===== 4. 涓诲唴瀹瑰尯瀹瑰櫒 ===== */
.site-main {
    flex: 1;  /* 璁﹎ain鍖哄煙鎾戞弧鍓╀綑绌洪棿锛屽皢footer鎺ㄥ埌搴曢儴 */
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

/* ===== 4b. 甯冨眬妯″紡鍒囨崲 ===== */

/*
 * 甯冨眬绫昏缃湪 <body> 涓婏紝閫氳繃 JS 鍔ㄦ€佸垏鎹€?
 * 浠呭奖鍝?.site-main 鍐呴儴鍗＄墖鐨勬帓鍒楁柟寮忋€?
 */

/* --- 榛樿甯冨眬锛堝崟鏍忓爢鍙狅級--- */
body.layout-default .site-main {
    max-width: var(--max-width);  /* 900px */
}

/* --- 鍙屾爮甯冨眬 --- */
body.layout-dual .site-main {
    max-width: 1200px;
    column-count: 2;
    column-gap: var(--spacing-lg);
}

body.layout-dual .site-main > .card,
body.layout-dual .site-main > .profile-hero {
    break-inside: avoid;
    margin-bottom: var(--spacing-lg);
}

body.layout-dual .projects-grid .project-card {
    break-inside: auto;
}

/* --- 鐎戝竷娴佸竷灞€锛圕SS columns masonry锛?-- */
body.layout-waterfall .site-main {
    max-width: 1200px;
    column-count: 3;
    column-gap: var(--spacing-md);
}

body.layout-waterfall .site-main > .card,
body.layout-waterfall .site-main > .profile-hero {
    break-inside: avoid;
    margin-bottom: var(--spacing-md);
}

body.layout-waterfall .projects-grid .project-card {
    break-inside: auto;
}

/* 鐎戝竷娴佷腑椤圭洰缃戞牸鎭㈠涓哄潡绾э紝閬垮厤宓屽 grid 鐮村潖 masonry 鏁堟灉 */
body.layout-waterfall .projects-grid {
    display: block;
}
body.layout-waterfall .project-card {
    margin-bottom: var(--spacing-md);
}

/* ===== 5. 椤佃剼 ===== */
.site-footer {
    background: transparent;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-light);
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-sm);
}

/* ===== 6. 鍗＄墖缁勪欢锛堝彲澶嶇敤锛?===== */
.card { background: var(--color-card); border-radius: var(--border-radius); box-shadow: var(--shadow-md); padding: var(--spacing-xl); margin-bottom: var(--spacing-lg); transition: var(--transition); }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }

.card-title { font-size: var(--font-size-xl); font-weight: 600; color: var(--color-primary); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--color-border); letter-spacing: -0.02em; }

/* ===== 7. 涓汉绠€浠?Hero 鍖哄煙 ===== */
.profile-hero { position: relative; text-align: center; padding: var(--spacing-3xl) 0 var(--spacing-2xl); }
.profile-hero::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1000px; height: 100%; background: radial-gradient(ellipse 600px 300px at 50% 0%, rgba(0,113,227,0.035) 0%, transparent 70%); pointer-events: none; }

/* 澶村儚鏍峰紡 */
.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;  /* 鍦嗗舰澶村儚 */
    object-fit: cover;   /* 淇濇寔鍥剧墖姣斾緥瑁佸壀 */
    border: 3px solid var(--color-card);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
    background: var(--color-bg);  /* 鏃犲ご鍍忔椂鐨勫崰浣嶈儗鏅壊 */
    transition: transform 0.4s ease;
}
.profile-avatar:hover { transform: scale(1.05); }
.profile-avatar-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    border: 4px solid var(--color-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 濮撳悕 */
.profile-name {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.profile-title {
    font-size: var(--font-size-xl);
    color: var(--color-text-light);
    font-weight: 400;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.01em;
}
/* 鑱旂郴鍥炬爣琛?*/
.profile-contact {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    margin-top: var(--spacing-md);
}

.profile-contact a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 4px;
    transition: var(--transition);
}
.profile-contact a:hover {
    color: var(--color-accent);
    background: rgba(52, 152, 219, 0.08);
    text-decoration: none;
}

/* 鎰忓悜宀椾綅楂樹寒寰界珷锛圚ero鍖哄煙锛岀獊鍑烘樉绀烘眰鑱屾柟鍚戯級 */
.profile-intended-position {
    display: inline-block;
    margin-top: var(--spacing-sm);
    padding: 6px 20px;
    background: linear-gradient(135deg, #0071e3, #0077ed);
    color: #fff;
    font-size: var(--font-size-md);
    font-weight: 700;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

/* 鍩烘湰淇℃伅鏍囩琛岋紙Hero鍖哄煙锛岀伆鑹插皬鏍囩灞曠ず鎬у埆/骞撮緞/甯镐綇鍦扮瓑锛?*/
.profile-basic-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    justify-content: center;
}

.basic-info-tag {
    display: inline-block;
    padding: 2px 12px;
    background: var(--color-bg);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    white-space: nowrap;
}

/* ===== 8. 鎶€鑳芥爣绛?===== */
.skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.skill-tag {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-white);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 20px;  /* 鑳跺泭褰㈢姸 */
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: var(--transition);
}
.skill-tag:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);  /* 鎮仠鏃跺井绉伙紝澧炲姞浜や簰鎰?*/
}

/* ===== 9. 缁忓巻/鏁欒偛 鏃堕棿绾挎牱寮?===== */
.timeline-item {
    position: relative;
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border-left: 2px solid var(--color-border);  /* 宸︿晶鏃堕棿绾?*/
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 4px;
    width: 10px;
    height: 10px;
    background: var(--color-accent);
    border-radius: 50%;  /* 鏃堕棿绾夸笂鐨勫渾鐐?*/
    border: 2px solid var(--color-white);
    box-shadow: 0 0 0 2px var(--color-accent);
}

.timeline-title {
    font-weight: 600;
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.timeline-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.timeline-content {
    color: var(--color-text);
    line-height: 1.7;
}

/* ===== 10. 鎸夐挳缁勪欢 ===== */
.btn { display: inline-block; padding: 10px 28px; border: none; border-radius: var(--border-radius-full); font-size: var(--font-size-sm); font-weight: 600; cursor: pointer; transition: var(--transition); text-align: center; line-height: 1.5; font-family: var(--font-body); }
.btn-primary { background: var(--color-accent); color: white; box-shadow: 0 4px 14px rgba(0,113,227,0.2); }
.btn-primary:hover { background: var(--color-accent-hover); text-decoration: none; color: white; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,113,227,0.3); }
.btn-secondary { background: rgba(0,113,227,0.06); color: var(--color-accent); }
.btn-secondary:hover { background: rgba(0,113,227,0.12); text-decoration: none; color: var(--color-accent); transform: translateY(-1px); }
    background: var(--color-accent);
    color: var(--color-white);
}
.btn-primary:hover {
    background: var(--color-accent-hover);
    text-decoration: none;
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

/* 娆¤鎸夐挳 鈥?鐏拌壊 */
.btn-secondary {
    background: var(--color-bg);
    color: var(--color-text);
}
.btn-secondary:hover {
    background: var(--color-border);
    text-decoration: none;
    color: var(--color-text);
}

/* 鍗遍櫓鎸夐挳 鈥?绾㈣壊锛堝垹闄ゆ搷浣滐級 */
.btn-danger {
    background: var(--color-error);
    color: var(--color-white);
}
.btn-danger:hover {
    background: #c0392b;
    text-decoration: none;
    color: var(--color-white);
}

/* 灏忔寜閽?*/
.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

/* 鎸夐挳閾炬帴 鈥?鐪嬭捣鏉ュ儚閾炬帴鐨勬寜閽?*/
.btn-link {
    background: none;
    color: var(--color-accent);
    padding: 4px 8px;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
}
.btn-link:hover {
    text-decoration: underline;
    color: var(--color-accent-hover);
}

/* ===== 11. 琛ㄥ崟缁勪欢 ===== */

/* 琛ㄥ崟鍒嗙粍 鈥?姣忎釜瀛楁涓€涓?form-group */
.form-group {
    margin-bottom: var(--spacing-lg);
}

/* 琛ㄥ崟鏍囩 */
.form-group label {
    display: block;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

/* 杈撳叆妗嗐€佹枃鏈煙銆佷笅鎷夋缁熶竴鏍峰紡 */
.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-card);
    transition: var(--transition);
}

.form-control:focus {
    /* 鑾峰彇鐒︾偣鏃堕珮浜竟妗?+ 鍙戝厜鏁堟灉 */
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

/* 鏂囨湰鍩熶笉鍏佽闅忔剰璋冩暣澶у皬锛堥伩鍏嶇牬鍧忓竷灞€锛?*/
textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

/* 绂佺敤鐘舵€佺殑杈撳叆妗?*/
.form-control:disabled {
    background: var(--color-bg);
    cursor: not-allowed;
}

/* 甯姪鏂囨湰/鎻愮ず */
.form-help {
    font-size: 12px;
    color: var(--color-text-light);
    margin-top: var(--spacing-xs);
}

/* ===== 12. 鐧诲綍/娉ㄥ唽椤甸潰 ===== */
.auth-container {
    max-width: 420px;
    margin: var(--spacing-2xl) auto;
}

.auth-card {
    background: var(--color-card);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: var(--spacing-2xl);
}

.auth-card h1 {
    text-align: center;
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
}

.auth-footer {
    text-align: center;
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* ===== 13. 娑堟伅鎻愮ず锛圓lert锛?===== */
.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: var(--spacing-md);
    border-left: 4px solid;
    font-size: var(--font-size-sm);
    animation: fadeIn 0.3s ease;
}

/* 鎴愬姛娑堟伅 鈥?缁胯壊 */
.alert-success {
    background: #d4edda;
    color: #155724;
    border-color: #28a745;
}

/* 閿欒娑堟伅 鈥?绾㈣壊 */
.alert-error {
    background: #f8d7da;
    color: #721c24;
    border-color: #dc3545;
}

/* 淇℃伅娑堟伅 鈥?钃濊壊 */
.alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border-color: #17a2b8;
}

/* 娣″叆鍔ㄧ敾 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== 14. 绠＄悊闈㈡澘 ===== */

/* 浠〃鐩樻瑙堝崱 */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background: var(--color-card);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
}

.stat-number {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-accent);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-top: var(--spacing-xs);
}

/* 蹇€熸搷浣滄寜閽粍 */
.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

/* ===== 15. 琛ㄦ牸鏍峰紡锛堢敤鎴风鐞嗙瓑锛?===== */
.table-container {
    overflow-x: auto;  /* 灏忓睆骞曚笅姘村钩婊氬姩 */
}

table.data-table {
    width: 100%;
    border-collapse: collapse;  /* 鍚堝苟杈规锛屼娇琛ㄦ牸鏇寸揣鍑?*/
    font-size: var(--font-size-sm);
}

.data-table th,
.data-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

/* 琛ㄥご鏍峰紡 */
.data-table thead th {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    white-space: nowrap;
}

/* 闅旇鍙樿壊 鈥?鎻愬崌鍙鎬?*/
.data-table tbody tr:nth-child(even) {
    background: rgba(236, 240, 241, 0.5);
}

/* 榧犳爣鎮仠琛岄珮浜?*/
.data-table tbody tr:hover {
    background: rgba(52, 152, 219, 0.08);
}

/* ===== 16. 缂栬緫鎸夐挳锛堟诞鍦ㄥ崱鐗囧彸涓婅锛?===== */
.edit-float-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 90;
    background: var(--color-accent);
    color: var(--color-white);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(52, 152, 219, 0.4);
    transition: var(--transition);
    font-size: 24px;
}
.edit-float-btn:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.5);
    text-decoration: none;
    color: var(--color-white);
}

/* ===== 17. 绌虹姸鎬?===== */
.empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-light);
}

.empty-state .icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
}

/* ===== 18. 澶村儚涓婁紶缁勪欢 ===== */

/* 澶村儚涓婁紶鏁翠綋鍖哄煙 */
.avatar-upload-section {
    margin-bottom: var(--spacing-lg);
}

/* 澶村儚棰勮瀹瑰櫒 鈥斺€?灞呬腑灞曠ず */
.avatar-preview-container {
    text-align: center;
    margin-bottom: var(--spacing-md);
    position: relative;
}

/* 宸蹭笂浼犲ご鍍忓浘鐗囬瑙?*/
.avatar-preview-img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--color-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: var(--color-bg);
}

/* 鏃犲ご鍍忔椂鐨勫崰浣嶇锛堥瀛楋級 */
.avatar-preview-placeholder-inline {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 4px solid var(--color-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 涓婁紶鎺т欢琛?*/
.avatar-upload-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* 涓婁紶鎸夐挳鍏夋爣鏍峰紡 */
.avatar-upload-btn {
    cursor: pointer;
}

/* 鏄剧ず宸查€夋枃浠跺悕鐨勬枃瀛?*/
#avatar-file-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 19. 杈呭姪宸ュ叿绫?===== */
.text-center { text-align: center; }
.text-muted  { color: var(--color-text-light); }
.text-danger { color: var(--color-error); }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.hidden  { display: none !important; }

/* ===== 22. 宸︿笅瑙掓诞鍔ㄦ皵娉★紙姹傝亴鐘舵€?+ 寰俊浜岀淮鐮侊級 ===== */
.floating-corner {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* 姹傝亴鐘舵€佹诞鍔ㄦ皵娉?*/
.floating-job-status {
    padding: 10px 24px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-md);
    cursor: default;
    transition: var(--transition);
    white-space: nowrap;
}
.floating-job-status:hover {
    transform: scale(1.05);
}

/* 鍙疄涔?鈥斺€?缁胯壊璋?*/
.job-status-internship {
    background: #d4edda;
    color: #155724;
    border: 2px solid #28a745;
}
/* 鍏ㄨ亴姹傝亴涓?鈥斺€?钃濊壊璋?*/
.job-status-seeking {
    background: #d1ecf1;
    color: #0c5460;
    border: 2px solid #17a2b8;
}
/* 鏆備笉鐪嬫満浼?鈥斺€?鐏拌壊璋?*/
.job-status-not-looking {
    background: #e2e3e5;
    color: #383d41;
    border: 2px solid #6c757d;
}

/* 寰俊浜岀淮鐮佹诞鍔ㄥ崱鐗?*/
.floating-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.floating-qr img {
    width: 88px;
    border-radius: 12px;
    height: 88px;
    border: 2px solid #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    transition: transform var(--transition);
    object-fit: cover;
}
.floating-qr img:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-md);
}
.floating-qr-label {
    font-size: 11px;
    color: #666;
    letter-spacing: 0.5px;
}

/* 鍙充笂瑙掓诞鍔ㄦ皵娉★細绠€鍘嗛瑙?+ 涓嬭浇 */
.floating-corner-topright {
    position: fixed;
    top: 110px;
    right: 24px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.floating-resume-btn {
    padding: 8px 20px;
    border-radius: var(--border-radius-full);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    transition: transform var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}
.floating-resume-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

/* 棰勮鎸夐挳 鈥斺€?钃濊壊璋?*/
.floating-resume-preview {
    background: #d1ecf1;
    color: #0c5460;
    border: 2px solid #17a2b8;
}

/* 涓嬭浇鎸夐挳 鈥斺€?缁胯壊璋?*/
.floating-resume-download {
    background: #d4edda;
    color: #155724;
    border: 2px solid #28a745;
}

/* 缂栬緫椤典腑鐨勪簩缁寸爜棰勮瀹瑰櫒锛堝鐢ㄥご鍍忎笂浼犵殑缁撴瀯妯″紡锛?*/
.qr-preview-container {
    text-align: center;
    margin-bottom: var(--spacing-md);
}
.qr-preview-img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
}

/* ===== 24. 濂栭」/璇佷功灞曠ず缃戞牸 ===== */
/* 浣跨敤 CSS Grid 鑷€傚簲鍗＄墖甯冨眬锛岀珵璧涜幏濂栥€佽绋嬮」鐩瓑浠ュ崱鐗囧舰寮忓睍绀?*/
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}
.project-card {
    background: var(--color-card);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}
.project-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}
.project-card-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}
.project-card-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: 1.7;
    flex: 1;
    margin-bottom: var(--spacing-md);
}
/* 鍥剧墖缂╃暐鍥撅紙椤圭洰鍗＄墖鍐咃紝鑷€傚簲瀹藉害锛?*/
.project-card-thumb {
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}
.project-card-thumb a {
    display: block;
}
.project-card-thumb img {
    width: auto;
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    display: block;
    transition: transform 0.4s ease;
}
    align-items: center;
    justify-content: center;
    flex: 1;
    margin: var(--spacing-sm) 0;
}
.project-card-file-block .file-block-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-xl) var(--spacing-lg);
    background: var(--color-bg);
    border: 2px dashed var(--color-border);
    border-radius: 12px;
    text-decoration: none;
    transition: all var(--transition);
    width: 100%;
    min-height: 140px;
}
.project-card-file-block .file-block-link:hover {
    border-color: var(--color-accent);
    background: rgba(37, 99, 235, 0.04);
    text-decoration: none;
}
.project-card-file-block .file-block-icon {
    font-size: 52px;
    line-height: 1;
    transition: transform var(--transition);
}
.project-card-file-block .file-block-link:hover .file-block-icon {
    transform: scale(1.15);
}
.project-card-file-block .file-block-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    text-align: center;
    word-break: break-all;
    line-height: 1.4;
}
/* 娌℃湁椤圭洰鏃剁殑绌虹姸鎬佸崰浣?*/
.projects-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-light);
}

/* ===== 20. 鍝嶅簲寮忓竷灞€ 鈥?灞忓箷瀹藉害 <= 768px ===== */
@media (max-width: 768px) {
    :root {
        --font-size-base: 15px;
        --font-size-2xl: 26px;
        --spacing-xl: 24px;
    }

    .header-inner {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: 0 clamp(12px, 3vw, 20px);
    }

    .site-nav {
        gap: var(--spacing-md);
        flex-wrap: wrap;
        justify-content: center;
    }

    .profile-hero {
        padding: var(--spacing-xl) 0;
    }

    .profile-avatar,
    .profile-avatar-placeholder {
        width: 110px;
        height: 110px;
    }

    .card {
        padding: var(--spacing-md);
    }

    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }

    .auth-card {
        padding: var(--spacing-lg);
    }

    .edit-float-btn {
        width: 48px;
        height: 48px;
        bottom: 20px;
        right: 20px;
        font-size: 20px;
    }

    /* 绉诲姩绔〃鏍煎彲鐢ㄥ崱鐗囧紡鏇夸唬 */
    .data-table thead {
        display: none;  /* 闅愯棌琛ㄥご */
    }

    .data-table tbody tr {
        display: block;
        margin-bottom: var(--spacing-md);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius);
    }

    .data-table tbody td {
        display: block;
        text-align: right;
        padding: 8px 12px;
        border-bottom: 1px solid var(--color-border);
    }

    /* 鐢ㄤ吉鍏冪礌鏄剧ず瀛楁鍚?*/
    .data-table tbody td::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: var(--color-primary);
    }

    /* 绉诲姩绔細椤圭洰缃戞牸鏀逛负鍗曞垪 */
    .projects-grid {
        grid-template-columns: 1fr;
    }

    /* 绉诲姩绔細缂╃暐鍥鹃檷浣庢渶澶ч珮搴?*/
    .project-card-thumb img {
        max-height: 200px;
    }

    /* 绉诲姩绔細娴姩姘旀场缂╁皬 */
    .floating-corner {
        bottom: 16px;
        left: 12px;
        gap: 8px;
    }
    .floating-job-status {
        padding: 8px 18px;
        font-size: 12px;
    }
    .floating-qr img {
        width: 72px;
        height: 72px;
    }

    /* 绉诲姩绔細鍙充笂瑙掓诞鍔ㄦ皵娉＄缉灏?*/
    .floating-corner-topright {
        top: 65px;
        right: 8px;
        gap: 5px;
    }
    .floating-resume-btn {
        padding: 6px 14px;
        font-size: 11px;
    }

    /* ===== 绉诲姩绔細澶氭爮甯冨眬鍏ㄩ儴鍥為€€涓哄崟鏍?===== */
    body.layout-dual .site-main,
    body.layout-waterfall .site-main {
        column-count: 1;
        max-width: 100%;
    }

    /* 绉诲姩绔殣钘忓竷灞€鍒囨崲鏂囧瓧鏍囩锛屼粎淇濈暀鍥炬爣 */
    .layout-label {
        display: none;
    }
    .layout-switcher-btn {
        padding: var(--spacing-xs) 8px;
    }
}

/* ===== 21. 澧炲己绉诲姩绔搷搴斿紡甯冨眬 ===== */

/* 瓒呭皬灞忓箷锛堟墜鏈虹珫灞忥級锛?80px 鍙婁互涓?*/
@media (max-width: 480px) {
    :root {
        --font-size-base: 14px;
        --font-size-2xl: 22px;
        --spacing-lg: 16px;
        --spacing-xl: 20px;
    }

    .header-inner {
        flex-direction: column;
        gap: 6px;
        padding: 0 10px;
    }

    .site-header {
        padding: 8px 0;
    }

    .site-nav {
        gap: 6px;
        font-size: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .site-nav a {
        padding: 4px 8px;
        font-size: 12px;
    }
    .nav-username {
        font-size: 12px;
    }

    .site-brand {
        font-size: 15px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
    }

    .stat-card {
        padding: 12px;
    }
    .stat-number {
        font-size: 20px;
    }
    .stat-label {
        font-size: 12px;
    }

    .card {
        padding: 12px;
    }
    .card-title {
        font-size: 16px;
    }

    .action-buttons {
        flex-direction: column;
        gap: 8px;
    }
    .action-buttons .btn {
        width: 100%;
        text-align: center;
    }

    .btn {
        padding: 10px 16px;
        font-size: 14px;
        width: 100%;
        text-align: center;
    }

    .admin-container {
        max-width: 100% !important;
        padding: 10px !important;
    }

    .form-control {
        font-size: 16px; /* 闃叉 iOS 鑷姩缂╂斁 */
        padding: 10px 12px;
    }

    .profile-hero {
        padding: 16px 0;
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .profile-avatar,
    .profile-avatar-placeholder {
        width: 80px;
        height: 80px;
    }

    .profile-name {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
    letter-spacing: -0.03em;
    line-height: 1.1;
}
        padding: 16px;
        margin: 10px;
        width: auto;
    }
    .auth-card h1 {
        font-size: 18px;
    }

    .data-table tbody td {
        font-size: 12px;
        padding: 6px 8px;
    }
    .data-table tbody td::before {
        font-size: 12px;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .project-card {
        padding: 12px;
    }
    .project-card-title {
        font-size: 15px;
    }
    .project-card-thumb img {
        max-height: 200px;
    }

    .tab-btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    .floating-corner {
        bottom: 12px;
        left: 8px;
        gap: 6px;
    }
    .floating-job-status {
        padding: 6px 12px;
        font-size: 11px;
    }
    .floating-qr img {
        width: 64px;
        height: 64px;
    }

    .floating-corner-topright {
        top: 60px;
        right: 6px;
        gap: 4px;
    }
    .floating-resume-btn {
        padding: 5px 10px;
        font-size: 10px;
    }

    .edit-float-btn {
        width: 42px;
        height: 42px;
        bottom: 14px;
        right: 14px;
        font-size: 18px;
    }

    h1 {
        font-size: 20px;
    }
    h2 {
        font-size: 17px;
    }

    .layout-label {
        display: none;
    }
    .layout-switcher-btn {
        padding: 2px 6px;
    }

    .table-container {
        overflow-x: auto;
    }

    /* 琛ㄦ牸鍐呮搷浣滄寜閽繚鎸佺揣鍑戯紙涓嶆墿灞曞埌鍏ㄥ锛?*/
    .btn-sm,
    .table-actions .btn-sm,
    td .btn-sm {
        width: auto !important;
        padding: 4px 10px !important;
        font-size: 12px !important;
        display: inline-block !important;
    }

    /* 绠＄悊琛紙admin-table锛夌Щ鍔ㄧ鍗＄墖寮忛€傞厤 */
    .admin-table thead {
        display: none;
    }
    .admin-table tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #dcdde1;
        border-radius: 8px;
        padding: 8px;
    }
    .admin-table tbody td {
        display: block;
        text-align: right;
        padding: 6px 10px;
        border-bottom: 1px solid #eee;
        font-size: 13px;
    }
    .admin-table tbody td::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: var(--color-primary);
    }
    .admin-table tbody td:last-child {
        border-bottom: none;
    }
    /* 缂栬緫绠€浠嬪簳閮ㄦ搷浣滄寜閽?- 绱у噾琛屾帓鍒?*/
    .form-group[style*="flex"] > .btn,
    .form-group[style*="flex"] .btn {
        width: auto !important;
        padding: 6px 14px !important;
        font-size: 13px !important;
        flex: 0 1 auto !important;
    }
}

/* 涓睆锛堝钩鏉?鎵嬫満妯睆锛夛細768px 澧炲己 */
@media (max-width: 768px) {
    .action-buttons .btn {
        flex: 1;
        min-width: 120px;
        text-align: center;
    }

    .admin-container {
        max-width: 100% !important;
        padding: 15px !important;
    }

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

    .form-control {
        font-size: 16px;
    }

    h1 {
        font-size: 22px;
    }

    .project-card-thumb img {
        max-height: 200px;
    }
    /* 缁熶竴 admin-container 瀹藉害涓庣鐞嗙敤鎴峰崱鐗囩瓑澶?*/
    .admin-container {
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ===== 21. 鎵撳嵃鏍峰紡锛圚R 鍙兘闇€瑕佹墦鍗扮畝鍘嗭級 ===== */
@media print {
    .site-header,
    .site-footer,
    .edit-float-btn,
    .floating-corner,
    .floating-corner-topright,
    .action-buttons,
    .btn,
    .layout-switcher-li {
        display: none !important;  /* 鎵撳嵃鏃堕殣钘忓鑸€佹寜閽瓑浜や簰鍏冪礌 */
    }

    /* 寮哄埗浠ラ粯璁ゅ崟鏍忓竷灞€鎵撳嵃锛屽拷鐣ュ綋鍓嶈鍥炬ā寮?*/
    body.layout-dual .site-main,
    body.layout-waterfall .site-main {
        column-count: 1 !important;
        grid-template-columns: 1fr !important;
        display: block !important;
        max-width: 100% !important;
    }

    body {
        background: white;
        color: black;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;  /* 閬垮厤鍗＄墖鍐呭璺ㄩ〉鏂 */
    }
}