/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
:root {
    --ink: #102033;
    --muted: #64748b;
    --line: #dbe4ee;
    --paper: #ffffff;
    --soft: #f6f8fb;
    --navy: #10243f;
    --blue: #2563eb;
    --indigo: #4f46e5;
    --teal: #0f766e;
    --amber: #d97706;
    --rose: #e11d48;
    --shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 18px 44px rgba(15, 23, 42, 0.1);
}
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: var(--soft);
    color: #1e293b;
    min-height: 100vh;
    text-rendering: optimizeLegibility;
}
a { text-decoration: none; }
button, input, textarea, select { font: inherit; }

/* ===== Layout ===== */
.page-container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.section-header { margin-bottom: 32px; }
.section-header.compact { margin-bottom: 18px; }
.section-header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.section-header h2 { font-size: 1.55rem; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 10px; margin: 0; letter-spacing: 0; }
.section-header h2::before { content: ''; display: inline-block; width: 4px; height: 1.1em; background: linear-gradient(180deg, var(--blue), var(--teal)); border-radius: 2px; flex-shrink: 0; }
.section-header p { font-size: 0.9rem; color: #64748b; margin-top: 6px; }
.home-main { max-width: 1280px; margin: 0 auto; padding: 52px 16px; display: flex; flex-direction: column; gap: 60px; }
.home-section { content-visibility: auto; contain-intrinsic-size: 520px; }
@media(max-width:720px){
    .home-main { padding: 36px 14px; gap: 44px; }
    .section-header-row { align-items: flex-start; flex-direction: column; }
    .section-header h2 { font-size: 1.35rem; }
}

/* ===== Header/Nav ===== */
.site-header { background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(219,228,238,0.82); position: sticky; top: 0; z-index: 100; }
.site-header-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.site-logo-icon { width: 38px; height: 38px; border-radius: 8px; background: linear-gradient(135deg, var(--navy), var(--teal)); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(15, 118, 110, 0.24); }
.site-logo-text { line-height: 1.2; }
.site-logo-text strong { font-size: 14px; color: #0f172a; display: block; }
.site-logo-text span { font-size: 11px; color: #94a3b8; }
.site-nav { display: flex; align-items: center; gap: 2px; }
.nav-link { padding: 6px 11px; border-radius: 8px; font-size: 13.5px; color: #475569; transition: all 0.15s; white-space: nowrap; font-weight: 500; }
.nav-button { border: 0; background: transparent; cursor: pointer; font-family: inherit; }
.nav-link:hover { color: var(--teal); background: #ecfdf5; }
.nav-link.active { color: var(--navy); background: #e0f2fe; }
.nav-link.admin-link { color: #D97706; }
.nav-link.admin-link:hover { background: #FEF3C7; }
.auth-area { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.btn-login { padding: 6px 14px; font-size: 13.5px; color: #475569; font-weight: 500; border-radius: 8px; background: none; border: 1px solid #e2e8f0; cursor: pointer; transition: all 0.15s; }
.btn-login:hover { color: var(--teal); border-color: #99f6e4; background: #ecfdf5; }
.btn-register { padding: 7px 18px; font-size: 13.5px; color: white; font-weight: 600; border-radius: 8px; background: linear-gradient(135deg, var(--navy), var(--teal)); border: none; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 8px rgba(15,118,110,0.28); }
.btn-register:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(15,118,110,0.36); }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--navy), var(--teal)); color: white; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }

/* ===== Hero ===== */
.hero {
    min-height: 620px;
    color: #0f172a;
    padding: 104px 20px 78px;
    text-align: left;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 38%, rgba(255,255,255,0.62) 68%, rgba(255,255,255,0.18) 100%),
        url("../assets/hero-teacher-workspace.jpg") center / cover no-repeat;
}
.hero::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 72px; background: linear-gradient(to top, var(--soft), rgba(246,248,251,0)); }
.hero-content { position: relative; z-index: 1; width: min(660px, 100%); max-width: 1280px; margin: 0 auto; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.76); border: 1px solid rgba(15,118,110,0.16); backdrop-filter: blur(10px); padding: 7px 16px; border-radius: 999px; font-size: 13px; margin-bottom: 26px; color: #0f766e; box-shadow: 0 8px 26px rgba(15,23,42,0.06); }
.hero-badge-dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 8px rgba(34,197,94,0.8); animation: ping-dot 2s ease-in-out infinite; }
@keyframes ping-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
.hero h1 { font-size: 58px; font-weight: 850; line-height: 1.08; margin: 0 0 22px; letter-spacing: 0; }
.hero h1 .highlight { background: linear-gradient(135deg, #c4b5fd, #f0abfc, #fda4af); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero p { color: #475569; font-size: 18px; margin: 0 0 34px; line-height: 1.85; max-width: 620px; }
.hero-btns { display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; }
.btn-hero-primary, .btn-hero-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-hero-primary { padding: 14px 28px; background: linear-gradient(135deg, #0f766e, #15803d); color: white; font-weight: 750; border-radius: 8px; font-size: 15px; border: none; cursor: pointer; transition: all 0.2s; box-shadow: 0 10px 24px rgba(15,118,110,0.22); }
.btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(15,118,110,0.28); }
.btn-hero-secondary { padding: 14px 26px; background: rgba(255,255,255,0.72); border: 1px solid rgba(15,118,110,0.2); color: #0f766e; font-weight: 650; border-radius: 8px; font-size: 15px; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(8px); box-shadow: 0 8px 22px rgba(15,23,42,0.06); }
.btn-hero-secondary:hover { background: white; transform: translateY(-1px); }
.hero-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 590px; margin-top: 34px; }
.hero-highlights a { min-width: 0; padding: 14px 16px; border: 1px solid rgba(15,118,110,0.14); border-radius: 8px; background: rgba(255,255,255,0.74); color: #0f172a; backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(15,23,42,0.06); }
.hero-highlights strong { display: block; font-size: 20px; line-height: 1; margin-bottom: 6px; }
.hero-highlights span { display: block; font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media(max-width:900px){
    .hero { min-height: 560px; padding: 86px 18px 68px; background-position: 60% center; }
    .hero h1 { font-size: 44px; }
    .hero p { font-size: 16px; }
}
@media(max-width:640px){
    .hero { min-height: auto; padding: 68px 16px 58px; background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(255,255,255,0.82)), url("../assets/hero-teacher-workspace.jpg") center / cover no-repeat; }
    .hero h1 { font-size: 34px; }
    .hero-highlights { grid-template-columns: 1fr; }
    .hero-highlights a { padding: 12px 14px; }
}

/* ===== Stats bar ===== */
.stats-bar { background: white; border-bottom: 1px solid #eef2f7; }
.stats-inner { max-width: 1280px; margin: 0 auto; padding: 20px 20px; display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.stat-item { padding: 8px; border-right: 1px solid #eef2f7; }
.stat-item:last-child { border-right: none; }
.stat-item strong { display: block; font-size: 1.5rem; font-weight: 800; background: linear-gradient(135deg, var(--blue), var(--teal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-item span { font-size: 12px; color: #94a3b8; margin-top: 3px; display: block; }
@media(max-width:640px){ .stats-inner{grid-template-columns:repeat(2,1fr)} }

/* ===== Contact band ===== */
.contact-band {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 24px 28px;
    border-radius: 8px;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-left: 5px solid var(--teal);
    background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 48%, #fff7ed 100%);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}
.contact-band-icon {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f766e;
    background: #ccfbf1;
    font-size: 28px;
    box-shadow: inset 0 0 0 1px rgba(15,118,110,0.1);
}
.contact-band-copy span {
    display: block;
    margin-bottom: 5px;
    color: #d97706;
    font-size: 12px;
    font-weight: 800;
}
.contact-band-copy h2 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.24;
    letter-spacing: 0;
}
.contact-band-copy p {
    margin: 7px 0 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.7;
}
.contact-band-button {
    min-width: 132px;
    border: 0;
    border-radius: 8px;
    padding: 13px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    background: linear-gradient(135deg, var(--teal), #d97706);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(15, 118, 110, 0.22);
    transition: transform 0.2s, box-shadow 0.2s;
}
.contact-band-button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(15, 118, 110, 0.28); }
@media(max-width:720px){
    .contact-band { grid-template-columns: auto minmax(0, 1fr); padding: 20px; }
    .contact-band-button { grid-column: 1 / -1; width: 100%; }
}
@media(max-width:460px){
    .contact-band { grid-template-columns: 1fr; }
    .contact-band-icon { width: 50px; height: 50px; }
}

/* ===== Feature nav ===== */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.feature-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 20px; background: white; border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(15,23,42,0.02); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.feature-card:hover { border-color: #bfdbfe; box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.feature-icon { width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 22px; }
.feature-title { font-size: 14px; font-weight: 750; color: #0f172a; }
.feature-desc { font-size: 12px; color: #64748b; margin-top: 3px; line-height: 1.5; }
.feature-tools { background: #eff6ff; color: #2563eb; }
.feature-paths { background: #ecfdf5; color: #059669; }
.feature-prompts { background: #fffbeb; color: #d97706; }
.feature-news { background: #f0f9ff; color: #0284c7; }
.feature-showcase { background: #fdf2f8; color: #db2777; }
.feature-articles { background: #f0fdfa; color: #0f766e; }
.feature-resources { background: #fff1f2; color: #e11d48; }
@media(max-width:820px){ .feature-grid{grid-template-columns:1fr 1fr} }
@media(max-width:460px){ .feature-grid{grid-template-columns:1fr} }

/* ===== Cards ===== */
.card { background: white; border: 1px solid #eef2f7; border-radius: 8px; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; overflow: hidden; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #c7d2fe; }
.cards-grid { display: grid; gap: 18px; }
.cards-grid-4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cards-grid-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.cards-grid-2 { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); }
@media(max-width:640px){ .cards-grid-4,.cards-grid-3,.cards-grid-2{grid-template-columns:1fr} }

/* ===== Filter pills ===== */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filter-pill { padding: 7px 18px; border-radius: 999px; font-size: 13px; border: 1.5px solid #e2e8f0; color: #475569; background: white; cursor: pointer; transition: all 0.15s; font-weight: 500; }
.filter-pill:hover { border-color: #a5b4fc; color: #4F46E5; background: #EEF2FF; }
.filter-pill.active { background: linear-gradient(135deg, var(--navy), var(--teal)); border-color: transparent; color: white; font-weight: 600; box-shadow: 0 2px 10px rgba(15,118,110,0.26); }

/* ===== Tool card ===== */
.tool-card { padding: 22px; cursor: pointer; }
.tool-card-icon { width: 46px; height: 46px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; transition: transform 0.2s; }
.tool-card:hover .tool-card-icon { transform: scale(1.08) rotate(-3deg); }
.tool-card-arrow { width: 30px; height: 30px; border-radius: 50%; background: #f8fafc; color: #cbd5e1; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
.tool-card:hover .tool-card-arrow { background: linear-gradient(135deg, #4F46E5, #7C3AED); color: white; box-shadow: 0 4px 12px rgba(79,70,229,0.3); }

/* ===== Star Rating ===== */
.star-row { display: flex; align-items: center; gap: 3px; margin-top: 8px; }
.star { font-size: 13px; color: #e2e8f0; cursor: pointer; transition: color 0.1s; line-height: 1; }
.star.on { color: #F59E0B; }
.star-count { font-size: 11px; color: #94a3b8; margin-left: 4px; }
.star-row.interactive .star:hover, .star-row.interactive .star:hover ~ .star { color: #FCD34D; }

/* ===== News card ===== */
.news-card { padding: 22px; }
.news-meta { font-size: 11px; color: #94a3b8; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.news-source { color: #4F46E5; font-weight: 600; }
.news-card h3 { font-size: 14px; font-weight: 600; color: #0f172a; line-height: 1.55; transition: color 0.15s; }
.news-card:hover h3 { color: #4F46E5; }
.news-card p { font-size: 12px; color: #64748b; line-height: 1.7; margin-top: 8px; }

/* ===== Skeleton ===== */
.skeleton { animation: shimmer 1.8s ease-in-out infinite; background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%; border-radius: 6px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ===== Modal ===== */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.65); z-index: 500; backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 16px; }
.modal-overlay.active { display: flex; }
.modal-box { background: white; border-radius: 8px; width: 100%; max-width: 440px; overflow: hidden; box-shadow: 0 30px 80px -10px rgba(0,0,0,0.35); }
.modal-tabs { display: flex; border-bottom: 1px solid #f1f5f9; }
.modal-tab { flex: 1; padding: 16px; font-size: 14px; font-weight: 600; color: #94a3b8; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.15s; }
.modal-tab.active { color: #4F46E5; border-bottom-color: #4F46E5; }
.modal-body { padding: 24px; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 7px; }
.form-input { width: 100%; padding: 11px 14px; border: 1.5px solid #e2e8f0; border-radius: 8px; font-size: 14px; font-family: inherit; transition: all 0.15s; background: #fafafa; color: #0f172a; }
.form-input:focus { outline: none; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); background: white; }
.form-error { font-size: 12px; color: #ef4444; background: #fef2f2; padding: 9px 12px; border-radius: 9px; margin-top: 6px; border: 1px solid #fee2e2; }
.btn-primary { width: 100%; padding: 13px; background: linear-gradient(135deg, var(--navy), var(--teal)); color: white; font-size: 14px; font-weight: 700; border-radius: 8px; border: none; cursor: pointer; transition: all 0.2s; font-family: inherit; box-shadow: 0 4px 14px rgba(15,118,110,0.26); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(15,118,110,0.34); }
.btn-primary:disabled { opacity: 0.6; transform: none; cursor: not-allowed; }
.modal-footer-text { text-align: center; font-size: 13px; color: #64748b; margin-top: 16px; }
.modal-footer-text button { color: #4F46E5; background: none; border: none; cursor: pointer; font-weight: 600; font-family: inherit; }
.modal-footer-text button:hover { text-decoration: underline; }

/* ===== Toast ===== */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(8px); background: #0f172a; color: white; font-size: 13.5px; padding: 11px 22px; border-radius: 8px; opacity: 0; transition: opacity 0.25s, transform 0.25s; z-index: 1000; pointer-events: none; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Admin ===== */
.admin-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #92400E; border-radius: 999px; font-size: 11px; font-weight: 700; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 11px 14px; color: #64748b; font-weight: 600; border-bottom: 1px solid #e2e8f0; background: #f8fafc; font-size: 12px; letter-spacing: 0; }
td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafafa; }

/* ===== Announcement ===== */
.announcement { background: linear-gradient(90deg, #EFF6FF, #F5F3FF); border-left: 3px solid #4F46E5; padding: 14px 18px; border-radius: 0 12px 12px 0; margin-bottom: 12px; }
.announcement strong { font-size: 14px; color: #1e40af; }
.announcement p { font-size: 13px; color: #3730a3; margin-top: 4px; line-height: 1.6; }

/* ===== Breadcrumb ===== */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #94a3b8; margin-bottom: 28px; }
.breadcrumb a { color: #64748b; transition: color 0.15s; }
.breadcrumb a:hover { color: #4F46E5; }

/* ===== Prompt card ===== */
.prompt-card { padding: 22px; }
.prompt-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.prompt-card-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.prompt-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.copy-btn { display: flex; align-items: center; gap: 5px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: #4F46E5; border: 1.5px solid #c7d2fe; border-radius: 9px; background: white; cursor: pointer; transition: all 0.15s; white-space: nowrap; flex-shrink: 0; }
.copy-btn:hover { background: #EEF2FF; }
.copy-btn.copied { color: #059669; border-color: #a7f3d0; background: #ecfdf5; }

/* ===== Community badge ===== */
.badge-community { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; background: #F0FDF4; color: #15803d; border: 1px solid #bbf7d0; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge-pending { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; background: #FFFBEB; color: #92400E; border: 1px solid #fde68a; border-radius: 999px; font-size: 11px; font-weight: 600; }

/* ===== Like button ===== */
.like-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font-size: 12px; color: #64748b; border: 1.5px solid #e2e8f0; border-radius: 999px; background: white; cursor: pointer; transition: all 0.15s; }
.like-btn:hover { border-color: #fda4af; color: #e11d48; background: #fff1f2; }
.like-btn.liked { border-color: #fda4af; color: #e11d48; background: #fff1f2; }

/* ===== Path card ===== */
.path-card { overflow: hidden; }
.path-card-head {
    min-height: 128px;
    padding: 28px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.path-card-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}
.path-card-head h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.path-card-head p { margin: 0; opacity: .75; font-size: 13px; }
.path-card-meta { margin-top: 10px; font-size: 12px; opacity: .6; display: flex; align-items: center; gap: 6px; }
.path-card-meta span { background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 999px; margin-left: 4px; }
.path-card-body { padding: 24px; }

/* ===== Showcase card ===== */
.showcase-card { padding: 0; overflow: hidden; }
.showcase-card-img { height: 160px; background: linear-gradient(135deg, #EEF2FF, #F5F3FF); display: flex; align-items: center; justify-content: center; font-size: 48px; color: #a5b4fc; position: relative; overflow: hidden; }
.showcase-card-img img { width: 100%; height: 100%; object-fit: cover; }
.showcase-card-body { padding: 18px; }
.showcase-tag { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; margin-bottom: 10px; }

/* ===== Subscribe widget ===== */
.subscribe-section { background: linear-gradient(135deg, var(--navy), #0f766e); border-radius: 8px; padding: 48px 32px; text-align: center; color: white; position: relative; overflow: hidden; }
.subscribe-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 24px 24px; }
.subscribe-section h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 10px; position: relative; }
.subscribe-section p { color: rgba(255,255,255,0.7); font-size: 14px; margin-bottom: 28px; position: relative; }
.subscribe-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; position: relative; flex-wrap: wrap; justify-content: center; }
.subscribe-input { flex: 1; min-width: 200px; padding: 13px 18px; border: none; border-radius: 8px; font-size: 14px; font-family: inherit; background: rgba(255,255,255,0.12); color: white; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); }
.subscribe-input::placeholder { color: rgba(255,255,255,0.45); }
.subscribe-input:focus { outline: none; background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }
.subscribe-btn { padding: 13px 28px; background: white; color: var(--navy); font-weight: 700; font-size: 14px; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-family: inherit; white-space: nowrap; }
.subscribe-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }

/* ===== Footer ===== */
.site-footer { background: #0f172a; color: white; padding: 56px 20px 28px; margin-top: 72px; }
.footer-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; margin-bottom: 40px; }
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .footer-grid{grid-template-columns:1fr} }
.footer-brand p { font-size: 13px; color: #64748b; margin-top: 12px; line-height: 1.8; max-width: 260px; }
.footer-col h4 { font-size: 12px; font-weight: 700; color: #94a3b8; margin-bottom: 14px; letter-spacing: 0; text-transform: uppercase; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 13px; color: #475569; transition: color 0.15s; }
.footer-col a:hover { color: #e2e8f0; }
.footer-link-button { padding: 0; border: 0; background: transparent; color: #475569; font: inherit; font-size: 13px; cursor: pointer; transition: color 0.15s; }
.footer-link-button:hover { color: #e2e8f0; }
.footer-bottom { max-width: 1280px; margin: 0 auto; padding-top: 24px; border-top: 1px solid #1e293b; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #334155; flex-wrap: wrap; gap: 8px; }

/* ===== 精选文章 ===== */
.article-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.article-cover { height: 130px; display: flex; align-items: center; justify-content: center; font-size: 52px; position: relative; overflow: hidden; flex-shrink: 0; }
.article-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.15)); }
.article-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.article-cat-tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; margin-bottom: 10px; }
.article-title { font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.55; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-summary { font-size: 13px; color: #64748b; line-height: 1.7; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article-meta { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f1f5f9; font-size: 11px; color: #94a3b8; }
.article-external-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; background: #f1f5f9; color: #64748b; border-radius: 999px; font-size: 11px; }
/* Article detail reading view */
.prose { max-width: 720px; margin: 0 auto; font-size: 16px; line-height: 1.9; color: #374151; }
.prose h1 { font-size: 1.8rem; font-weight: 800; color: #0f172a; margin: 1.6em 0 0.5em; }
.prose h2 { font-size: 1.35rem; font-weight: 700; color: #0f172a; margin: 1.6em 0 0.6em; padding-bottom: 8px; border-bottom: 2px solid #f1f5f9; }
.prose h3 { font-size: 1.1rem; font-weight: 700; color: #1e293b; margin: 1.4em 0 0.5em; }
.prose p { margin: 0.9em 0; }
.prose ul, .prose ol { padding-left: 1.6em; margin: 0.8em 0; }
.prose li { margin: 0.45em 0; }
.prose blockquote { border-left: 4px solid #4F46E5; padding: 12px 18px; background: #f8faff; margin: 1.2em 0; border-radius: 0 10px 10px 0; color: #4F46E5; font-style: italic; }
.prose code { background: #f1f5f9; padding: 2px 7px; border-radius: 5px; font-size: 14px; font-family: 'Menlo','Monaco',monospace; color: #e11d48; }
.prose pre { background: #1e293b; color: #e2e8f0; padding: 20px; border-radius: 8px; overflow-x: auto; margin: 1.2em 0; }
.prose pre code { background: none; color: inherit; padding: 0; font-size: 14px; }
.prose a { color: #4F46E5; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #3730a3; }
.prose img { max-width: 100%; border-radius: 8px; margin: 1.2em 0; }
.prose hr { border: none; border-top: 1px solid #e2e8f0; margin: 2em 0; }
.prose strong { color: #0f172a; font-weight: 700; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.prose th, .prose td { padding: 10px 14px; border: 1px solid #e2e8f0; text-align: left; }
.prose th { background: #f8fafc; font-weight: 600; }

/* ===== Resources page ===== */
.resources-mobile-nav { display: none; border-top: 1px solid #f1f5f9; overflow-x: auto; }
.resources-mobile-nav > div { display: flex; padding: 0 16px; gap: 2px; min-width: max-content; }
.resource-page { max-width: 1280px; margin: 0 auto; padding: 40px 16px 64px; }
.resource-hero {
    min-height: 260px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    align-items: end;
    gap: 28px;
    padding: 42px;
    border-radius: 8px;
    color: white;
    background:
        linear-gradient(135deg, rgba(16,36,63,0.96), rgba(15,118,110,0.9)),
        url("../assets/hero-teacher-workspace.jpg") center / cover no-repeat;
    overflow: hidden;
}
.resource-hero h1 { margin: 0 0 10px; font-size: 42px; line-height: 1.15; letter-spacing: 0; }
.resource-hero p { margin: 0; max-width: 680px; color: rgba(255,255,255,0.78); line-height: 1.8; font-size: 15px; }
.resource-search { position: relative; align-self: end; }
.resource-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.resource-search input {
    width: 100%;
    padding: 13px 16px 13px 42px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    background: rgba(255,255,255,0.94);
    color: #0f172a;
    outline: none;
    box-shadow: 0 10px 28px rgba(15,23,42,0.12);
}
.resource-content { display: flex; flex-direction: column; gap: 42px; margin-top: 44px; }
.resource-section { content-visibility: auto; contain-intrinsic-size: 360px; }
.resource-section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.resource-section-title span { width: 42px; height: 42px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.resource-section-title h2 { margin: 0; font-size: 22px; color: #0f172a; letter-spacing: 0; }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.resource-card {
    display: flex;
    min-height: 172px;
    flex-direction: column;
    padding: 20px;
    background: white;
    border: 1px solid #eef2f7;
    border-radius: 8px;
    color: inherit;
    box-shadow: 0 1px 0 rgba(15,23,42,0.02);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.resource-card:hover { transform: translateY(-3px); border-color: #bfdbfe; box-shadow: var(--shadow-sm); }
.resource-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 12px; }
.resource-card-top > i { color: var(--blue); font-size: 20px; flex-shrink: 0; }
.resource-card-top h3 { margin: 0; font-size: 16px; color: #0f172a; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.resource-card-top span { margin-left: auto; color: #cbd5e1; font-size: 14px; }
.resource-card p { margin: 0; color: #64748b; font-size: 13px; line-height: 1.75; flex: 1; }
.resource-domain { margin-top: 16px; padding-top: 12px; border-top: 1px solid #f1f5f9; color: #94a3b8; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.resource-empty { text-align: center; padding: 70px 20px; color: #94a3b8; }
.resource-empty i { display: block; font-size: 42px; margin-bottom: 12px; }
.compact-footer { margin-top: 0; padding: 26px 20px; }

/* ===== Floating assistant and contact ===== */
.assistant-launcher {
    position: fixed;
    right: 22px;
    bottom: 96px;
    z-index: 420;
    width: 104px;
    height: 92px;
    border: 0;
    border-radius: 28px;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(0 18px 24px rgba(15, 23, 42, 0.2));
}
.assistant-launcher:focus-visible,
.assistant-send:focus-visible,
.assistant-panel button:focus-visible,
.contact-band-button:focus-visible,
.contact-modal button:focus-visible,
.contact-modal input:focus-visible,
.contact-modal textarea:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.28);
    outline-offset: 2px;
}
.assistant-mascot {
    position: relative;
    width: 82px;
    height: 78px;
    margin-left: auto;
    border-radius: 24px 24px 28px 28px;
    background: linear-gradient(180deg, #ffffff 0%, #dff7ff 100%);
    border: 2px solid rgba(125, 211, 252, 0.9);
    box-shadow: inset 0 -10px 18px rgba(14, 165, 233, 0.12), 0 10px 24px rgba(15, 23, 42, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mascot-ear {
    position: absolute;
    top: -11px;
    width: 25px;
    height: 28px;
    border-radius: 8px 14px 8px 14px;
    background: linear-gradient(160deg, #fff7ed, #fed7aa);
    border: 2px solid rgba(251, 146, 60, 0.48);
    z-index: 0;
}
.mascot-ear-left { left: 8px; transform: rotate(-18deg); }
.mascot-ear-right { right: 8px; transform: rotate(18deg) scaleX(-1); }
.mascot-screen {
    position: relative;
    z-index: 2;
    width: 62px;
    height: 50px;
    border-radius: 18px 18px 20px 20px;
    background: linear-gradient(180deg, #10243f 0%, #0f766e 100%);
    border: 2px solid rgba(255,255,255,0.92);
    box-shadow: inset 0 -8px 16px rgba(0,0,0,0.16);
}
.mascot-eye {
    content: '';
    position: absolute;
    top: 15px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #d1fae5;
    box-shadow: 0 0 10px rgba(209,250,229,0.7);
}
.mascot-eye::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: white;
}
.mascot-eye-left { left: 14px; }
.mascot-eye-right { right: 14px; }
.mascot-nose {
    position: absolute;
    top: 29px;
    left: 50%;
    width: 8px;
    height: 6px;
    border-radius: 50%;
    background: #fbbf24;
    transform: translateX(-50%);
}
.mascot-mouth {
    position: absolute;
    left: 50%;
    top: 34px;
    width: 24px;
    height: 10px;
    border-bottom: 3px solid rgba(255,255,255,0.9);
    border-radius: 0 0 999px 999px;
    transform: translateX(-50%);
}
.mascot-antenna {
    position: absolute;
    z-index: 3;
    top: -20px;
    left: 50%;
    width: 2px;
    height: 14px;
    background: #0f766e;
    transform: translateX(-50%);
}
.mascot-antenna::before {
    content: '';
    position: absolute;
    top: -7px;
    left: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}
.mascot-tail {
    position: absolute;
    z-index: 1;
    right: -10px;
    bottom: 12px;
    width: 22px;
    height: 34px;
    border: 6px solid #fbbf24;
    border-left: 0;
    border-top: 0;
    border-radius: 0 0 24px 0;
    transform: rotate(-8deg);
}
.assistant-launcher-label {
    position: absolute;
    right: 88px;
    bottom: 18px;
    min-width: 132px;
    padding: 8px 11px;
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font-size: 12px;
    line-height: 1.35;
    box-shadow: var(--shadow-sm);
    border: 1px solid #e2e8f0;
    text-align: left;
}
.assistant-launcher-label strong { display: block; font-size: 13px; }
.assistant-launcher-label span { display: block; color: #64748b; font-size: 11px; font-weight: 600; margin-top: 1px; }
.assistant-panel {
    position: fixed;
    right: 24px;
    top: 84px;
    bottom: 24px;
    z-index: 430;
    width: min(420px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
    transform: translateX(calc(100% + 48px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.24s ease, opacity 0.24s ease;
    overflow: hidden;
}
.assistant-panel.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.assistant-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    color: white;
    background: linear-gradient(135deg, var(--navy), var(--teal));
}
.assistant-mini {
    position: relative;
    width: 40px;
    height: 38px;
    border-radius: 14px 14px 16px 16px;
    background: linear-gradient(180deg, #f8fafc, #bfdbfe);
    border: 1px solid rgba(255,255,255,0.72);
    box-shadow: inset 0 -5px 10px rgba(14, 165, 233, 0.16);
    flex-shrink: 0;
}
.assistant-mini-ear {
    position: absolute;
    top: -6px;
    width: 13px;
    height: 14px;
    border-radius: 5px 9px 5px 9px;
    background: #fed7aa;
    border: 1px solid rgba(255,255,255,0.78);
}
.assistant-mini-ear.left { left: 4px; transform: rotate(-18deg); }
.assistant-mini-ear.right { right: 4px; transform: rotate(18deg) scaleX(-1); }
.assistant-mini-face {
    position: absolute;
    inset: 8px 7px 6px;
    border-radius: 10px 10px 12px 12px;
    background: #10243f;
}
.assistant-mini-face::before,
.assistant-mini-face::after {
    content: '';
    position: absolute;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d1fae5;
    box-shadow: 0 0 6px rgba(209,250,229,0.72);
}
.assistant-mini-face::before { left: 6px; }
.assistant-mini-face::after { right: 6px; }
.assistant-panel-title { font-weight: 800; line-height: 1.2; }
.assistant-panel-subtitle { font-size: 12px; color: rgba(255,255,255,0.72); margin-top: 3px; }
.assistant-head-actions { margin-left: auto; display: flex; gap: 6px; }
.assistant-icon-button {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 8px;
    color: white;
    background: rgba(255,255,255,0.08);
    cursor: pointer;
}
.assistant-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f8fafc;
}
.assistant-message { display: flex; margin-bottom: 12px; }
.assistant-message.user { justify-content: flex-end; }
.assistant-bubble {
    max-width: 86%;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.75;
    color: #334155;
    background: white;
    border: 1px solid #eef2f7;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.assistant-message.user .assistant-bubble {
    background: var(--navy);
    color: white;
    border-color: transparent;
}
.assistant-bubble a { color: #2563eb; font-weight: 700; }
.assistant-message.user .assistant-bubble a { color: #bfdbfe; }
.assistant-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 14px;
    background: #f8fafc;
}
.assistant-chip {
    border: 1px solid #dbe4ee;
    border-radius: 999px;
    padding: 7px 11px;
    background: white;
    color: #475569;
    font-size: 12px;
    cursor: pointer;
}
.assistant-chip:hover { border-color: #99f6e4; color: var(--teal); background: #ecfdf5; }
.assistant-composer {
    display: flex;
    gap: 8px;
    padding: 14px;
    background: white;
    border-top: 1px solid #eef2f7;
}
.assistant-input {
    flex: 1;
    min-width: 0;
    resize: none;
    height: 44px;
    max-height: 110px;
    padding: 11px 12px;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    outline: none;
    color: #0f172a;
}
.assistant-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,118,110,0.1); }
.assistant-send {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--navy), var(--teal));
    color: white;
    cursor: pointer;
}
.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 520;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15,23,42,0.62);
    backdrop-filter: blur(6px);
}
.contact-modal.open { display: flex; }
.contact-box {
    width: min(520px, 100%);
    border-radius: 8px;
    background: white;
    box-shadow: 0 30px 90px rgba(15,23,42,0.28);
    overflow: hidden;
}
.contact-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f7;
}
.contact-head h3 { margin: 0; font-size: 18px; color: #0f172a; }
.contact-head p { margin: 4px 0 0; font-size: 12px; color: #64748b; }
.contact-close { margin-left: auto; border: 0; background: transparent; color: #64748b; font-size: 22px; cursor: pointer; }
.contact-form { padding: 20px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form label { display: block; font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 7px; }
.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    padding: 11px 12px;
    color: #0f172a;
    outline: none;
    background: #fff;
}
.contact-form textarea { min-height: 138px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,118,110,0.1); }
.contact-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.contact-secondary,
.contact-submit {
    border: 0;
    border-radius: 8px;
    padding: 11px 18px;
    font-weight: 700;
    cursor: pointer;
}
.contact-secondary { background: #f1f5f9; color: #475569; }
.contact-submit { background: linear-gradient(135deg, var(--navy), var(--teal)); color: white; }
.contact-submit:disabled { opacity: 0.62; cursor: not-allowed; }
.contact-note { margin: 12px 0 0; color: #94a3b8; font-size: 12px; line-height: 1.6; }
@media(max-width:640px){
    .assistant-launcher { right: 14px; bottom: 88px; width: 84px; height: 76px; }
    .assistant-mascot { width: 68px; height: 64px; border-radius: 20px 20px 23px 23px; }
    .mascot-ear { top: -8px; width: 20px; height: 22px; }
    .mascot-screen { width: 52px; height: 42px; border-radius: 15px 15px 17px 17px; }
    .mascot-eye { top: 12px; width: 9px; height: 9px; }
    .mascot-eye-left { left: 12px; }
    .mascot-eye-right { right: 12px; }
    .mascot-nose { top: 25px; width: 7px; height: 5px; }
    .mascot-mouth { top: 29px; width: 20px; height: 9px; }
    .mascot-antenna { top: -17px; }
    .mascot-tail { right: -8px; bottom: 10px; width: 18px; height: 28px; border-width: 5px; }
    .assistant-launcher-label { display: none; }
    .assistant-panel { inset: auto 10px 10px 10px; top: 78px; width: auto; }
    .contact-grid { grid-template-columns: 1fr; }
    .contact-actions { flex-direction: column-reverse; }
    .contact-secondary, .contact-submit { width: 100%; }
}
@media(max-width:900px){
    .resources-desktop-nav { display: none; }
    .resources-mobile-nav { display: block; }
    .resource-hero { grid-template-columns: 1fr; padding: 30px; }
}
@media(max-width:560px){
    .resource-page { padding: 28px 14px 48px; }
    .resource-hero { padding: 24px; }
    .resource-hero h1 { font-size: 32px; }
}

/* ===== Lightweight color utilities ===== */
.text-blue-500, .text-blue-600 { color: #2563eb; }
.text-pink-500 { color: #db2777; }
.text-emerald-500 { color: #059669; }
.text-green-500 { color: #16a34a; }
.text-purple-500 { color: #7c3aed; }
.text-violet-500 { color: #7c3aed; }
.text-orange-400, .text-orange-500 { color: #ea580c; }
.text-amber-500, .text-yellow-500 { color: #d97706; }
.text-rose-500 { color: #e11d48; }
.text-indigo-500 { color: #4f46e5; }
.text-cyan-500 { color: #0891b2; }
.text-sky-500 { color: #0284c7; }
.text-teal-500 { color: #0f766e; }
.bg-blue-50 { background: #eff6ff; }
.bg-pink-50 { background: #fdf2f8; }
.bg-emerald-50, .bg-green-50 { background: #ecfdf5; }
.bg-purple-50, .bg-violet-50, .bg-indigo-50 { background: #f5f3ff; }
.bg-orange-50, .bg-amber-50, .bg-yellow-50 { background: #fff7ed; }
.bg-rose-50 { background: #fff1f2; }
.bg-cyan-50, .bg-sky-50 { background: #ecfeff; }
.bg-teal-50 { background: #f0fdfa; }

/* ===== Utilities ===== */
[id] { scroll-margin-top: 80px; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }