/* ==========================================================================
   科技橙主题 · 视觉精修层（Tech Orange）
   --------------------------------------------------------------------------
   设计目标：大厂质感 —— 克制的橙色、统一的圆角、轻量阴影、干净的层次。

   三条铁律：
     1. 只改视觉属性（颜色/圆角/阴影/过渡/字重/描边），不碰
        display / float / position / width / height / margin / padding。
     2. 选择器统一加 `html body` 前缀，把特异性提到 (0,1,2) 以上，
        这样无论业务 CSS 加载在前还是在后，覆盖都生效，且无需 !important。
     3. 不覆盖会改变元素尺寸的属性（如全局行高、全局图片圆角），
        避免把圆形头像压成圆角矩形、把固定高度容器撑破。
   ========================================================================== */

:root {
    /* 品牌色阶 */
    --to-primary:        #FF6A00;
    --to-primary-dark:   #E85D00;
    --to-primary-light:  #FF8A33;
    --to-primary-tint:   #FFF4EC;
    --to-primary-tint-2: #FFE8D6;

    /* 中性色阶 */
    --to-ink:    #1A1A1A;
    --to-text:   #4A4A4A;
    --to-text-2: #8C8C8C;
    --to-text-3: #B0B0B0;
    --to-line:   #EBEBEB;
    --to-line-2: #F2F2F2;

    /* 圆角 */
    --to-r-sm:   6px;
    --to-r-md:   10px;
    --to-r-lg:   14px;
    --to-r-pill: 999px;

    /* 阴影：低对比、多层叠加 */
    --to-sh-xs: 0 1px 2px rgba(17, 24, 39, .04);
    --to-sh-sm: 0 1px 3px rgba(17, 24, 39, .06), 0 1px 2px rgba(17, 24, 39, .04);
    --to-sh-md: 0 4px 12px rgba(17, 24, 39, .07), 0 1px 3px rgba(17, 24, 39, .04);
    --to-sh-brand: 0 4px 14px rgba(255, 106, 0, .26);

    /* 动效 */
    --to-ease: cubic-bezier(.4, 0, .2, 1);
    --to-dur: .2s;
}

/* --------------------------------------------------------------------------
   1. 排版基线：系统字体优先，开启字体平滑
   -------------------------------------------------------------------------- */
html body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 标题收紧字距，提升精致度（字距不改变元素尺寸） */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
    letter-spacing: -.01em;
    color: var(--to-ink);
}

/* --------------------------------------------------------------------------
   2. 链接：默认不抢色，hover 才显橙
   -------------------------------------------------------------------------- */
html body a {
    transition: color var(--to-dur) var(--to-ease),
                opacity var(--to-dur) var(--to-ease);
}

html body a:hover {
    color: var(--to-primary);
}

/* --------------------------------------------------------------------------
   3. 按钮：主色渐变 + 光晕，hover 上浮 1px
      只作用于 button 元素（本项目里仅搜索/登录/确定/注册 4 个），
      不碰 .login 这类既当容器又当按钮的类名。
   -------------------------------------------------------------------------- */
html body button {
    border: none;
    border-radius: var(--to-r-md);
    background-image: linear-gradient(135deg,
        var(--to-primary-light) 0%,
        var(--to-primary) 55%,
        var(--to-primary-dark) 100%);
    background-color: var(--to-primary);
    color: #FFF;
    font-weight: 500;
    letter-spacing: .02em;
    box-shadow: var(--to-sh-brand);
    cursor: pointer;
    transition: transform var(--to-dur) var(--to-ease),
                box-shadow var(--to-dur) var(--to-ease),
                filter var(--to-dur) var(--to-ease);
}

html body button:hover {
    filter: brightness(1.04);
    box-shadow: 0 6px 20px rgba(255, 106, 0, .32);
    transform: translateY(-1px);
}

html body button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 106, 0, .24);
}

html body button:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    filter: grayscale(.25);
}

/* --------------------------------------------------------------------------
   4. 表单控件：圆角 + 聚焦橙色描边与柔光
      只改 border-color / box-shadow，不动 width / padding
   -------------------------------------------------------------------------- */
