/* JinNianAuth 前台样式
   设计取向：克制、扁平、偏产品原生。
   - 不用渐变、不用发光、不用大圆角胶囊
   - 层次靠 1px 描边与留白，不靠色块堆叠
   - 亮色（日间）：纯白底
   - 暗色（夜间）：全部背景透明，直接透出主题自己的深色底
   主题切换由 JS 在容器上打 .za-dark（同时给 <html> 打 .zibauth-dark）；
   无 JS 时自动跟随系统 prefers-color-scheme。 */

/* ============================================================
 * 变量：亮色（默认）
 * ========================================================== */
.zibauth-wrap,
.zibauth-center,
.zibauth-query {
    --za-bg: #ffffff;
    --za-block: #ffffff;

    --za-ink: #111827;
    --za-text: #374151;
    --za-muted: #6b7280;
    --za-faint: #9ca3af;
    --za-line: #e5e7eb;
    --za-line-strong: #d1d5db;

    --za-blue: #1f6feb;
    --za-blue-dark: #1a5fd0;
    --za-blue-soft: #f2f6fc;
    --za-blue-line: #c8d9f2;

    --za-green: #177245;
    --za-green-soft: #f1f8f3;
    --za-green-line: #c9e2d2;

    --za-red: #b42318;
    --za-red-soft: #fdf3f2;
    --za-red-line: #f0d3cf;

    --za-amber: #96620a;
    --za-amber-soft: #fdf8ef;
    --za-amber-line: #ecd9b8;

    --za-radius: 6px;

    color: var(--za-text);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.zibauth-wrap *,
.zibauth-center *,
.zibauth-query * {
    box-sizing: border-box;
}

/* 外层容器：亮色用自己的白底，不透出主题面板背景 */
.zibauth-wrap,
.zibauth-center,
.zibauth-query {
    display: block;
    background: var(--za-bg);
    color: var(--za-text);
    border-radius: var(--za-radius);
    padding: 16px 18px;
}

.zibauth-center .za-card,
.zibauth-center .za-license,
.zibauth-center .za-hero,
.zibauth-center .za-qcard,
.zibauth-center .za-empty,
.zibauth-center .za-key,
.zibauth-center .za-chip,
.zibauth-center .za-nav,
.zibauth-center .za-result-box,
.zibauth-center .za-result-key,
.zibauth-query .za-card,
.zibauth-query .za-hero,
.zibauth-query .za-qcard,
.zibauth-query .za-qrow,
.zibauth-wrap .za-card {
    background: var(--za-block);
}

/* ============================================================
 * 变量：暗色（夜间）—— 所有表面一律透明，只留文字与描边
 * ========================================================== */
.zibauth-wrap.za-dark,
.zibauth-center.za-dark,
.zibauth-query.za-dark,
html.zibauth-dark .zibauth-wrap,
html.zibauth-dark .zibauth-center,
html.zibauth-dark .zibauth-query,
body.zibauth-dark .zibauth-wrap,
body.zibauth-dark .zibauth-center,
body.zibauth-dark .zibauth-query {
    --za-bg: transparent;
    --za-block: transparent;

    --za-ink: #e5e7eb;
    --za-text: #c2c9d4;
    --za-muted: #9aa4b2;
    --za-faint: #7b8695;
    --za-line: #333b46;
    --za-line-strong: #454f5c;

    --za-blue: #74a9ff;
    --za-blue-dark: #a3c8ff;
    --za-blue-soft: transparent;
    --za-blue-line: #3b5a86;

    --za-green: #6fce97;
    --za-green-soft: transparent;
    --za-green-line: #37604a;

    --za-red: #ff8f85;
    --za-red-soft: transparent;
    --za-red-line: #6e3b36;

    --za-amber: #f0c268;
    --za-amber-soft: transparent;
    --za-amber-line: #6a5326;
}

/* 无 JS / JS 未就绪时，跟随系统深色 */
@media (prefers-color-scheme: dark) {
    html:not(.zibauth-light) .zibauth-wrap:not(.za-light),
    html:not(.zibauth-light) .zibauth-center:not(.za-light),
    html:not(.zibauth-light) .zibauth-query:not(.za-light) {
        --za-bg: transparent;
        --za-block: transparent;

        --za-ink: #e5e7eb;
        --za-text: #c2c9d4;
        --za-muted: #9aa4b2;
        --za-faint: #7b8695;
        --za-line: #333b46;
        --za-line-strong: #454f5c;

        --za-blue: #74a9ff;
        --za-blue-dark: #a3c8ff;
        --za-blue-soft: transparent;
        --za-blue-line: #3b5a86;

        --za-green: #6fce97;
        --za-green-soft: transparent;
        --za-green-line: #37604a;

        --za-red: #ff8f85;
        --za-red-soft: transparent;
        --za-red-line: #6e3b36;

        --za-amber: #f0c268;
        --za-amber-soft: transparent;
        --za-amber-line: #6a5326;
    }
}

/* ================= 通用容器 ================= */
.za-card {
    background: var(--za-block);
    border: 1px solid var(--za-line);
    border-radius: var(--za-radius);
    padding: 16px 18px;
}

.za-card + .za-card {
    margin-top: 10px;
}

.za-card-head {
    margin-bottom: 12px;
}

.za-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--za-ink);
}

