/* ============================================================================
 * uw-cards-login.css
 * 《放置：宇宙大战》卡通风格双主题 —— 页面卡片族 + 登录页
 *
 * 本文件从 uw-theme.css 拆分而来（2026-11-03），原始单文件 5204 行。
 * 拆分后由 index.html 逐个 <link> 引入，加载顺序必须保持变量文件在最前。
 * 所有规则只引用 uw-variables.css 里定义的 CSS 变量，不硬编码颜色。
 * ==========================================================================*/

/* ============================================================================
 * 页面卡片族（把各类业务卡统一成"圆角奶油卡 + 暖棕描边 + 贴纸投影"）
 * ==========================================================================*/
.uw-planet-card,
.uw-building-card,
.uw-tech-card,
/* .uw-tech-category 曾在这份名单里，但它是「分组容器」而不是「卡片」。
   放进本组会让分组框和它内部的研究项目卡变成同一层级的实体卡片 = 框套框；
   它的托盘规则见文件末尾。注意别再把分组容器往这组里加了。 */
.uw-ship-card,
.uw-template-card,
.uw-commander-card,
.uw-recruit-card,
.uw-shop-card,
.uw-report-item,
.uw-battle-result,
.uw-mail-item,
.uw-event-card,
.uw-quest-item,
.uw-achievement-card,
.uw-leaderboard-podium-item,
.uw-leaderboard-row,
.uw-trade-row,
.uw-fleet-row,
.uw-profile-stat-card,
.uw-signin-day,
.uw-formation-section {
    background-color: var(--uw-color-bg-tertiary);
    border: 2px solid var(--uw-ink-soft);
    border-radius: var(--uw-r-md);
    box-shadow: 0 3px 0 var(--uw-shade);
    color: var(--uw-color-text-primary);
    transition: transform .12s ease, box-shadow .12s ease;
}
.uw-planet-card:hover,
.uw-building-card:hover,
.uw-tech-card:hover,
.uw-ship-card:hover,
.uw-commander-card:hover,
.uw-shop-card:hover,
.uw-mail-item:hover,
.uw-event-card:hover,
.uw-quest-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 var(--uw-shade);
}
.uw-planet-name, .uw-commander-name, .uw-mail-subject { font-weight: 700; }
.uw-stat-row { color: var(--uw-color-text-secondary); }
.uw-stat-row span:last-child { color: var(--uw-color-text-primary); font-weight: 600; }
.uw-stat-row.uw-stat-danger span:last-child {
    color: var(--uw-color-danger);
    font-weight: 800;
}
/* 星球等级徽章：橙金底压深棕字（两主题 accent-dim 都是 #FFB84D，深棕字对比 9:1；原 accent 蓝字压金黄仅 1.79:1） */
.uw-tag-level {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--uw-color-accent-dim);
    color: #241507;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--uw-r-pill);
    padding: 1px 8px;
    white-space: nowrap;
}
.uw-tag-level b { font-weight: 900; }
.uw-meta-danger { color: var(--uw-color-danger); font-weight: 700; }
.uw-rate { color: var(--uw-color-success); }

/* --- 表格 --- */
.uw-table, table {
    background: var(--uw-color-bg-tertiary);
    color: var(--uw-color-text-primary);
    border-radius: var(--uw-r-md);
}
.uw-table th, table th {
    background: var(--uw-color-bg-hover);
    color: var(--uw-color-accent);
    border-bottom: 2px solid var(--uw-ink-soft);
    padding: 6px 8px;
}
.uw-table td, table td { border-bottom: 1px solid var(--uw-color-border-dim); padding: 5px 8px; }

/* ============================================================================
 * 登录页
 * ==========================================================================*/
/* 登录页整屏背景跟随主题（覆盖基础文件里的深空渐变） */
.uw-login {
    background:
        radial-gradient(ellipse 900px 520px at 72% -15%, var(--uw-login-glow1), transparent 65%),
        radial-gradient(ellipse 760px 460px at 8% 112%, var(--uw-login-glow2), transparent 65%),
        linear-gradient(180deg, var(--uw-login-bg-top) 0%, var(--uw-color-bg-primary) 100%);
}

