/* ============================================================
   号卡平台 · 前台现代设计系统 (front.css)
   设计语言：柔和多层阴影 / 大圆角 / 玻璃拟态 / 渐变主色 / 流畅动效
   仅覆写同名 hk-* 类与 Bootstrap 组件，保留模板结构与 think-template 标签
   ============================================================ */
:root{
    --hk-primary:#4f46e5;
    --hk-primary-rgb:79,70,229;
    --hk-primary-2:#7c3aed;
    --hk-accent:#f97316;
    --hk-accent-2:#fb7185;
    --hk-ink:#0f172a;
    --hk-text:#334155;
    --hk-muted:#64748b;
    --hk-bg:#f5f7fc;
    --hk-surface:#ffffff;
    --hk-border:#e8ebf3;
    --hk-grad:linear-gradient(120deg,#4f46e5 0%,#7c3aed 55%,#a855f7 100%);
    --hk-grad-soft:linear-gradient(120deg,rgba(79,70,229,.10),rgba(168,85,247,.10));
    --hk-radius:22px;
    --hk-shadow-sm:0 1px 2px rgba(15,23,42,.04),0 6px 18px rgba(15,23,42,.05);
    --hk-shadow:0 2px 8px rgba(15,23,42,.06),0 18px 44px rgba(15,23,42,.10);
    --hk-shadow-lg:0 28px 70px rgba(var(--hk-primary-rgb),.20);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0;background:var(--hk-bg);color:var(--hk-text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    line-height:1.6;
}
h1,h2,h3,h4,h5{color:var(--hk-ink);letter-spacing:-.02em}
a{color:var(--hk-primary)}
::selection{background:rgba(var(--hk-primary-rgb),.18)}

/* 现代滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d3d9e6;border-radius:999px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#b6c0d6;background-clip:content-box}

/* ---------- Header ---------- */
.hk-header{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.72);
    backdrop-filter:saturate(180%) blur(16px);
    -webkit-backdrop-filter:saturate(180%) blur(16px);
    border-bottom:1px solid rgba(226,232,240,.8);
}
.hk-header .container{display:flex;align-items:center;justify-content:space-between;height:72px}
.hk-logo{
    display:inline-flex;align-items:center;gap:12px;
    font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--hk-ink);text-decoration:none;
}
.hk-logo-mark{
    display:grid;place-items:center;width:40px;height:40px;border-radius:13px;
    background:var(--hk-grad);box-shadow:0 8px 18px rgba(var(--hk-primary-rgb),.34);
    font-size:20px;line-height:1;
}
.hk-menu{display:flex;align-items:center}
.hk-menu a{
    color:var(--hk-text);text-decoration:none;font-size:14.5px;font-weight:500;
    padding:9px 18px;border-radius:999px;margin-left:6px;transition:.2s;
}
.hk-menu a:hover{color:var(--hk-primary);background:rgba(var(--hk-primary-rgb),.09)}

/* ---------- Main ---------- */
.hk-main{padding:28px 0 64px;min-height:74vh}