html body input[type="text"],
html body input[type="password"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="number"],
html body input[type="search"],
html body textarea,
html body select {
    border-radius: var(--to-r-sm);
    transition: border-color var(--to-dur) var(--to-ease),
                box-shadow var(--to-dur) var(--to-ease);
}

html body input[type="text"]:focus,
html body input[type="password"]:focus,
html body input[type="email"]:focus,
html body input[type="tel"]:focus,
html body input[type="number"]:focus,
html body input[type="search"]:focus,
html body textarea:focus,
html body select:focus {
    outline: none;
    border-color: var(--to-primary);
    box-shadow: 0 0 0 3px rgba(255, 106, 0, .12);
}

html body input::placeholder,
html body textarea::placeholder {
    color: var(--to-text-3);
}

/* --------------------------------------------------------------------------
   5. 顶部导航：去掉老式灰色投影，改极细底边 + 轻阴影
   --------------------------------------------------------------------------
   注意：原模板在 <a> 内部已有一个 <div class="none|block"> 作为下划线指示器
   （20px × 3px，选中时 display:block）。这里只做「精细化」改造，不再叠加
   第二根下划线，否则会出现双线。
   -------------------------------------------------------------------------- */
html body .common_header_nav {
    box-shadow: 0 1px 0 rgba(17, 24, 39, .06), 0 2px 12px rgba(17, 24, 39, .04);
    border-bottom: 1px solid var(--to-line-2);
}

/* 原有指示器：两端圆角、略加宽，视觉更精致（不改尺寸逻辑，仅圆角与色值） */
html body .common_header_nav .content .middle ul li div {
    border-radius: 999px;
    background-color: var(--to-primary);
    transition: opacity var(--to-dur) var(--to-ease),
                transform var(--to-dur) var(--to-ease);
}

/* 导航文字 hover / 选中：仅改颜色，下划线交给原有指示器 */
html body .common_header_nav .content .middle ul li a {
    transition: color var(--to-dur) var(--to-ease);
}

html body .common_header_nav .content .middle ul li a:hover {
    color: var(--to-primary);
}

/* --------------------------------------------------------------------------
   6. 卡片：白底 + 细边 + 轻阴影，hover 微微抬起
   --------------------------------------------------------------------------
   实测首页与课程列表的 `.less_list ul li` 定义完全相同（都无圆角、无 hover），
   这里统一补齐。overflow: hidden 只为裁切内部图片圆角，不改布局流。
   -------------------------------------------------------------------------- */
html body .less_list ul li,
html body .kaiyuan_less_list,
html body .kaiyuan_info_list,
html body .packs ul li,
html body .list ul li,
html body .teacher_item,
html body .lesson_item {
    border-radius: var(--to-r-lg);
    border: 1px solid var(--to-line);
    background-color: #FFF;
    box-shadow: var(--to-sh-xs);
    overflow: hidden;
    transition: box-shadow var(--to-dur) var(--to-ease),
                transform var(--to-dur) var(--to-ease),
                border-color var(--to-dur) var(--to-ease);
}

html body .less_list ul li:hover,
html body .kaiyuan_less_list:hover,
html body .kaiyuan_info_list:hover,
html body .packs ul li:hover,
html body .list ul li:hover,
html body .teacher_item:hover,
html body .lesson_item:hover {
    box-shadow: var(--to-sh-md);
    border-color: var(--to-primary-tint-2);
    transform: translateY(-2px);
}

/* 卡片标题字重加强，层级更清楚 */
html body .item_content_title {
    font-weight: 600;
    color: var(--to-ink);
}

/* --------------------------------------------------------------------------
   7. 价格 / 关键数字：橙色调 + 等宽数字对齐
   -------------------------------------------------------------------------- */
