/* Agent Code 页面样式
   本页面为独立响应式布局 同时适配PC和H5 未复用控制台的固定宽度布局
   (Content/v3/css 下无任何 @media 查询 .main固定1440px .right_main固定1204px 无法适配移动端)
   但复用了控制台的设计变量 使页面在视觉上仍归属控制台体系 */

.ac_page {
    --ac-text: #071D42;
    --ac-text-sub: rgba(7, 29, 66, 0.65);
    --ac-text-weak: rgba(7, 29, 66, 0.45);
    --ac-blue: #2380FF;
    --ac-border: rgba(7, 29, 66, 0.1);
    --ac-bg: #F5F7FA;
    --ac-radius: 4px;
    min-height: 100vh;
    background: var(--ac-bg);
    color: var(--ac-text);
    font-family: 'PingFang SC', 'SourceHanSansCN', 'Microsoft YaHei', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

.ac_page * {
    box-sizing: border-box;
}

/* 顶部条 */
.ac_header {
    background: #FFF;
    border-bottom: 1px solid #E5E6EB;
    height: 60px;
}

.ac_header_inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ac_logo img {
    height: 32px;
    display: block;
}

.ac_user {
    font-size: 14px;
    color: var(--ac-text-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55%;
}

/* 主体 */
.ac_main {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.ac_title {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 8px;
}

.ac_desc {
    color: var(--ac-text-sub);
    margin: 0 0 20px;
}

.ac_section_title {
    font-size: 14px;
    font-weight: 500;
    margin: 24px 0 8px;
}

/* 卡片 */
.ac_card {
    background: #FFF;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    padding: 20px;
}

.ac_card + .ac_card {
    margin-top: 12px;
}

/* 编码本体 */
.ac_code {
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ac-text);
    word-break: break-all;
    user-select: all;
    -webkit-user-select: all;
}

.ac_code.is_empty {
    color: var(--ac-text-weak);
    font-family: inherit;
}

.ac_meta {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ac-border);
    color: var(--ac-text-sub);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.ac_expired {
    color: #F53F3F;
}

/* 绑定指令卡片 视觉权重最高 是页面的主操作 */
.ac_cmd_card {
    border-color: var(--ac-blue);
    background: rgba(35, 128, 255, 0.04);
}

.ac_cmd {
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 16px;
    font-weight: 500;
    word-break: break-all;
    user-select: all;
    -webkit-user-select: all;
}

/* 按钮 */
.ac_btns {
    margin-top: 16px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ac_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 20px;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    background: #FFF;
    color: var(--ac-text);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s;
}

.ac_btn:hover {
    opacity: .85;
}

.ac_btn_primary {
    background: var(--ac-blue);
    border-color: var(--ac-blue);
    color: #FFF;
}

.ac_btn[disabled],
.ac_btn.is_disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* 平台引导卡片 */
.ac_platforms {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 8px;
}

.ac_platform {
    background: #FFF;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    padding: 16px 12px;
    text-align: center;
}

.ac_platform_icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ac_platform_icon svg,
.ac_platform_icon img {
    display: block;
    width: 32px;
    height: 32px;
    /* 四个平台的官方素材均为正方形 但原始尺寸不一(128/720/500/1000)
       用 contain 等比缩放 不裁切不拉伸
       品牌规范普遍禁止对 logo 做变形或裁剪 这里不对素材做任何修改 */
    object-fit: contain;
    /* 不支持 object-fit 的老内核降级: 至少不溢出容器 */
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
}

/* 无图标时的文字标签降级方案 */
.ac_platform_icon_text {
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
}

.ac_platform_name {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
}

.ac_platform_step {
    font-size: 12px;
    color: var(--ac-text-weak);
    line-height: 1.5;
}

/* 安全提示 */
.ac_tip {
    margin-top: 24px;
    padding: 12px 16px;
    background: rgba(255, 125, 0, 0.06);
    border-radius: var(--ac-radius);
    color: var(--ac-text-sub);
    font-size: 13px;
    line-height: 1.7;
}

/* 未登录 */
.ac_login_tip {
    color: var(--ac-text-sub);
    margin-bottom: 16px;
}

/* ---- 平板 ---- */
@media (max-width: 1023px) {
    .ac_header_inner,
    .ac_main {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ---- 手机 ---- */
@media (max-width: 767px) {
    .ac_header_inner,
    .ac_main {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ac_main {
        padding-top: 16px;
    }

    .ac_title {
        font-size: 18px;
    }

    .ac_card {
        padding: 16px;
    }

    .ac_code,
    .ac_cmd {
        font-size: 15px;
    }

    /* 触摸目标不小于44px */
    .ac_btn {
        height: 44px;
        width: 100%;
    }

    .ac_btns {
        flex-direction: column;
        gap: 8px;
    }

    .ac_platforms {
        grid-template-columns: repeat(2, 1fr);
    }

    .ac_meta {
        font-size: 12px;
    }
}