.za-sub {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--za-muted);
}

.za-tip {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--za-faint);
}

/* ================= 授权中心头部 ================= */
.za-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--za-line);
}

.za-h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--za-ink);
}

.za-head-side {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--za-muted);
}

.za-chip {
    display: inline-block;
    padding: 1px 7px;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--za-muted);
    background: var(--za-block);
    border: 1px solid var(--za-line);
    border-radius: 3px;
}

/* ================= Tab 导航：下划线式，不用色块 ================= */
.za-nav {
    display: flex;
    gap: 0;
    padding: 0;
    margin-bottom: 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--za-line);
}

.za-nav-item {
    flex: 0 0 auto;
    margin-right: 20px;
    padding: 7px 2px 8px;
    font-size: 13.5px;
    color: var(--za-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.za-nav-item:hover {
    color: var(--za-text);
}

.za-nav-item.is-active {
    color: var(--za-blue);
    border-bottom-color: var(--za-blue);
    font-weight: 600;
    background: none;
}

/* ================= 授权卡片 ================= */
.za-license {
    background: var(--za-block);
    border: 1px solid var(--za-line);
    border-radius: var(--za-radius);
    padding: 14px 16px;
}

.za-license + .za-license {
    margin-top: 10px;
}

.za-lic-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.za-lic-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--za-ink);
}

.za-lic-meta {
    font-size: 12.5px;
    color: var(--za-muted);
}

.za-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--za-muted);
    background: transparent;
    border: 1px solid var(--za-line);
    border-radius: 3px;
    vertical-align: 1px;
}

.za-pill.ok {
    color: var(--za-green);
    border-color: var(--za-green-line);
}

.za-pill.warn {
    color: var(--za-amber);
    border-color: var(--za-amber-line);
}

.za-pill.err {
    color: var(--za-red);
    border-color: var(--za-red-line);
}

/* 授权码 */
.za-key {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 7px 10px;
    background: var(--za-block);
    border: 1px solid var(--za-line);
    border-radius: var(--za-radius);
}

.za-key code {
    flex: 1 1 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    letter-spacing: .03em;
    color: var(--za-ink);
    word-break: break-all;
    background: none;
    padding: 0;
}

/* 域名区 */
.za-domains {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--za-line);
}

.za-domain {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.za-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--za-green);
    flex: 0 0 auto;
}

.za-domain-name {
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--za-ink);
    word-break: break-all;
}

.za-link {
    padding: 0;
    font-size: 12.5px;
    color: var(--za-blue);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.za-link:hover {
    text-decoration: underline;
}

/* 网页内更换域名（展开的输入行，替代浏览器弹窗） */
.za-domain-edit {
    display: none;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 6px;
    padding-left: 13px;
}

.za-domain-edit.is-open {
    display: flex;
}

.za-domain-edit .za-input {
    flex: 1 1 200px;
    min-width: 0;
}

/* 网页内绑定域名 */
.za-bind-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.za-bind-form .za-input {
    flex: 1 1 200px;
    min-width: 0;
}

/* ================= 按钮 / 表单 ================= */
.za-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 13px;
    color: var(--za-text);
    background: var(--za-block);
    border: 1px solid var(--za-line-strong);
    border-radius: var(--za-radius);
    cursor: pointer;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}

.za-btn:hover {
    border-color: var(--za-blue);
    color: var(--za-blue);
}