/* ---------- Notice ---------- */
.hk-notice{
    display:flex;align-items:flex-start;gap:12px;
    background:linear-gradient(120deg,#fff7ed,#fff1f2);
    border:1px solid #fed7aa;color:#9a3412;
    border-radius:16px;padding:15px 18px;margin-bottom:24px;font-size:14px;
    box-shadow:var(--hk-shadow-sm);
}

/* ---------- Hero ---------- */
.hk-hero{
    position:relative;overflow:hidden;color:#fff;
    background:var(--hk-grad);
    border-radius:28px;padding:52px 44px;margin-bottom:36px;
    box-shadow:var(--hk-shadow-lg);
}
.hk-hero::before,.hk-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.hk-hero::before{width:340px;height:340px;top:-140px;right:-70px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),transparent 62%)}
.hk-hero::after{width:260px;height:260px;bottom:-150px;left:10%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.22),transparent 60%)}
.hk-hero-badge{
    position:relative;display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    padding:7px 16px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.02em;margin-bottom:18px;
}
.hk-hero h1{position:relative;font-size:36px;font-weight:800;letter-spacing:-.03em;margin:0 0 12px;line-height:1.15}
.hk-hero p{position:relative;margin:0;opacity:.92;font-size:16.5px;max-width:680px}
.hk-hero-chips{position:relative;display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hk-chip{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    padding:9px 16px;border-radius:12px;font-size:14px;font-weight:600;
}
@media(max-width:560px){.hk-hero{padding:38px 24px}.hk-hero h1{font-size:27px}}

/* ---------- Section title ---------- */
.hk-section-title{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.hk-section-title .bar{width:5px;height:22px;border-radius:999px;background:var(--hk-grad)}
.hk-section-title .txt{font-size:19px;font-weight:800;color:var(--hk-ink);letter-spacing:-.02em}
.hk-section-title .sub{font-size:13.5px;color:var(--hk-muted);margin-left:2px}

/* ---------- Grid ---------- */
.hk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:992px){.hk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hk-grid{grid-template-columns:1fr}}

/* ---------- SIM card ---------- */
.hk-sim{
    position:relative;background:var(--hk-surface);
    border:1px solid var(--hk-border);border-radius:var(--hk-radius);overflow:hidden;
    box-shadow:var(--hk-shadow-sm);display:flex;flex-direction:column;
    transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s;
}
.hk-sim::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--hk-grad);opacity:.92}
.hk-sim:hover{transform:translateY(-6px);box-shadow:var(--hk-shadow);border-color:rgba(var(--hk-primary-rgb),.32)}
.hk-sim-top{padding:22px 20px 6px;display:flex;justify-content:space-between;align-items:flex-start}
.hk-sim .fee{font-size:30px;font-weight:800;color:var(--hk-accent);letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline}
.hk-sim .fee small{font-size:13px;color:var(--hk-muted);font-weight:600;margin-left:2px}
.hk-tag{font-size:12px;font-weight:600;color:var(--hk-primary);background:rgba(var(--hk-primary-rgb),.10);padding:5px 12px;border-radius:999px;letter-spacing:.02em}
.hk-sim-body{padding:6px 20px 16px;flex:1}
.hk-sim-body .name{font-size:16px;font-weight:700;color:var(--hk-ink);margin-bottom:10px;letter-spacing:-.01em}
.hk-sim-body .desc{font-size:13px;color:var(--hk-muted);line-height:1.9}
.hk-sim-foot{padding:0 20px 20px}
.hk-sim-foot .btn{width:100%}

