/*
 * 星徽系统授权中心
 * 公共样式
 *
 * 风格：
 * 扁平、简洁、清爽
 * 蓝色主色
 * 无渐变
 * 无夸张阴影
 */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#3b82f6;
    --primary-hover:#2563eb;
    --primary-soft:#eef4ff;

    --text:#1f2937;
    --text-2:#667085;
    --text-3:#98a2b3;

    --border:#e5e7eb;
    --border-light:#edf0f3;

    --bg:#f6f8fb;
    --card:#ffffff;

    --ok:#16a34a;
    --ok-soft:#ecfdf3;

    --warn:#d97706;
    --warn-soft:#fffbeb;

    --danger:#dc2626;
    --danger-soft:#fef2f2;

    --radius:10px;
}


/* =========================================================
 * 基础
 * ========================================================= */

html{
    min-height:100%;
}

body{

    min-height:100vh;

    background:var(--bg);

    color:var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Microsoft YaHei",
        "PingFang SC",
        "Hiragino Sans GB",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:14px;

    line-height:1.6;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

a{
    color:var(--primary);
    text-decoration:none;
}

button,
input,
textarea,
select{
    font-family:inherit;
}

::selection{
    background:#dbeafe;
    color:#1e40af;
}


/* =========================================================
 * 公共容器
 * ========================================================= */

.wrap{

    max-width:1080px;

    margin:0 auto;

    padding:0 20px 40px;
}


/* =========================================================
 * 顶部导航
 * ========================================================= */

.site-header{

    height:60px;

    background:#fff;

    border-bottom:1px solid var(--border);

    position:sticky;

    top:0;

    z-index:50;
}

.header-inner{

    max-width:1080px;

    height:60px;

    margin:0 auto;

    padding:0 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}


/* 网站名称 */

.brand{

    display:flex;

    align-items:center;

    color:var(--text);

    font-size:17px;

    font-weight:750;

    letter-spacing:.1px;

    white-space:nowrap;
}

.brand:hover{
    color:var(--text);
}


/* 导航 */

.nav-link{

    display:flex;

    align-items:center;

    gap:3px;

    margin-left:auto;

    font-size:13px;
}

.nav-link a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:34px;

    padding:0 12px;

    border-radius:7px;

    color:var(--text-2);

    transition:
        color .15s ease,
        background .15s ease;
}

.nav-link a:hover{

    color:var(--primary);

    background:var(--primary-soft);
}


/* 注册按钮 */

.nav-link .btn-signup{

    margin-left:3px;

    background:var(--primary);

    color:#fff !important;
}

.nav-link .btn-signup:hover{

    background:var(--primary-hover);

    color:#fff !important;
}


/* =========================================================
 * Hero
 * ========================================================= */

.hero{

    border-bottom:1px solid var(--border);

    background:var(--bg);

    padding:58px 20px 46px;

    text-align:center;
}

.hero-inner{

    max-width:900px;

    margin:0 auto;
}


/* 主标题 */

.hero h1{

    margin:0;

    color:#172033;

    font-size:28px;

    line-height:1.4;

    font-weight:800;

    letter-spacing:-.5px;
}


/* 描述 */

.hero > .hero-inner > p{

    max-width:650px;

    margin:12px auto 0;

    color:var(--text-2);

    font-size:14px;

    line-height:1.85;
}


/* Hero 操作 */

.hero-actions{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:25px;
}


/* =========================================================
 * 按钮
 * ========================================================= */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:108px;

    height:40px;

    padding:0 18px;

    border:1px solid transparent;

    border-radius:8px;

    font-size:13px;

    font-weight:600;

    line-height:1;

    cursor:pointer;

    text-align:center;

    white-space:nowrap;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;

    -webkit-tap-highlight-color:transparent;
}

.btn:active{

    transform:scale(.98);
}


/* 主按钮 */

.btn-primary{

    background:var(--primary);

    color:#fff;
}

.btn-primary:hover{

    background:var(--primary-hover);

    color:#fff;
}


/* 次按钮 */

.btn-ghost{

    background:#fff;

    border-color:#dfe3e8;

    color:#667085;
}

.btn-ghost:hover{

    background:#fff;

    border-color:#b9c8dd;

    color:var(--primary);
}


/* 小按钮 */

.btn-sm{

    min-width:auto;

    height:32px;

    padding:0 13px;

    font-size:12px;
}

.btn-block{
    width:100%;
}


/* =========================================================
 * 首页步骤
 * ========================================================= */

.steps{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;

    max-width:780px;

    margin:38px auto 0;

    text-align:left;
}

.step{

    min-height:145px;

    padding:18px 18px 17px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:10px;

    transition:
        border-color .15s ease,
        background-color .15s ease;
}

.step:hover{

    border-color:#d6e0ee;

    background:#fff;
}


/* 步骤顶部 */

.step-top{

    display:flex;

    align-items:center;

    height:28px;

    margin-bottom:13px;
}

.step .num{

    width:27px;

    height:27px;

    flex:0 0 27px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:12px;

    font-weight:700;
}


/* 步骤连接线 */

