:root{--bg:#f3f6fa;--card:#fff;--ink:#152235;--muted:#5d6b7f;--line:#dce3ec;--brand:#173f73;--brand-d:#0f2f59;--accent:#2c72c7;--soft:#eaf1f9;--ok:#0b7657;--warn:#9b5b0b;--err:#b52d3a;--shadow:0 12px 32px rgba(17,38,68,.08)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#f8fafc 0,#f1f5f9 38%,#edf2f7 100%);color:var(--ink);font:15px/1.55 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
body::before{content:"";position:fixed;inset:0 0 auto;height:260px;background:radial-gradient(circle at 18% -30%,rgba(44,114,199,.16),transparent 48%),radial-gradient(circle at 85% -35%,rgba(23,63,115,.11),transparent 45%);pointer-events:none;z-index:-1}
button,input,select,textarea{font:inherit;color:inherit}button,a,select,input,textarea{transition:border-color .18s,box-shadow .18s,background .18s,color .18s,transform .18s}h1,h2,h3,p{margin:0}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:72px;padding:0 32px;background:rgba(255,255,255,.92);border-bottom:1px solid rgba(220,227,236,.9);box-shadow:0 3px 18px rgba(17,38,68,.035);backdrop-filter:blur(16px)}
.brand{white-space:nowrap;display:inline-flex;align-items:center;gap:11px;color:var(--ink);font-size:18px;font-weight:760;letter-spacing:-.02em;text-decoration:none}
.brand::before{content:"";width:34px;height:34px;border-radius:10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M7 3.5h7l3 3V20.5H7z'/%3E%3Cpath d='M14 3.5v3h3M9.5 11h5M9.5 14h5M9.5 17h3.5'/%3E%3C/svg%3E"),linear-gradient(145deg,#2f75c9,#143b6d);background-size:21px,auto;background-position:center;background-repeat:no-repeat;box-shadow:0 7px 14px rgba(23,63,115,.22)}
.top .right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.top .who{margin:0 4px;color:var(--muted);font-size:12px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#app{position:relative;max-width:1180px;margin:0 auto;padding:38px 24px 76px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#2a394e;cursor:pointer;font-weight:650;text-decoration:none;box-shadow:0 1px 2px rgba(17,38,68,.03)}
.btn:hover{border-color:#aebccc;background:#f9fbfd;transform:translateY(-1px);box-shadow:0 5px 14px rgba(17,38,68,.08)}.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,#1d548f,#173f73);border-color:#173f73;color:#fff;box-shadow:0 7px 16px rgba(23,63,115,.18)}.btn.primary:hover{background:linear-gradient(135deg,#2464a7,#12365f);border-color:var(--brand-d)}
.btn.danger{color:var(--err);border-color:#efd3d7;background:#fffafa}.btn.link{min-height:36px;border:0;background:transparent;color:#35516f;padding:6px 9px;box-shadow:none}.btn.link:hover{background:var(--soft);color:var(--brand);transform:none}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
select,input:not([type=checkbox]),textarea{width:100%;padding:11px 13px;border:1px solid #cfd8e4;border-radius:9px;background:#fff;box-shadow:0 1px 2px rgba(17,38,68,.025)}input:hover,textarea:hover,select:hover{border-color:#aebccc}input:focus,textarea:focus,select:focus,.btn:focus-visible,.chip:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(44,114,199,.14)}
.top select{width:auto;min-width:116px;padding:8px 32px 8px 11px;background-color:#f8fafc}textarea{resize:vertical;min-height:92px}.muted{color:var(--muted)}
.hero{display:flex;flex-direction:column;gap:5px;margin-bottom:22px}.hero h1{font-size:30px;line-height:1.22;letter-spacing:-.035em}.hero p{color:var(--muted);font-size:15px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;padding:0;margin:0 0 28px}.steps li{position:relative;display:flex;align-items:center;gap:9px;padding:10px 14px;color:var(--muted);font-size:13px;font-weight:650;border-bottom:2px solid #dce4ed}.steps li::before{content:"";width:7px;height:7px;border:2px solid #aeb9c7;border-radius:50%;background:#fff}.steps li.on{color:var(--brand);border-color:var(--brand)}.steps li.on::before{border-color:var(--brand);background:var(--brand);box-shadow:0 0 0 4px rgba(23,63,115,.1)}.steps li.click{cursor:pointer}.steps li.click:hover{color:var(--brand);background:#f7fafe}
.card{background:rgba(255,255,255,.97);border:1px solid rgba(213,222,233,.95);border-radius:15px;padding:22px;box-shadow:0 4px 18px rgba(17,38,68,.045)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.tcard{position:relative;display:flex;flex-direction:column;gap:11px;width:auto;padding:16px;overflow:hidden}.tcard:hover{border-color:#9eb7d2;box-shadow:var(--shadow);transform:translateY(-3px)}.thumb{border:1px solid #dfe5ec;overflow:hidden;background:#fff;box-shadow:0 6px 18px rgba(17,38,68,.09);margin:0 auto;border-radius:5px}.tcard h3{font-size:17px;letter-spacing:-.015em}.tcard p{font-size:13px;color:var(--muted);min-height:61px;flex:1}.tcard .btn{width:100%}
.auth{max-width:460px;margin:38px auto;padding:34px 36px;box-shadow:0 22px 60px rgba(17,38,68,.11)}.auth h2{font-size:25px;letter-spacing:-.025em;margin-bottom:5px}.auth form{display:flex;flex-direction:column;gap:16px;margin-top:23px}.auth form>.btn.primary{margin-top:2px}.err{color:var(--err);font-size:13px;min-height:0}.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted)}.check input{margin-top:3px;accent-color:var(--brand)}
.fld{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:650}.fld span{color:#3b4a5e}.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.cols.three{grid-template-columns:repeat(3,1fr)}.span2{grid-column:1/-1}
.form-sec{margin-bottom:20px}.form-sec>h2{display:flex;align-items:center;gap:10px;font-size:18px;margin-bottom:18px;letter-spacing:-.015em}.form-sec>h2::before{content:"";width:4px;height:20px;border-radius:3px;background:linear-gradient(var(--accent),var(--brand))}.entry{border:1px solid #d9e1ea;border-radius:11px;padding:17px;margin-bottom:13px;background:#fbfcfe}.entry-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:700;color:#536276}.inline-check{display:flex;align-items:center;gap:8px;font-weight:500;font-size:13px}.inline-check input{width:auto;accent-color:var(--brand)}
.actions{position:sticky;bottom:14px;z-index:10;display:flex;gap:10px;justify-content:space-between;margin-top:14px;padding:12px;border:1px solid rgba(213,222,233,.9);border-radius:13px;background:rgba(255,255,255,.91);box-shadow:0 8px 28px rgba(17,38,68,.11);backdrop-filter:blur(12px)}
.list-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:12px;flex-wrap:wrap}.list-head h1{font-size:30px;letter-spacing:-.035em}.rlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.rcard{display:flex;gap:18px;padding:17px;align-items:flex-start;width:100%}.rcard:hover{border-color:#b3c2d2;box-shadow:var(--shadow)}.rcard .meta{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}.rcard .meta b{font-size:17px}.rcard .meta span{font-size:13px}.rcard .row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.toolbar{position:sticky;top:84px;z-index:20;display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px;padding:10px;border:1px solid rgba(213,222,233,.92);border-radius:13px;background:rgba(255,255,255,.92);box-shadow:0 9px 26px rgba(17,38,68,.08);backdrop-filter:blur(14px)}.toolbar .grow{flex:1 1 100%;order:5}.toolbar .status{margin-left:auto}.chips{display:flex;gap:5px;flex-wrap:wrap}.chip{padding:7px 11px;border-radius:8px;border:1px solid transparent;background:transparent;color:#5a687a;cursor:pointer;font-size:12px}.chip:hover{background:#f0f4f8}.chip.on{background:var(--soft);border-color:#b9cee4;color:var(--brand);font-weight:700}.status{font-size:12px;padding:6px 10px;border-radius:7px;background:#fff4df;color:var(--warn);font-weight:700}.status.ok{background:#e6f5ef;color:var(--ok)}
.tip{font-size:13px;color:var(--muted);margin-bottom:12px}.stage{background:linear-gradient(145deg,#dbe3ec,#cdd7e3);border:1px solid #cbd5e1;border-radius:15px;padding:30px;overflow:hidden;box-shadow:inset 0 1px 5px rgba(17,38,68,.09)}.scaler{margin:0 auto}.page-host{position:relative;transform-origin:0 0;width:794px;box-shadow:0 18px 46px rgba(17,38,68,.25)}
.modal-bg{position:fixed;inset:0;background:rgba(10,23,41,.68);display:flex;padding:22px;z-index:50;overflow:auto;backdrop-filter:blur(7px)}.modal{background:#fff;border:1px solid rgba(255,255,255,.7);border-radius:20px;padding:30px;max-width:900px;width:100%;margin:auto;box-shadow:0 32px 90px rgba(5,15,29,.28)}.modal h2{font-size:25px;letter-spacing:-.025em}.modal .sub{color:var(--muted);margin:5px 0 20px}.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.plan{border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px;position:relative;background:#fbfcfe}.plan:hover{border-color:#9fb5cd;box-shadow:0 10px 28px rgba(17,38,68,.09)}.plan.best{border-color:var(--brand);background:linear-gradient(180deg,#f3f7fc,#fff);box-shadow:0 0 0 2px rgba(23,63,115,.09)}.plan .tag{position:absolute;top:-11px;right:13px;background:var(--brand);color:#fff;font-size:10px;padding:3px 10px;border-radius:999px;font-weight:800;letter-spacing:.05em}.plan .price{font-size:32px;font-weight:800;letter-spacing:-.04em}.plan p{color:var(--muted);font-size:13px;flex:1}.modal .foot{margin-top:18px;text-align:right}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#17263a;color:#fff;padding:11px 18px;border-radius:10px;opacity:0;transition:.2s;pointer-events:none;max-width:90vw;z-index:60;font-size:14px;box-shadow:0 8px 25px rgba(0,0,0,.2)}#toast.show{opacity:1;transform:translateX(-50%)}#toast.err{background:var(--err)}#toast.ok{background:var(--ok)}
.sitefoot{text-align:center;padding:0 16px 36px;font-size:12px;color:var(--muted)}.sitefoot a,.check a,.tip a{color:var(--brand)}.sitefoot .biz{margin-top:7px;font-size:11px}.modal.narrow{max-width:640px}.qrbox{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}.qr{width:210px;height:210px;object-fit:contain;border:1px solid var(--line);border-radius:14px;background:#fff;padding:8px}.qrmeta{display:flex;flex-direction:column;gap:9px;min-width:190px;flex:1}.code b{font-family:ui-monospace,Consolas,monospace;font-size:16px;background:#edf2f7;padding:3px 8px;border-radius:6px}.steps-list{padding-left:20px;margin:15px 0;font-size:14px}.steps-list li{margin:5px 0}.refform{display:flex;flex-direction:column;gap:11px;margin-top:9px}
.guide{background:#f3f7fc;border:1px solid #d3e0ee;border-radius:10px;padding:10px 14px;margin:0 0 15px}.guide summary{cursor:pointer;font-weight:700;color:#25558b;list-style-position:inside}.guide ul{margin:9px 0 4px;padding-left:20px;font-size:14px;color:#455469}.guide li{margin:5px 0}.guide.checklist{background:#f0f8f5;border-color:#cbe5db}.guide.checklist summary{color:var(--ok)}.guide.checklist ul{list-style:none;padding-left:4px}.guide.checklist li::before{content:"\2610\00a0"}.cols>.span2>.guide{margin-bottom:0}.promo{border:1px solid #c9dced;background:linear-gradient(135deg,#f2f7fc,#f8fbfe);border-radius:14px;padding:17px 18px;margin:7px 0 18px}.promo h3{font-size:18px;margin-bottom:5px}.promo p{font-size:14px;color:#455469}.promo .steps-list{margin:11px 0}.promo .btn{align-self:flex-start}.promo .refform{margin-top:13px}
[data-action]::before{display:inline-block;width:16px;height:16px;line-height:16px;text-align:center;font-size:15px;font-weight:500}[data-action="new-resume"]::before{content:"＋";content:"＋" / ""}[data-action="download"]::before{content:"↓";content:"↓" / ""}[data-action="edit-info"]::before{content:"✎";content:"✎" / ""}[data-action="add-exp"]::before,[data-action="add-edu"]::before{content:"＋";content:"＋" / ""}[data-action="delete-resume"]::before{content:"×";content:"×" / ""}[data-action="open-resume"]::before{content:"↗";content:"↗" / ""}[data-action="export-data"]::before{content:"⇩";content:"⇩" / ""}[data-action="logout"]::before{content:"↪";content:"↪" / ""}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rlist{grid-template-columns:1fr}.top{padding:0 20px}}
@media (max-width:720px){#app{padding:25px 14px 62px}.top{position:relative;min-height:64px;padding:10px 14px;flex-wrap:wrap;row-gap:4px}.top .right{justify-content:flex-end;flex:1 1 auto}.top .who{display:none}.brand{font-size:16px;white-space:nowrap}.brand::before{width:31px;height:31px}.hero h1,.list-head h1{font-size:25px}.cols,.cols.three{grid-template-columns:1fr}.span2{grid-column:auto}.plans,.grid{grid-template-columns:1fr}.tcard{max-width:290px;width:100%;justify-self:center}.tcard p{min-height:0}.stage{padding:8px}.toolbar{position:relative;top:auto}.toolbar .grow{flex:1 1 100%;order:5;flex-wrap:nowrap;overflow:auto;padding-bottom:2px}.toolbar .btn.primary{margin-left:auto}.chip{white-space:nowrap}.modal-bg{padding:12px}.modal{padding:22px 17px;border-radius:16px}.auth{margin:16px auto;padding:27px 22px}.steps li{padding:9px 5px;font-size:11px;justify-content:center}.steps li::before{display:none}.actions{bottom:8px}.rcard{gap:12px}.qr{width:185px;height:185px}}
@media print{@page{size:A4;margin:0}.top,#toast,.toolbar,.steps,.tip,.modal-bg,.sitefoot{display:none!important}body{background:#fff}body::before{display:none}#app{padding:0;max-width:none}.stage{background:none;padding:0;border:0;border-radius:0}.scaler{width:auto!important;height:auto!important}.page-host{transform:none!important;box-shadow:none}.page{min-height:296mm!important}}

/* Photo upload in the form */
.photo-field{margin-bottom:8px}.pl-label{display:block;font-size:13px;font-weight:650;color:#3b4a5e;margin-bottom:8px}
.photo-row{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.photo-prev{width:104px;height:104px;border-radius:14px;object-fit:cover;border:1px solid var(--line);background:#eef2f7;flex:none}
.photo-prev.empty{background:#eef2f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='38' r='17' fill='%23a9b5c6'/%3E%3Cpath d='M16 100c2-24 16-36 34-36s32 12 34 36z' fill='%23a9b5c6'/%3E%3C/svg%3E") center/cover}
.photo-row .btn{margin-right:8px}.photo-row .tip{margin-bottom:10px;max-width:420px}
.photo-edit{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.photo-edit canvas{width:200px;height:200px;border-radius:14px;border:1px solid var(--line);background:#fff;flex:none}
.photo-ctl{display:flex;flex-direction:column;gap:12px;flex:1;min-width:200px;max-width:340px}
input[type=range]{padding:0;border:0;box-shadow:none;background:transparent;accent-color:var(--brand);min-height:24px}
.row-btns{display:flex;gap:10px;flex-wrap:wrap}

/* settings gear + page */
[data-action="settings"]::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 8.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM19.4 13a7.6 7.6 0 000-2l2-1.6-2-3.4-2.4 1a7.7 7.7 0 00-1.7-1L15 3.4h-4l-.3 2.6a7.7 7.7 0 00-1.7 1l-2.4-1-2 3.4 2 1.6a7.6 7.6 0 000 2l-2 1.6 2 3.4 2.4-1c.5.4 1.1.7 1.7 1l.3 2.6h4l.3-2.6c.6-.3 1.2-.6 1.7-1l2.4 1 2-3.4z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 8.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM19.4 13a7.6 7.6 0 000-2l2-1.6-2-3.4-2.4 1a7.7 7.7 0 00-1.7-1L15 3.4h-4l-.3 2.6a7.7 7.7 0 00-1.7 1l-2.4-1-2 3.4 2 1.6a7.6 7.6 0 000 2l-2 1.6 2 3.4 2.4-1c.5.4 1.1.7 1.7 1l.3 2.6h4l.3-2.6c.6-.3 1.2-.6 1.7-1l2.4 1 2-3.4z'/></svg>") center/contain no-repeat}
.set-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.set-tabs{display:flex;flex-direction:column;gap:4px;position:sticky;top:16px}
.set-tab{appearance:none;border:0;background:transparent;text-align:left;padding:10px 14px;border-radius:8px;font:inherit;font-weight:600;color:inherit;opacity:.72;cursor:pointer}
.set-tab:hover{background:rgba(127,127,127,.12);opacity:1}
.set-tab.on{background:rgba(127,127,127,.18);opacity:1;box-shadow:inset 3px 0 0 currentColor}
.set-body{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:720px){
  [data-action="settings"] span{display:none}
  .set-layout{grid-template-columns:1fr;gap:14px}
  .set-tabs{flex-direction:row;overflow-x:auto;position:static;border-bottom:1px solid rgba(127,127,127,.25);padding-bottom:4px}
  .set-tab{white-space:nowrap;padding:8px 12px}
  .set-tab.on{box-shadow:inset 0 -3px 0 currentColor}
}
.set-body .form-sec{margin-bottom:0}
/* forum entry icon (speech bubble) + forum pages + local-storage notice */
[data-action="forum"]::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M4 4h16a2 2 0 012 2v9a2 2 0 01-2 2H9l-5 4v-4H4a2 2 0 01-2-2V6a2 2 0 012-2zM8 9.3a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4zM12 9.3a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4zM16 9.3a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M4 4h16a2 2 0 012 2v9a2 2 0 01-2 2H9l-5 4v-4H4a2 2 0 01-2-2V6a2 2 0 012-2zM8 9.3a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4zM12 9.3a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4zM16 9.3a1.2 1.2 0 100 2.4 1.2 1.2 0 000-2.4z'/></svg>") center/contain no-repeat}
.head-actions{display:flex;gap:8px;flex-wrap:wrap}
.localnote{margin:-6px 0 18px}
.post{margin-bottom:12px}
.post-title{appearance:none;border:0;background:transparent;padding:0;text-align:left;font:inherit;font-size:17px;font-weight:700;color:var(--brand);cursor:pointer}
.post-title:hover{text-decoration:underline}
.post-snippet{margin:6px 0 8px;color:var(--muted);overflow-wrap:anywhere}
.post-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.post-meta{font-size:13px;color:var(--muted);margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.post-meta .btn.link{min-height:0;padding:0 4px;font-size:13px}
.reply{margin-bottom:10px}
.sub-h{font-size:16px;margin:22px 0 10px}
.tipbanner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.tipbanner p{margin:0}
@media (max-width:720px){[data-action="forum"] span{display:none}.head-actions .btn{flex:1 1 auto}}