.za-btn.primary {
    color: #fff;
    background: var(--za-blue);
    border-color: var(--za-blue);
}

.za-btn.primary:hover {
    color: #fff;
    background: var(--za-blue-dark);
    border-color: var(--za-blue-dark);
}

.za-btn.ghost {
    color: var(--za-text);
    background: var(--za-block);
}

.za-btn.mini {
    padding: 4px 10px;
    font-size: 12px;
}

.za-btn.block {
    width: 100%;
}

.za-btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

.za-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.za-input {
    flex: 1 1 240px;
    min-width: 0;
    padding: 8px 11px;
    font-size: 13.5px;
    color: var(--za-ink);
    background: var(--za-block);
    border: 1px solid var(--za-line-strong);
    border-radius: var(--za-radius);
    outline: none;
    transition: border-color .15s;
}

.za-input::placeholder {
    color: var(--za-faint);
}

.za-input:focus {
    border-color: var(--za-blue);
}

.za-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ================= 空状态 ================= */
.za-empty {
    padding: 32px 18px;
    text-align: center;
    background: var(--za-block);
    border: 1px solid var(--za-line);
    border-radius: var(--za-radius);
}

.za-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--za-ink);
}

/* ================= 结果提示（卡密兑换 / 操作反馈） ================= */
.za-result {
    margin-top: 12px;
}

.za-result-box {
    padding: 12px 14px;
    border: 1px solid var(--za-line);
    border-radius: var(--za-radius);
    background: var(--za-block);
}

.za-result-box.is-ok {
    background: var(--za-green-soft);
    border-color: var(--za-green-line);
}

.za-result-box.is-err {
    background: var(--za-red-soft);
    border-color: var(--za-red-line);
}

.za-result-title {
    font-size: 13.5px;
    font-weight: 600;
}

.za-result-box.is-ok .za-result-title {
    color: var(--za-green);
}

.za-result-box.is-err .za-result-title {
    color: var(--za-red);
}

.za-result-desc {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--za-text);
}

.za-result-key {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 7px 10px;
    background: var(--za-block);
    border: 1px solid var(--za-green-line);
    border-radius: var(--za-radius);
}

.za-result-key code {
    flex: 1 1 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    letter-spacing: .03em;
    color: var(--za-ink);
    background: none;
    padding: 0;
    word-break: break-all;
}

/* ================= 正版查询页 ================= */
.za-hero {
    padding: 0;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 0;
}

.za-hero-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--za-ink);
}

.za-hero-sub {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--za-muted);
}

.za-hero-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--za-faint);
}

.za-search {
    display: flex;
    gap: 8px;
    max-width: 520px;
    margin: 14px 0 0;
}

.za-search .za-input {
    flex: 1 1 auto;
    height: 38px;
}

.za-search .za-btn {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 22px;
}

/* 查询结果 */
.za-query-result:empty {
    display: none;
}

.za-qcard {
    margin-top: 14px;
    background: var(--za-block);
    border: 1px solid var(--za-line);
    border-radius: var(--za-radius);
    overflow: hidden;
}

.za-qcard.is-ok {
    border-color: var(--za-green-line);
}

.za-qcard.is-none {
    border-color: var(--za-line);
}

.za-qcard-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: transparent;
    border-bottom: 1px solid var(--za-line);
}

.za-qcard.is-ok .za-qcard-head {
    background: var(--za-green-soft);
}

.za-qmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    border-radius: 50%;
    flex: 0 0 auto;
}

.za-qcard.is-ok .za-qmark {
    background: var(--za-green);
}

.za-qcard.is-none .za-qmark {
    background: var(--za-faint);
}

.za-qtitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--za-ink);
}

.za-qdesc {
    font-size: 12.5px;
    color: var(--za-muted);
}

/* 结果明细：一行一条，不卡片化 */
.za-qrows {
    display: block;
    background: transparent;
}

.za-qrow {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 9px 16px;
    background: transparent;
    border-top: 1px solid var(--za-line);
}

.za-qrow:first-child {
    border-top: none;
}

.za-qrow .k {
    flex: 0 0 88px;
    font-size: 12px;
    color: var(--za-faint);
}

.za-qrow .v {
    flex: 1 1 auto;
    font-size: 13.5px;
    color: var(--za-ink);
    word-break: break-all;
}

