/* 站在 Tailwind 之上的少量补充样式：全局质感、字体渲染、无法用原子类表达的细节 */
html, body { height: 100%; }
[v-cloak] { display: none; }

body {
    background-color: #f6f7fb;
    background-image:
        radial-gradient(at 0% 0%, rgba(79, 95, 232, 0.07) 0, transparent 50%),
        radial-gradient(at 100% 0%, rgba(79, 95, 232, 0.05) 0, transparent 45%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: #c7d2fe; color: #1e2466; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 让 <code> 行内代码更柔和 */
code {
    background: #f1f5f9;
    padding: 0 .3rem;
    border-radius: .3rem;
    font-size: .85em;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* 全局 focus-visible：键盘操作的清晰反馈，兼顾无障碍 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #4f5fe8;
    outline-offset: 2px;
    border-radius: 4px;
}

/* 数字/等宽展示（成本、ID、指标值）*/
.tabular {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-feature-settings: 'tnum';
}

/* 轻量淡入，用于卡片/列表项首次出现，避免生硬跳出 */
@keyframes oz-fade-up {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.oz-fade-up { animation: oz-fade-up .25s ease-out; }

/* Stepper 连接线：用伪元素在圆点之间画横线，避免额外 DOM */
.oz-step { position: relative; }
.oz-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 1.125rem;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
}
.oz-step.oz-step-done:not(:last-child)::after { background: #a5b4fc; }

/* ===== 左右布局壳层 ===== */
.oz-shell {
    display: flex;
    min-height: 100vh;
}

.oz-sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 13rem;
    height: 100vh;
    border-right: 1px solid rgb(226 232 240 / 0.85);
    background: rgb(255 255 255 / 0.95);
    backdrop-filter: blur(8px);
    transition: width 0.2s ease;
}

.oz-sidebar--collapsed {
    width: 3.5rem;
}

.oz-sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    height: 3.25rem;
    padding: 0 0.5rem 0 0.625rem;
    border-bottom: 1px solid rgb(226 232 240 / 0.9);
}

.oz-sidebar__toggle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.oz-sidebar__toggle:hover {
    background: #f1f5f9;
    color: #334155;
}

.oz-sidebar__section {
    margin: 0.75rem 0.75rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.15s ease;
}

.oz-sidebar--collapsed .oz-sidebar__section {
    opacity: 0;
    height: 0;
    margin: 0;
}

.oz-sidebar__logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    border-radius: 0.5rem;
    padding: 0.25rem;
    text-decoration: none;
}

.oz-sidebar__logo-text {
    font-size: 1rem;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.15s ease, width 0.2s ease;
}

.oz-sidebar--collapsed .oz-sidebar__logo-text {
    width: 0;
    opacity: 0;
    overflow: hidden;
}

.oz-sidebar__nav {
    flex: 1;
    padding: 0.375rem 0.5rem;
    overflow-y: auto;
}

.oz-nav-item,
.oz-sidebar__btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: 0.625rem;
    background: transparent;
    color: #475569;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.oz-nav-item:hover,
.oz-sidebar__btn:hover {
    background: #f8fafc;
    color: #0f172a;
}

.oz-nav-item--active {
    background: linear-gradient(90deg, #eef2ff 0%, #f5f7ff 100%);
    color: #2f3bb0;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgb(199 210 254 / 0.55);
}

.oz-nav-item--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.25rem;
    border-radius: 0 3px 3px 0;
    background: #4f5fe8;
}

.oz-nav-icon-wrap {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: #f1f5f9;
    color: #64748b;
    transition: background 0.15s ease, color 0.15s ease;
}

.oz-nav-item--active .oz-nav-icon-wrap {
    background: #e0e7ff;
    color: #4f5fe8;
}

.oz-nav-icon-wrap--muted {
    background: transparent;
}

.oz-nav-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
}

.oz-nav-label,
.oz-sidebar__user-text {
    white-space: nowrap;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.15s ease, width 0.2s ease;
}

.oz-sidebar--collapsed .oz-nav-label,
.oz-sidebar--collapsed .oz-sidebar__user-text {
    width: 0;
    opacity: 0;
}

.oz-sidebar--collapsed .oz-nav-item,
.oz-sidebar--collapsed .oz-sidebar__btn,
.oz-sidebar--collapsed .oz-sidebar__user {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.oz-sidebar--collapsed .oz-nav-item--active::before {
    display: none;
}

.oz-sidebar__foot {
    padding: 0.5rem;
    border-top: 1px solid rgb(226 232 240 / 0.9);
}

.oz-sidebar__user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    padding: 0.375rem 0.5rem;
    min-height: 2.25rem;
}

.oz-sidebar__btn--muted {
    color: #64748b;
}

.oz-sidebar__btn--muted:hover {
    color: #dc2626;
    background: #fef2f2;
}

.oz-main-wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.oz-main {
    flex: 1;
    width: 100%;
    padding: 1rem 1.25rem 1.5rem;
}

.oz-main--dense {
    padding: 0.5rem 0.875rem 0.75rem;
}

