/* ============ auth.css（纯白·日式极简） ============ */
:root{
    --bg:#fff; --surface:#fff; --ink:#242628; --muted:#8c9196; --hairline:#eee;
    --accent:#aeb6c0; --accent-fade:rgba(174,182,192,.10);
    --ok:#0fa678; --bad:#d93025;
    --radius-lg:16px; --radius-md:12px; --leading:1.7; --tracking:.02em; --maxw:1120px;
    --shadow:0 8px 28px rgba(0,0,0,.03);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    background:var(--bg)!important; color:var(--ink);
    font:400 14px/var(--leading) -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,"PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
    letter-spacing:var(--tracking); -webkit-font-smoothing:antialiased;
}

/* 页壳 */
.shell{min-height:100svh; display:grid; place-items:center; padding:32px 18px; position:relative; overflow:hidden;}
.bg-grad{display:none}

/* 面板 */
.pane{
    width:100%; max-width:var(--maxw);
    display:grid; grid-template-columns:1fr;
    background:var(--surface); border:1px solid var(--hairline);
    border-radius:calc(var(--radius-lg) + 2px); box-shadow:var(--shadow); overflow:clip; position:relative;
}
@media (min-width:960px){ .pane{ grid-template-columns:5fr 7fr; } }

/* —— 左侧品牌区 —— */
.brand{
    position:relative; display:flex; flex-direction:column;
    min-height:36dvh; padding:26px; background:var(--surface); border-right:1px solid var(--hairline);
}
/* 顶部封面（专辑封面感） */
.brand .cover{
    width:100%; height:200px; overflow:hidden; border-radius:8px;
    background:#f5f6f7; /* 图片未加载时的底色 */
    margin-bottom:16px;
}
.brand .cover img{
    width:100%; height:100%; object-fit:cover; display:block;
    animation:brandFade .8s ease forwards; opacity:0;
}
@keyframes brandFade{ from{opacity:0} to{opacity:1} }

/* 品牌行（保持原来在左，不额外内边距） */
.logo{
    display:flex; align-items:center; gap:10px;
    padding:8px 12px; border:1px solid var(--hairline); border-radius:999px; background:#fff;
}
.logo img{width:22px; height:22px; border-radius:6px}
.logo span{font-weight:600; letter-spacing:.08em; font-size:12px}

/* 标语 */
.brand-copy{ margin-top:auto; padding:16px 2px 4px; color:var(--muted); font-size:12px; letter-spacing:.02em; }

/* —— 右侧表单卡 —— */
.card{ padding:clamp(22px,6vw,48px); background:var(--surface); }
.title{ margin:2px 0 6px; font-size:24px; font-weight:600; letter-spacing:.06em; }
.subtitle{ color:var(--muted); font-size:12px; margin-bottom:16px; }
.subtitle a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* Tabs */
.tabs{ display:grid; grid-auto-flow:column; gap:8px; align-items:center; justify-content:start; border-bottom:1px solid var(--hairline); padding-bottom:8px; margin:8px 0 18px; overflow-x:auto; }
.tab-btn{
    appearance:none; border:1px solid var(--hairline); background:#fff; padding:8px 12px;
    font-weight:600; font-size:12px; letter-spacing:.08em; color:var(--ink); border-radius:999px; cursor:pointer;
    transition:background-color .15s ease, border-color .15s ease;
}
.tab-btn:hover{ background:#fafafa }
.tab-btn[aria-selected="true"]{ background:#f7f8fa; border-color:var(--hairline); }

/* Panels */
.tab-panel{ display:none } .tab-panel[data-active="true"]{ display:block }

/* 表单字段 */
.field{
    display:flex; align-items:center; gap:10px;
    border:1px solid var(--hairline); border-radius:var(--radius-md); background:#fff;
    padding:8px 10px; margin:10px 0 12px; transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field:focus-within{ border-color:#e5eaf0; box-shadow:0 0 0 3px #eef3f8; background:#fff; }
.icon{ width:16px; height:16px; opacity:.6; flex:0 0 16px }
.input{ flex:1; border:0; outline:0; background:transparent; color:var(--ink); font-size:13px; padding:6px 2px; }
.input::placeholder{ color:#b6bcc2 }

/* 反馈 */
.hint{ min-height:18px; font-size:11px; color:var(--bad); padding:2px 4px 0; }
.hint.ok{ color:var(--ok) } .hint.muted{ color:var(--muted) }

/* 按钮 */
.btn{
    width:100%; border:1px solid var(--hairline); background:#fff; color:var(--ink);
    padding:10px 14px; border-radius:999px; font-weight:600; letter-spacing:.08em; cursor:pointer;
    transition:transform .05s ease, opacity .2s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover{ background:#f7f7f7; border-color:#e9e9e9; }
.btn:active{ transform:translateY(1px) scale(.998) }
.btn[disabled]{ opacity:.6; cursor:not-allowed }
.btn.primary{ background:#f4f6f8; border-color:#e6e9ed; }

/* 工具类 */
.row{ display:flex; gap:10px; align-items:center } .row .grow{ flex:1 }
.center{text-align:center} .hidden{ display:none!important }

/* 动画（轻） */
@media (prefers-reduced-motion:no-preference){
    .fade-in{ animation:fade .22s ease both }
    @keyframes fade{ from{opacity:0; transform:translateY(3px)} to{opacity:1; transform:none} }
}

/* 小屏优化：品牌封面高度略降、左右同宽栅格 */
@media (max-width:640px){
    .brand .cover{ height:160px; }
}

/* —— 可选：验证码图标的描边版（非填充） —— */
.icon-outline{ width:16px; height:16px; flex:0 0 16px; color:currentColor; opacity:.7; }

/* ============ dashboard.css（仅仪表盘用的对齐修复） ============ */
/* 给 <body> 或 .app 外层加类：.console，再启用下面样式，避免影响登录页 */
.console :root{ --gutter-x:24px; }

.console .topbar{ padding-left:var(--gutter-x)!important; padding-right:var(--gutter-x)!important; }
.console .content{ padding:18px var(--gutter-x) 28px!important; }
.console .wrap{ max-width:var(--maxw); margin:0 auto; padding-left:0!important; padding-right:0!important; }
.console .sidebar{ border-right:1px solid var(--hairline); box-shadow:none; }
.console .kpis, .console .grid{ margin-left:0!important; margin-right:0!important; }

@media (max-width:960px){
    .console :root{ --gutter-x:14px; }
    .console .app{ grid-template-columns:0 1fr; }
    .console .sidebar{ display:none; }
    .console .main{ min-width:0!important; overflow-x:visible; }
    .console .wrap{ max-width:100%; }
}