/* ===== tero.market/vn — Aievisa ===== */
@font-face{font-family:'Sora';src:url(/vn/assets/fonts/sora.woff2) format('woff2');font-weight:100 800;font-style:normal;font-display:swap}
:root{
  --red:#D8432B; --red-d:#B8331F; --star:#EF6A4F;
  --ink:#12161F; --ink-2:#3A3F4A; --ink-3:#6B707A;
  --bg:#F6F4EE; --card:#fff; --line:#E4E0D6; --line-2:#EFECE4;
  --ok:#0E8A5F; --warn:#C56A00; --warn-bg:#FBF1E2; --err:#B42318; --err-bg:#F9E9E7;
  --r:12px; --shadow:none;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --font:'Sora','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC',system-ui,sans-serif;
}
:root:not([data-theme=light]) { color-scheme: light; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]){
    --ink:#e9ecf2; --ink-2:#a8b0c0; --ink-3:#707a8c;
    --bg:#0f1115; --card:#171a21; --line:#272b35; --line-2:#1e222a;
    --warn-bg:#2a2210; --err-bg:#2b1618; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme=dark]{
  --ink:#e9ecf2; --ink-2:#a8b0c0; --ink-3:#707a8c;
  --bg:#0f1115; --card:#171a21; --line:#272b35; --line-2:#1e222a;
  --warn-bg:#2a2210; --err-bg:#2b1618; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 var(--font);
}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px}

