@charset "utf-8";
/* ============================================================================
   UI Layout v1 · 统一页面骨架
   ----------------------------------------------------------------------------
   职责：统一"结构层"——页面容器、分区节奏、栅格、顶栏、认证页布局、底部安全区。
   与 ui-theme.css（视觉皮肤）分离；不改业务 DOM，仅通过 class 叠加生效。
   用法：
     <main class="ui-main"> ... 区块 ... </main>
     <header class="ui-appbar"> ... </header>
     <div class="ui-auth"><div class="ui-auth-card"> ... </div></div>
   ========================================================================== */

:root {
    --layout-max: 1080px;
    --layout-gutter: 16px;
    --layout-gap-section: 20px;
    --layout-gap-item: 12px;
    --layout-appbar-h: 56px;
    --layout-tabbar-space: 120px;
}

/* ---------------------------------------------------------------------------
   1. 页面容器 + 分区节奏
   --------------------------------------------------------------------------- */
.ui-main {
    width: 100%;
    max-width: var(--layout-max);
    margin: 0 auto;
    padding: var(--layout-gutter) var(--layout-gutter) var(--layout-tabbar-space);
    box-sizing: border-box;
}

/* 统一纵向节奏：由父级控制区块间距，避免各页面 margin 叠加失控 */
.ui-main > * {
    margin-top: 0;
    margin-bottom: 0;
}
.ui-main > * + * {
    margin-top: var(--layout-gap-section);
}
/* 区块内部元素保持原有外边距 */
.ui-main > * > *:first-child { margin-top: 0; }

/* 紧凑分区（同一逻辑区块内的标题 + 卡片组合） */
.ui-section {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap-item);
}
.ui-section > * { margin: 0; }

.ui-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-sp-3);
}
.ui-section-title {
    display: flex;
    align-items: center;
    gap: var(--ui-sp-2);
    font-size: var(--ui-fs-lg);
    font-weight: var(--ui-fw-bold);
    letter-spacing: -.2px;
    color: var(--ui-text);
}
.ui-section-title::before {
    content: "";
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(var(--ui-primary), var(--ui-accent));
}
.ui-section-link {
    font-size: var(--ui-fs-sm);
    color: var(--ui-primary);
    font-weight: var(--ui-fw-semibold);
}

/* ---------------------------------------------------------------------------
   2. 栅格
   --------------------------------------------------------------------------- */
.ui-cols {
    display: grid;
    gap: var(--layout-gap-item);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ui-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-cols-1 { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------------------
   3. 统一顶栏（白色玻璃 · 可选组件）
   --------------------------------------------------------------------------- */
.ui-appbar {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: var(--ui-sp-3);
    min-height: var(--layout-appbar-h);
    padding: 0 var(--layout-gutter);
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--ui-border);
    box-sizing: border-box;
}
.ui-appbar-inner {
    width: 100%;
    max-width: var(--layout-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--ui-sp-3);
}
.ui-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    color: var(--ui-text-2);
    background: var(--ui-bg-alt);
    border: 0;
    cursor: pointer;
    text-decoration: none;
}
.ui-back::before {
    content: "";
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6478' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ui-back:hover { background: var(--ui-primary-soft); color: var(--ui-primary); }
.ui-appbar-title {
    flex: 1;
    min-width: 0;
    font-size: var(--ui-fs-lg);
    font-weight: var(--ui-fw-bold);
    color: var(--ui-text);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ui-appbar-title-left { text-align: left; }
.ui-appbar-action {
    min-width: 34px;
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-semibold);
    color: var(--ui-primary);
    text-align: right;
}
.ui-appbar-brand {
    display: flex;
    align-items: center;
    gap: var(--ui-sp-2);
    font-size: var(--ui-fs-lg);
    font-weight: var(--ui-fw-black);
    color: var(--ui-text);
}
.ui-appbar-brand img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }

/* ---------------------------------------------------------------------------
   4. 认证页（登录 / 注册）
   --------------------------------------------------------------------------- */
.ui-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--layout-gap-section);
    padding: 32px var(--layout-gutter);
    box-sizing: border-box;
}
.ui-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    box-shadow: var(--ui-shadow);
    padding: 28px 26px 24px;
    box-sizing: border-box;
}
.ui-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-sp-3);
    margin-bottom: var(--ui-sp-5);
}
.ui-auth-brand img {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: var(--ui-shadow-brand);
}
.ui-auth-title {
    font-size: var(--ui-fs-2xl);
    font-weight: var(--ui-fw-black);
    color: var(--ui-text);
    letter-spacing: -.4px;
    margin: 0 0 6px;
    text-align: center;
}
.ui-auth-sub {
    font-size: var(--ui-fs-base);
    color: var(--ui-text-3);
    line-height: var(--ui-lh-base);
    text-align: center;
    margin: 0 0 var(--ui-sp-5);
}
.ui-auth-form { display: flex; flex-direction: column; gap: var(--ui-sp-3); }
.ui-auth-form > * { margin: 0; }
.ui-auth-row { display: flex; gap: var(--ui-sp-2); align-items: stretch; }
.ui-auth-row > :first-child { flex: 1; min-width: 0; }
.ui-auth-foot {
    margin-top: var(--ui-sp-4);
    padding-top: var(--ui-sp-4);
    border-top: 1px solid var(--ui-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-sp-2);
    font-size: var(--ui-fs-sm);
    color: var(--ui-text-3);
    text-align: center;
}
.ui-auth-foot a { color: var(--ui-primary); font-weight: var(--ui-fw-semibold); }

/* ---------------------------------------------------------------------------
   5. 响应式
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
    :root { --layout-gutter: 24px; --layout-gap-section: 24px; }
    .ui-main { padding-top: 24px; }
    .ui-cols-2-md { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-auth-card { padding: 32px 30px 26px; }
}

@media (min-width: 1024px) {
    .ui-main { padding-top: 28px; }
    .ui-cols { gap: 16px; }
}

@media (max-width: 380px) {
    :root { --layout-gutter: 12px; }
    .ui-auth { padding: 20px 12px; }
    .ui-auth-card { padding: 22px 18px; border-radius: var(--ui-radius-lg); }
}

/* 有固定底部导航时预留空间 */
@media (max-width: 768px) {
    .ui-main { padding-bottom: calc(var(--layout-tabbar-space) + env(safe-area-inset-bottom, 0px)); }
}