/* Product UI only. The candidate A4 template remains in style.css. */
:root {
  color-scheme:light;
  --page:#F8FAFF; --surface:#FFFFFF; --text:#14263F; --sub:#526580;
  --line:#DCE5F2; --accent:#365FD7; --on-accent:#FFFFFF; --tint:#EDF2FF;
  --hero-start:#FFFFFF; --hero-end:#EDF3FF; --halo:#EDF3FF;
  --shadow:0 1px 3px #1c34520a,0 5px 16px #1c345205;
  --hero-shadow:0 2px 5px #153e7810,0 10px 24px #254fa413;
  --warning-bg:#FFF7E6; --warning-text:#74521A; --warning-line:#C18B26;
  --error-bg:#FFF0F0; --error-text:#9C3434; --error-line:#C45151;
  --paper-back:#D6E3FF; --paper-back-line:#C4D7FC;
  font-size:15px; color:var(--text); background:var(--page);
}
:root[data-theme="night"] {
  color-scheme:dark;
  --page:#101A2C; --surface:#1C2B43; --text:#EDF3FF; --sub:#B6C6DE;
  --line:#3A4E6C; --accent:#A3BCFF; --on-accent:#172858; --tint:#30486E;
  --hero-start:#263B5D; --hero-end:#1B2D4B; --halo:#253A5D;
  --shadow:0 1px 3px #00000025,0 5px 16px #00000018;
  --hero-shadow:0 2px 5px #00000020,0 10px 24px #00000030;
  --warning-bg:#3C321F; --warning-text:#F2D494; --warning-line:#CDA34A;
  --error-bg:#432A34; --error-text:#FFB9BE; --error-line:#DD818B;
  --paper-back:#476A9F; --paper-back-line:#6785B0;
}
body{background:var(--page);color:var(--text)}
.phone{background:radial-gradient(ellipse at 100% 0%,var(--halo),transparent 43%),var(--page);border-color:var(--line)}
header{gap:12px;border-color:var(--line);font-weight:600;background:transparent}
header .brand-logo{width:144px;max-width:52%;height:auto;filter:none}
:root[data-theme="night"] header .brand-logo{background:#F8FAFF;border-radius:12px}
header small{font-size:11px;color:var(--sub)}
.demo{color:var(--sub);background:var(--tint);border-color:var(--line);border-bottom-style:solid;font-size:11px}
h1{font-size:28px;font-weight:650;letter-spacing:-.025em;line-height:1.35;margin:8px 0 12px}
h2{font-size:18px;margin:10px 0}h3{font-size:16px;margin:6px 0}
small,.muted{color:var(--sub);font-size:12px}
.eyebrow{color:var(--sub);font-size:12px;letter-spacing:.07em;margin:4px 0 10px}
.card{background:var(--surface);border-color:var(--line);border-radius:18px;padding:18px;margin:16px 0;box-shadow:var(--shadow);overflow-wrap:anywhere}
.card h3{margin-top:12px}
article.card>.row:last-child{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
.row{gap:8px}
button,.button{background:var(--surface);color:var(--text);border-color:var(--line);border-radius:12px;min-height:44px;padding:10px 14px;font-size:14px}
button.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);border-radius:12px;min-height:50px;font-size:15px;box-shadow:0 3px 9px #315fda20}
button.secondary{background:var(--surface);color:var(--accent);box-shadow:none}
.link{color:var(--accent);background:transparent;border:0;text-decoration:none;min-height:44px;padding:8px}
button:hover:not(:disabled){box-shadow:0 0 0 1px var(--line)}
button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button:disabled{opacity:.5}
.danger{color:var(--error-text)}
.tag{background:var(--tint);color:var(--accent);border-color:var(--line);border-radius:7px;font-size:12px;padding:3px 8px;font-weight:500}
.notice{background:var(--warning-bg);color:var(--warning-text);border-color:var(--warning-line);border-radius:0 12px 12px 0;font-size:13px;padding:13px}
.notice.error{background:var(--error-bg);color:var(--error-text);border-color:var(--error-line)}
input,textarea,select{background:var(--surface);color:var(--text);border-color:var(--line);border-radius:12px;min-height:44px;padding:12px;font-size:14px;box-shadow:inset 0 1px 3px #1e345207}
input::placeholder,textarea::placeholder{color:var(--sub);opacity:1}
input[type="file"]{font-size:12px;max-width:100%;overflow:hidden}
input[type="file"]::file-selector-button{font:inherit;background:var(--tint);color:var(--accent);border:1px solid var(--line);border-radius:8px;padding:6px;margin-right:8px}
label{font-size:13px;color:var(--sub)}
summary{color:var(--sub);min-height:36px;padding:5px 0}
details{margin:10px 0}hr,.step{border-color:var(--line)}
.number{background:var(--tint);color:var(--accent);border-radius:8px}
.image{background:var(--tint);color:var(--sub);border-color:var(--line);border-radius:12px}
.empty{color:var(--sub);border-color:var(--line);background:var(--surface);border-radius:18px;padding:28px 16px}
.toolbar{border-color:var(--line);margin-top:28px;padding-top:16px}
.toolbar summary{font-size:12px}
nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:var(--surface);border-color:var(--line);padding:10px 8px max(10px,env(safe-area-inset-bottom));box-shadow:0 -3px 16px #22395508}
nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:5px 2px;min-height:52px;font-size:11px;color:var(--sub);border-radius:10px;background:transparent}
nav button svg{width:19px;height:19px;flex-shrink:0}
nav button.active{background:transparent;color:var(--accent);font-weight:600}
nav button.active::before{content:"";position:absolute;top:0;width:25px;height:3px;border-radius:3px;background:var(--accent)}
nav button.active svg{margin-top:4px}
#toast{background:var(--text);color:var(--surface);bottom:94px;border-radius:12px;font-size:13px;box-shadow:var(--shadow)}
dialog{background:var(--surface);color:var(--text);border-color:var(--line);border-radius:18px;box-shadow:var(--hero-shadow)}
dialog::backdrop{background:#08152d80}
/* The home illustration is decorative, not a generated resume preview. */
.maker-card{position:relative;border-radius:22px;background:linear-gradient(145deg,var(--hero-start),var(--hero-end));box-shadow:var(--hero-shadow);padding:18px}
.maker-card h2{font-size:17px;margin:0 0 10px}
.maker-card p{font-size:13px;color:var(--sub)}
.doc-art{position:relative;width:170px;height:116px;margin:12px auto 16px;pointer-events:none}
.doc-back{position:absolute;left:24px;top:4px;width:98px;height:106px;transform:rotate(-12deg);background:var(--paper-back);border:1px solid var(--paper-back-line);border-radius:9px}
.doc-front{position:absolute;left:49px;top:2px;width:107px;height:108px;transform:rotate(7deg);background:#FFFFFF;border:1px solid #DCE5F2;border-radius:9px;padding:12px;box-shadow:0 7px 16px #1f3d7524}
.doc-front b{display:block;font-size:11px;color:#213957}
.doc-front i{display:block;height:3px;background:#C3D1E5;border-radius:2px;margin:5px 0}
.doc-front i:first-of-type{width:36px;background:#4F76D5;margin-top:8px}
.doc-front small{position:absolute;bottom:8px;right:10px;font-size:9px;color:#586B87}
.doc-check{position:absolute;bottom:1px;right:1px;display:grid;place-items:center;width:27px;height:27px;border:3px solid var(--surface);border-radius:50%;background:var(--accent);color:var(--on-accent)}
.doc-check svg{width:14px;height:14px}
.appearance-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px}
.appearance-row>span{font-size:14px;font-weight:500}
.mode-segments{display:flex;position:relative;align-items:center;height:44px;isolation:isolate;flex-shrink:0}
.mode-segments::before{content:"";position:absolute;inset:7px 0;border:1px solid var(--line);border-radius:999px;background:var(--tint);z-index:-1}
.mode-segments button{display:flex;align-items:center;justify-content:center;width:52px;height:44px;min-height:44px;border:0;background:transparent;padding:0 4px;font-size:12px;color:var(--sub);box-shadow:none}
.mode-segments button span{display:flex;align-items:center;justify-content:center;width:100%;height:24px;border-radius:999px}
.mode-segments button[aria-pressed="true"] span{background:var(--surface);color:var(--accent);box-shadow:0 1px 4px #23375418;font-weight:600}
/* Preserve the existing candidate paper in both product modes. */
.a4{color:#222;color-scheme:light}
.a4 .muted,.a4 small{color:#666;font-size:12px}
.checkline{display:flex;align-items:center;gap:8px;min-height:44px;font-size:12px}
.checkline input[type="checkbox"]{width:16px;height:16px;min-height:0;padding:0;flex-shrink:0;margin:0}
@media(max-width:360px){h1{font-size:27px}.card{padding:16px}.maker-card{padding:17px 14px}header{padding-inline:18px}}