/* header */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;height:58px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font);font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1}
.brand svg{width:30px;height:30px;flex:none}
.brand .ai{color:var(--red)}
.brand:hover{text-decoration:none}
.flag{width:26px;height:18px;border-radius:3px;background:var(--red);display:grid;place-items:center;flex:none}
.flag svg{width:12px;height:12px;fill:var(--star)}
.top nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.top nav a{padding:7px 11px;border-radius:9px;color:var(--ink-2);font-size:14px;white-space:nowrap}
@media(max-width:480px){.top nav{gap:0;flex-wrap:wrap;justify-content:flex-end}.top nav a{padding:6px 7px;font-size:13px}.top .routectx{display:none}.top .wrap{height:auto;min-height:58px;padding-top:6px;padding-bottom:6px}}
.top nav a:hover{background:var(--line-2);text-decoration:none;color:var(--ink)}
.top nav a.cta{background:var(--red);color:#fff}
.top nav a.cta:hover{background:var(--red-d)}

/* hero */
.hero{padding:64px 0 40px;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);background:var(--card);border:1px solid var(--line);padding:5px 13px;border-radius:999px;margin-bottom:22px}
.kicker b{color:var(--red);font-weight:600}
h1{font-size:clamp(28px,5.2vw,46px);line-height:1.2;letter-spacing:-.025em;margin:0 0 18px;font-weight:750}
h1 .hl{color:var(--red)}
.sub{font-size:clamp(15px,2.4vw,18px);color:var(--ink-2);max-width:620px;margin:0 auto 30px}
.btns{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:11px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;font-family:inherit}
.btn-p{background:var(--red-d);color:#fff}   /* 白字 5.95:1 过 AA；原来的 --red 只有 4.41:1 */
.btn-p:hover{background:var(--red-d);text-decoration:none}
.btn-s{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-s:hover{border-color:var(--ink-3);text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.hero-note{margin-top:20px;font-size:13px;color:var(--ink-3)}

/* price bar */
.pricebar{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;max-width:660px;margin:34px auto 0}
.pricebar div{flex:1;background:var(--card);padding:15px 12px;text-align:center}
.pricebar .n{font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pricebar .n.s{color:var(--ink-3);text-decoration:line-through;font-weight:600}
.pricebar .n.g{color:var(--ok)}
.pricebar .l{font-size:12px;color:var(--ink-3);margin-top:3px}

/* steps */
section{padding:52px 0}
.sec-h{text-align:center;margin-bottom:38px}
.sec-h h2{font-size:clamp(22px,3.6vw,30px);letter-spacing:-.02em;margin:0 0 9px;font-weight:700}
.sec-h p{color:var(--ink-2);margin:0;font-size:15px}
.steps{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow);position:relative;display:flex;flex-direction:column}
.step .num{width:32px;height:32px;border-radius:9px;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px;margin-bottom:14px;font-variant-numeric:tabular-nums}
.step h3{margin:0 0 4px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.step .who{font-size:12px;color:var(--ink-3);margin-bottom:11px}
.step p{margin:0 0 14px;font-size:14.5px;color:var(--ink-2);flex:1}
.step .meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:15px}
.tag{font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--line-2);color:var(--ink-2);border:1px solid var(--line)}
.tag.pay{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.tag.free{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);border-color:transparent}
.step .go{font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.step .official{font-size:12px;color:var(--ink-3);margin-top:9px;font-family:var(--mono);word-break:break-all}

/* callout */
.note{border:1px solid var(--line);background:var(--card);border-left:3px solid var(--warn);border-radius:10px;padding:15px 17px;font-size:14px;color:var(--ink-2);margin:0 auto;max-width:760px}
.note b{color:var(--ink)}
.note.err{border-left-color:var(--err)}
.note.ok{border-left-color:var(--ok)}

/* faq */
.faq{max-width:760px;margin:0 auto;display:grid;gap:10px}
details{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:0 17px}
details[open]{padding-bottom:4px}
summary{cursor:pointer;padding:15px 0;font-weight:600;font-size:15px;list-style:none;display:flex;align-items:center;gap:9px}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";color:var(--red);font-weight:700;font-size:17px;flex:none;width:14px}
details[open] summary::before{content:"−"}
details .body{font-size:14.5px;color:var(--ink-2);padding-bottom:13px;border-top:1px solid var(--line-2);padding-top:13px}
details .body p:first-child{margin-top:0}
details .body p:last-child{margin-bottom:0}

footer{border-top:1px solid var(--line);padding:30px 0 44px;text-align:center;color:var(--ink-3);font-size:13px}
footer a{color:var(--ink-2)}
.disclaimer{max-width:680px;margin:14px auto 0;font-size:12px;line-height:1.7}

/* ===== 向导页 ===== */
.appwrap{max-width:900px;margin:0 auto;padding:0 16px 80px}
.steps-nav{display:flex;gap:6px;margin:0;flex-wrap:nowrap}
.steps-nav button{flex:1;min-width:0;padding:8px 6px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.steps-nav button.on{background:var(--red);border-color:var(--red);color:#fff}
.steps-nav button.done{border-color:var(--red);color:var(--red);background:#FBEDE9}   /* 完成态也用品牌色，不混绿色 */

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow);margin-bottom:18px}
.panel > h2{margin:0 0 4px;font-size:19px;letter-spacing:-.01em}
.panel > .lead{margin:0 0 20px;color:var(--ink-2);font-size:14px}
.panel[hidden]{display:none}

.grid{display:grid;gap:15px;grid-template-columns:repeat(2,1fr)}
.grid .full{grid-column:1/-1}
@media(max-width:700px){.grid{grid-template-columns:1fr}}

.f label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--ink)}
.f label .en{font-weight:400;color:var(--ink-3);font-size:11.5px;margin-left:5px;font-family:var(--mono)}
.f input,.f select,.f textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);
  color:var(--ink);font-size:15px;line-height:1.4;font-family:inherit;font-family:inherit
}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid color-mix(in srgb,var(--red) 35%,transparent);outline-offset:-1px;border-color:var(--red)}
.f .hint{font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.5}
.f .bad{font-size:12px;color:var(--err);margin-top:4px;display:none}
.f.invalid input,.f.invalid select{border-color:var(--err);background:var(--err-bg)}
.f.invalid .bad{display:block}
.f.upper input{text-transform:uppercase}

.radios{display:flex;gap:8px;flex-wrap:wrap}
.radios label{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--line);border-radius:9px;cursor:pointer;font-size:14px;font-weight:500;margin:0;background:var(--bg)}
.radios label:has(input:checked){border-color:var(--red);background:color-mix(in srgb,var(--red) 8%,transparent);color:var(--red);font-weight:600}
.radios input{width:auto;margin:0}

/* photo */
.photos{display:grid;gap:16px;grid-template-columns:1fr 1fr}
@media(max-width:700px){.photos{grid-template-columns:1fr}}
.drop{border:1.5px dashed var(--line);border-radius:12px;padding:18px;text-align:center;background:var(--bg);cursor:pointer;transition:border-color .15s}
.drop:hover,.drop.over{border-color:var(--red)}
.drop h4{margin:0 0 4px;font-size:15px}
.drop .spec{font-size:12px;color:var(--ink-3);line-height:1.55;margin-bottom:12px}
.drop input[type=file]{display:none}
.drop .prev{max-width:100%;max-height:230px;border-radius:8px;margin:0 auto 10px;display:block;border:1px solid var(--line)}
.drop .pick{display:inline-block;padding:8px 16px;border-radius:9px;background:var(--ink);color:var(--bg);font-size:13px;font-weight:600}
.chk{font-size:12.5px;margin-top:9px;text-align:left;display:grid;gap:3px}
.chk div{display:flex;gap:6px;align-items:flex-start}
.chk .i{flex:none;font-weight:700;width:13px}
.chk .pass{color:var(--ok)}
.chk .warnx{color:var(--warn)}
.chk .fail{color:var(--err)}