/* 宽屏双栏：左侧品牌/宣传 + 右侧登录卡 */
.uw-login-layout {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(40px, 8vw, 140px);
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px clamp(20px, 5vw, 64px);
}
/* 布局层柔和渐变：让登录区与周围颜色"溶"过去，避免一块硬白 */
.uw-login-layout::before {
    content: "";
    position: absolute;
    inset: -8% -6%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 720px 480px at 50% 50%, rgba(61, 155, 255, 0.12), transparent 70%),
        radial-gradient(ellipse 520px 360px at 82% 28%, rgba(255, 200, 87, 0.18), transparent 70%),
        radial-gradient(ellipse 460px 340px at 16% 78%, rgba(199, 168, 255, 0.16), transparent 70%);
    filter: blur(2px);
}
html[data-theme="night"] .uw-login-layout::before {
    background:
        radial-gradient(ellipse 720px 480px at 50% 50%, rgba(125, 211, 252, 0.20), transparent 70%),
        radial-gradient(ellipse 520px 360px at 82% 28%, rgba(255, 209, 102, 0.14), transparent 70%),
        radial-gradient(ellipse 460px 340px at 16% 78%, rgba(199, 168, 255, 0.18), transparent 70%);
}
.uw-login-hero {
    flex: 1 1 440px;
    max-width: 480px;
    text-align: left;
}
.uw-hero-title {
    margin: 0;
    font-size: clamp(30px, 4.2vw, 46px);
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--uw-color-accent);
}
.uw-hero-en {
    font-family: var(--uw-font-tech);
    letter-spacing: 6px;
    font-size: 14px;
    color: var(--uw-color-text-muted);
    margin: 6px 0 14px;
}
.uw-hero-desc {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--uw-color-text-secondary);
}
/* 朴素圆点列表：去掉 AI 味的胶囊卡片排比 */
.uw-hero-feats {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    gap: 9px;
    font-size: 14px;
    color: var(--uw-color-text-secondary);
}
.uw-hero-feats li {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.uw-hero-feats li::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--uw-color-accent);
    transform: translateY(-2px);
}
/* 玩家交流群：低调边框块 + 一键复制 */
.uw-hero-qq {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--uw-ink-soft);
    background: var(--uw-color-bg-tertiary);
    border-radius: var(--uw-r-pill);
    padding: 8px 10px 8px 18px;
    font-size: 14px;
}
.uw-hero-qq-label { color: var(--uw-color-text-muted); }
.uw-hero-qq-num {
    font-family: var(--uw-font-tech);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--uw-color-accent);
}
.uw-hero-qq-copy {
    border: 1.5px solid var(--uw-ink-soft);
    background: var(--uw-color-bg-secondary);
    border-radius: var(--uw-r-pill);
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--uw-color-text-primary);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.uw-hero-qq-copy:hover {
    border-color: var(--uw-color-accent);
    color: var(--uw-color-accent);
}
/* 登录卡对齐双栏 */
.uw-login-layout .uw-login-card {
    width: 460px;
    max-width: 92vw;
    flex: 0 0 auto;
    margin: 0;
    padding: 40px 40px 28px;
}
/* 宽屏：卡片内的小品牌区由左侧 hero 替代，隐藏避免重复 */
.uw-login-layout .uw-login-brand { display: none; }
/* 窄屏：只保留居中的登录卡，hero 隐藏，恢复小品牌区 */
@media (max-width: 900px) {
    .uw-login-layout {
        flex-direction: column;
        justify-content: center;
        gap: 0;
    }
    .uw-login-hero { display: none; }
    .uw-login-layout .uw-login-brand { display: block; }
}