.step-line{

    display:block;

    width:28px;

    height:1px;

    margin-left:9px;

    background:#e6eaf0;
}


/* 步骤标题 */

.step h3{

    margin:0 0 4px;

    color:#303846;

    font-size:14px;

    font-weight:700;
}


/* 步骤说明 */

.step p{

    color:var(--text-3);

    font-size:12px;

    line-height:1.8;
}


/* =========================================================
 * 主内容
 * ========================================================= */

.content-wrap{

    max-width:1080px;

    margin:0 auto;

    padding:0 20px;
}


/* 卡片 */

.card{

    margin-top:20px;

    padding:24px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);
}


/* 卡片标题 */

.section-head{

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.card h2{

    margin:0;

    color:#293241;

    font-size:17px;

    font-weight:700;
}

.section-head p{

    margin-top:5px;

    color:var(--text-3);

    font-size:12.5px;

    line-height:1.7;
}


/* =========================================================
 * 功能介绍
 * ========================================================= */

.feature-list{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;

    margin-top:23px;
}

.feature{

    min-height:145px;

    padding:18px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:10px;

    transition:
        border-color .15s ease,
        background-color .15s ease;
}

.feature:hover{

    border-color:#d6e0ee;

    background:#fff;
}


/* 功能图标 */

.feature-icon{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:12px;

    border-radius:9px;

    background:var(--primary-soft);

    color:var(--primary);

    font-size:15px;

    font-weight:800;
}


/* 功能内容 */

.feature-body h3{

    margin:0 0 5px;

    color:#303846;

    font-size:14px;

    font-weight:700;
}

.feature-body p{

    color:var(--text-3);

    font-size:12px;

    line-height:1.8;
}


/* =========================================================
 * 内容按钮
 * ========================================================= */

.card-actions{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:25px;

    padding-top:21px;

    border-top:1px solid var(--border-light);
}


/* =========================================================
 * 页脚
 * ========================================================= */

.site-footer{

    margin-top:48px;

    background:#fff;

    border-top:1px solid var(--border);
}

.footer-inner{

    max-width:1080px;

    margin:0 auto;

    padding:23px 20px 25px;

    text-align:center;
}


/* 页脚品牌 */

.footer-brand{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    color:#667085;

    font-size:12px;
}

.footer-brand strong{

    color:#4b5563;

    font-weight:600;
}

.footer-brand span{

    color:#a0a7b2;
}


/* 页脚链接 */

.footer-links{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin-top:12px;
}

.footer-links a{

    color:#8b94a3;

    font-size:12px;

    transition:color .15s ease;
}

.footer-links a:hover{

    color:var(--primary);
}


/* 版权 */

.footer-copy{

    margin-top:15px;

    padding-top:15px;

    border-top:1px solid var(--border-light);

    color:#a5acb7;

    font-size:11px;
}


/* =========================================================
 * 安装页面
 * ========================================================= */

.install-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--bg);
}

.install-wrap{

    width:100%;

    max-width:520px;

    padding:20px;
}

.install-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:10px;

    overflow:hidden;
}


/* 安装顶部 */

.install-header{

    height:62px;

    display:flex;

    align-items:center;

    padding:0 25px;

    border-bottom:1px solid var(--border-light);
}

.install-logo{

    color:#202733;

    font-size:16px;

    font-weight:750;
}

.install-title{

    margin-left:8px;

    padding-left:8px;

    border-left:1px solid #e1e4e8;

    color:#98a2b3;

    font-size:12px;
}


/* 安装内容 */

.install-content{

    padding:34px 30px 30px;

    text-align:center;
}

.install-content h1{

    color:#252b35;

    font-size:21px;

    font-weight:750;
}

.install-desc{

    margin-top:7px;

    color:var(--text-2);

    font-size:13px;

    line-height:1.8;
}


/* 安装提示 */

.install-content .alert{

    margin-top:22px;

    margin-bottom:0;

    text-align:left;
}

.install-help{

    margin-top:10px;

    text-align:left;
}

.install-content code{

    padding:2px 6px;

    border-radius:5px;

    background:#f3f4f6;

    color:#667085;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;

    font-size:11px;
}


/* 安装按钮 */

.btn-install{

    margin-top:24px;

    min-width:145px;
}


/* 安装页脚 */

.install-footer{

    padding:15px;

    border-top:1px solid var(--border-light);

    color:#a0a7b2;

    font-size:11px;

    text-align:center;
}


/* =========================================================
 * 提示
 * ========================================================= */

.alert{

    padding:11px 14px;

    border-radius:9px;

    font-size:13px;

    line-height:1.7;
}

.alert-ok{

    background:var(--ok-soft);

    color:var(--ok);
}

.alert-err{

    background:var(--danger-soft);

    color:var(--danger);
}

.alert-info{

    background:var(--primary-soft);

    color:var(--primary);
}

.muted{

    color:var(--text-3);

    font-size:12.5px;
}


/* =========================================================
 * 表单
 * ========================================================= */

.form-group{

    margin-bottom:15px;
}

.form-group label{

    display:block;

    margin-bottom:6px;

    color:var(--text-2);

    font-size:13px;

    font-weight:600;
}