.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:22px}
.bar .spacer{flex:1}
.mini{font-size:12.5px;color:var(--ink-3)}

/* review */
.rev{width:100%;border-collapse:collapse;font-size:13.5px}
.rev th,.rev td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-2);vertical-align:top}
.rev th{font-weight:600;color:var(--ink-2);width:36%;font-size:13px}
.rev td{font-family:var(--mono);font-size:12.5px;word-break:break-word}
.rev tr.sec th{background:var(--line-2);color:var(--ink);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.rev td .cp{float:right;border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:1px 7px;font-size:11px;cursor:pointer;color:var(--ink-2);font-family:inherit;margin-left:8px}
.rev td .cp:hover{border-color:var(--red);color:var(--red)}
.rev td.empty{color:var(--ink-3)}

.issues{display:grid;gap:8px;margin-bottom:18px}
.issue{border-radius:10px;padding:11px 14px;font-size:13.5px;border:1px solid transparent}
.issue.e{background:var(--err-bg);color:var(--err);border-color:color-mix(in srgb,var(--err) 25%,transparent)}
.issue.w{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}
.issue b{display:block;margin-bottom:1px}
.top .routectx{font-size:13px;color:var(--ink-2);background:var(--line-2);padding:4px 10px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}

/* 一页式办理：顶部粘性进度 + 底部固定完成度 */
.prog{position:sticky;top:58px;z-index:40;background:var(--bg);padding:14px 0 10px;margin:0 0 6px}
.steps-nav button i{font-style:normal;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none;line-height:1}
.steps-nav button.done i{background:var(--red);border-color:var(--red);color:#fff}
.steps-nav button.on i{border-color:#fff;color:#fff;background:transparent}
.prog-bar{height:4px;background:var(--line);border-radius:2px;margin-top:10px;overflow:hidden}
.prog-bar i{display:block;height:100%;width:0;background:var(--red);transition:width .3s ease-out}
.panel{scroll-margin-top:150px}
.prog-foot{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--card);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px}
.prog-foot .pf-l{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.prog-foot b{font-size:14px;color:var(--ink)}
.prog-foot span{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog-foot .btn{padding:10px 18px;flex:none}
.appwrap{padding-bottom:120px}
@media(max-width:600px){.steps-nav button:not(.chip) span{display:none}.steps-nav button{padding:8px 4px}.steps-nav button.chip{font-size:12px;gap:4px}.prog{top:0}}

/* 登录闸：没登录只显示登录段 */
body.gated .appwrap .panel:not(#p-login),body.gated #prog,body.gated #progFoot,body.gated #cardStatus,body.gated #cardFill{display:none}
body:not(.gated) #p-login{display:none}
.login-opts .btn:disabled{opacity:.5;cursor:not-allowed}
.who{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.who[hidden]{display:none}
.who i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.who i::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.who a{color:var(--ink-3)}
#cardStatus{margin:0 0 18px}
#cardStatus b{color:var(--ink)}
/* 页头右侧的账户状态：绿点=已登录（状态色只表示状态），邮箱灰字，退出是安静的文字链接 */
.top .who{gap:2px}
.top .who i{padding:0 8px 0 4px;color:var(--ink-2);max-width:260px;overflow:hidden;text-overflow:ellipsis}
.top .who i::before{background:var(--ok);flex:none}
.bar-link{font-size:13px;color:var(--ink-3)}
@media(max-width:480px){.top .who i{max-width:150px;font-size:12px}}
[data-key].ocr input,[data-key].ocr select{background:var(--warn-bg)}   /* 从护照读出来的：淡黄底提示核对 */
/* 页面状态：list 列表 / edit 编辑 / view 查看 / trip 办理（每种状态只露自己那几段） */
body[data-mode="list"] #cardFill,body[data-mode="list"] #p-view,body[data-mode="list"] #p-trip,body[data-mode="list"] #p-review,body[data-mode="list"] #prearrival,body[data-mode="list"] #arrival,body[data-mode="list"] #prog,body[data-mode="list"] #progFoot{display:none}
body[data-mode="edit"] #p-card,body[data-mode="edit"] #p-view,body[data-mode="edit"] #p-trip,body[data-mode="edit"] #p-review,body[data-mode="edit"] #prearrival,body[data-mode="edit"] #arrival{display:none}
body[data-mode="view"] #p-card,body[data-mode="view"] #cardFill,body[data-mode="view"] #p-trip,body[data-mode="view"] #p-review,body[data-mode="view"] #prearrival,body[data-mode="view"] #arrival,body[data-mode="view"] #prog,body[data-mode="view"] #progFoot,body[data-mode="view"] #cardStatus{display:none}
body[data-mode="trip"] #p-card,body[data-mode="trip"] #cardFill,body[data-mode="trip"] #p-view,body[data-mode="trip"] #cardStatus{display:none}
body:not([data-mode]):not(.gated) .appwrap>:not(#p-login):not(#p-card){display:none}
/* 编辑资料卡：四个分块在 .subwrap 里，顶部粘性条放分块小签 */
.subwrap{border-left:3px solid var(--red);padding-left:14px;margin:0 0 18px}
.sub-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.sub-top b{font-size:14px;color:var(--ink)}
.sub-top a{margin-left:auto;font-size:12px;color:var(--ink-3)}
.steps-nav button.chip em{font-style:normal;font-size:11px;font-weight:600;opacity:.9}
.pf-l a{font-size:12px;color:var(--ink-3)}
.pf-l a[hidden]{display:none}
/* 资料卡列表：勾人 + 查看/编辑/删除 + 不全就提示补 */
.cardrow .sel{display:flex;align-items:center}
.cardrow .sel input{width:18px;height:18px;accent-color:var(--red);cursor:pointer;margin:0}
.cardrow .sel[hidden]{display:none}
.cardrow .cr-act{display:flex;gap:10px;font-size:12px;white-space:nowrap}
.cardrow .cr-act a{color:var(--ink-3)}
.cardrow .cr-st.todo a{color:var(--red)}
/* 查看资料卡 */
.view-hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.view-hd h2{margin:0}
.view-photos{display:flex;gap:14px;margin:0 0 18px}
.vph{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--ink-3)}
.vph img{width:84px;height:112px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.vph .none{width:84px;height:112px;border:1px dashed var(--line);border-radius:8px;display:grid;place-items:center;color:var(--ink-3)}
.view-grid h3{font-size:13px;margin:16px 0 6px;color:var(--ink-3);font-weight:600;letter-spacing:.04em}
.view-grid dl{display:grid;grid-template-columns:160px 1fr;gap:6px 14px;margin:0;font-size:14px}
.view-grid dt{color:var(--ink-3)}
.view-grid dd{margin:0;color:var(--ink);word-break:break-word}
.view-grid dd.miss{color:var(--red)}
.view-grid dd.na{color:var(--ink-3)}
@media(max-width:600px){.view-grid dl{grid-template-columns:1fr;gap:2px}.view-grid dd{margin-bottom:6px}}
/* ePass 抬头：让这张卡看起来是一份正式证件夹，而不是一个表单结果页 */
.ep-top{display:flex;align-items:center;gap:10px;padding:0 0 14px;margin:0 0 16px;border-bottom:2px solid var(--ink)}
.ep-mark{width:30px;height:30px;display:block}
.ep-ti{display:flex;align-items:baseline;gap:8px}
.ep-ti b{font-size:17px;letter-spacing:.01em}
.ep-ti em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.ep-url{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}
/* 证件包 */
.view-sec{font-size:13px;margin:18px 0 8px;color:var(--ink-3);font-weight:600;letter-spacing:.04em}
.view-docs{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:0 0 4px}
.vdoc{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:9px}
.vth{width:54px;height:72px;flex:0 0 54px;border-radius:6px;background:var(--bg-2);overflow:hidden;display:grid;place-items:center}
.vth img{width:100%;height:100%;object-fit:cover}
.vdbd{min-width:0;display:flex;flex-direction:column;gap:3px}
.vdbd b{font-size:13.5px;word-break:break-word}
.vdk{font-size:11px;font-weight:700;color:var(--red);background:#FBEDE9;border-radius:999px;padding:2px 8px;align-self:flex-start}
.vdd{font-size:11.5px;font-weight:600}
.vdd.ok{color:#15803D}.vdd.warn{color:#B45309}.vdd.bad{color:#B42318}
@media(max-width:600px){.view-docs{grid-template-columns:1fr}}
/* 核对页办理人切换 */
.persons{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;font-size:13px}
.persons .ps-l{color:var(--ink-3)}
.persons .chip{padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.persons .chip em{font-style:normal;font-size:11px;color:var(--red)}
.persons .chip.done{border-color:var(--red);color:var(--red);background:#FBEDE9}
.persons .chip.done em{color:inherit}
.persons .chip.on{background:var(--red);border-color:var(--red);color:#fff}
.persons .chip.on em{color:#fff}
.persons .ps-fix{font-size:12px;color:var(--red)}
.persons .ps-n{flex-basis:100%;font-size:12px;color:var(--ink-3)}
.panel.sub{padding:20px 22px}
.sub-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.sub-hd h2{margin:0}
.sub-tag{font-size:12px;color:var(--red);font-weight:600}
.sub-tag.ok{color:var(--ink-3)}
.sub-toggle{margin-left:auto;font-size:12px;color:var(--ink-3);display:none}
.panel.sub.fold > :not(.sub-hd){display:none}
.panel.sub.fold{padding:14px 22px}
.panel.sub.fold .sub-hd{margin:0}
.panel.sub.fold .sub-toggle{display:inline}
.cards{display:grid;gap:8px;margin:6px 0 14px}
.cardrow{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer}
.cardrow.on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.cardrow .dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink-3);flex:none}
.cardrow.on .dot{background:var(--red);border-color:var(--red)}
.cardrow input[type=text]{border:0;background:transparent;font:inherit;font-weight:600;color:var(--ink);width:160px;padding:2px 4px;border-radius:6px}
.cardrow input[type=text]:focus{outline:1px solid var(--line);background:var(--bg)}
.cardrow .sum{font-size:12px;color:var(--ink-3);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cardrow .del{font-size:12px;color:var(--ink-3);white-space:nowrap}
@media(max-width:600px){.subwrap{border-left:0;padding-left:0}}
/* 登录屏是"二选一"的决策屏，不是表单屏：窄一档、竖排、两个入口同宽，
   视线不用左右扫。两个选项本来就不对等（新用户是绝大多数），等宽两列是在说假话。 */
.start-opts{display:grid;gap:10px;max-width:min(360px,100%);margin:16px 0 0}
.start-opts>*,.start-opts #gsiBtn{max-width:100%;min-width:0;box-sizing:border-box}
.start-opts .hint{margin:2px 0 0;font-size:12.5px;color:var(--ink-3)}
.start-opts .sep{display:flex;align-items:center;gap:10px;margin:18px 0 2px;font-size:12.5px;color:var(--ink-3)}
.start-opts .sep::before,.start-opts .sep::after{content:"";flex:1;height:1px;background:var(--line)}
.start-opts #gsiBtn{min-height:44px}
body.gated .appwrap{max-width:560px}
body.gated #p-login{margin-top:min(10vh,80px)}
body.gated .top nav{display:none}   /* 还没有任何资料时，不该把"清空资料"摆成最显眼的次要动作 */
.start-opts .btn.on{border-color:var(--red)}
.login-opts[hidden]{display:none}
#cardStatus .bind a{color:var(--red);font-weight:600}
.who a+a{margin-left:4px}
/* 资料卡 = 乘机人列表 */
.hub{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--ink-2);margin:0 0 12px}
.hub span:first-child{font-weight:600;color:var(--ink)}
.cardrow{gap:12px}
.cr-main{flex:1;min-width:0}
.cr-name{font-weight:600;color:var(--ink)}
.cr-sum{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-st{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.cr-st.ok{color:var(--ink);background:var(--line-2)}
.cr-st.todo{color:var(--warn);background:var(--warn-bg)}
.cardrow input.cr-label{width:88px;font-size:12px;font-weight:500;color:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:4px 6px;background:var(--bg)}
.cardrow .edit{font-size:12px;color:var(--ink-2);white-space:nowrap}
html.noroute #p-trip,html.noroute #p-review,html.noroute #prearrival,html.noroute #arrival{display:none}
@media(max-width:600px){.cardrow{flex-wrap:wrap}.cardrow .cr-main{flex-basis:calc(100% - 26px)}.cardrow input.cr-label{width:70px}}
.btn[hidden]{display:none}   /* .btn 的 display 会盖掉 hidden：带目的地时「选目的地」按钮要真的藏起来 */
.chk .act .i{display:none}
.chk .act .btn{height:40px;padding:0 18px;font-size:14px;margin-top:4px}
.chk .muted{color:var(--ink-3)}
.chk .muted .i{display:none}
.chk .muted a{color:var(--ink-3);font-size:12px}
/* .ai-flash 只负责抖一下提醒「看这里」，颜色统一交给 .pasted/.ocr（否则抖完也不清掉，和已验证字段一样一直顶着红边，分不清是填好了还是出错了——2026-10-01 用户反馈） */

/* 一键粘贴：宽屏固定在右侧，窄屏顺着分块排在资料卡顶部 */
.paste{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 14px 10px;margin:0 0 16px}
.paste-hd b{display:block;font-size:15px;color:var(--ink)}
.paste-hd span{display:block;font-size:12px;color:var(--ink-3);margin:2px 0 10px;line-height:1.5}
.paste textarea{width:100%;box-sizing:border-box;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;font-size:14px;line-height:1.5;background:var(--bg);color:var(--ink);min-height:150px}
.paste textarea:focus{outline:2px solid var(--red);outline-offset:-1px}
.paste-bar{display:flex;align-items:center;gap:12px;margin:10px 0 0}
.paste-bar a{font-size:12px;color:var(--ink-3)}
.paste-res{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2);display:grid;gap:4px}
.paste-res[hidden]{display:none}
.paste-res b{color:var(--ink)}
.paste-res .miss{color:var(--ink-3)}
.paste-note{margin:8px 0 0;font-size:11px;color:var(--ink-3)}
@media(min-width:1180px){.paste{position:fixed;right:16px;top:72px;width:360px;z-index:44;margin:0;max-height:calc(100vh - 160px);overflow:auto}body[data-mode="edit"] .appwrap{margin-right:392px}}
[data-key].pasted input,[data-key].pasted select,[data-key].pasted textarea{background:var(--warn-bg)}   /* 一键粘贴填进来的：淡黄底提示核对 */
@keyframes aiflash{0%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}100%{transform:translateX(0)}}
[data-key].ai-flash{animation:aiflash .5s ease-out}

/* 一键粘贴：按段落回放「这句话 → 认成了哪几项」 */
.seg-map{margin:8px 0 0;display:grid;gap:5px;padding:8px 10px;background:var(--bg);border-radius:10px}
.seg-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline;font-size:12.5px}
.seg-q{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg-a{color:var(--ink);font-weight:600;white-space:nowrap}

/* 离线保存面板 */
.export{margin:16px 0 0;padding:16px 18px;background:var(--bg);border:1px solid var(--line);border-radius:12px}
.export[hidden]{display:none}
.ex-hd b{display:block;font-size:15px;color:var(--ink)}
.ex-hd span{display:block;font-size:12.5px;color:var(--ink-3);margin:3px 0 14px;line-height:1.55}
.ex-opts{display:grid;gap:8px;margin:0 0 12px}
.ex-opt{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:13.5px}
.ex-opt input{margin:2px 0 0;accent-color:var(--red)}
.ex-opt b{color:var(--ink);margin-right:7px}
.ex-opt span{color:var(--ink-2)}
.ex-opt:has(input:checked){border-color:var(--red)}
.ex-pw{display:grid;gap:8px;margin:0 0 12px}
.ex-pw[hidden]{display:none}
.ex-pw input{padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:14px;background:var(--card);color:var(--ink)}
.ex-pw input:focus{outline:2px solid var(--red);outline-offset:-1px}
.ex-pw .mini{margin:0}
.ex-msg{font-size:12.5px;color:var(--ink-2)}
.export .bar{margin:0;align-items:center;gap:14px}
.export .bar a{font-size:12.5px;color:var(--ink-3)}

.panel > .lead.mini-note{font-size:12.5px;color:var(--ink-3);margin-top:-12px}

/* ---------------- 我的证件 ---------------- */
.docdrop{border:2px dashed var(--line);border-radius:14px;padding:26px 18px;text-align:center;cursor:pointer;background:var(--bg);transition:border-color .15s}
.docdrop:hover,.docdrop.over{border-color:var(--red)}
.docdrop b{display:block;font-size:14.5px;color:var(--ink)}
.docdrop span{display:block;margin-top:5px;font-size:12.5px;color:var(--ink-3)}
.doclist{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:12px;margin-top:14px}
.doclist:empty{display:none}
.doc{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden;display:flex;flex-direction:column}
.doc .thumb{height:112px;background:var(--bg-2);display:grid;place-items:center;overflow:hidden}
.doc .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.doc .thumb .pdf{font-size:12px;color:var(--ink-3);font-weight:700;letter-spacing:.08em}
.doc .bd{padding:10px 11px;display:grid;gap:5px}
.doc .nm{font-size:13.5px;font-weight:600;color:var(--ink);border:0;background:transparent;font-family:inherit;padding:0;width:100%}
.doc .nm:focus{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
.doc .kind{display:inline-flex;align-self:flex-start;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--line-2);color:var(--ink-2)}
.doc .kind.ok{background:#FBEDE9;color:var(--red)}
.doc .meta{font-size:11px;color:var(--ink-3)}
.doc .acts{display:flex;gap:10px;margin-top:2px}
.doc .acts a{font-size:11.5px;color:var(--ink-3);cursor:pointer}
.doc .acts a:hover{color:var(--red)}
.docbar{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.docmsg{font-size:12.5px;color:var(--ink-2)}

/* 合并确认 */
.mg-mask{position:fixed;inset:0;background:rgba(18,22,31,.55);z-index:90}
.mg-mask[hidden]{display:none}
.mg{position:fixed;z-index:91;top:50%;left:50%;transform:translate(-50%,-50%);width:min(640px,94vw);max-height:88vh;display:flex;flex-direction:column;background:var(--card);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.3)}
.mg[hidden]{display:none}
.mg-hd{display:flex;align-items:center;padding:18px 22px 10px}
.mg-hd b{font-size:17px;color:var(--ink)}
.mg-hd button{margin-left:auto;border:0;background:transparent;color:var(--ink-3);font-size:22px;cursor:pointer;line-height:1}
.mg-lead{margin:0 22px 14px;font-size:13.5px;color:var(--ink-2);line-height:1.7}
.mg-body{flex:1;overflow-y:auto;padding:0 22px;display:grid;gap:10px}
.mg-row{border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.mg-row .k{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:8px}
.mg-row .k em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--ink-3);margin-left:7px}
.mg-opts{display:grid;gap:7px}
.mg-opt{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ink-2);cursor:pointer;line-height:1.5}
.mg-opt input{margin:3px 0 0;flex:none}
.mg-opt b{color:var(--ink);font-weight:600;word-break:break-all}
.mg-opt .src{font-size:11px;color:var(--ink-3)}
.mg-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px 20px}
.mg-foot .btn{font-size:14px}
@media(max-width:560px){.mg{width:96vw}.mg-body{padding:0 14px}.mg-hd{padding:14px 16px 8px}.mg-lead{margin:0 16px 12px}.mg-foot{padding:14px 16px 18px}}

.hublink{font-size:13.5px;font-weight:600;color:var(--red);text-decoration:none;white-space:nowrap}

/* ---------------- 左侧竖排 tab：我的证件 / 我的资料 ---------------- */
.tabwrap{display:grid;grid-template-columns:168px 1fr;gap:20px;align-items:start}
.vtabs{position:sticky;top:76px;display:grid;gap:8px}
.vtab{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:13px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--card);cursor:pointer;font-family:inherit;text-align:left;width:100%}
.vtab b{font-size:14.5px;font-weight:600;color:var(--ink)}
.vtab span{font-size:11.5px;color:var(--ink-3)}
.vtab:hover{border-color:var(--ink-3)}
.vtab.on{background:var(--red);border-color:var(--red)}
.vtab.on b,.vtab.on span{color:#fff}
.vtab.on span{opacity:.82}
.vpane{min-width:0}
/* 一次只显示一个 tab 的面板 */
body[data-tab="docs"] #p-person,body[data-tab="docs"] #p-passport,body[data-tab="docs"] #p-contact,body[data-tab="docs"] #p-work,body[data-tab="docs"] #paste{display:none}
body[data-tab="data"] #p-docs{display:none}
@media(max-width:860px){
  .tabwrap{grid-template-columns:1fr;gap:14px}
  .vtabs{position:static;grid-template-columns:1fr 1fr;grid-auto-flow:column}
  .vtab{flex-direction:row;align-items:baseline;gap:8px;padding:11px 12px}
}

/* 编辑 ePass 时导航在左侧竖排，顶部那排横向小签就不要了（行程流程还用它） */
body[data-mode="edit"] #prog{display:block;position:static;padding:0;margin:0}
body[data-mode="edit"] #prog .steps-nav{display:none}   /* 编辑态用左侧竖排 tab，顶部步骤条不要 */

/* 「人像照 / 护照资料页」不是另一类东西，就是你的证件，只是要按官网格式再处理一道 */
.docspec{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.docspec > b{display:block;font-size:14px;color:var(--ink);margin-bottom:4px}
.docspec > p{margin:0 0 14px;font-size:13px;color:var(--ink-3);line-height:1.7}

/* 识别开关：事前就摆在这儿，不用弹窗拦人 */
.docauto{display:flex;align-items:flex-start;gap:9px;margin-top:12px;font-size:12.5px;color:var(--ink-3);line-height:1.6;cursor:pointer}
.docauto input{margin:3px 0 0;flex:none;width:16px;height:16px;accent-color:var(--red)}
.docauto b{color:var(--ink);font-weight:600;margin-right:5px}

/* 签证申请才要的两张规格图：ePass 只收清晰原件，裁剪按各国要求在用的时候做 */
.tripshots{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.tripshots h3{margin:0 0 5px;font-size:15px;color:var(--ink)}
.tripshots > p{margin:0 0 14px;font-size:13px;color:var(--ink-3);line-height:1.7}
.tripshots .mini{margin-top:10px}
.doc .kind.wait{background:transparent;border:1px dashed var(--line);color:var(--ink-3);animation:kpulse 1.1s ease-in-out infinite}
@keyframes kpulse{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.doc .kind.wait{animation:none}}
/* 证件到期：电子证件管理最该一眼看到的信息 */
.doc .exp{display:inline-flex;align-self:flex-start;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px}
.doc .exp.ok{background:var(--ok-bg,#EAF6F0);color:#0E8A5F}
.doc .exp.warn{background:#FBF1E2;color:#C56A00}
.doc .exp.bad{background:#F9E9E7;color:#B42318}
.docbar{margin:12px 0 0}
/* 缩略图：证件要看全，不能像头像那样裁掉上半张 */
.doc .thumb{height:120px;background:#fff;padding:6px;box-sizing:border-box}
.doc .thumb img{object-fit:contain;width:100%;height:100%}
/* 证件上多读到的事实：没有默认框也先收着 */
.doc .xtra{display:grid;gap:2px;margin-top:4px}
.doc .xtra div{display:flex;gap:7px;font-size:11px;line-height:1.5}
.doc .xtra em{font-style:normal;color:var(--ink-3);flex:none;max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc .xtra span{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 正反两面：提示合并，不自动合 */
.doctwin{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:11px 14px;border:1px solid var(--red);border-radius:12px;background:#FBEDE9;font-size:13px;color:var(--ink)}
.doctwin[hidden]{display:none}
.doctwin .btn{padding:6px 14px;font-size:13px}
.doctwin a{font-size:12.5px;color:var(--ink-3);cursor:pointer}
.doc .thumb.two{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.doc .thumb.two img{height:100%}
/* 识别中：转圈，别先摆一个「其他证件」再跳 */
.doc .kind .spin{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:dspin .7s linear infinite;font-style:normal}
@keyframes dspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.doc .kind .spin{animation:none;border-right-color:currentColor;opacity:.5}}
.doc .kind.fail{background:#F9E9E7;color:#B42318}
.doc .iss{display:block;font-size:12px;margin-top:5px;font-weight:600}
.doc .iss.ok{color:#15803D}
.doc .iss.warn{color:#B45309}
.doc .iss.bad{color:#B42318}

/* 键盘焦点：全站原来一个都没有 */
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}
.btn:active{transform:translateY(1px)}

/* 编辑态页头的「当前资料卡」：点它回到卡列表（和扩展 popup 一套做法） */
.cardpick{display:flex;align-items:center;gap:10px;width:100%;max-width:360px;text-align:left;cursor:pointer;
  padding:9px 11px;margin:0 0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
  font:inherit;transition:border-color .12s}
.cardpick:hover{border-color:var(--ink-3)}
.cp-av{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:11.5px;font-weight:800;letter-spacing:-.03em;background:var(--ink-2)}
.cp-tx{flex:1;min-width:0}
.cp-tx b{display:block;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-tx span{display:block;font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cardpick svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
