* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: #f2f5fa; color: #1f2937; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body._login { background: radial-gradient(900px 460px at 20% -10%, #dbeafe 0%, transparent 55%),
                        radial-gradient(800px 420px at 110% 15%, #e0e7ff 0%, transparent 55%), #f2f5fa; }
.wrap { max-width: 480px; margin: 0 auto; padding: 16px; }
body.admin .wrap { max-width: 1100px; }

/* ---- 顶部 hero ---- */
.hero {
  text-align: center; padding: 34px 0 24px; position: relative;
}
.hero .logo {
  font-size: 52px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: 30px;
  background: linear-gradient(145deg, #fff, #eef2ff);
  box-shadow: 0 12px 32px rgba(37, 99, 235, .16), inset 0 0 0 1px #e2e8f0;
}
.hero h1 { font-size: 26px; font-weight: 800; margin: 14px 0 6px; letter-spacing: .5px; }
.hero .sub { color: #6b7280; font-size: 15px; }

/* ---- 卡片 ---- */
.card {
  background: #fff; border-radius: 18px; padding: 20px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .05), 0 12px 32px rgba(15, 23, 42, .04);
  margin-bottom: 16px;
}

/* ---- 表单 ---- */
.form label { display: block; font-size: 16px; color: #334155; font-weight: 600; margin-bottom: 16px; }
.form label small { color: #94a3b8; font-weight: 400; font-size: 14px; }
.form label small::before { content: " · "; }
.form input:not([type="file"]), .form select {
  width: 100%; margin-top: 8px; padding: 14px; font-size: 17px;
  border: 1px solid #dbe2ec; border-radius: 12px; outline: none;
  background: #fbfcfe; transition: border-color .15s, box-shadow .15s;
}
.form input:not([type="file"]):focus, .form select:focus {
  border-color: #2563eb; background: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}
.form input::placeholder { color: #a8b3c3; font-weight: 400; font-size: inherit; }

/* 分段单选 */
.radio-row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.seg {
  flex: 1; min-width: 92px; text-align: center; padding: 13px 8px;
  border: 1.5px solid #dbe2ec; border-radius: 12px; font-size: 16px; cursor: pointer;
  background: #fbfcfe; color: #475569; font-weight: 500;
}
.seg input { display: none; }
.seg:has(input:checked), .seg.on {
  border-color: #2563eb; background: linear-gradient(145deg, #eef4ff, #e3edff);
  color: #1d4ed8; font-weight: 700;
  box-shadow: 0 0 0 1px transparent;
}

/* ---- 按钮 ---- */
.btn {
  display: inline-block; border: none; border-radius: 12px; cursor: pointer;
  font-size: 17px; padding: 15px 24px; text-align: center; font-weight: 600;
  transition: transform .08s, box-shadow .12s;
}
.btn.primary {
  width: 100%; color: #fff;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
  box-shadow: 0 8px 20px rgba(37, 99, 235, .28);
}
.btn.primary:active { transform: scale(.985); }
.btn.sm { font-size: 14px; padding: 8px 14px; border-radius: 10px; }
.btn.ok { background: #16a34a; color: #fff; }
.btn.danger { background: #dc2626; color: #fff; }
.btn.ghost { background: #fff; color: #374151; border: 1px solid #dbe2ec; }
.btn.inline-row { display:inline-block }
input.note-input { padding: 8px 12px; border: 1px solid #dbe2ec; border-radius: 10px; margin-right: 6px; font-size: 14px; }

/* ---- 提示条 ---- */
.alert { border-radius: 14px; padding: 14px 16px; font-size: 15px; margin-bottom: 14px; }
.alert.err { background: #fef2f2; color: #b91c1c; }
.alert.ok { background: #f0fdf4; color: #166534; }
.alert.small { font-size: 13px; margin-top: 8px; margin-bottom: 0; }
/* 提交成功横幅(醒目) */
.alert.ok.done {
  font-size: 16px; padding: 20px 18px;
  background: linear-gradient(145deg, #f0fdf4, #dcfce7);
  box-shadow: 0 4px 14px rgba(22, 163, 74, .14);
}

/* ---- 额度卡 ---- */
.quota {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 70%, #3b82f6 100%);
  color: #eaf1ff;
}
.quota .quota-row { color: #c7d8f8; }
.quota .quota-row b { color: #fff; }
.quota .quota-amt { color: #fff; font-size: 30px; }
.quota .quota-amt small { color: #a9c3f5; }
.quota-row { display: flex; justify-content: space-between; font-size: 15px; }
.quota-amt { font-size: 28px; font-weight: 800; color: #1d4ed8; }
.quota-amt big { font-size: 18px; font-weight: 500; color: #94a3b8; }
.quota-bar { height: 8px; background: rgba(255,255,255,.22); border-radius: 99px; margin-top: 10px; overflow: hidden; }
.quota-bar div {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #fde68a, #fbbf24);
  box-shadow: 0 0 10px rgba(251, 191, 36, .55);
}
.quota-row.big { font-size: 16px; color: #fff; }

/* ---- 记录列表 ---- */
.sec { margin: 20px 0 12px; font-size: 16px; font-weight: 700; color: #1f2937; }
.badge {
  font-size: 13px; padding: 4px 12px; border-radius: 999px; white-space: nowrap; font-weight: 600;
}
.s-pending { background: #fff7ed; color: #c2410c; }
.s-approved { background: #eff6ff; color: #1d4ed8; }
.s-paid { background: #f0fdf4; color: #16a34a; }
.s-rejected { background: #fef2f2; color: #b91c1c; }
.item { padding: 16px 18px; border-radius: 16px; }
.item-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 16px; }
.item-meta { color: #8a94a6; font-size: 14px; margin-top: 4px; }
.empty { color: #9ca3af; text-align: center; padding: 34px; }

/* ---- 底部导航 ---- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-top: 1px solid #e8edf4; padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
  flex: 1; text-align: center; padding: 15px 0; font-size: 16px;
  color: #8a94a6; text-decoration: none; font-weight: 500;
}
.bottom-nav a.active { color: #2563eb; font-weight: 700; }
.bottom-nav a.logout { flex: 0 0 74px; color: #b3bbca; }
body.mobile .wrap { padding-bottom: 78px; }
.hint { text-align: center; color: #8a94a6; font-size: 15px; margin-top: 12px; }
.link { color: #2563eb; font-weight: 600; }
.hero .sub b { color: #1d4ed8; }

/* ---- 管理端 ---- */
.admin-top { background: linear-gradient(90deg, #111827, #1f2937); color: #fff; }
.admin-top .wrap { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
.admin-nav a { color: #9ca3af; text-decoration: none; margin-left: 16px; font-size: 14px; }
.admin-nav a.active, .admin-nav a:hover { color: #fff; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: #fff; border-radius: 12px; padding: 14px; text-align: center; }
.stat .v { font-size: 24px; font-weight: 700; }
.stat.hot .v { color: #c2410c; }
.stat.warn .v { color: #1d4ed8; }
.stat.ok .v { color: #16a34a; }
.kv { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: #4b5563; margin: 8px 0; }
.review-links { display: flex; gap: 8px; margin: 8px 0; }
.actions { border-top: 1px solid #f3f4f6; padding-top: 10px; margin-top: 6px; }
.inline { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.filters { display: flex; gap: 8px; margin-bottom: 14px; align-items: center; }
.filters input, .filters select { padding: 8px; border: 1px solid #d1d5db; border-radius: 8px; }
.tbl { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; font-size: 13px; }
.tbl th, .tbl td { padding: 9px 10px; border-bottom: 1px solid #f3f4f6; text-align: left; }
.tbl th { background: #f9fafb; color: #6b7280; }
.tbl-scroll { overflow-x: auto; background: #fff; border-radius: 10px; }
.muted { color: #9ca3af; font-weight: 400; font-size: 13px; }
h2 { margin-bottom: 12px; font-size: 20px; }
h3 { margin: 16px 0 10px; font-size: 15px; }

/* ================= 提交页双栏(桌面) ================= */
.page-grid { display: flex; flex-direction: column; gap: 14px; }
.col-side { order: -1; }
.quota-bar { margin-top: 8px; }
.quota-row.big { font-size: 16px; }
.mini-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 0; border-bottom: 1px dashed #eef2f7; font-size: 15px;
}
.mini-item:last-child { border-bottom: none; }
.mini-item small { color: #8a94a6; font-size: 13px; }

/* ================= 登录/注册:桌面大气一点 ================= */
@media (min-width: 900px) {
  body { background: radial-gradient(1100px 500px at 15% -10%, #dbeafe 0%, transparent 55%),
                    radial-gradient(900px 500px at 110% 20%, #fce7f3 0%, transparent 50%),
                    #f2f5fa; }
  body.mobile .wrap { max-width: 520px; margin: 4vh auto; padding: 20px; }
  .hero .logo { font-size: 60px; }
  .hero h1 { font-size: 34px; }
  .hero .sub { font-size: 16px; }
  .card { border-radius: 20px; box-shadow: 0 8px 30px rgba(0,0,0,.07); }
  .btn.primary { padding: 17px; font-size: 18px; border-radius: 14px; }
  body.mobile .wrap:has(.page-grid) { max-width: 1060px; }
  .page-grid { flex-direction: row; align-items: flex-start; gap: 20px; }
  .col-main { flex: 1 1 auto; min-width: 0; }
  .col-side { order: 0; width: 330px; flex: none; }
}

/* ================= 管理端小屏适配 ================= */
@media (max-width: 720px) {
  .admin-top .wrap { flex-direction: column; align-items: flex-start; }
  .admin-nav a { margin: 0 14px 0 0; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .actions, .filters { flex-wrap: wrap; }
  .inline { margin-bottom: 6px; }
}
@media (max-width: 480px) {
  .admin-nav { display: flex; overflow-x: auto; width: 100%; }
  .admin-nav a { flex: none; }
}

/* ================= 手机细节 ================= */
.seg { -webkit-tap-highlight-color: transparent; }
.seg:active { opacity: .8; }
input, button, .seg { touch-action: manipulation; }
.btn:focus-visible, .seg input:focus-visible + * { outline: 2px solid #93c5fd; }

/* ================= Task 7 · 客服桌面工作台 ================= */
.admin-workbench, .admin-workbench * { box-sizing: border-box; }
.admin-workbench { --cream:#fbf5ed; --paper:#fffdf9; --blush:#f8e8e3; --orange:#dd704e; --orange-dark:#a9422e; --cocoa:#482f2a; --muted:#8f756d; --line:#ecdcd4; min-width:0; min-height:100vh; display:grid; grid-template-columns:238px minmax(0,1fr); background:var(--cream); color:var(--cocoa); font-size:14px; }
.admin-workbench .wb-sidebar { position:sticky; top:0; height:100vh; padding:28px 16px; border-right:1px solid var(--line); background:#fff9f3; }
.admin-workbench .wb-brand { display:flex; align-items:center; gap:11px; margin:0 8px 28px; color:var(--cocoa); text-decoration:none; }.admin-workbench .wb-brand img{width:38px;height:38px;object-fit:contain}.admin-workbench .wb-brand span{display:grid;gap:1px}.admin-workbench .wb-brand b{font-size:16px}.admin-workbench .wb-brand small{font-size:11px;color:var(--muted);letter-spacing:.08em}.admin-workbench .wb-sidebar nav{display:grid;gap:5px}.admin-workbench .wb-sidebar nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;color:#826860;text-decoration:none;font-weight:650}.admin-workbench .wb-sidebar nav img{width:18px;height:18px;opacity:.66}.admin-workbench .wb-sidebar nav a.active,.admin-workbench .wb-sidebar nav a:hover{background:#f7e7df;color:var(--orange-dark)}.admin-workbench .wb-sidebar nav a.active img{opacity:1}
.admin-workbench .wb-main{min-width:0;padding:31px clamp(26px,4vw,58px) 54px}.admin-workbench .wb-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:26px}.admin-workbench .wb-top h1{margin:3px 0 0;font:700 26px/1.2 "Songti SC",STSong,serif}.admin-workbench .wb-top time{color:var(--muted);font-size:13px}.admin-workbench .wb-kicker{margin:0;color:#b26f5b;font-size:10px;letter-spacing:.14em;font-weight:800}.admin-workbench .wb-session{display:flex;align-items:center;gap:10px;min-height:51px;margin-bottom:16px;padding:10px 16px;border:1px solid var(--line);border-radius:13px;background:var(--paper)}.admin-workbench .wb-session strong{margin-right:4px}.admin-workbench .wb-session a{margin-left:auto}.admin-workbench .wb-session form{margin:0}.admin-workbench .wb-stats{display:grid;grid-template-columns:repeat(7,minmax(105px,1fr));gap:11px;margin-bottom:18px}.admin-workbench .wb-stats article,.admin-workbench .wb-panel,.admin-workbench .case-card{border:1px solid var(--line);border-radius:15px;background:var(--paper);box-shadow:0 7px 20px rgba(91,55,45,.045)}.admin-workbench .wb-stats article{min-height:101px;padding:17px 14px}.admin-workbench .wb-stats small{display:block;color:var(--muted);font-size:12px}.admin-workbench .wb-stats b{display:block;margin-top:10px;color:var(--orange-dark);font:700 24px/1 Georgia,serif}.admin-workbench .wb-stats .amount{background:#f9e8e2}.admin-workbench .wb-stats em{font-style:normal;color:var(--muted);font-size:12px}.admin-workbench .wb-panel{padding:20px;margin-top:18px}.admin-workbench .panel-heading{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:17px}.admin-workbench .panel-heading h2,.admin-workbench .wb-panel h2{margin:0;font-size:17px}.admin-workbench .panel-heading p{margin:3px 0 0;color:var(--muted);font-size:13px}.admin-workbench .wb-table-wrap{overflow-x:auto}.admin-workbench .wb-table-wrap table{width:100%;min-width:720px;border-collapse:collapse;font-size:13px}.admin-workbench .wb-table-wrap th{text-align:left;padding:11px 10px;color:var(--muted);font-size:12px;font-weight:700;border-bottom:1px solid var(--line)}.admin-workbench .wb-table-wrap td{padding:13px 10px;border-bottom:1px solid #f3e7e1;vertical-align:middle}.admin-workbench .wb-table-wrap td small{display:block;margin-top:2px;color:var(--muted);font-size:12px}.admin-workbench .status{display:inline-flex;padding:3px 8px;border-radius:999px;background:#f5e9e4;color:#875545;font-size:12px;line-height:1.35}.admin-workbench .status.healthy,.admin-workbench .status.approved,.admin-workbench .status.paid,.admin-workbench .status.completed{background:#e5f2e8;color:#286640}.admin-workbench .status.expired,.admin-workbench .status.verification_exception,.admin-workbench .status.rejected{background:#fae6e2;color:#a9422e}.admin-workbench .status.verifying,.admin-workbench .status.displaying,.admin-workbench .status.exported{background:#f9efd7;color:#9a6c1d}.admin-workbench .wb-button{border:0;border-radius:9px;padding:9px 13px;background:var(--orange-dark);color:#fff;font:650 13px inherit;cursor:pointer;text-decoration:none;white-space:nowrap}.admin-workbench .wb-button:hover{background:#893427}.admin-workbench .wb-button.secondary{border:1px solid #ddb8ac;background:#fff7f3;color:var(--orange-dark)}.admin-workbench .wb-button.danger{background:#9b4034}.admin-workbench .text-link{border:0;background:transparent;padding:0;color:var(--orange-dark);font:650 13px inherit;text-decoration:none;cursor:pointer}.admin-workbench .empty-row{text-align:center;color:var(--muted);padding:30px!important}.admin-workbench .wb-notice{padding:12px 14px;margin:0 0 17px;border-radius:10px;background:#fff1e9;color:#855345;font-size:13px}.admin-workbench .case-card{padding:18px;margin-top:14px}.admin-workbench .case-card h2{font-size:16px}.admin-workbench .case-card h2 small{color:var(--muted);font-weight:400}.admin-workbench .case-card p{margin:6px 0;color:#6e554e}.admin-workbench .evidence-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:7px;margin:14px 0;padding:11px;border-radius:9px;background:#fff8f4}.admin-workbench .evidence-list p{margin:0;font-size:12px}.admin-workbench .case-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}.admin-workbench .case-actions form,.admin-workbench .wb-form{display:grid;gap:9px}.admin-workbench .case-actions label,.admin-workbench .wb-form label,.admin-workbench .wb-filters label{font-weight:650;font-size:13px}.admin-workbench .case-actions textarea,.admin-workbench .wb-form input,.admin-workbench .wb-form textarea,.admin-workbench .wb-filters input,.admin-workbench .wb-filters select,.admin-workbench select,.admin-workbench input{width:100%;margin-top:5px;padding:9px 10px;border:1px solid #decac2;border-radius:8px;background:#fffdfb;color:var(--cocoa);font:inherit}.admin-workbench .case-actions textarea{min-height:60px;resize:vertical}.admin-workbench .inline-form{grid-template-columns:1.2fr .8fr 1.5fr auto;align-items:end}.admin-workbench .settings-form{max-width:520px;grid-template-columns:1fr 1fr}.admin-workbench .settings-form .wb-button{grid-column:1/-1}.admin-workbench .wb-filters{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin-bottom:18px}.admin-workbench .wb-filters label{min-width:150px}.admin-workbench .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.admin-workbench :focus-visible{outline:3px solid #6b3c31;outline-offset:2px}
.admin-workbench .session-health{display:grid;grid-template-columns:auto minmax(120px,1fr) minmax(120px,1fr) auto;align-items:center;gap:8px 12px;flex:1;padding-left:10px;border-left:1px solid var(--line)}.admin-workbench .session-health small{color:var(--muted);font-size:12px}.admin-workbench .wb-button:disabled{opacity:.48;cursor:not-allowed}.admin-workbench .wb-button:disabled:hover{background:var(--orange-dark)}
.admin-workbench .customer-search,.admin-workbench .binding-correction-form{display:flex;align-items:center;gap:8px}.admin-workbench .customer-search input{width:min(280px,34vw);margin:0}.admin-workbench .binding-correction-form input{min-width:170px;margin:0}.admin-workbench .customer-binding-table code{color:var(--orange-dark);font:700 12px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace}.admin-workbench .wb-notice.success{background:#edf7ef;color:#286640}.admin-workbench .wb-notice.compact{margin:0 0 7px;padding:7px 9px;font-size:12px}
@media (max-width:1100px){.admin-workbench{grid-template-columns:190px minmax(0,1fr)}.admin-workbench .wb-sidebar{padding:22px 10px}.admin-workbench .wb-sidebar nav a{padding:10px}.admin-workbench .wb-stats{grid-template-columns:repeat(4,minmax(120px,1fr))}.admin-workbench .wb-main{padding:28px 25px}.admin-workbench .inline-form{grid-template-columns:1fr 1fr}.admin-workbench .inline-form .wb-button{grid-column:1/-1;justify-self:start}}

/* ================= 后台登录 · 暖色工作台入口 ================= */
.admin-login, .admin-login * { box-sizing: border-box; }
.admin-login { --cream:#fbf5ed; --paper:#fffdf9; --blush:#f8e8e3; --orange:#dd704e; --orange-dark:#a9422e; --cocoa:#482f2a; --muted:#8f756d; --line:#ecdcd4; min-width:0; min-height:100dvh; margin:0; color:var(--cocoa); background:radial-gradient(circle at 50% 8%,#fffaf5 0,#fbf5ed 52%,#f7ece3 100%); font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif; }
.admin-login .admin-login-shell { min-height:100dvh; display:grid; place-items:center; padding:24px; }
.admin-login .admin-login-card { width:min(100%,420px); padding:30px; border:1px solid var(--line); border-radius:18px; background:rgba(255,253,249,.98); box-shadow:0 18px 46px rgba(91,55,45,.12); }
.admin-login .admin-login-brand { display:flex; align-items:center; gap:13px; }
.admin-login .admin-login-brand img { width:48px; height:48px; object-fit:contain; }
.admin-login .admin-login-brand p { margin:0 0 3px; color:#b26f5b; font-size:11px; font-weight:800; letter-spacing:.12em; }
.admin-login .admin-login-brand h1 { margin:0; font:700 26px/1.2 "Songti SC",STSong,serif; }
.admin-login .admin-login-intro { margin:18px 0; color:var(--muted); font-size:13px; }
.admin-login .admin-login-error { margin:0 0 14px; padding:11px 12px; border:1px solid #edc9bf; border-radius:10px; color:#a9422e; background:#fae6e2; font-size:13px; }
.admin-login .admin-login-form { display:grid; gap:10px; }
.admin-login .admin-login-form label { font-size:13px; font-weight:700; }
.admin-login .admin-login-form input { width:100%; min-height:48px; padding:10px 12px; border:1px solid #decac2; border-radius:10px; color:var(--cocoa); background:#fffdfb; font:inherit; }
.admin-login .admin-login-form button { min-height:48px; margin-top:4px; border:0; border-radius:10px; color:#fff; background:var(--orange-dark); font:700 14px inherit; cursor:pointer; }
.admin-login .admin-login-form button:hover { background:#893427; }
.admin-login :focus-visible { outline:3px solid #6b3c31; outline-offset:2px; }

/* ================= Task 6 · 学员端第三版 ================= */
.learner-app, .learner-app * { box-sizing: border-box; }
.learner-app {
  --cream: #f8efe7;
  --paper: #fffaf6;
  --blush: #f8e8e3;
  --rose: #e8b9ae;
  --orange: #dd704e;
  --orange-dark: #a9422e;
  --cocoa: #482f2a;
  --muted: #8f756d;
  --line: #ecdcd4;
  margin: 0;
  color: var(--cocoa);
  background: #f8efe7;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}
.learner-app a { color: inherit; text-decoration: none; }
.learner-app img { display: block; max-width: 100%; }
.learner-app .learner-shell { position: relative; width: min(100%, 430px); min-height: 100dvh; margin: 0 auto; background: var(--cream); overflow-x: clip; }
.learner-app .surface { background: rgba(255, 250, 246, .97); border: 1px solid rgba(221, 112, 78, .18); border-radius: 18px; box-shadow: 0 10px 26px rgba(139, 72, 54, .08), 0 2px 6px rgba(139, 72, 54, .04), inset 0 1px 0 rgba(255, 255, 255, .92); }
.learner-app .eyebrow { display: block; color: #b26f5b; font-size: 9px; font-weight: 800; letter-spacing: .17em; line-height: 1.3; }
.learner-app :focus-visible { outline: 3px solid #6b3c31; outline-offset: 3px; }
.learner-app button, .learner-app input, .learner-app select, .learner-app textarea { font: inherit; }
.learner-app [hidden] { display: none !important; }

.learner-nav { position: fixed; z-index: 20; bottom: 0; left: 50%; width: min(100%, 430px); height: 68px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px 14px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(221, 112, 78, .12); background: rgba(255, 250, 246, .98); box-shadow: 0 -8px 24px rgba(139, 72, 54, .07); }
.learner-nav a { min-width: 44px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #aa9189; font-size: 10px; font-weight: 700; border-radius: 12px; }
.learner-nav img { width: 20px; height: 20px; opacity: .52; }
.learner-nav a.active { color: var(--orange); background: #fff0ea; }
.learner-nav a.active img { opacity: .92; }

.home-page { min-height: 100dvh; padding: 14px 18px 82px; background: var(--cream); }
.home-top { height: 40px; display: flex; align-items: center; justify-content: space-between; }
.home-brand { display: flex; align-items: center; gap: 9px; }
.home-brand > img { width: 35px; height: 29px; object-fit: contain; }
.home-brand span { display: flex; flex-direction: column; gap: 1px; }
.home-brand b { font-size: 14px; letter-spacing: .02em; }
.home-brand small { color: var(--muted); font-size: 9px; }
.home-avatar { width: 35px; height: 35px; object-fit: cover; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 3px 12px rgba(79, 47, 40, .16); }
.home-hero { position: relative; min-height: 92px; padding-top: 14px; }
.home-hero > img { position: absolute; z-index: 0; right: -15px; top: -4px; width: 125px; height: 117px; object-fit: contain; opacity: .82; }
.home-hero .eyebrow, .home-hero h1, .home-hero p { position: relative; z-index: 1; }
.home-hero h1 { margin: 5px 0 4px; color: #3f2925; font-family: "Songti SC", STSong, serif; font-size: 25px; line-height: 1.16; letter-spacing: .02em; }
.home-hero p { width: 72%; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.reward-progress { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 5px 10px; margin-top: 8px; padding: 10px 13px; border: 1px solid #efc8bc; border-radius: 14px; background: #fff8f3; box-shadow: 0 8px 20px rgba(119, 71, 57, .06); }
.reward-progress > div:first-child { display: flex; align-items: baseline; gap: 9px; }
.reward-progress span { color: var(--muted); font-size: 10px; font-weight: 700; }
.reward-progress strong { color: var(--orange-dark); font-family: Georgia, serif; font-size: 19px; }
.reward-progress strong small { color: #aa8e86; font-family: inherit; font-size: 10px; font-weight: 500; }
.reward-progress .progress-track { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 999px; background: #eeded7; }
.progress-track i { display: block; min-width: 2px; height: 100%; border-radius: inherit; background: var(--orange); }
.share-section { margin-top: 13px; }
.section-title { display: flex; align-items: end; justify-content: space-between; margin-bottom: 8px; }
.section-title h2 { margin: 2px 0 0; color: #4b322c; font-size: 16px; }
.section-title > small { color: #aa9189; font-size: 8px; }
.business-grid { display: grid; grid-template-columns: 1.22fr .78fr; gap: 7px; }
.business-card { position: relative; min-height: 70px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 10px 11px; border: 1px solid #eedbd4; border-radius: 14px; background: var(--paper); box-shadow: 0 7px 18px rgba(84, 49, 41, .055); }
.business-card.xhs { grid-column: 1 / -1; min-height: 66px; padding-right: 15px; border-color: #edc5bb; background: #fff9f6; }
.business-card > img { width: 31px; height: 31px; object-fit: contain; padding: 5px; border-radius: 10px; background: #fff; box-shadow: 0 4px 10px rgba(75, 44, 37, .08); }
.business-card.referral > img { background: #f7ebe5; }
.business-card > span:not(.recommended) { min-width: 0; display: flex; flex-direction: column; }
.business-card b { color: #4a302b; font-size: 12px; line-height: 1.35; }
.business-card small { color: var(--muted); font-size: 8px; line-height: 1.35; white-space: nowrap; }
.business-card > strong { align-self: center; color: var(--orange-dark); font-family: Georgia, serif; font-size: 16px; }
.business-card > strong small { color: var(--muted); font-family: inherit; font-size: 8px; }
.business-card .recommended { position: absolute; right: 0; top: 0; padding: 3px 8px; color: #fff; background: var(--orange); border-radius: 0 13px 0 10px; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.business-card.douyin, .business-card.referral { grid-template-columns: 30px 1fr; grid-template-rows: auto auto; }
.business-card.douyin > strong, .business-card.referral > strong { grid-column: 2; font-size: 14px; }
.home-submit { min-height: 60px; display: grid; grid-template-columns: 31px 1fr 16px; align-items: center; gap: 10px; margin-top: 9px; padding: 10px 15px; color: #fff; border-radius: 16px; background: var(--orange); box-shadow: 0 10px 22px rgba(168, 73, 48, .2); }
.home-submit > img:first-child { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: rgba(255,255,255,.18); filter: brightness(0) invert(1); }
.home-submit > img:last-child { width: 16px; filter: brightness(0) invert(1); }
.home-submit span { display: flex; flex-direction: column; gap: 2px; }
.home-submit b { font-size: 14px; }
.home-submit small { color: #fff1eb; font-size: 8px; }
.driving-story { position: relative; height: 84px; overflow: hidden; margin-top: 9px; border-radius: 15px; background: #5b443d; }
.driving-story > img { width: 100%; height: 100%; object-fit: cover; object-position: center 59%; opacity: .9; }
.driving-story > div { position: absolute; inset: auto 0 0; padding: 18px 12px 9px; color: #fff; background: rgba(41, 26, 22, .58); }
.driving-story span { display: block; margin-bottom: 2px; font-size: 7px; letter-spacing: .11em; }
.driving-story b { font-family: "Songti SC", STSong, serif; font-size: 13px; }
.recent-card { margin-top: 9px; padding: 9px 11px; border: 1px solid #eedfd9; border-radius: 14px; background: rgba(255,253,249,.9); }
.recent-title { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid #f0e6e2; font-size: 9px; font-weight: 800; }
.recent-title > span { display: flex; align-items: center; gap: 5px; }
.recent-title img { width: 13px; height: 13px; }
.recent-title a { color: var(--orange-dark); }
.recent-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 8px; padding-top: 7px; }
.platform-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff2442; }
.platform-dot.douyin { background: #151515; }
.recent-row div { display: flex; flex-direction: column; }
.recent-row b { font-size: 10px; }
.recent-row small { color: var(--muted); font-size: 8px; }
.status-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; color: #9c513e; background: #fae8e1; border-radius: 999px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.home-empty { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 7px; color: var(--muted); font-size: 8px; }
.home-empty a { color: var(--orange-dark); font-weight: 800; white-space: nowrap; }

.app-page { min-height: 100dvh; padding: 24px 18px 92px; }
.page-heading { margin-bottom: 18px; }
.page-heading h1, .profile-head h1 { margin: 4px 0; font-family: "Songti SC", STSong, serif; font-size: 27px; line-height: 1.2; }
.page-heading p, .profile-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.ui-alert { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 12px; border-radius: 12px; font-size: 12px; line-height: 1.5; }
.ui-alert.error { color: #8c2f28; background: #fff0ed; border: 1px solid #f0c1b7; }
.ui-alert.success { color: #286640; background: #edf7ef; border: 1px solid #bedbc5; }
.ui-alert img { flex: none; width: 18px; height: 18px; }
.ai-entry { min-height: 72px; display: grid; grid-template-columns: 42px 1fr 18px; align-items: center; gap: 10px; padding: 12px; margin-bottom: 12px; }
.ai-entry .icon-tile { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--blush); }
.ai-entry .icon-tile img { width: 22px; height: 22px; }
.ai-entry > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }
.ai-entry b { font-size: 14px; }
.ai-entry small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.ai-entry .chevron { width: 18px; opacity: .55; }
.evidence-form, .auth-form { padding: 17px; }
.evidence-form fieldset, .auth-form fieldset { min-width: 0; padding: 0; margin: 0 0 18px; border: 0; }
.evidence-form legend, .auth-form legend, .field-label, .auth-form > label, .auth-form .payment-method-panel > label { display: block; width: 100%; margin-bottom: 9px; color: #5a4039; font-size: 12px; font-weight: 800; }
.platform-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.platform-choices input, .choice-row input { position: absolute; opacity: 0; pointer-events: none; }
.platform-choices label > span { min-height: 70px; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.platform-choices img { grid-row: 1 / 3; width: 30px; height: 30px; padding: 5px; object-fit: contain; border-radius: 9px; background: #fff8f5; }
.platform-choices b { font-size: 12px; }
.platform-choices small { color: var(--muted); font-size: 9px; }
.platform-choices input:checked + span, .choice-row input:checked + span { border-color: var(--orange); background: #fff5f1; box-shadow: 0 0 0 2px rgba(221,112,78,.13); }
.platform-choices input:focus-visible + span, .choice-row input:focus-visible + span { outline: 3px solid #6b3c31; outline-offset: 2px; }
.field-label { margin: 0 0 17px; }
.field-box { display: flex; align-items: center; gap: 8px; height: 48px; margin-top: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.field-box img { width: 19px; height: 19px; opacity: .55; }
.field-box input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; color: var(--cocoa); background: transparent; font-size: 12px; }
.upload-box { position: relative; min-height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-top: 8px; border: 1px dashed #dcb3a8; border-radius: 13px; background: #fffaf7; overflow: hidden; }
.upload-box > img { width: 25px; height: 25px; margin-bottom: 2px; opacity: .65; }
.upload-box b { font-size: 12px; }
.upload-box small { color: var(--muted); font-size: 9px; }
.upload-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.policy-note { display: flex; align-items: flex-start; gap: 7px; margin: 4px 0 15px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.policy-note img { flex: none; width: 14px; height: 14px; margin-top: 1px; opacity: .6; }
.primary-action, .secondary-action { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 16px; border: 0; border-radius: 13px; color: #fff; background: var(--orange); box-shadow: 0 9px 18px rgba(168, 73, 48, .17); font-weight: 800; cursor: pointer; }
.primary-action img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.primary-action[disabled] { opacity: .58; cursor: wait; }
.secondary-action { width: auto; min-width: 150px; margin-top: 8px; }
.success-panel { padding: 30px 20px; text-align: center; }
.success-panel > img { width: 52px; height: 52px; margin: 0 auto 12px; opacity: .75; }
.success-panel h2 { margin: 0 0 8px; }
.success-panel p { color: var(--muted); font-size: 12px; }

.record-list { display: flex; flex-direction: column; gap: 11px; }
.record-item { padding: 14px; }
.record-item > header, .record-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.record-item > header { margin-bottom: 12px; }
.record-item > header strong { color: var(--orange-dark); font-family: Georgia, serif; font-size: 18px; }
.record-platform { padding: 4px 8px; border-radius: 999px; color: #9f3142; background: #ffedf0; font-size: 9px; font-weight: 800; }
.record-platform.douyin { color: #fff; background: #242424; }
.record-main h2 { margin: 0 0 2px; font-size: 14px; }
.record-main p { margin: 0; color: var(--muted); font-size: 9px; }
.countdown { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0e5e0; color: var(--muted); font-size: 9px; }
.countdown img { width: 14px; height: 14px; }
.countdown b { color: var(--orange-dark); }
.record-note { margin: 10px 0 0; padding: 8px 10px; border-radius: 9px; color: #8c2f28; background: #fff0ed; font-size: 10px; }
.empty-state { padding: 42px 20px; text-align: center; }
.empty-state > img { width: 42px; height: 42px; margin: 0 auto 12px; opacity: .5; }
.empty-state h2 { margin: 0 0 6px; }
.empty-state p { margin: 0 0 18px; color: var(--muted); font-size: 11px; }

.profile-head { display: flex; align-items: center; gap: 14px; margin: 2px 0 20px; }
.profile-head > img { width: 68px; height: 68px; object-fit: cover; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 5px 15px rgba(82, 49, 41, .13); }
.info-section { padding: 16px; }
.info-section h2, .referral-card h2 { margin: 0 0 13px; font-size: 15px; }
.profile-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.profile-card-heading > img { width: 20px; height: 20px; opacity: .55; }
.profile-edit-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.profile-edit-form label, .referral-bind-form label { color: #5a4039; font-size: 10px; font-weight: 800; }
.profile-edit-form input, .profile-edit-form select, .referral-bind-form input { width: 100%; height: 43px; margin-top: 6px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--cocoa); background: #fff; font: inherit; font-size: 11px; }
.profile-edit-form input:focus, .profile-edit-form select:focus, .referral-bind-form input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(221,112,78,.13); outline: 0; }
.immutable-phone { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.immutable-phone img { width: 15px; height: 15px; opacity: .58; }
.profile-save { grid-column: 1 / -1; min-height: 43px; border: 0; border-radius: 11px; color: #fff; background: var(--orange); box-shadow: 0 8px 18px rgba(168, 73, 48, .17); font: 800 11px inherit; cursor: pointer; }
.info-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid #f0e5e0; }
.info-row > img { width: 20px; height: 20px; opacity: .62; }
.info-row > span { display: flex; flex-direction: column; gap: 2px; }
.info-row small { color: var(--muted); font-size: 9px; }
.info-row b { font-size: 12px; }
.referral-card { position: relative; margin-top: 12px; padding: 17px; overflow: hidden; }
.referral-card .section-icon { position: absolute; right: 16px; top: 16px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--blush); }
.referral-card .section-icon img { width: 22px; height: 22px; }
.referral-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px dashed #d7a99d; border-radius: 12px; background: #fff7f3; }
.referral-code strong { color: var(--orange-dark); font-family: Georgia, serif; font-size: 24px; letter-spacing: .13em; }
.referral-code button { min-height: 44px; display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border: 1px solid #e1b7ac; border-radius: 10px; color: var(--orange-dark); background: #fff; font-size: 10px; font-weight: 800; }
.referral-code button img { width: 15px; height: 15px; }
.referral-card > p { margin: 9px 0 0; color: var(--muted); font-size: 9px; }
.referral-card .binding-intro { max-width: calc(100% - 46px); margin-bottom: 14px; line-height: 1.6; }
.referral-bind-form > div { display: flex; align-items: flex-end; gap: 8px; }
.referral-bind-form input { flex: 1; min-width: 0; margin-top: 7px; text-transform: uppercase; }
.referral-bind-form button { min-height: 43px; padding: 0 13px; border: 0; border-radius: 10px; color: #fff; background: var(--orange); box-shadow: 0 8px 18px rgba(168, 73, 48, .15); font: 800 10px inherit; cursor: pointer; }
.logout-row { min-height: 52px; display: grid; grid-template-columns: 20px 1fr 16px; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; color: #7d5147; font-size: 12px; font-weight: 800; }
.logout-row > img { width: 18px; height: 18px; opacity: .6; }

.auth-page .learner-shell { padding: 24px 18px; }
.auth-screen { min-height: calc(100dvh - 48px); display: flex; flex-direction: column; justify-content: center; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; }
.auth-brand > img { width: 44px; height: 38px; object-fit: contain; }
.auth-brand > div { display: flex; flex-direction: column; }
.auth-brand b { font-size: 16px; }
.auth-brand span { color: var(--muted); font-size: 9px; }
.auth-intro { margin-bottom: 18px; }
.auth-intro h1 { margin: 6px 0 5px; font-family: "Songti SC", STSong, serif; font-size: 31px; }
.auth-intro p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.auth-intro.compact h1 { font-size: 27px; }
.auth-form > label { margin: 0 0 14px; }
.auth-form input { width: 100%; height: 46px; margin-top: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--cocoa); background: #fff; font-size: 12px; }
.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 7px; }
.choice-row label > span { min-height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 10px; }
.auth-form .payment-method-fieldset { min-width: 0; padding: 0; margin: 0 0 18px; border: 0; }
.auth-form .payment-method-fieldset legend { padding: 0; color: #5a4039; font-size: 12px; font-weight: 800; }
.auth-form .payment-method-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.auth-form .payment-method-chip { position: relative; min-width: 0; }
.auth-form .payment-method-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.auth-form .payment-method-chip span { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 6px; border: 1px solid #ecdcd4; border-radius: 11px; color: #694a42; background: #fffdfb; font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.auth-form .payment-method-chip input:checked + span { color: #b34c32; border-color: #dd704e; background: #fff5f1; box-shadow: 0 5px 13px rgba(176, 74, 48, .13); }
.auth-form .payment-method-chip input:focus-visible + span { outline: 3px solid rgba(72, 47, 42, .7); outline-offset: 2px; }
.auth-switch { margin: 14px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.auth-switch a { color: var(--orange-dark); font-weight: 800; }

@media (min-width: 700px) {
  .learner-app .learner-shell { box-shadow: 0 0 45px rgba(71, 45, 38, .12); }
}
@media (max-height: 780px) and (max-width: 480px) {
  .home-page { padding-top: 10px; }
  .home-hero { min-height: 82px; padding-top: 8px; }
  .home-hero h1 { font-size: 23px; }
  .reward-progress, .share-section { margin-top: 7px; }
  .driving-story { height: 75px; }
}
@media (prefers-reduced-motion: reduce) {
  .learner-app *, .learner-app *::before, .learner-app *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Task 6 visual QA fix 1: selected-v3 home composition */
.learner-app .home-page { padding: 10px 14px 72px; }
.learner-app .home-top { position: relative; height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.learner-app .home-brand { gap: 7px; }
.learner-app .home-brand > img { width: 39px; height: 34px; }
.learner-app .home-brand b { font-size: 12px; }
.learner-app .home-brand small { font-size: 5px; letter-spacing: .08em; }
.learner-app .home-space-title { color: #58413b; font-size: 13px; text-align: center; white-space: nowrap; }
.learner-app .home-account { justify-self: end; min-width: 48px; min-height: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.learner-app .home-account .home-avatar { width: 38px; height: 38px; }
.learner-app .home-account > img:last-child { width: 15px; height: 15px; padding: 2px; border-radius: 50%; background: #f8ded5; opacity: .72; }
.learner-app .home-hero { min-height: 110px; padding: 18px 0 0 8px; }
.learner-app .home-hero > img { right: -7px; top: 1px; width: 139px; height: 136px; opacity: .84; }
.learner-app .home-hero h1 { margin: 0 0 8px; font-size: 29px; line-height: 1.12; font-weight: 600; }
.learner-app .home-hero p { width: 70%; font-size: 10px; line-height: 1.5; }
.learner-app .reward-progress { position: relative; min-height: 64px; grid-template-columns: 38px 1fr 20px; grid-template-rows: 32px auto; align-items: center; gap: 0 8px; margin-top: 6px; padding: 8px 12px; border-radius: 17px; }
.learner-app .reward-gift { grid-row: 1 / 3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #f9dfd5; }
.learner-app .reward-gift img { width: 21px; height: 21px; opacity: .72; }
.learner-app .reward-copy { display: flex; align-items: baseline; gap: 10px; }
.learner-app .reward-copy > span { font-size: 10px; }
.learner-app .reward-copy strong { font-size: 21px; }
.learner-app .reward-progress > a { grid-column: 3; grid-row: 1 / 3; width: 20px; height: 38px; display: grid; place-items: center; }
.learner-app .reward-progress > a img { width: 17px; height: 17px; opacity: .65; }
.learner-app .reward-progress .progress-track { grid-column: 2; grid-row: 2; width: 92px; height: 4px; align-self: start; }
.learner-app .reward-remaining { grid-column: 2; grid-row: 2; align-self: end; margin-left: 102px; color: #9e837a; font-size: 7px; white-space: nowrap; }
.learner-app .reward-remaining b { color: var(--orange-dark); }

.learner-app .share-panel { margin-top: 10px; padding: 10px 12px 8px; border: 1px solid #ecddd7; border-radius: 19px; background: rgba(255, 253, 249, .94); box-shadow: 0 9px 24px rgba(91, 55, 45, .065); }
.learner-app .share-panel > header { min-height: 42px; }
.learner-app .share-heading { display: flex; align-items: center; gap: 7px; }
.learner-app .share-heading h2 { margin: 0; font-family: "Songti SC", STSong, serif; font-size: 18px; line-height: 1.2; }
.learner-app .share-heading img { width: 16px; height: 16px; opacity: .62; }
.learner-app .share-panel > header p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.learner-app .business-row { display: grid; grid-template-columns: 1.14fr .93fr .93fr; gap: 7px; }
.learner-app .share-choice { position: relative; min-width: 0; height: 170px; display: flex; flex-direction: column; align-items: center; padding: 9px 6px 6px; border: 1px solid #eee0da; border-radius: 15px; background: #fffdfb; box-shadow: 0 5px 13px rgba(92, 55, 46, .055); text-align: center; }
.learner-app .share-choice.xhs { border: 2px solid #e98f76; padding: 8px 5px 5px; background: #fff9f6; box-shadow: 0 7px 16px rgba(192, 91, 64, .12); }
.learner-app .share-choice > img { width: 38px; height: 38px; margin: 2px 0 4px; padding: 7px; object-fit: contain; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(77, 43, 35, .08); }
.learner-app .share-choice.xhs > img { width: 42px; height: 42px; margin-top: 0; padding: 0; background: transparent; }
.learner-app .share-choice.referral > img { background: #f8dfd6; }
.learner-app .share-choice > b { min-height: 24px; display: flex; align-items: center; color: #4e352f; font-size: 11px; line-height: 1.2; }
.learner-app .share-choice > small { min-height: 24px; color: #9f857d; font-size: 7px; line-height: 1.25; }
.learner-app .share-choice > strong { margin-top: 0; color: var(--orange-dark); font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.learner-app .share-choice > strong em { color: #92766e; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 7px; font-style: normal; }
.learner-app .share-choice.referral > strong { font-size: 15px; }
.learner-app .share-choice .choice-action { width: calc(100% - 6px); min-height: 27px; display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: auto; color: #8f6b61; border: 1px solid #eedbd4; border-radius: 999px; background: #fff4ef; font-size: 8px; font-weight: 800; }
.learner-app .share-choice.xhs .choice-action { color: #fff; border-color: var(--orange); background: var(--orange); }
.learner-app .share-choice .choice-action img { width: 11px; height: 11px; opacity: .62; }
.learner-app .share-choice.xhs .choice-action img { filter: brightness(0) invert(1); opacity: 1; }
.learner-app .share-choice .recommended { position: absolute; z-index: 1; left: -2px; top: -2px; padding: 4px 8px; color: #fff; border-radius: 13px 0 10px 0; background: var(--orange); font-size: 7px; font-weight: 800; }
.learner-app .share-panel .home-submit { min-height: 44px; grid-template-columns: 21px 1fr 15px; margin: 8px 0 0; padding: 7px 15px; border-radius: 999px; }
.learner-app .share-panel .home-submit > img:first-child { width: 20px; height: 20px; padding: 0; border-radius: 0; background: transparent; }
.learner-app .share-panel .home-submit span { display: block; font-size: 13px; text-align: center; }
.learner-app .share-note { min-height: 18px; display: flex; align-items: center; justify-content: center; gap: 5px; color: #a58d85; font-size: 7px; }
.learner-app .share-note img { width: 11px; height: 11px; opacity: .48; }

.learner-app .driving-story { height: 112px; margin: 6px -14px 0; border-radius: 0; }
.learner-app .driving-story > img { object-position: center 58%; opacity: .91; }
.learner-app .driving-story > div { inset: auto; padding: 0; background: transparent; }
.learner-app .driving-story .scene-location { left: 18px; bottom: 12px; color: #fff; font-size: 7px; letter-spacing: .08em; text-shadow: 0 1px 5px rgba(0,0,0,.5); }
.learner-app .driving-story .scene-quote { right: 21px; top: 18px; color: #fff; font-family: "Songti SC", STSong, serif; font-size: 13px; line-height: 1.55; text-align: right; text-shadow: 0 1px 7px rgba(0,0,0,.6); }
.learner-app .recent-card { position: relative; z-index: 3; min-height: 76px; margin: -26px 8px 0; padding: 9px 12px; border-radius: 15px; background: rgba(255, 253, 249, .96); box-shadow: 0 8px 20px rgba(73, 43, 35, .1); }
.learner-app .recent-title { padding-bottom: 7px; font-size: 9px; }
.learner-app .recent-title > span { font-family: "Songti SC", STSong, serif; font-size: 12px; }
.learner-app .recent-title a { display: flex; align-items: center; gap: 2px; color: #9c8179; font-size: 8px; }
.learner-app .recent-title a img { width: 11px; height: 11px; }
.learner-app .recent-row { grid-template-columns: 27px 1fr auto 14px; gap: 8px; padding-top: 8px; }
.learner-app .recent-platform-icon { width: 27px; height: 27px; padding: 5px; border-radius: 8px; background: #fff3f0; }
.learner-app .recent-platform-icon[src$="xiaohongshu.png"] { padding: 0; background: transparent; }
.learner-app .recent-row b { font-size: 10px; }
.learner-app .recent-row small { font-size: 7px; }
.learner-app .recent-arrow { width: 13px; height: 13px; opacity: .42; }
.learner-app .recent-card .status-pill { font-size: 7px; }

.learner-app .learner-nav { z-index: 30; height: 68px; padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.learner-app .learner-nav a { gap: 4px; font-size: 10px; }
.learner-app .learner-nav a.active { background: transparent; }
.learner-app .learner-nav-submit-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); opacity: 1; }
.learner-app .learner-nav-submit-icon img { width: 16px; height: 16px; filter: brightness(0) invert(1); opacity: 1; }
.learner-app .learner-nav a:nth-child(2) { gap: 1px; }

@media (max-height: 780px) and (max-width: 480px) {
  .learner-app .home-page { padding-top: 8px; }
  .learner-app .home-top { height: 52px; }
  .learner-app .home-hero { min-height: 112px; padding-top: 22px; }
  .learner-app .home-hero h1 { font-size: 27px; }
}

/* Task 6 review fix 2: readable learner copy and WCAG contrast */
.learner-app {
  --cream: #f8efe7;
  --paper: #fffaf6;
  --muted: #8f756d;
  --orange: #dd704e;
  --orange-dark: #a9422e;
  background: #f8efe7;
}
.learner-app .eyebrow,
.learner-app .home-brand small,
.learner-app .share-panel > header p,
.learner-app .share-choice > small,
.learner-app .share-choice > strong em,
.learner-app .share-choice .choice-action,
.learner-app .share-choice .recommended,
.learner-app .share-note,
.learner-app .driving-story .scene-location,
.learner-app .recent-title a,
.learner-app .recent-row small,
.learner-app .recent-card .status-pill,
.learner-app .platform-choices small,
.learner-app .upload-box small,
.learner-app .policy-note,
.learner-app .record-platform,
.learner-app .record-main p,
.learner-app .countdown,
.learner-app .info-row small,
.learner-app .referral-card > p,
.learner-app .auth-brand span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.learner-app .home-hero p,
.learner-app .ai-entry small,
.learner-app .empty-state p,
.learner-app .auth-switch,
.learner-app .record-note,
.learner-app .record-status-message,
.learner-app .home-empty {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.learner-app .reward-progress span,
.learner-app .reward-copy > span,
.learner-app .reward-copy strong small {
  color: var(--muted);
  font-size: 10px;
}
.learner-app .reward-remaining { color: var(--muted); font-size: 10px; }
.learner-app .share-choice > b,
.learner-app .recent-row b { font-size: 11px; }
.learner-app .status-pill { color: var(--orange-dark); font-size: 10px; }
.learner-app .learner-nav a { color: var(--muted); font-size: 12px; }
.learner-app .learner-nav a.active { color: var(--orange); }
.learner-app .learner-nav a.active:not(:nth-child(2)) img {
  filter: invert(55%) sepia(53%) saturate(1185%) hue-rotate(328deg) brightness(94%) contrast(84%);
  opacity: 1;
}
.learner-app .home-submit,
.learner-app .primary-action,
.learner-app .secondary-action { font-size: 14px; }
.learner-app .home-submit { background: #dd704e; box-shadow: 0 10px 22px rgba(168, 73, 48, .2); }
.learner-app .platform-choices img[src$="xiaohongshu.png"] { padding: 0; background: transparent; }
.learner-app .record-status-message { margin: 9px 0 0; }

.learner-app .referral-next-step { margin-top: 14px; padding: 13px; border: 1px solid #e8c8be; border-radius: 13px; background: #fff8f4; }
.learner-app .referral-next-heading { display: flex; align-items: center; gap: 9px; }
.learner-app .referral-next-heading > img { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: #f8ded5; opacity: .8; }
.learner-app .referral-next-heading h3 { margin: 2px 0 0; color: var(--cocoa); font-size: 13px; line-height: 1.4; }
.learner-app .referral-next-step > p { margin: 8px 0 11px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.learner-app .referral-next-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.learner-app .referral-next-primary,
.learner-app .referral-next-secondary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border-radius: 11px; font-size: 11px; font-weight: 800; text-align: center; }
.learner-app .referral-next-primary { color: #fff; background: var(--orange); box-shadow: 0 7px 15px rgba(168, 73, 48, .16); }
.learner-app .referral-next-secondary { color: var(--orange-dark); border: 1px solid #ddb8ac; background: #fff; }
.learner-app .referral-next-primary img,
.learner-app .referral-next-secondary img { width: 16px; height: 16px; }
.learner-app .referral-next-primary img { filter: brightness(0) invert(1); }

/* The AI writer still uses the original generic form classes; keep it inside the learner theme. */
.learner-app .ai-writer {
  color: var(--cocoa);
  background: rgba(255, 250, 246, .97);
  border: 1px solid rgba(221, 112, 78, .18);
  box-shadow: 0 10px 26px rgba(139, 72, 54, .08), 0 2px 6px rgba(139, 72, 54, .04), inset 0 1px 0 rgba(255, 255, 255, .92);
}
.learner-app .ai-writer .hint { color: var(--muted); }
.learner-app .ai-writer label { color: #5a4039; }
.learner-app .ai-writer .seg {
  color: var(--cocoa);
  border-color: var(--line);
  background: #fffaf6;
}
.learner-app .ai-writer .seg:has(input:checked) {
  color: var(--orange-dark);
  border-color: var(--orange);
  background: #fff1eb;
  box-shadow: 0 0 0 2px rgba(221, 112, 78, .12);
}
.learner-app .ai-writer select,
.learner-app .ai-writer textarea {
  color: var(--cocoa);
  border-color: var(--line);
  background: #fffaf6;
}
.learner-app .ai-writer select:focus,
.learner-app .ai-writer textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(221, 112, 78, .13);
  outline: 0;
}
.learner-app .ai-writer .actions { border-top-color: rgba(221, 112, 78, .13); }
.learner-app .ai-writer .btn.primary {
  color: #fff;
  background: var(--orange);
  box-shadow: 0 9px 18px rgba(168, 73, 48, .18);
}
.learner-app .ai-writer .btn.ghost {
  color: var(--orange-dark);
  border-color: rgba(221, 112, 78, .24);
  background: #fffaf6;
}

/* Selected-v3 fidelity pass: scoped to the learner home only. */
.learner-app.home-screen {
  --cream: #f8efe7;
  --paper: #fffaf6;
  --orange: #dd704e;
  --orange-dark: #a9422e;
  --muted: #8f756d;
  background: #f8efe7;
}
.learner-app.home-screen .learner-shell,
.learner-app.home-screen .home-page { background: #f8efe7; }
.learner-app.home-screen .home-page { padding: 20px 14px 66px; }
.learner-app.home-screen .home-top { height: 56px; }
.learner-app.home-screen .home-brand > img { filter: drop-shadow(0 2px 3px rgba(144, 67, 45, .08)); }
.learner-app.home-screen .home-account .home-avatar { box-shadow: 0 5px 14px rgba(79, 47, 40, .2); }
.learner-app.home-screen .home-hero { min-height: 118px; padding-top: 20px; }
.learner-app.home-screen .home-hero > img { top: 3px; opacity: .9; }
.learner-app.home-screen .home-hero h1 { color: #50362e; font-weight: 500; letter-spacing: .015em; }

.learner-app.home-screen .reward-progress {
  min-height: 66px;
  margin: 7px 7px 0;
  border-color: rgba(221, 155, 133, .48);
  background: rgba(255, 250, 247, .94);
  box-shadow: 0 12px 26px rgba(102, 61, 48, .13), 0 2px 6px rgba(102, 61, 48, .06), inset 0 1px 0 rgba(255, 255, 255, .96);
}
.learner-app.home-screen .reward-gift {
  background: #fbe2d8;
  box-shadow: 0 5px 12px rgba(177, 92, 65, .12), inset 0 1px 0 rgba(255, 255, 255, .92);
}

.learner-app.home-screen .share-panel {
  margin-top: 10px;
  padding: 13px 12px 10px;
  border-color: rgba(229, 205, 195, .78);
  border-radius: 20px;
  background: rgba(255, 252, 249, .96);
  box-shadow: 0 16px 34px rgba(98, 58, 46, .14), 0 3px 8px rgba(98, 58, 46, .06), inset 0 1px 0 rgba(255, 255, 255, .98);
}
.learner-app.home-screen .share-panel > header { min-height: 50px; }
.learner-app.home-screen .share-heading h2 { color: #4f352e; font-weight: 500; }
.learner-app.home-screen .share-choice {
  height: 190px;
  padding: 12px 6px 8px;
  border-color: rgba(230, 215, 207, .9);
  border-radius: 16px;
  background: #fffdfb;
  box-shadow: 0 11px 22px rgba(91, 53, 43, .13), 0 2px 5px rgba(91, 53, 43, .05), inset 0 1px 0 rgba(255, 255, 255, .98);
}
.learner-app.home-screen .share-choice.xhs {
  padding: 11px 5px 7px;
  border-color: #e78568;
  background: #fff9f6;
  box-shadow: 0 13px 25px rgba(190, 81, 53, .2), 0 3px 7px rgba(190, 81, 53, .08), inset 0 1px 0 rgba(255, 255, 255, .98);
}
.learner-app.home-screen .share-choice > img {
  margin-bottom: 7px;
  box-shadow: 0 7px 15px rgba(77, 43, 35, .13), inset 0 1px 0 rgba(255, 255, 255, .92);
}
.learner-app.home-screen .share-choice.xhs > img { box-shadow: 0 7px 16px rgba(255, 36, 66, .18); }
.learner-app.home-screen .share-choice > b { min-height: 28px; font-size: 12px; }
.learner-app.home-screen .share-choice > small { min-height: 30px; font-size: 8px; }
.learner-app.home-screen .share-choice > strong { font-size: 19px; }
.learner-app.home-screen .share-choice.referral > strong { font-size: 16px; }
.learner-app.home-screen .share-choice .choice-action {
  min-height: 30px;
  box-shadow: 0 5px 11px rgba(100, 59, 47, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.learner-app.home-screen .share-choice.xhs .choice-action {
  border-color: #dd704e;
  background: #dd704e;
  box-shadow: 0 7px 14px rgba(168, 73, 48, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.learner-app.home-screen .share-choice .recommended { background: #dd704e; }

.learner-app.home-screen a.home-submit {
  min-height: 34px;
  margin: 10px 2px 0;
  color: #fff;
  background: #dd704e;
  box-shadow: 0 11px 22px rgba(168, 73, 48, .28), 0 3px 7px rgba(168, 73, 48, .12), inset 0 1px 0 rgba(255, 255, 255, .2);
  font-weight: 650;
}
.learner-app.home-screen a.home-submit span { color: #fff; font-size: 14px; font-weight: 650; letter-spacing: .02em; }
.learner-app.home-screen a.home-submit > img { filter: brightness(0) invert(1); opacity: 1; }
.learner-app.home-screen .share-note { min-height: 22px; color: #9a837b; }

.learner-app.home-screen .driving-story { height: 72px; margin-top: 11px; }
.learner-app.home-screen .driving-story .scene-quote {
  right: 22px;
  top: 13px;
  color: #fff;
  font-family: KaiTi, "STKaiti", "楷体", cursive;
  font-size: 15px;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: .08em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .68);
  transform: rotate(-2deg);
  transform-origin: right center;
}

.learner-app.home-screen .recent-card {
  min-height: 84px;
  margin: -5px 0 0;
  padding: 8px 12px;
  border-color: rgba(228, 211, 204, .88);
  border-radius: 18px;
  background: rgba(255, 252, 249, .97);
  box-shadow: 0 15px 30px rgba(82, 47, 38, .16), 0 3px 8px rgba(82, 47, 38, .07), inset 0 1px 0 rgba(255, 255, 255, .98);
}
.learner-app.home-screen .recent-row {
  margin-top: 1px;
  padding: 5px 7px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 5px 13px rgba(87, 51, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.learner-app.home-screen .status-pill { box-shadow: 0 3px 8px rgba(157, 72, 49, .08); }

.learner-app.home-screen .learner-nav {
  bottom: 8px;
  width: min(calc(100% - 28px), 402px);
  height: 60px;
  padding: 5px 14px calc(5px + env(safe-area-inset-bottom));
  border: 1px solid rgba(226, 210, 202, .86);
  border-radius: 20px;
  background: rgba(255, 253, 250, .98);
  box-shadow: 0 15px 32px rgba(83, 48, 38, .18), 0 3px 8px rgba(83, 48, 38, .07), inset 0 1px 0 rgba(255, 255, 255, .98);
}
.learner-app.home-screen .learner-nav a { color: #8f7a73; font-size: 10px; }
.learner-app.home-screen .learner-nav a.active { color: #c95539; }
.learner-app.home-screen .learner-nav-submit-icon {
  background: #dd704e;
  box-shadow: 0 6px 13px rgba(168, 73, 48, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* Independent mobile evidence cards. */
.learner-app .evidence-form { display: grid; gap: 13px; padding: 14px; }
.learner-app .submit-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 11px 12px; border: 1px solid #bedbc5; border-radius: 12px; color: #286640; background: #edf7ef; font-size: 11px; line-height: 1.5; }
.learner-app .submit-summary a { margin-left: auto; color: var(--orange-dark); font-weight: 800; }
.learner-app .evidence-card { padding: 14px; border: 1px solid #e7d6cf; border-radius: 16px; background: #fffdfa; box-shadow: 0 7px 18px rgba(83, 48, 38, .07); }
.learner-app .evidence-card > header { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.learner-app .evidence-card > header > img { width: 38px; height: 38px; padding: 7px; border-radius: 11px; background: #fff; box-shadow: 0 4px 11px rgba(77, 43, 35, .09); }
.learner-app .evidence-card.xhs-card > header > img { padding: 0; background: transparent; }
.learner-app .evidence-card > header span { min-width: 0; display: grid; gap: 2px; }
.learner-app .evidence-card > header b { color: #4e352f; font-size: 13px; }
.learner-app .evidence-card > header small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.learner-app .evidence-card .field-label { margin-bottom: 12px; }
.learner-app .evidence-card textarea,
.learner-app .evidence-card .compact-fields input { width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--cocoa); background: #fffaf6; font: inherit; font-weight: 500; line-height: 1.5; outline: 0; }
.learner-app .evidence-card textarea { resize: vertical; min-height: 68px; }
.learner-app .evidence-card textarea:focus,
.learner-app .evidence-card .compact-fields input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(221, 112, 78, .12); }
.learner-app .evidence-card .upload-box { min-height: 86px; }
.learner-app .compact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.learner-app .card-result,
.learner-app .card-error { margin: 3px 0 0; padding: 9px 10px; border-radius: 10px; font-size: 11px; line-height: 1.45; }
.learner-app .card-result { color: #286640; background: #edf7ef; }
.learner-app .card-error { color: #8c2f28; background: #fff0ed; }
.learner-app .state-manual_review { color: #7d4d17; background: #fff2d9; }

/* Structured manual-payment profile and private referral center. */
.learner-app .payment-profile-form { display: grid; gap: 12px; }
.learner-app .payment-profile-form .payment-method-panel { display: grid; gap: 10px; padding: 12px; border: 1px solid #ead7cf; border-radius: 12px; background: #fffaf6; }
.learner-app .payment-profile-form .payment-method-panel[hidden] { display: none; }
.learner-app .payment-profile-form .bank-fields { grid-template-columns: 1fr; }
.learner-app .field-guide,.learner-app .qr-current { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.55; }
.learner-app .payment-qr-preview { width: 112px; height: 112px; margin-top: 9px; border: 1px solid var(--line); border-radius: 11px; object-fit: contain; background: #fff; }
.learner-app .payment-qr-upload-field { min-width: 0; }
.learner-app .payment-qr-upload-title { display: block; color: #5a4039; font-size: 12px; font-weight: 800; }
.learner-app .payment-qr-upload { min-height: 96px; width: 100%; margin-top: 8px; cursor: pointer; }
.learner-app .payment-qr-upload:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(221,112,78,.13); }
.learner-app .payment-qr-upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.learner-app .payment-qr-selection { display: block; min-height: 18px; margin-top: 7px; color: #9a7166; font-size: 10px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.learner-app .payment-qr-new-preview { width: min(100%, 220px); max-height: 220px; display: block; margin-top: 9px; border: 1px solid var(--line); border-radius: 12px; object-fit: contain; background: #fff; }
.learner-app .payment-qr-new-preview[hidden] { display: none; }
.learner-app .binding-path { margin: 10px 0 12px; padding: 10px; border-radius: 10px; color: var(--orange-dark); background: #fff2ec; font-size: 11px; font-weight: 700; line-height: 1.6; }
.learner-app .binding-pending { color: #805d1d; }
.learner-app .referral-center-link { min-height: 44px; display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding: 10px 12px; border: 1px solid #e0b9ad; border-radius: 11px; color: var(--orange-dark); background: #fff; font-size: 11px; font-weight: 800; }
.learner-app .referral-center-link img { width: 16px; height: 16px; }
.learner-app .subpage-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.learner-app .subpage-head > a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.learner-app .subpage-head img { width: 18px; height: 18px; }
.learner-app .subpage-head h1 { margin: 2px 0 0; font-size: 22px; }
.learner-app .referral-hero { padding: 17px; }
.learner-app .referral-hero h2 { margin: 4px 0 13px; font-size: 16px; }
.learner-app .binding-state,.learner-app .share-guide { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.learner-app .binding-state.bound { color: #286640; font-weight: 750; }
.learner-app .binding-state.pending { color: #805d1d; font-weight: 750; }
.learner-app .referral-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; }
.learner-app .referral-stats article { min-width: 0; padding: 12px 8px; text-align: center; }
.learner-app .referral-stats strong { display: block; color: var(--orange-dark); font-size: 13px; }
.learner-app .referral-stats span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.learner-app .referral-events { margin-top: 10px; padding: 15px; }
.learner-app .referral-event { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f1e3dd; }
.learner-app .referral-event:last-child { border-bottom: 0; }
.learner-app .referral-event div { display: grid; gap: 3px; }
.learner-app .referral-event strong { font-size: 11px; }
.learner-app .referral-event small { color: var(--muted); font-size: 9px; }
.learner-app .referral-event > span { padding: 4px 7px; border-radius: 999px; color: #805d1d; background: #fff1d6; font-size: 9px; white-space: nowrap; }
.profile-warning { color: #a9422e; font-weight: 800; }

/* Selected v2 learner profile: warm paper cards and single-column payout flow. */
.learner-app .profile-page { min-height: 100dvh; padding: 24px 16px 110px; overflow-x: hidden; color: #482f2a; background: #f8efe7; }
.learner-app .profile-page .profile-page-head { position: relative; min-height: 94px; display: flex; align-items: flex-start; justify-content: center; padding-top: 23px; text-align: center; }
.learner-app .profile-page .profile-back { position: absolute; left: 0; top: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; }
.learner-app .profile-page .profile-back img { width: 23px; height: 23px; opacity: .82; }
.learner-app .profile-page .profile-page-head h1 { margin: 0; color: #482f2a; font-family: "Songti SC", STSong, SimSun, serif; font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: .04em; }
.learner-app .profile-page .profile-page-head p { margin: 4px 0 0; color: #8f756d; font-size: 12px; line-height: 1.5; letter-spacing: .03em; }
.learner-app .profile-page .profile-identity { min-height: 82px; display: flex; align-items: center; gap: 14px; margin: 0 5px 10px; padding: 0 7px 10px; border-bottom: 1px solid #ecdcd4; }
.learner-app .profile-page .profile-identity > img { width: 62px; height: 62px; flex: none; object-fit: cover; border: 3px solid #fffaf6; border-radius: 50%; box-shadow: 0 8px 20px rgba(93, 55, 44, .14); }
.learner-app .profile-page .profile-identity > div { min-width: 0; display: grid; gap: 5px; }
.learner-app .profile-page .profile-identity strong { overflow-wrap: anywhere; font-family: "Songti SC", STSong, SimSun, serif; font-size: 22px; font-weight: 600; line-height: 1.2; }
.learner-app .profile-page .profile-identity span { color: #9a827a; font-size: 14px; }
.learner-app .profile-page .profile-message-stack:empty { display: none; }
.learner-app .profile-page .profile-message-stack .ui-alert { margin-bottom: 12px; }
.learner-app .profile-page .payment-profile-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.learner-app .profile-page .payment-profile-form > input[type="hidden"] { position: absolute; }
.learner-app .profile-page .profile-card,
.learner-app .profile-page .profile-share-card { min-width: 0; overflow: hidden; border: 1px solid rgba(236, 220, 212, .95); border-radius: 18px; background: #fffaf6; box-shadow: 0 16px 34px rgba(91, 53, 43, .11), 0 3px 8px rgba(91, 53, 43, .05), inset 0 1px 0 #fff; }
.learner-app .profile-page .profile-card-header { min-height: 52px; display: grid; grid-template-columns: 32px minmax(0, 1fr) 22px; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid #ecdcd4; }
.learner-app .profile-page .profile-card-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #fceee8; }
.learner-app .profile-page .profile-card-icon img { width: 18px; height: 18px; opacity: .72; }
.learner-app .profile-page .profile-card-header h2 { margin: 0; color: #482f2a; font-family: "Songti SC", STSong, SimSun, serif; font-size: 18px; font-weight: 600; }
.learner-app .profile-page .profile-card-cue { width: 18px; height: 18px; justify-self: end; opacity: .67; transform: rotate(90deg); }
.learner-app .profile-page .profile-card-cue.expanded { transform: rotate(-90deg); }
.learner-app .profile-page .profile-card-body { padding: 0 14px; }
.learner-app .profile-page .profile-field-row { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; border-bottom: 1px solid #ecdcd4; color: #482f2a; font-size: 13px; font-weight: 600; }
.learner-app .profile-page .profile-field-row:last-child { border-bottom: 0; }
.learner-app .profile-page .profile-field-row > span { flex: none; }
.learner-app .profile-page .profile-field-row input,
.learner-app .profile-page .profile-field-row select { width: min(64%, 240px); min-width: 0; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; color: #8f756d; background: transparent; box-shadow: none; font: inherit; font-size: 13px; font-weight: 500; text-align: right; outline: 0; }
.learner-app .profile-page .profile-field-row input:focus-visible,
.learner-app .profile-page .profile-field-row select:focus-visible { outline: 3px solid #482f2a; outline-offset: 2px; border-radius: 4px; }
.learner-app .profile-page .profile-field-row select { padding-right: 4px; text-align-last: right; }
.learner-app .profile-page .profile-field-row input::placeholder { color: #b9a7a1; opacity: 1; }
.learner-app .profile-page .profile-field-row:focus-within { border-bottom-color: #dd704e; }
.learner-app .profile-page .profile-payment-body { padding-bottom: 14px; }
.learner-app .profile-page .payment-method-fieldset { min-width: 0; margin: 0; padding: 12px 0 8px; border: 0; border-bottom: 1px solid #ecdcd4; }
.learner-app .profile-page .payment-method-fieldset legend { padding: 0; color: #482f2a; font-size: 13px; font-weight: 600; }
.learner-app .profile-page .payment-method-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.learner-app .profile-page .payment-method-chip { position: relative; min-width: 0; }
.learner-app .profile-page .payment-method-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.learner-app .profile-page .payment-method-chip span { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 6px; border: 1px solid #ecdcd4; border-radius: 11px; color: #694a42; background: #fffdfb; font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.learner-app .profile-page .payment-method-chip:has(input:checked) span { color: #b34c32; border-color: #dd704e; background: #fff5f1; box-shadow: 0 5px 13px rgba(176, 74, 48, .13); }
.learner-app .profile-page .payment-method-chip input:focus-visible + span { outline: 3px solid rgba(72, 47, 42, .7); outline-offset: 2px; }
.learner-app .profile-page .payment-method-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.learner-app .profile-page .payment-method-panel[hidden] { display: none; }
.learner-app .profile-page .payment-method-panel.bank-fields { grid-template-columns: minmax(0, 1fr); }
.learner-app .profile-page .profile-upload-field { display: block; padding: 14px 0; color: #482f2a; font-size: 13px; font-weight: 600; }
.learner-app .profile-page .payment-qr-upload-title { color: #482f2a; font-size: 13px; font-weight: 600; }
.learner-app .profile-page .field-guide,
.learner-app .profile-page .qr-current { color: #8f756d; font-size: 10px; }
.learner-app .profile-page .payment-qr-preview { width: 112px; height: 112px; }
.learner-app .profile-page .immutable-phone { min-height: 44px; display: flex; align-items: center; margin: 3px 0 11px; color: #8f756d; font-size: 9px; line-height: 1.55; }
.learner-app .profile-page .profile-save { width: 100%; min-height: 48px; border: 0; border-radius: 13px; color: #fffaf6; background: #dd704e; box-shadow: 0 10px 20px rgba(171, 72, 47, .24), inset 0 1px 0 rgba(255, 255, 255, .2); font-family: "Songti SC", STSong, SimSun, serif; font-size: 17px; font-weight: 600; letter-spacing: .04em; }
.learner-app .profile-page .profile-share-card { margin-top: 14px; }
.learner-app .profile-page .profile-share-details > summary { min-height: 66px; display: grid; grid-template-columns: 36px minmax(0, 1fr) 24px; align-items: center; gap: 10px; padding: 10px 18px; list-style: none; cursor: pointer; }
.learner-app .profile-page .profile-share-details > summary::-webkit-details-marker { display: none; }
.learner-app .profile-page .profile-share-details > summary strong { font-family: "Songti SC", STSong, SimSun, serif; font-size: 18px; font-weight: 600; }
.learner-app .profile-page .profile-share-cue { width: 18px; height: 18px; justify-self: end; opacity: .67; transition: transform .18s ease; }
.learner-app .profile-page .profile-share-details[open] .profile-share-cue { transform: rotate(90deg); }
.learner-app .profile-page .profile-share-content { padding: 0 18px 18px; border-top: 1px solid #ecdcd4; }
.learner-app .profile-page .profile-share-content > p { margin: 10px 0 0; color: #8f756d; font-size: 10px; line-height: 1.6; }
.learner-app .profile-page .profile-share-content .referral-code { margin-top: 14px; }
.learner-app .profile-page .profile-share-content .binding-intro { max-width: none; margin-bottom: 8px; }
.learner-app .profile-page .profile-share-content .binding-path { margin: 9px 0 12px; }
.learner-app .profile-page .profile-share-content .referral-bind-form input { min-height: 44px; }
.learner-app .profile-page .profile-share-content .referral-bind-form button { min-height: 44px; }
.learner-app .profile-page .logout-row { min-height: 56px; margin-top: 14px; border-radius: 18px; background: #fffaf6; }

@media (max-width: 360px) {
  .learner-app .profile-page { padding-right: 12px; padding-left: 12px; }
  .learner-app .profile-page .profile-page-head h1 { font-size: 26px; }
  .learner-app .profile-page .payment-method-chips { gap: 6px; }
  .learner-app .profile-page .payment-method-chip span { padding-right: 3px; padding-left: 3px; font-size: 11px; }
}

.admin-workbench .frozen-batch-details { min-width: 210px; margin-top: 9px; }
.admin-workbench .frozen-batch-details summary { min-height: 36px; display: flex; align-items: center; color: var(--orange-dark); font-weight: 750; cursor: pointer; }
.admin-workbench .frozen-batch-items { display: grid; gap: 8px; margin-top: 6px; }
.admin-workbench .frozen-batch-items article { padding: 9px; border: 1px solid #ead7cf; border-radius: 9px; background: #fffaf6; }
.admin-workbench .frozen-batch-items article strong,.admin-workbench .frozen-batch-items article small { overflow-wrap: anywhere; }
.admin-workbench .batch-payment-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; min-width: 224px; }
.admin-workbench .payment-touch-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; padding: 8px 10px; text-align: center; white-space: normal; }
.admin-workbench .batch-paid-form { display: grid; grid-column: 1 / -1; gap: 8px; margin: 0; }
.admin-workbench .batch-paid-form input { margin-top: 0; }
.admin-workbench .batch-payment-actions .frozen-batch-details { grid-column: 1 / -1; }
.admin-workbench :is(.wb-button, .text-link, .wb-sidebar nav a, summary, button[type="submit"]) { min-height: 44px; }
.admin-workbench .text-link { display: inline-flex; align-items: center; }
.admin-workbench :is(input, select, textarea) { min-height: 44px; }
.admin-workbench input[type="checkbox"] { width: 44px; height: 44px; margin: 0; }
.manual-review-deadline { display: grid; gap: 5px; margin-top: 12px; padding: 11px 12px; border: 1px solid #ebcfc4; border-radius: 10px; background: #fff7f2; }
.manual-review-deadline span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.manual-review-deadline .countdown { color: var(--orange-dark); }
body.image-dialog-open { overflow: hidden; }
.admin-workbench .image-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--cocoa); }
.admin-workbench .image-dialog::backdrop { background: rgba(40, 25, 21, .72); }
.admin-workbench .image-dialog-panel { position: relative; width: min(92vw, 920px); max-height: 90dvh; display: flex; flex-direction: column; margin: 5dvh auto; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 24px 70px rgba(28, 16, 13, .36); }
.admin-workbench .image-dialog-header { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--line); }
.admin-workbench .image-dialog-header h2 { margin: 0; font-size: 17px; }
.admin-workbench .image-dialog-header button { min-width: 52px; min-height: 44px; border: 1px solid #ddb8ac; border-radius: 10px; color: var(--orange-dark); background: #fff7f3; font: 700 13px inherit; cursor: pointer; }
.admin-workbench .image-dialog-scroll { min-height: 160px; overflow: auto; overscroll-behavior: contain; padding: 12px; text-align: center; }
.admin-workbench .image-dialog-scroll img { width: auto; max-width: 100%; height: auto; display: block; margin: 0 auto; }
.admin-workbench .image-dialog-error { margin: 40px 12px; color: #a9422e; }
.admin-workbench .image-dialog-fallback { min-height: 44px; display: inline-flex; align-items: center; align-self: center; margin: 4px 12px 12px; padding: 8px 14px; color: var(--orange-dark); font-weight: 750; }

@media (max-width: 760px) {
  .admin-workbench { min-width: 0; display: block; overflow-x: clip; }
  .admin-workbench .wb-sidebar { position: relative; width: 100%; height: auto; padding: 12px; overflow: hidden; }
  .admin-workbench .wb-sidebar::after { content:""; position:absolute; z-index:2; top:56px; right:0; width:34px; height:48px; pointer-events:none; background:linear-gradient(90deg,rgba(255,249,243,0),#fff9f3 78%); }
  .admin-workbench .wb-sidebar nav { display: flex; gap: 6px; overflow-x: auto; padding: 0 30px 4px 0; scroll-padding-inline: 12px 42px; scrollbar-width: thin; }
  .admin-workbench .wb-brand { margin: 0 4px 8px; }
  .admin-workbench .wb-brand img { width: 32px; height: 32px; }
  .admin-workbench .wb-sidebar nav a { flex: 0 0 auto; min-height: 44px; padding: 8px 10px; }
  .admin-workbench .wb-main { max-width:100%; padding: 18px 12px 36px; overflow-x:clip; }
  .admin-workbench .wb-top { margin-bottom: 16px; }
  .admin-workbench .wb-top time { display: none; }
  .admin-workbench .wb-panel { padding: 14px; }
  .admin-workbench .panel-heading { display: grid; align-items: flex-start; }
  .admin-workbench .wb-session { display: grid; grid-template-columns: minmax(0,1fr); overflow-wrap: anywhere; }
  .admin-workbench .wb-session a { margin-left:0; }
  .admin-workbench .session-health { grid-template-columns: minmax(0,1fr); padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .admin-workbench .wb-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-workbench .wb-table-wrap { max-width: 100%; margin: 0 -4px; padding-bottom: 6px; overflow-x: auto; overscroll-behavior-x: contain; }
  .admin-workbench .wb-table-wrap table { min-width: 660px; }
  .admin-workbench .wb-table-wrap:has([data-mobile-table]) { margin:0; padding:0; overflow:visible; }
  .admin-workbench .wb-table-wrap [data-mobile-table] { width:100%; min-width:0; display:block; border-collapse:separate; font-size:13px; }
  .admin-workbench [data-mobile-table] thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .admin-workbench [data-mobile-table] tbody { width:100%; display:grid; gap:12px; }
  .admin-workbench [data-mobile-table] tbody tr { width:100%; display:block; padding:4px 12px; border:1px solid var(--line); border-radius:15px; background:var(--paper); box-shadow:0 7px 18px rgba(91,55,45,.07); }
  .admin-workbench [data-mobile-table] td { width:100%; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:6px; padding:10px 2px; border-bottom:1px solid #f1e4de; overflow-wrap:anywhere; }
  .admin-workbench [data-mobile-table] td::before { content:attr(data-label); align-self:start; color:var(--muted); font-size:12px; font-weight:750; line-height:1.5; }
  .admin-workbench [data-mobile-table] td:last-child { border-bottom:0; }
  .admin-workbench [data-mobile-table] td > :is(form,div,details,a,button,input) { min-width:0; max-width:100%; }
  .admin-workbench [data-mobile-table] td form { width:100%; min-width:0; }
  .admin-workbench [data-mobile-table] td .wb-button { width:100%; justify-content:center; }
  .admin-workbench [data-mobile-table] td.empty-row { display:block; padding:22px 10px!important; border:0; text-align:center; }
  .admin-workbench [data-mobile-table] td.empty-row::before { content:none; }
  .admin-workbench [data-mobile-table] tbody tr:has(.empty-row) { padding:0; }
  .admin-workbench [data-mobile-table] code { white-space:normal; overflow-wrap:anywhere; }
  .admin-workbench .payment-export-form > .wb-button { width: 100%; min-height: 44px; margin-top: 10px; }
  .admin-workbench .wb-table-wrap td form { min-width: 150px; }
  .admin-workbench .wb-table-wrap [data-mobile-table] td form { min-width:0; }
  .admin-workbench .frozen-batch-details summary { min-height: 44px; }
  .admin-workbench .batch-payment-actions { width:100%; min-width:0; grid-template-columns:1fr; }
  .admin-workbench .batch-payment-actions > * { grid-column:1; }
  .admin-workbench .case-actions { grid-template-columns: 1fr; }
  .admin-workbench .inline-form, .admin-workbench .settings-form { grid-template-columns: 1fr; max-width: none; }
  .admin-workbench .customer-search, .admin-workbench .binding-correction-form { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; }
  .admin-workbench .customer-search input, .admin-workbench .binding-correction-form input { width: 100%; min-width: 0; }
  .admin-workbench .wb-filters { display: grid; grid-template-columns: 1fr; }
  .admin-workbench .wb-filters label { min-width: 0; }
  .admin-workbench .image-dialog-panel { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); margin: 10px auto; border-radius: 13px; }
  .admin-login .admin-login-shell { padding:16px; }
  .admin-login .admin-login-card { padding:22px; border-radius:16px; }
}
@media (max-width: 390px) {
  .learner-app .compact-fields { grid-template-columns: 1fr; gap: 0; }
  .learner-app .evidence-form { padding: 11px; }
  .learner-app .evidence-card { padding: 12px; }
}