/* Colorful icon system — sitewide */

.oae-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.oae-icon-sm { width: 38px; height: 38px; font-size: 1rem; }
.oae-icon-md { width: 52px; height: 52px; font-size: 1.35rem; }
.oae-icon-lg { width: 68px; height: 68px; font-size: 1.75rem; }
.oae-icon-xl { width: 84px; height: 84px; font-size: 2.1rem; }

.tone-blue    { background: linear-gradient(135deg, var(--secondary-light), #a8e4f8); color: var(--primary); }
.tone-indigo  { background: linear-gradient(135deg, #e0e7ff, #a5b4fc); color: #4338ca; }
.tone-purple  { background: linear-gradient(135deg, #ede9fe, #c4b5fd); color: #6d28d9; }
.tone-pink    { background: linear-gradient(135deg, #fce7f3, #f9a8d4); color: #be185d; }
.tone-red     { background: linear-gradient(135deg, #fee2e2, #fca5a5); color: #dc2626; }
.tone-orange  { background: linear-gradient(135deg, #ffedd5, #fdba74); color: #ea580c; }
.tone-amber   { background: linear-gradient(135deg, var(--accent-light), #fcd34d); color: #b45309; }
.tone-green   { background: linear-gradient(135deg, #dcfce7, #86efac); color: #16a34a; }
.tone-teal    { background: linear-gradient(135deg, #ccfbf1, #5eead4); color: #0f766e; }
.tone-cyan    { background: linear-gradient(135deg, #cffafe, #67e8f9); color: #0891b2; }
.tone-rose    { background: linear-gradient(135deg, #ffe4e6, #fda4af); color: #e11d48; }
.tone-violet  { background: linear-gradient(135deg, #f3e8ff, #d8b4fe); color: #7c3aed; }

/* Avatar gradients */
.avatar-tone-1 { background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.avatar-tone-2 { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.avatar-tone-3 { background: linear-gradient(135deg, #059669, #34d399); }
.avatar-tone-4 { background: linear-gradient(135deg, #ea580c, #fb923c); }
.avatar-tone-5 { background: linear-gradient(135deg, #db2777, #f472b6); }
.avatar-tone-6 { background: linear-gradient(135deg, #0891b2, #22d3ee); }

/* Hero feature pills — colorful icon circles */
.hero-icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Stats colorful cards */
.stat-tone-1 { background: linear-gradient(180deg, #eff6ff, #fff); border: 1px solid #bfdbfe; }
.stat-tone-1 .stat-icon-wrap { background: linear-gradient(135deg, #dbeafe, #93c5fd); color: #1d4ed8; }
.stat-tone-2 { background: linear-gradient(180deg, #f0fdf4, #fff); border: 1px solid #bbf7d0; }
.stat-tone-2 .stat-icon-wrap { background: linear-gradient(135deg, #dcfce7, #86efac); color: #16a34a; }
.stat-tone-3 { background: linear-gradient(180deg, #faf5ff, #fff); border: 1px solid #e9d5ff; }
.stat-tone-3 .stat-icon-wrap { background: linear-gradient(135deg, #ede9fe, #c4b5fd); color: #7c3aed; }
.stat-tone-4 { background: linear-gradient(180deg, #fffbeb, #fff); border: 1px solid #fde68a; }
.stat-tone-4 .stat-icon-wrap { background: linear-gradient(135deg, #fef3c7, #fcd34d); color: #d97706; }

.stat-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 10px;
}

/* Subject marquee chips */
.subject-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 50px;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.subject-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1); }
.subject-chip .oae-icon-box { width: 30px; height: 30px; font-size: 0.85rem; border-radius: 50%; box-shadow: none; }

.chip-tone-0  { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.chip-tone-1  { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.chip-tone-2  { background: #faf5ff; border-color: #e9d5ff; color: #6b21a8; }
.chip-tone-3  { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.chip-tone-4  { background: #ecfeff; border-color: #a5f3fc; color: #0e7490; }
.chip-tone-5  { background: #fff1f2; border-color: #fecdd3; color: #be123c; }

/* Landing page badges */
.landing-hero .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 8px 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.landing-hero .hero-badge i { font-size: 1rem; }
.landing-hero .hero-badge:nth-child(1) i { color: var(--primary); }
.landing-hero .hero-badge:nth-child(2) i { color: var(--secondary); }
.landing-hero .hero-badge:nth-child(3) i { color: var(--accent); }
.landing-hero .hero-badge:nth-child(4) i { color: #7c3aed; }

.hero-icon-wrap.tone-blue    { background: linear-gradient(135deg, var(--secondary-light), #a8e4f8); color: var(--primary); }
.hero-icon-wrap.tone-green   { background: linear-gradient(135deg, #dcfce7, #86efac); color: #16a34a; }
.hero-icon-wrap.tone-red     { background: linear-gradient(135deg, #fee2e2, #fca5a5); color: #dc2626; }

.uni-logo-item.chip-tone-0  { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.uni-logo-item.chip-tone-1  { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.uni-logo-item.chip-tone-2  { background: #faf5ff; border: 1px solid #e9d5ff; color: #6b21a8; }
.uni-logo-item.chip-tone-3  { background: #fff7ed; border: 1px solid #fed7aa; color: #c2410c; }
.uni-logo-item.chip-tone-4  { background: #ecfeff; border: 1px solid #a5f3fc; color: #0e7490; }
.uni-logo-item.chip-tone-5  { background: #fff1f2; border: 1px solid #fecdd3; color: #be123c; }
.uni-logo-item i { font-size: 1rem; }

.tool-card .oae-icon-box { display: flex; margin: 0 auto 10px; }
.tool-card { display: flex; flex-direction: column; align-items: center; color: var(--text); }
.tool-card:hover { color: var(--primary); }

.expert-avatar.avatar-tone-1,
.expert-avatar.avatar-tone-2,
.expert-avatar.avatar-tone-3,
.expert-avatar.avatar-tone-4 {
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.expert-avatar.avatar-tone-1 { background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.expert-avatar.avatar-tone-2 { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.expert-avatar.avatar-tone-3 { background: linear-gradient(135deg, #059669, #34d399); }
.expert-avatar.avatar-tone-4 { background: linear-gradient(135deg, #ea580c, #fb923c); }

.expert-avatar-photo {
    padding: 0;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    background: #f1f5f9;
}
.expert-avatar-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.expert-avatar-sm.expert-avatar-photo {
    border-width: 2px;
}

.testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.testimonial-avatar.avatar-tone-1 { background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.testimonial-avatar.avatar-tone-2 { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.testimonial-avatar.avatar-tone-3 { background: linear-gradient(135deg, #059669, #34d399); }
.testimonial-avatar.avatar-tone-4 { background: linear-gradient(135deg, #ea580c, #fb923c); }
.testimonial-avatar.avatar-tone-5 { background: linear-gradient(135deg, #db2777, #f472b6); }
.testimonial-avatar.avatar-tone-6 { background: linear-gradient(135deg, #0891b2, #22d3ee); }

.faq-inner .toggle { gap: 12px; }
.faq-inner .toggle h3 { flex: 1; }
.faq-inner .toggle .oae-icon-box { flex-shrink: 0; }

.obb-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
.obb-list li i {
    flex-shrink: 0;
    margin-top: 2px;
}
.obb-list li:nth-child(6n+1) i { color: #1d4ed8; }
.obb-list li:nth-child(6n+2) i { color: #16a34a; }
.obb-list li:nth-child(6n+3) i { color: #ea580c; }
.obb-list li:nth-child(6n+4) i { color: #7c3aed; }
.obb-list li:nth-child(6n+5) i { color: #0891b2; }
.obb-list li:nth-child(6n+6) i { color: #db2777; }

.content-list li i {
    color: #16a34a;
    background: #dcfce7;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    margin-right: 8px;
    flex-shrink: 0;
}