/* ---------- Generic card ---------- */
.hk-card{
    background:var(--hk-surface);border:1px solid var(--hk-border);
    border-radius:var(--hk-radius);box-shadow:var(--hk-shadow-sm);padding:26px;
}
.hk-detail-img{width:100%;max-height:340px;object-fit:cover;border-radius:16px;background:#f1f5f9;border:1px solid var(--hk-border)}

/* ============================================================
   Bootstrap 组件现代化覆写
   ============================================================ */
.btn{
    border-radius:12px;font-weight:600;letter-spacing:.01em;
    transition:transform .15s,box-shadow .22s,background .2s,border-color .2s,filter .2s;
    padding:.6rem 1.2rem;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--hk-grad);border:none;color:#fff;box-shadow:0 8px 20px rgba(var(--hk-primary-rgb),.28)}
.btn-primary:hover,.btn-primary:focus{background:var(--hk-grad);color:#fff;filter:brightness(1.06);box-shadow:0 10px 26px rgba(var(--hk-primary-rgb),.38);transform:translateY(-1px)}
.btn-outline-primary{color:var(--hk-primary);border:1.5px solid rgba(var(--hk-primary-rgb),.4)}
.btn-outline-primary:hover{background:var(--hk-primary);border-color:var(--hk-primary);color:#fff}
.btn-outline-secondary{color:var(--hk-muted);border-color:#dbe1ec}
.btn-outline-secondary:hover{background:#f1f5f9;color:var(--hk-ink);border-color:#cbd5e1}
.btn-success{background:linear-gradient(120deg,#059669,#10b981);border:none;box-shadow:0 8px 18px rgba(16,185,129,.28)}
.btn-success:hover{filter:brightness(1.06);box-shadow:0 10px 24px rgba(16,185,129,.36)}
.btn-warning{background:linear-gradient(120deg,#f59e0b,#f97316);border:none;color:#fff}
.btn-sm{border-radius:10px;padding:.42rem .82rem;font-size:13px}
.btn-lg{border-radius:14px;padding:.85rem 1.7rem;font-size:16px}

.form-control,.form-select{
    border:1.5px solid var(--hk-border);border-radius:12px;padding:.62rem .95rem;
    font-size:14px;color:var(--hk-text);background:#fff;transition:border-color .2s,box-shadow .2s;
}
.form-control::placeholder{color:#a7b0c0}
.form-control:focus,.form-select:focus{
    border-color:var(--hk-primary);box-shadow:0 0 0 4px rgba(var(--hk-primary-rgb),.14);outline:none;
}
.form-label{font-weight:600;color:var(--hk-ink);font-size:13.5px;margin-bottom:.45rem}
.form-control-sm{border-radius:10px;padding:.42rem .72rem;font-size:13px}
.form-check-label{font-size:14px;color:var(--hk-text)}

.alert{border:none;border-radius:16px;padding:15px 18px;font-size:14px;box-shadow:var(--hk-shadow-sm)}
.alert-danger{background:#fef2f2;color:#b91c1c}
.alert-success{background:#ecfdf5;color:#047857}
.alert-warning{background:#fffbeb;color:#b45309}
.alert-info{background:#eff6ff;color:#1d4ed8}

.table{--bs-table-bg:transparent;font-size:14px}
.table th{font-weight:600;color:var(--hk-muted)}
.table thead th{
    color:var(--hk-muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
    border-bottom:1px solid var(--hk-border);padding:.85rem .95rem;white-space:nowrap;background:#f8fafc;
}
.table tbody td{padding:.9rem .95rem;border-bottom:1px solid #f1f5f9;vertical-align:middle;color:var(--hk-text)}
.table tbody tr{transition:background .15s}
.table tbody tr:hover{background:#f8fafc}
.table tbody tr:last-child td{border-bottom:none}
.badge{border-radius:999px;font-weight:600;padding:.42em .82em;letter-spacing:.02em}

.pagination{gap:6px;flex-wrap:wrap}
.page-link{border:none;border-radius:10px;color:var(--hk-text);font-weight:500;padding:.42rem .82rem;transition:.18s}
.page-link:hover{background:rgba(var(--hk-primary-rgb),.09);color:var(--hk-primary)}
.page-item.active .page-link{background:var(--hk-primary);color:#fff;box-shadow:0 6px 14px rgba(var(--hk-primary-rgb),.3)}
.page-item.disabled .page-link{color:#c3cad8}

/* ---------- Footer ---------- */
.hk-footer{
    background:#0f172a;color:#94a3b8;padding:40px 0;margin-top:36px;
}
.hk-footer .container{display:flex;flex-direction:column;align-items:center;gap:10px}
.hk-footer .small{font-size:13px;opacity:.85}
.hk-footer-brand{color:#e2e8f0;font-weight:700;font-size:15px;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px}
.hk-footer-brand .bi{font-size:18px}

/* ---------- 图标对齐微调 (Bootstrap Icons) ---------- */
.hk-menu a{display:inline-flex;align-items:center;gap:7px}
.hk-menu a .bi{font-size:15px}
.hk-logo-mark .bi{font-size:20px}
.hk-notice .bi{font-size:16px;color:var(--hk-accent);margin-top:2px}
.hk-hero-badge .bi,.hk-chip .bi{font-size:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}