@media (max-width: 767px) {
    .oz-sidebar {
        position: fixed;
        left: 0;
        box-shadow: 4px 0 24px rgb(15 23 42 / 0.08);
    }

    .oz-sidebar--collapsed {
        width: 3.5rem;
        box-shadow: none;
    }

    .oz-main {
        padding: 0.75rem 0.875rem 1rem;
    }

    .oz-main--dense {
        padding: 0.5rem 0.625rem 0.625rem;
    }
}

/* 报告页：iframe 无边框，高度由内容撑开，页面级滚动 */
.report-viewer { min-height: calc(100vh - 1.5rem); }
.report-iframe {
    display: block;
    width: 100%;
    margin-top: 0.375rem;
    border: 0;
    background: transparent;
}

/* ===== 页面通用 ===== */
.oz-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.oz-page-header--compact {
    margin-bottom: 0;
    align-items: center;
}

.oz-page-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0f172a;
    line-height: 1.25;
}

.oz-page-desc {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
}

.oz-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.oz-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.oz-breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s ease;
}

.oz-breadcrumb a:hover {
    color: #4f5fe8;
}

/* ===== 主体卡片 ===== */
.oz-subject-card {
    position: relative;
    display: block;
    padding: 1rem 1.125rem;
    border-radius: 0.875rem;
    border: 1px solid rgb(226 232 240 / 0.9);
    background: rgb(255 255 255 / 0.92);
    text-decoration: none;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.oz-subject-card:hover {
    border-color: rgb(199 210 254 / 0.9);
    box-shadow: 0 4px 16px rgb(79 95 232 / 0.08);
    transform: translateY(-1px);
}

.oz-subject-card--compact {
    padding: 0.75rem 1rem;
}

.oz-subject-card__arrow {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    font-size: 0.875rem;
    color: #cbd5e1;
    transition: color 0.15s ease, transform 0.15s ease;
}

.oz-subject-card:hover .oz-subject-card__arrow {
    color: #4f5fe8;
    transform: translateX(2px);
}

.oz-kind-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.oz-kind-badge--lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.875rem;
}

.oz-kind--brand { background: #ede9fe; color: #6d28d9; }
.oz-kind--domain { background: #e0f2fe; color: #0369a1; }
.oz-kind--product { background: #d1fae5; color: #047857; }
.oz-kind--person { background: #fef3c7; color: #b45309; }
.oz-kind--default { background: #f1f5f9; color: #475569; }

/* ===== 轮次卡片 ===== */
.oz-campaign-card {
    position: relative;
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240 / 0.9);
    background: white;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.oz-campaign-card:hover {
    border-color: rgb(199 210 254 / 0.85);
    box-shadow: 0 2px 12px rgb(79 95 232 / 0.06);
}

.oz-campaign-card__delete {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.125rem 0.375rem;
    border: 0;
    background: transparent;
    font-size: 0.6875rem;
    color: #94a3b8;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.oz-campaign-card:hover .oz-campaign-card__delete {
    opacity: 1;
}

.oz-campaign-card__delete:hover {
    color: #dc2626;
}

/* ===== API Key 行 ===== */
.oz-key-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240 / 0.85);
    background: white;
}

/* ===== 空状态 ===== */
.oz-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.5rem;
    border-radius: 1rem;
    border: 1px dashed rgb(203 213 225 / 0.9);
    background: rgb(255 255 255 / 0.5);
    text-align: center;
}

.oz-empty--compact {
    padding: 2rem 1rem;
}

.oz-empty__icon {
    font-size: 2rem;
    color: #cbd5e1;
    margin-bottom: 0.5rem;
}

/* ===== 新用户引导（主体页空状态）===== */
.oz-onboard {
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    border: 1px solid rgb(226 232 240 / 0.85);
    background: rgb(255 255 255 / 0.65);
}

.oz-onboard__steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0;
    margin-top: 0.75rem;
    list-style: none;
    padding: 0;
}

.oz-onboard__step {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.oz-onboard__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: rgb(30 41 59);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.oz-onboard__arrow {
    padding: 0 0.375rem;
    color: #cbd5e1;
}

.oz-onboard__hint {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #64748b;
}

/* ===== 弹窗 ===== */
.oz-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.oz-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(15 23 42 / 0.45);
    backdrop-filter: blur(4px);
}

.oz-modal__panel {
    position: relative;
    width: 100%;
    max-width: 28rem;
    border-radius: 1rem;
    border: 1px solid rgb(226 232 240 / 0.9);
    background: white;
    box-shadow: 0 20px 48px rgb(15 23 42 / 0.16);
    overflow: hidden;
}

.oz-modal__panel--md {
    max-width: 32rem;
}

.oz-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgb(241 245 249);
}

.oz-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #94a3b8;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.oz-modal__close:hover {
    background: #f1f5f9;
    color: #475569;
}

.oz-modal__body {
    padding: 1rem 1.25rem;
    max-height: min(70vh, 32rem);
    overflow-y: auto;
}

.oz-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid rgb(241 245 249);
    background: #fafbfc;
}