html body .price,
html body .course_price,
html body .item_price {
    color: var(--to-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. 分割线：更细腻
   -------------------------------------------------------------------------- */
html body hr {
    border: none;
    border-top: 1px solid var(--to-line);
}

/* --------------------------------------------------------------------------
   9. 滚动条：细、圆、低对比；hover 转橙
   -------------------------------------------------------------------------- */
html body ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html body ::-webkit-scrollbar-track {
    background: transparent;
}

html body ::-webkit-scrollbar-thumb {
    background-color: rgba(17, 24, 39, .16);
    border-radius: var(--to-r-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}

html body ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 106, 0, .5);
    background-clip: content-box;
}

/* --------------------------------------------------------------------------
   10. 选中文本：浅橙底
   -------------------------------------------------------------------------- */
html body ::selection {
    background-color: var(--to-primary-tint-2);
    color: var(--to-primary-dark);
}

/* --------------------------------------------------------------------------
   11. 键盘可达性：仅键盘聚焦时出现橙色轮廓
   -------------------------------------------------------------------------- */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
    outline: 2px solid var(--to-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   12. 交互过渡（全站统一）
   --------------------------------------------------------------------------
   原项目 24 个业务 CSS 里几乎没有任何 transition（实测覆盖率 0%），
   所有 hover 都是硬切换 —— 这是「廉价感」最主要的来源。
   这里给所有可交互元素统一补上过渡，让状态切换平滑。
   只对以下 6 个属性做过渡，避免影响布局（width/height 不做过渡）。
   -------------------------------------------------------------------------- */
html body a,
html body button,
html body label,
html body input,
html body select,
html body textarea,
html body li,
html body [class*="btn"],
html body [class*="tab"],
html body [class*="tag"],
html body [class*="item"],
html body [class*="card"],
html body [class*="link"],
html body [class*="icon"] {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* 图片和媒体不做 transform 过渡，避免缩放时抖动 */
html body img,
html body video {
    transition-property: opacity, filter;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   13. 列表项 hover 的克制高亮
   --------------------------------------------------------------------------
   只给「看起来像可点列表」的容器加，且只改背景/文字色，不动尺寸。
   -------------------------------------------------------------------------- */
html body li:hover > a,
html body li:hover > span {
    color: var(--to-primary);
}

/* --------------------------------------------------------------------------
   14. 边框与分割线统一（收敛 7 种灰到 3 种）
   --------------------------------------------------------------------------
   实测原项目边框色有 #f0f0f0/#dcdcdc/#e6e6e6/#eeeeee/#c8c8c8/#c9c9c9/#c7c7c7 七种灰，
   视觉上脏。统一为：「浅分割线」「常规边框」「深边框」三档。
   -------------------------------------------------------------------------- */
html body hr {
    border-top-color: var(--to-line);
}

html body table td,
html body table th {
    border-color: var(--to-line-2);
}

/* 表单控件边框统一 */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html body select,
html body textarea {
    border-color: #E5E7EB;
}

/* --------------------------------------------------------------------------
   15. 禁用态统一：降饱和 + 降透明度，不用灰色盖住
   -------------------------------------------------------------------------- */
html body [disabled],
html body .disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.2);
}

/* --------------------------------------------------------------------------
   16. 减少动效偏好（无障碍）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html body *,
    html body *::before,
    html body *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* --------------------------------------------------------------------------
   17. 图片兜底：未加载 / 加载失败时显示浅灰占位块
   --------------------------------------------------------------------------
   演示数据的封面图部分缺失，加载失败时会露出刺眼的破图图标。
   给 img 一个浅灰底，让「空缺」看起来像设计好的占位区块，而不是错误。
   -------------------------------------------------------------------------- */
html body img {
    background-color: #F2F3F5;
    background-image: linear-gradient(135deg, #F7F8FA 0%, #EFF1F4 100%);
    background-repeat: no-repeat;
    background-size: cover;
}

/* 圆形头像不套底色渐变，避免破坏圆形观感 */
html body .avatar img,
html body [class*="avatar"] img {
    background-image: none;
    background-color: transparent;
}

/* ==========================================================================
   18. 大厂高级感 · 加强层（Premium Upgrade）
   --------------------------------------------------------------------------
   在前 17 节「克制统一」的基础上，针对首屏关键区域做质感升级：
   品牌区 / 导航 / 搜索 / 登录按钮 / banner 双卡片 / 区块标题 /
   课程徽标与价格签 / 深色页脚。依然只改视觉属性，不碰布局。
   ========================================================================== */

/* ---------------- 18.1 品牌区：logo 投影 + 站名排印 ---------------- */
html body .common_header_nav .content .left img {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(255, 106, 0, .28);
}

html body .common_header_nav .content .left text {
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .01em;
    color: var(--to-ink);
}

/* 导航整体：半透明白 + 毛玻璃，滚动时内容从下方掠过有层次 */
html body .common_header_nav {
    background-color: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.6) blur(10px);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
}

/* ---------------- 18.2 导航链接：hover 浅橙胶囊，选中加粗 ---------------- */
html body .common_header_nav .content .middle ul li a {
    border-radius: var(--to-r-pill);
}

html body .common_header_nav .content .middle ul li a:hover {
    color: var(--to-primary);
    background-color: var(--to-primary-tint);
}

html body .common_header_nav .content .middle ul li a.on {
    color: var(--to-primary);
    font-weight: 600;
}

/* ---------------- 18.3 搜索框：浅灰胶囊 + 聚焦浮起 ---------------- */
html body .common_header_nav .search input[type="text"] {
    border-radius: var(--to-r-pill);
    border-color: transparent;
    background-color: #F5F6F8;
}

html body .common_header_nav .search input[type="text"]:focus {
    background-color: #FFF;
    border-color: var(--to-primary);
    box-shadow: 0 0 0 3px rgba(255, 106, 0, .12),
                0 4px 14px rgba(17, 24, 39, .06);
}

html body .common_header_nav .search button {
    border-radius: var(--to-r-pill);
    box-shadow: 0 2px 8px rgba(255, 106, 0, .26),
                inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* ---------------- 18.4 登录/注册：主按钮质感（顶栏 + banner 共用类） ---------------- */
html body .log_or_reg {
    border-radius: var(--to-r-pill);
    background-image: linear-gradient(135deg,
        var(--to-primary-light) 0%,
        var(--to-primary) 55%,
        var(--to-primary-dark) 100%);
    background-color: var(--to-primary);
    color: #FFF;
    font-weight: 600;
    letter-spacing: .04em;
    box-shadow: 0 4px 14px rgba(255, 106, 0, .3),
                inset 0 1px 0 rgba(255, 255, 255, .3);
    cursor: pointer;
    transition: transform var(--to-dur) var(--to-ease),
                box-shadow var(--to-dur) var(--to-ease),
                filter var(--to-dur) var(--to-ease);
}

html body .log_or_reg:hover {
    color: #FFF;
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(255, 106, 0, .36),
                inset 0 1px 0 rgba(255, 255, 255, .3);
}

html body .log_or_reg:active {
    transform: translateY(0);
}

/* 全站 button 补一道顶部内高光，渐变才不「平」 */
html body button {
    box-shadow: var(--to-sh-brand),
                inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* ---------------- 18.5 顶栏头像：描边环 + 下拉卡片化 ---------------- */
html body .common_header_nav .login_info .avatar {
    border: 2px solid #FFF;
    box-shadow: 0 0 0 2px var(--to-primary-tint-2),
                var(--to-sh-sm);
}

html body .common_header_nav .drop_down {
    border-radius: var(--to-r-md);
    border: 1px solid var(--to-line);
    box-shadow: var(--to-sh-md);
}

/* ---------------- 18.6 banner 左：分类面板卡片化 ---------------- */
html body .banner_left {
    border-radius: var(--to-r-lg);
    background-color: #FFF;
    box-shadow: var(--to-sh-md);
    overflow: hidden;
}

html body .banner_left_title {
    font-weight: 700;
    color: var(--to-ink);
    letter-spacing: .02em;
}

html body .banner_left_content {
    border-radius: var(--to-r-sm);
    transition: background-color var(--to-dur) var(--to-ease);
}

html body .banner_left_content:hover {
    background-color: var(--to-primary-tint);
}

html body .banner_left_content:hover .banner_left_content_name {
    color: var(--to-primary);
}

html body .banner_left_more {
    color: var(--to-primary);
    font-weight: 500;
}

/* ---------------- 18.7 banner 右：信息卡 + 标题排印 ---------------- */
html body .banner_right {
    border-radius: var(--to-r-lg);
    background-color: #FFF;
    box-shadow: var(--to-sh-md);
    overflow: hidden;
}

html body .banner_right_title {
    font-weight: 700;
    color: var(--to-ink);
    letter-spacing: .01em;
    background-image: linear-gradient(120deg,
        var(--to-ink) 60%, var(--to-primary-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

html body .banner_right_thumb img {
    border: 2px solid #FFF;
    box-shadow: 0 0 0 2px var(--to-primary-tint-2),
                var(--to-sh-sm);
}

html body .banner_right_href {
    border-radius: var(--to-r-sm);
    transition: background-color var(--to-dur) var(--to-ease),
                color var(--to-dur) var(--to-ease);
}

html body .banner_right_href:hover {
    background-color: var(--to-primary-tint);
    color: var(--to-primary);
}

/* ---------------- 18.8 区块标题：主标题加粗、副标题降阶 ---------------- */
html body .tips span:first-child {
    font-weight: 700;
    color: var(--to-ink);
    letter-spacing: .01em;
}

html body .tips span:nth-child(2) {
    color: var(--to-text-2);
}

/* ---------------- 18.9 课程卡：徽标渐变 + 价格签芯片化 ---------------- */
html body .less_list ul li .tip,
html body .less_list_nei ul li .tip {
    border-radius: var(--to-r-pill);
    background-image: linear-gradient(135deg,
        var(--to-primary-light), var(--to-primary));
    color: #FFF;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(255, 106, 0, .3);
}

html body .less_list ul li .title,
html body .less_list_nei ul li .title {
    font-weight: 600;
    color: var(--to-ink);
}

html body .less_list ul li:hover .title,
html body .less_list_nei ul li:hover .title {
    color: var(--to-primary);
}

html body .money {
    color: var(--to-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

html body .mian {
    border-radius: var(--to-r-pill);
    background-color: var(--to-primary-tint);
    color: var(--to-primary-dark);
    font-weight: 600;
}

html body .mi {
    border-radius: var(--to-r-pill);
    background-color: #F2F3F5;
    color: var(--to-text-2);
}

/* 新闻卡：图片 hover 轻缩放（仅 transform/透明度，不影响布局） */
html body .new_list .item_img img {
    transition: transform .35s var(--to-ease), opacity .2s var(--to-ease);
}

html body .new_list .item:hover .item_img img {
    transform: scale(1.045);
}

/* ---------------- 18.10 深色页脚：收束全站视觉重心 ---------------- */
html body .common_footer {
    background-image: linear-gradient(180deg, #22262F 0%, #191C23 100%);
    background-color: #191C23;
}

html body .common_footer .content .left .text,
html body .common_footer .right_guanyu_title {
    color: #F2F3F5;
    font-weight: 600;
    letter-spacing: .02em;
}

html body .common_footer .content .next .text,
html body .common_footer .content .middle .text {
    color: #A9AEB8;
}

html body .common_footer .right .text1 a,
html body .common_footer .right .text2 a,
html body .common_footer .right .text3 a {
    color: #A9AEB8;
}

html body .common_footer .right .text1 a:hover,
html body .common_footer .right .text2 a:hover,
html body .common_footer .right .text3 a:hover {
    color: var(--to-primary-light);
}

/* 二维码在深色底上容易「飘」，加白边收住 */
html body .common_footer .next img,
html body .common_footer .middle img {
    border-radius: var(--to-r-sm);
    border: 3px solid #FFF;
    box-shadow: var(--to-sh-sm);
}

html body .common_footer .you_url .li text {
    color: #7C828D;
}

html body .common_footer .you_url .li:hover text {
    color: var(--to-primary-light);
}

html body .common_footer .you_url .li {
    border-color: rgba(255, 255, 255, .1);
}

html body .common_footer .copyright {
    color: #6B7280;
    border-top: 1px solid rgba(255, 255, 255, .06);
}