.form-group input[type=text],
.form-group input[type=password],
.form-group input[type=email],
.form-group input[type=number]{

    width:100%;

    height:42px;

    padding:0 13px;

    border:1px solid var(--border);

    border-radius:9px;

    outline:none;

    background:#fff;

    color:var(--text);

    font-size:14px;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.form-group input:focus{

    border-color:var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(59,130,246,.10);
}

.form-group .help-msg{

    margin-top:6px;

    color:var(--text-3);

    font-size:12px;
}


/* =========================================================
 * 表格
 * ========================================================= */

.table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;
}

.table th{

    padding:11px 14px;

    background:#f9fafb;

    border-bottom:1px solid var(--border);

    color:var(--text-2);

    font-size:12.5px;

    font-weight:600;

    text-align:left;

    white-space:nowrap;
}

.table td{

    padding:12px 14px;

    border-bottom:1px solid var(--border);

    color:var(--text);

    font-size:13px;

    vertical-align:middle;
}

.table tr:last-child td{

    border-bottom:none;
}

.table tbody tr:hover{

    background:#f8faff;
}


/* =========================================================
 * 授权码
 * ========================================================= */

.code{

    display:inline-block;

    padding:4px 9px;

    border:1px solid var(--border);

    border-radius:7px;

    background:#f7f8fa;

    color:#4b5563;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;

    font-size:12px;

    letter-spacing:1px;

    white-space:nowrap;
}

.ok-flag{

    margin-left:6px;

    color:var(--ok);

    font-size:11px;

    font-weight:600;
}


/* =========================================================
 * 状态徽章
 * ========================================================= */

.badge{

    display:inline-block;

    padding:2px 9px;

    border-radius:20px;

    border:1px solid transparent;

    font-size:12px;

    font-weight:600;
}

.badge-pending{

    background:var(--warn-soft);

    color:var(--warn);
}

.badge-active{

    background:var(--ok-soft);

    color:var(--ok);
}

.badge-disabled{

    background:var(--danger-soft);

    color:var(--danger);
}


/* =========================================================
 * 其他公共组件
 * ========================================================= */

.empty{

    padding:30px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius);

    color:var(--text-3);

    font-size:13px;

    text-align:center;
}

.toolbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:10px;

    margin-top:24px;
}

.page-title{

    color:var(--text);

    font-size:19px;

    font-weight:800;
}

.block-title{

    margin:2px 0 12px;

    font-size:15px;
}

.panel .card{

    margin-top:16px;
}

.actions{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:6px;
}

.actions form.inline,
.inline{

    display:inline;
}

.danger-text{

    color:var(--danger);
}


/* =========================================================
 * 手机端
 * ========================================================= */

@media (max-width:760px){

    .site-header,
    .header-inner{

        height:56px;
    }

    .header-inner{

        padding:0 14px;
    }

    .brand{

        font-size:15px;
    }

    .nav-link a{

        height:32px;

        padding:0 8px;

        font-size:12px;
    }


    /* Hero */

    .hero{

        padding:38px 16px 30px;
    }

    .hero h1{

        font-size:24px;

        letter-spacing:-.3px;
    }

    .hero > .hero-inner > p{

        margin-top:11px;

        font-size:13px;
    }


    /* Hero 按钮 */

    .hero-actions{

        flex-direction:column;

        margin-top:22px;
    }

    .hero-actions .btn{

        width:100%;

        max-width:240px;
    }


    /* 步骤 */

    .steps{

        grid-template-columns:1fr;

        gap:10px;

        margin-top:30px;
    }

    .step{

        min-height:auto;

        padding:16px;
    }

    .step-line{

        width:20px;
    }


    /* 内容 */

    .content-wrap{

        padding:0 14px;
    }

    .card{

        padding:19px;
    }


    /* 功能 */

    .feature-list{

        grid-template-columns:1fr;

        gap:10px;

        margin-top:20px;
    }

    .feature{

        min-height:auto;

        padding:17px;
    }


    /* 内容按钮 */

    .card-actions{

        flex-direction:column;

        padding-top:19px;
    }

    .card-actions .btn{

        width:100%;

        max-width:240px;
    }


    /* 页脚 */

    .site-footer{

        margin-top:38px;
    }

    .footer-inner{

        padding:20px 14px;
    }

    .footer-links{

        gap:15px;

        flex-wrap:wrap;
    }


    /* 安装页 */

    .install-wrap{

        padding:15px;
    }

    .install-content{

        padding:28px 20px 25px;
    }

    .install-header{

        padding:0 20px;
    }

}


/* =========================================================
 * 小屏手机
 * ========================================================= */

@media (max-width:420px){

    .brand{

        font-size:14px;
    }

    .nav-link{

        gap:0;
    }

    .nav-link a{

        padding:0 7px;
    }

    .nav-link .btn-signup{

        padding-left:11px;

        padding-right:11px;
    }

    .hero h1{

        font-size:22px;
    }

    .hero > .hero-inner > p{

        font-size:12.5px;
    }

    .card h2{

        font-size:16px;
    }

}