@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --page-bg: #f2f4f7;
  --card-bg: #ffffff;
  --border: #cfd6dd;
  --ink: #2d3d46;
  --muted: #7e8992;
  --tag-bg: #eef2f6;
  --blue: #087cff;
  --font: 'Manrope', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --a4-template-scale: 1.33315;
  --a4-scale: 1.9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  font-family: var(--font);
  background: var(--page-bg);
  overflow-x: hidden;
}
button, input { font: inherit; }
a { color: inherit; }

.site-toolbar {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: min(calc(595px * var(--a4-scale)), calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  margin: 12px auto;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.34) 46%, rgba(242,247,255,.58)),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.9), transparent 34%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -1px 10px rgba(88,103,126,.08),
    0 18px 42px rgba(31, 42, 55, 0.12);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  overflow: hidden;
  isolation: isolate;
}

.site-toolbar::before,
.site-toolbar::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.site-toolbar::before {
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(110deg, rgba(255,255,255,.86), transparent 19% 73%, rgba(255,255,255,.54)),
    linear-gradient(180deg, rgba(8,124,255,.14), transparent 32%);
  opacity: .72;
  mix-blend-mode: screen;
}

.site-toolbar::after {
  inset: 1px;
  border-radius: 15px;
  box-shadow:
    inset 11px 0 16px rgba(255,255,255,.38),
    inset -10px 0 16px rgba(77,94,117,.09),
    inset 0 10px 18px rgba(255,255,255,.36),
    inset 0 -8px 18px rgba(50,65,84,.08);
}

.brand {
  justify-self: start;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
}

.site-toolbar nav,
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-toolbar nav { justify-self: center; }
.toolbar-actions { justify-self: end; }

.site-toolbar nav a,
.toolbar-btn {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--ink);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.toolbar-btn,
.site-toolbar nav a:hover {
  border-color: rgba(217, 222, 228, .78);
  background: rgba(246, 248, 250, .64);
}

.toolbar-btn.active,
.toolbar-btn.primary {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

body:not(.is-editing) [data-action='reset'] { display: none; }

.template-stage {
  display: grid;
  gap: 32px;
  width: calc(595px * var(--a4-scale));
  margin: 18px auto 72px;
  padding: 0;
}


.figma-page {
  position: relative;
  scroll-margin-top: 78px;
  width: calc(595px * var(--a4-scale));
  min-height: calc(842px * var(--a4-scale));
  height: calc(842px * var(--a4-scale));
  background: var(--page-bg);
  box-shadow: -18px 20px 34px rgba(30, 40, 50, 0.08), 40px 24px 40px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.resume-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 595px;
  height: 842px;
  padding: 20px;
  background: var(--page-bg);
  overflow: hidden;
  transform: scale(var(--a4-scale));
  transform-origin: top left;
}

.resume-section {
  position: absolute;
  left: 20px;
  width: 555px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  overflow: hidden;
}

.header-section { top: 20px; height: 300px; }
.capabilities-section { top: 330px; height: 94px; }
.certifications-section { top: 434px; height: 80px; }
.page-two-work { top: 20px; height: 777px; }
.education-section { top: 524px; height: 273px; }

.profile-banner {
  position: absolute;
  inset: 0 0 auto;
  height: 140px;
  background-image: url('./assets/template-banner-purple.png');
  background-size: cover;
  background-position: center;
}

.profile-main {
  position: absolute;
  left: 20px;
  top: 90px;
  width: 192px;
  height: 190px;
}

.profile-photo {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100px;
  height: 100px;
  padding: 3px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}

.profile-photo input,
.logo-box input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.profile-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 42%;
  transform: none;
}

.profile-copy {
  position: absolute;
  left: 0;
  top: 110px;
  width: 192px;
  height: 52px;
}