.uw-login-bg {
    background-image:
        radial-gradient(2px 2px at 12% 18%, var(--uw-extra-pink), transparent 60%),
        radial-gradient(2px 2px at 28% 62%, var(--uw-rarity-legend), transparent 60%),
        radial-gradient(3px 3px at 43% 28%, var(--uw-color-accent), transparent 60%),
        radial-gradient(2px 2px at 57% 74%, var(--uw-extra-mint), transparent 60%),
        radial-gradient(2px 2px at 68% 38%, var(--uw-rarity-rare), transparent 60%),
        radial-gradient(3px 3px at 76% 82%, var(--uw-extra-purple), transparent 60%),
        radial-gradient(2px 2px at 86% 15%, var(--uw-rarity-legend), transparent 60%);
    opacity: 1;
}
.uw-login-card {
    background: linear-gradient(105deg, #FFFFFF 0%, #FFFFFF 30%, #FFF7E6 72%, #FFEFC9 100%);
    border: none;
    border-radius: 22px;
    box-shadow:
        0 4px 0 var(--uw-shade),
        30px 0 80px -20px rgba(255, 200, 87, 0.45),
        -30px 0 80px -20px rgba(61, 155, 255, 0.40);
    backdrop-filter: none;
    color: var(--uw-color-text-primary);
    overflow: visible;
    position: relative;
}
/* 卡片右侧色溢出：让卡片颜色"流"到背景（独立光晕，不影响卡片本体不透明度） */
.uw-login-card::after {
    content: "";
    position: absolute;
    right: -120px;
    top: 30%;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 87, 0.45) 0%, rgba(255, 200, 87, 0) 70%);
    pointer-events: none;
    z-index: -1;
}
html[data-theme="night"] .uw-login-card {
    background: linear-gradient(105deg, #372E7C 0%, #372E7C 30%, #3A2F86 70%, #453A95 100%);
    border: none;
    box-shadow:
        0 4px 0 var(--uw-shade),
        30px 0 80px -20px rgba(255, 200, 87, 0.40),
        -30px 0 80px -20px rgba(125, 211, 252, 0.38);
}
html[data-theme="night"] .uw-login-card::after {
    background: radial-gradient(circle, rgba(255, 200, 87, 0.35) 0%, rgba(255, 200, 87, 0) 70%);
}
.uw-login-logo { font-size: 52px; color: var(--uw-color-accent); animation: uw-float 3s ease-in-out infinite; }
.uw-login-title { color: var(--uw-color-accent); letter-spacing: 2px; }
.uw-login-subtitle { color: var(--uw-color-text-muted); letter-spacing: 3px; font-family: var(--uw-font-tech); }
.uw-login-field {
    position: relative;
    display: flex;
    align-items: center;
    background: transparent;         /* 不填背景色，避免半透明块突兀 */
    border: 2px solid var(--uw-ink-soft);
    border-radius: var(--uw-r-pill);
    height: 46px;
    padding: 0 18px 0 6px;
    transition: border-color .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
    gap: 10px;
}
.uw-login-field:focus-within {
    border-color: var(--uw-color-accent);
    box-shadow: 0 0 0 3px rgba(61, 155, 255, 0.18);
}
.uw-login-field i {
    position: static;               /* 覆盖基础样式里的 absolute，避免图标压住输入框 */
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--uw-color-accent);
    background: var(--uw-color-bg-tertiary);
    border: 2px solid var(--uw-ink-soft);
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
}
.uw-login-field input {
    flex: 1;
    background: transparent;
    border: none !important;
    color: var(--uw-color-text-primary);
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    height: 100%;
    line-height: 1;
    box-shadow: none !important;
    outline: none;
}
.uw-login-field input::placeholder { color: var(--uw-color-text-muted); font-weight: 500; }
.uw-login-submit {
    background-color: var(--uw-color-accent);
    border: 2.5px solid var(--uw-ink);
    border-radius: var(--uw-r-pill);
    color: var(--uw-btn-text);
    box-shadow: 0 4px 0 var(--uw-shade);
}
.uw-login-submit:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--uw-shade); }
.uw-login-error {
    background: rgba(255, 107, 107, 0.15);
    border: 1.5px solid var(--uw-color-danger);
    color: var(--uw-color-danger);
    border-radius: var(--uw-r-md);
    padding: 6px 10px;
    /* 异常堆栈等超长文本：限制宽高并允许滚动（与 universe-war.css 基础层一致） */
    max-width: 100%;
    max-height: 160px;
    overflow-y: auto;
    word-break: break-all;
}
.uw-login-foot { color: var(--uw-color-text-muted); }
.uw-login-foot-dot { background-color: var(--uw-color-success); }