/* ================= 内置授权中心页（?zibauth_center=1） ================= */
.zibauth-uc-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 14px 50px;
}

.zibauth-uc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 6px 12px;
    font-size: 12.5px;
    color: var(--za-text);
    background: var(--za-block);
    border: 1px solid var(--za-line);
    border-radius: var(--za-radius);
    cursor: pointer;
    text-decoration: none;
}

.zibauth-uc-back:hover {
    color: var(--za-blue);
    border-color: var(--za-blue);
}

/* 独立页没有主题背景可透出，夜间仍需一个深色底 */
html.zibauth-dark body.zibauth-uc-page-body,
body.zibauth-dark.zibauth-uc-page-body {
    background: #11151b;
}

html.zibauth-dark .zibauth-uc-back,
body.zibauth-dark .zibauth-uc-back {
    color: #c2c9d4;
    background: transparent;
    border-color: #333b46;
}

@media (prefers-color-scheme: dark) {
    html:not(.zibauth-light) body.zibauth-uc-page-body {
        background: #11151b;
    }
    html:not(.zibauth-light) .zibauth-uc-back {
        color: #c2c9d4;
        background: transparent;
        border-color: #333b46;
    }
}

/* ============================================================
 * 移动端适配
 * ========================================================== */
@media (max-width: 768px) {
    .zibauth-wrap,
    .zibauth-center,
    .zibauth-query {
        padding: 12px 12px;
        border-radius: 0;
    }

    .za-head {
        align-items: flex-start;
        gap: 8px;
        padding-bottom: 10px;
        margin-bottom: 12px;
    }

    .za-head-side {
        width: 100%;
        gap: 10px;
    }

    /* Tab 等分铺满 */
    .za-nav {
        width: 100%;
    }

    .za-nav-item {
        flex: 1 1 0;
        margin-right: 0;
        padding: 8px 2px;
        text-align: center;
    }

    .za-card {
        padding: 14px 12px;
    }

    .za-lic-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .za-lic-meta {
        width: 100%;
    }

    /* 授权码：码独占一行，复制按钮另起一行 */
    .za-key {
        flex-wrap: wrap;
        gap: 8px;
    }

    .za-key code {
        flex: 1 1 100%;
        font-size: 13px;
    }

    .za-key .za-btn {
        width: 100%;
    }

    .za-domain {
        flex-wrap: wrap;
        padding: 6px 0;
    }

    .za-domain-name {
        min-width: 0;
    }

    .za-domain .za-link {
        padding: 2px 8px;
        border: 1px solid var(--za-line);
        border-radius: 4px;
    }

    .za-domain-edit,
    .za-bind-form {
        flex-direction: column;
        align-items: stretch;
        padding-left: 0;
    }

    .za-domain-edit .za-input,
    .za-bind-form .za-input {
        flex: 1 1 auto;
        width: 100%;
    }

    .za-domain-edit .za-btn,
    .za-bind-form .za-btn {
        width: 100%;
    }

    .za-btn.mini {
        padding: 6px 12px;
    }

    .za-search {
        max-width: none;
        flex-direction: column;
        gap: 8px;
    }

    .za-search .za-btn {
        width: 100%;
    }

    .za-qrow {
        flex-direction: column;
        gap: 1px;
        padding: 9px 12px;
    }

    .za-qrow .k {
        flex: none;
    }

    .za-qcard-head {
        padding: 11px 12px;
    }

    .za-empty {
        padding: 26px 12px;
    }

    .zibauth-uc-page {
        padding: 12px 8px 34px;
    }
}

@media (max-width: 480px) {
    .zibauth-wrap,
    .zibauth-center,
    .zibauth-query {
        padding: 10px 8px;
    }

    .za-card {
        padding: 12px 10px;
    }

    .za-license {
        padding: 12px 10px;
    }

    .za-form {
        flex-direction: column;
    }

    .za-form .za-input {
        flex: 1 1 auto;
    }

    .za-form .za-btn {
        width: 100%;
    }

    .za-nav-item {
        font-size: 13px;
    }
}

/* 触摸设备：去掉 hover 残留态 */
@media (hover: none) {
    .za-btn:hover {
        color: var(--za-text);
        border-color: var(--za-line-strong);
    }
    .za-nav-item:hover {
        color: var(--za-muted);
    }
}