h1, h2, h3, p { margin: 0; }
h1 {
  height: 24px;
  color: var(--ink);
  font-size: 21px;
  line-height: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.location-line {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 12px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
  line-height: 12px;
  font-weight: 500;
}

.location-pin {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.medium-line {
  margin-top: 2px;
  color: var(--ink);
  font-size: 8px;
  line-height: 12px;
  font-weight: 700;
}

.portfolio-button {
  position: absolute;
  left: 0;
  top: 172px;
  display: grid;
  place-items: center;
  width: 86px;
  height: 18px;
  border-radius: 5px;
  color: #fff;
  background: var(--blue);
  font-size: 6px;
  line-height: 8px;
  font-weight: 700;
  text-decoration: none;
}

.profile-details {
  position: absolute;
  left: 284px;
  top: 160px;
  width: 250px;
  height: 120px;
}

.detail-block { margin-top: 6px; }
.detail-block.compact { margin-top: 0; }
.detail-block p,
.small-heading {
  color: #405265;
  font-size: 6.4px;
  line-height: 8px;
  font-weight: 500;
}

.small-heading { margin-bottom: 4px; }
.tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 12px;
  padding: 2px 4px;
  border-radius: 2px;
  color: #2d3d46;
  background: var(--tag-bg);
  font-size: 6.4px;
  line-height: 8px;
  font-weight: 700;
  white-space: nowrap;
}
.tools-tags .tag {
  font-size: 6.8px;
  line-height: 8.5px;
}

.icon-tag img {
  display: block;
  width: 9px;
  height: 9px;
  object-fit: contain;
}

.wide-icon-tag img {
  width: 14px;
  height: 9px;
}

.logo-only-tag {
  min-width: 28px;
  justify-content: center;
  padding-inline: 5px;
}

.logo-only-tag img {
  width: 26px;
  height: 9px;
}

.logo-only-tag .logo-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.is-editing .logo-only-tag {
  justify-content: flex-start;
}

.is-editing .logo-only-tag .logo-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

.ai-agents-block { margin-top: 6px; }
.ai-agent-tags { gap: 3px; }

.language-tags .tag { font-weight: 600; }
.compact-social-block { margin-top: 7px; }
.compact-social-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 5px;
}
.compact-social-icon {
  display:inline-flex;
  align-items:center;
  gap:3px;
  min-width:0;
  max-width:88px;
  min-height:16px;
  padding:1px 4px 1px 2px;
  border-radius:4px;
  color:#2d3d46;
  background:var(--tag-bg);
  text-decoration:none;
  overflow:visible;
}
.compact-social-icon svg { width:12px; height:12px; fill:currentColor; }
.compact-social-icon img { width:13px; height:13px; display:block; object-fit:contain; }
.compact-social-icon .social-icon-mark {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:14px;
  height:14px;
  border-radius:4px;
  color:#fff;
  background:#333;
  overflow:hidden;
}
.compact-social-icon .compact-social-value {
  display:block;
  min-width:0;
  color:#405265;
  font-size:5px;
  line-height:6px;
  font-weight:700;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
.compact-social-icon.brand-wechat .social-icon-mark{background:#07c160}
.compact-social-icon.brand-google .social-icon-mark{background:#fff;box-shadow:inset 0 0 0 1px rgba(45,61,70,.08)}
.compact-social-icon.brand-github .social-icon-mark{background:#fff;box-shadow:inset 0 0 0 1px rgba(45,61,70,.12)}
.compact-social-icon.brand-github img{width:14px;height:14px}
.compact-social-icon.brand-x .social-icon-mark{background:#000}
.compact-social-icon.brand-website .social-icon-mark{background:#087cff}
.flag { position: relative; display: inline-block; width: 12px; height: 8px; border-radius: 1px; overflow: hidden; box-shadow: inset 0 0 0 .4px rgba(0,0,0,.18); }
.flag-cn { background: #de2910; }
.flag-cn i { position:absolute; width:2px; height:2px; background:#ffde00; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.flag-cn i:nth-child(1){width:4px;height:4px;left:1.5px;top:1.5px}.flag-cn i:nth-child(2){left:6px;top:1px}.flag-cn i:nth-child(3){left:8px;top:3px}.flag-cn i:nth-child(4){left:8px;top:5px}.flag-cn i:nth-child(5){left:6px;top:6px}
.flag-uk { background:#012169; }
.flag-uk::before,.flag-uk::after,.flag-uk i{content:'';position:absolute;inset:0}.flag-uk::before{background:linear-gradient(32deg,transparent 42%,#fff 42%,#fff 58%,transparent 58%),linear-gradient(-32deg,transparent 42%,#fff 42%,#fff 58%,transparent 58%)}.flag-uk::after{background:linear-gradient(32deg,transparent 46%,#c8102e 46%,#c8102e 54%,transparent 54%),linear-gradient(-32deg,transparent 46%,#c8102e 46%,#c8102e 54%,transparent 54%)}.flag-uk i:nth-child(1){background:linear-gradient(90deg,transparent 38%,#fff 38%,#fff 62%,transparent 62%)}.flag-uk i:nth-child(2){background:linear-gradient(0deg,transparent 33%,#fff 33%,#fff 67%,transparent 67%)}.flag-uk i:nth-child(3){background:linear-gradient(90deg,transparent 43%,#c8102e 43%,#c8102e 57%,transparent 57%),linear-gradient(0deg,transparent 40%,#c8102e 40%,#c8102e 60%,transparent 60%)}
.pte-logo {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 8px;
  overflow: hidden;
}
.pte-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.section-inner { position: absolute; left: 20px; top: 16px; width: 515px; }
.capabilities-stack {
  position:absolute;
  left:20px;
  top:14px;
  width:515px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.capability-row { display:flex; align-items:flex-start; gap:12px; }
.capability-row h2 { flex:0 0 72px; margin-top:1px; }
.capability-tags { flex:1; align-content:flex-start; gap:4px; }
.capability-row:last-child { padding-bottom: 8px; }
h2 {
  color: var(--ink);
  font-size: 12px;
  line-height: 12px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.companies-inner h2 { margin-bottom: 19px; }
.certifications-inner { top:14px; }
.certifications-inner h2 { margin-bottom:12px; }
.certifications-inner .certification-row {
  position:static;
  display:flex;
  gap:50px;
}
.social-logo-row { display: flex; align-items: center; gap: 20px; }
.social-logo-item {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 78px;
  height: 18px;
  color: var(--ink);
  text-decoration: none;
}
button.social-logo-item,
button.compact-social-icon {
  appearance:none;
  border: 0;
  font: inherit;
  cursor: pointer;
  text-align:left;
}
button.social-logo-item { background:transparent; }
.social-icon { display:grid; place-items:center; width:16px; height:16px; border-radius:4px; color:#fff; background:#333; overflow:hidden; }
.social-icon-mark { display:grid; place-items:center; width:12px; height:12px; }
.social-icon svg { width: 11px; height: 11px; fill: currentColor; }
.social-icon img { width: 12px; height: 12px; display:block; object-fit: contain; }
.social-logo-item strong { display:block; font-size:6px; line-height:7px; font-weight:800; }
.social-logo-item small { display:block; max-width:58px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:5px; line-height:6px; font-weight:700; }
.brand-wechat .social-icon{background:#07c160}.brand-google .social-icon{background:#fff;box-shadow:inset 0 0 0 1px rgba(45,61,70,.08)}.brand-github .social-icon{background:#fff;box-shadow:inset 0 0 0 1px rgba(45,61,70,.12)}.brand-github .social-icon img{width:13px;height:13px}.brand-x .social-icon{background:#000}.brand-website .social-icon{background:#087cff}.brand-website .social-icon svg{width:12px;height:12px}

.work-header {
  position: relative;
  height: 60px;
  border-bottom: 1px solid var(--border);
}
.work-header h2 { position:absolute; left:20px; top:16px; }
.work-header p { position:absolute; left:20px; top:32px; width: 246px; color: var(--muted); font-size: 6.5px; line-height: 12px; font-weight: 500; }
.page-two-title-only { height:44px; }
.page-two-title-only h2 { top:16px; }

.work-item {
  position: relative;
  display:block;
  min-height: 109px;
  border-bottom: 1px solid var(--border);
  color:inherit;
  text-decoration:none;
}
.work-link::after {
  content:'↗';
  position:absolute;
  right:16px;
  top:12px;
  color:#8a96a3;
  font-size:8px;
  line-height:1;
}
.work-link:hover { background:rgba(8,124,255,.035); }
.page-one-work .work-item:first-child,
.page-two-work .work-item:first-child { min-height: 109px; }
.work-item:last-child { border-bottom: 0; }
.work-details { position:absolute; left:20px; top:13px; width:276px; }
.work-details h3,
.education-item h3 {
  color: var(--ink);
  font-size: 8px;
  line-height: 10.5px;
  font-weight: 800;
}
.cert-item h3 {
  color: var(--ink);
  font-size: 7.3px;
  line-height: 9.6px;
  font-weight: 800;
}
.date-line {
  margin-top: 3px;
  color: #405265;
  font-size: 6.5px;
  line-height: 8px;
  font-weight: 600;
}
.paragraph {
  margin-top: 3px;
  color: var(--muted);
  font-size: 6.8px;
  line-height: 9.5px;
  font-weight: 500;
  white-space: pre-line;
}
.tools-block { position:absolute; left:380px; top:13px; width:155px; }
.work-side-date {
  margin-top:0;
  margin-bottom:6px;
  color:#2e4052;
  font-size: 7px;
  line-height: 8.8px;
}
.tools-inline { display:flex; align-items:flex-start; gap:4px; }
.tools-heading { flex:0 0 auto; line-height: 10px; }
.tools-tags { margin-top: 0; flex:1; }

.certification-row { position:absolute; left:20px; top:60px; display:flex; gap:61px; }
.cert-item { display:flex; gap:8px; width:119px; height:24px; }
.cert-action { cursor:pointer; border-radius:4px; }
.cert-action:hover { background:rgba(8,124,255,.045); }
.logo-box { position:relative; display:grid; place-items:center; flex: 0 0 auto; background:#eef2f6; background-size:cover; background-position:center; color:#405265; font-weight:800; cursor:pointer; }
.logo-box.has-image span { display:none; }
.cert-logo { width:24px; height:24px; border-radius:4px; font-size:6px; }
.cert-logo img {
  max-width: 19px;
  max-height: 15px;
  object-fit: contain;
}
.cert-item p { margin-top:4px; color:var(--muted); font-size:6.2px; line-height:8px; }

.education-item { position:relative; height:60px; border-bottom:1px solid var(--border); }
.education-item:last-child { border-bottom:0; }
.education-logo { position:absolute; left:20px; top:11px; width:44px; height:38px; border-radius:8px; font-size:9px; }
.education-logo.logo-wide { width:70px; height:36px; padding:4px; background:#fff; }
.education-logo.logo-long {
  width:70px;
  height:36px;
  padding:4px;
  background:#e7ebef;
  box-shadow: inset 0 0 0 1px rgba(45,61,70,.14);
}
.education-logo.logo-seal { width:70px; height:36px; padding:3px; background:#fff; }
.education-logo.logo-dark {
  background:#010544;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.education-logo.logo-suzhou {
  background:#113a5c;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.education-logo img {
  max-width: 36px;
  max-height: 28px;
  object-fit: contain;
}
.education-logo.logo-wide img {
  max-width: 62px;
  max-height: 24px;
}
.education-logo.logo-long img {
  max-width: 64px;
  max-height: 16px;
}
.education-logo.logo-seal img {
  max-width: 31px;
  max-height: 31px;
}
.education-info { position:absolute; left:102px; top:10px; width: 420px; }
.small-paragraph { margin-top: 4px; width: 410px; white-space: normal; }

.editable[contenteditable='true'],
[data-path][contenteditable='true'] {
  outline: 1px dashed rgba(8, 124, 255, .65);
  outline-offset: 1px;
  border-radius: 2px;
  background: rgba(8, 124, 255, .08);
}
.is-editing .profile-photo,
.is-editing .logo-box { box-shadow: 0 0 0 2px rgba(8,124,255,.25); }

.modal-open { overflow:hidden; }
.asset-modal[hidden] { display:none; }
.asset-modal {
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  padding:28px;
}
.asset-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(17,28,40,.58);
  backdrop-filter: blur(6px);
}
.asset-modal-panel {
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  width:min(760px, 92vw);
  max-height:88vh;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  border-radius:14px;
  background:#f8fafc;
  box-shadow:0 24px 70px rgba(15,23,42,.28);
}
.asset-modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 14px;
  border-bottom:1px solid #d9e1ea;
}
.asset-modal-header h2 {
  font-size:16px;
  line-height:20px;
}
.asset-modal-close {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:0;
  border-radius:999px;
  background:#e8eef5;
  color:#253447;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.asset-modal-content {
  display:grid;
  place-items:center;
  min-height:320px;
  overflow:auto;
  padding:18px;
}
.asset-modal-image {
  display:block;
  max-width:min(460px, 80vw);
  max-height:72vh;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 14px 38px rgba(15,23,42,.18);
}
.asset-modal-frame {
  width:min(700px, 84vw);
  height:min(74vh, 820px);
  border:0;
  border-radius:8px;
  background:#fff;
}

@media (max-width: 720px) {
  .site-toolbar { position: static; grid-template-columns: 1fr; justify-items:center; }
  .brand,
  .site-toolbar nav,
  .toolbar-actions { justify-self:center; }
  .toolbar-actions { flex-wrap:wrap; justify-content:center; }
  .template-stage { margin: 18px auto 72px; }
}

@media print {
  @page { size: A4; margin: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { margin:0; background:var(--page-bg); }
  .site-toolbar,
  .asset-modal { display:none !important; }
  .template-stage {
    display:block;
    position: relative;
    width: 210mm;
    height: 587mm;
    overflow:hidden;
    padding:0;
  }
  .figma-page {
    position: absolute;
    left: 0;
    width: 210mm;
    height: 297mm;
    min-height: 297mm;
    box-shadow: none;
    page-break-after: auto;
    break-after: auto;
    page-break-inside: avoid;
    break-inside: avoid;
    overflow: hidden;
    background: var(--page-bg);
  }
  #page-1 { top: 0; }
  #page-2 {
    top: 297mm;
    height: 290mm;
    min-height: 290mm;
  }
  .figma-page:last-child,
  .figma-page:last-of-type {
    page-break-after: auto;
    break-after: auto;
  }
  .resume-frame {
    transform: none;
    zoom: var(--a4-template-scale);
    width:595px;
    height:842px;
  }
}