/* ToolZeroo Resume — builder app layout. Desktop: steps | form | live preview. Phone: Edit / Preview tabs. */
html,body{height:100%}
body{display:flex;flex-direction:column;min-height:100%;overflow:hidden}
.b-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:8px var(--s-4);padding-top:calc(8px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:relative;z-index:30;min-height:60px}
.b-top .mid{display:flex;justify-content:center;gap:8px;align-items:center;min-width:0}
.b-top .mid>*{min-width:0}
.b-top .right{display:flex;gap:8px;align-items:center}
.b-top .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.brand{display:inline-flex;align-items:baseline;gap:8px;color:var(--ink);font-weight:800;font-size:1.2rem;letter-spacing:-.03em;text-decoration:none}
.brand:hover{text-decoration:none}
.brand .star{color:var(--accent)}
.brand .sub{font-weight:500;font-size:.8rem;color:var(--muted);letter-spacing:0}

.b-body{flex:1;display:grid;grid-template-columns:236px minmax(420px,1fr) minmax(380px,46%);min-height:0}
.b-steps{border-right:1px solid var(--line);background:var(--surface);padding:18px 12px;display:flex;flex-direction:column;gap:4px;overflow:auto}
.b-steps #stepNav{display:grid;gap:4px}
.g3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px}
@media (max-width:560px){.g3{grid-template-columns:1fr 1fr}.g3>:first-child{grid-column:1/-1}}
.b-steps .prog{display:flex;align-items:center;gap:12px;padding:4px 8px 16px}
.b-steps .prog b{font-size:var(--fs-14);font-weight:600;display:block}
.b-steps .prog span{font-size:var(--fs-12);color:var(--muted)}
.b-step{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-sm);font-weight:500;color:var(--ink-2);text-align:left;width:100%;min-height:44px;transition:background var(--t-fast)}
.b-step:hover{background:var(--canvas)}
.b-step .tick{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-input);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;transition:background var(--t-fast),border-color var(--t-fast)}
.b-step .tick svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;display:none}
.b-step.done .tick{background:var(--success);border-color:var(--success);color:#fff}
.b-step.done .tick svg{display:block}
.b-step.done .tick i{display:none}
.b-step[aria-current="step"]{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.b-step[aria-current="step"] .tick{border-color:var(--accent);color:var(--accent)}
.b-step[aria-current="step"].done .tick{background:var(--success);border-color:var(--success)}
.b-step .cnt{margin-left:auto;font-size:var(--fs-12);color:var(--muted);font-variant-numeric:tabular-nums;background:var(--canvas);border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;padding:0 6px}
.b-steps .tools{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:2px}
.b-steps .tools .b-step{font-weight:500;font-size:var(--fs-14)}
.b-steps .tools svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.b-steps .privacy{font-size:var(--fs-12);color:var(--muted);padding:12px 10px 4px;line-height:1.45}

.b-form{overflow:auto;background:var(--canvas);padding:28px clamp(16px,3vw,40px) 120px;min-width:0}
.b-form .inner{max-width:680px;margin:0 auto;display:grid;gap:20px;align-content:start}
.b-form .inner>*,.panel>*,.entry,.entry>*,.entry .e-body>*,.e-head>*{min-width:0}
.panel[hidden]{display:none}
.panel{display:grid;gap:18px}
.panel-head h2{font-size:var(--fs-24)}
.panel-head p{color:var(--ink-2);margin-top:6px;font-size:var(--fs-14)}
.entry{position:relative;padding:18px 18px 18px 46px;display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-1);transition:box-shadow var(--t-fast),transform var(--t-fast)}
.entry.dragging{opacity:.5}
.entry.drop-before{box-shadow:0 -3px 0 0 var(--accent),var(--shadow-1)}
.entry.drop-after{box-shadow:0 3px 0 0 var(--accent),var(--shadow-1)}
.entry .handle{position:absolute;left:10px;top:14px;width:28px;height:36px;display:grid;place-items:center;color:var(--faint);cursor:grab;border-radius:6px;touch-action:none}
.entry .handle:hover{color:var(--ink-2);background:var(--canvas)}
.entry .handle:active{cursor:grabbing}
.entry .handle svg{width:16px;height:16px;fill:currentColor}
.entry .e-head{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:40px}
.entry .e-head b{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entry .e-head b:empty::before{content:"New entry";color:var(--faint);font-weight:500}
.entry .acts{display:flex;gap:2px;flex:none}
.entry.collapsed .e-body{display:none}
.entry .e-body{display:grid;gap:14px}
.entry .summary-line{font-size:var(--fs-13);color:var(--muted)}
.add-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.skill-input{display:flex;gap:8px}
.skill-input input{flex:1}
.skills-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.skill{display:inline-flex;align-items:center;gap:2px;height:40px;padding-left:14px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);font-size:var(--fs-14);font-weight:500}
.skill .icon-btn{width:34px;height:34px}
.suggest{display:flex;flex-wrap:wrap;gap:6px}
.suggest button{height:32px;padding:0 12px;border-radius:999px;border:1px dashed var(--line-2);font-size:var(--fs-13);color:var(--ink-2)}
.suggest button:hover{border-style:solid;color:var(--accent-text);border-color:var(--accent)}
.nav-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:8px;flex-wrap:wrap}
.sub-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.sub-h h3{font-size:var(--fs-18)}
.order-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.order-list li{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-14);font-weight:500}
.order-list li span{flex:1}
.checks{display:grid;gap:8px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-13);color:var(--ink-2);list-style:none}
.checks li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--warning);margin-top:6px}
.checks ul{margin:0;padding:0}
.example-box{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);overflow:hidden}
.example-box summary{cursor:pointer;padding:10px 14px;font-size:var(--fs-13);font-weight:600;color:var(--accent-text);list-style:none;display:flex;justify-content:space-between}
.example-box summary::-webkit-details-marker{display:none}
.example-box summary::after{content:"Show";font-weight:500;color:var(--muted)}
.example-box[open] summary::after{content:"Hide"}
.example-box .ex{padding:0 14px 14px;display:grid;gap:10px}
.example-box .ex p{font-size:var(--fs-13);color:var(--ink-2);padding:10px 12px;background:var(--canvas);border-radius:var(--r-xs);border-left:3px solid var(--accent)}
.example-box .ex .btn{justify-self:start}

.b-prev{background:var(--desk);border-left:1px solid var(--line);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.b-prev .bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 16px;font-size:var(--fs-13);color:var(--ink-2);flex-wrap:wrap;background:color-mix(in srgb,var(--desk) 70%,var(--surface));border-bottom:1px solid var(--line)}
.b-prev .bar .r{display:flex;gap:6px;flex-wrap:wrap}
.b-prev .stage{flex:1;overflow:auto;padding:clamp(12px,2.5vw,32px)}
.preview-scale{position:relative;margin:0 auto;transform-origin:0 0}
.preview-scale .cv{box-shadow:var(--shadow-sheet);border-radius:2px;position:absolute;left:0;top:0;transform-origin:0 0}
.page-lines{position:absolute;left:0;right:0;pointer-events:none}
.page-line{position:absolute;left:-8px;right:-8px;border-top:1px dashed color-mix(in srgb,var(--danger) 55%,transparent)}
.page-line::after{content:attr(data-label);position:absolute;right:0;top:-18px;font-size:10px;color:var(--danger);background:var(--desk);padding:1px 6px;border-radius:4px}
.b-prev .pg{text-align:center;font-size:var(--fs-12);color:var(--muted);padding:8px 16px 12px}
.b-prev .pg.warn{color:var(--warning);font-weight:600}
.pro-notice{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 14px;margin:0 16px 12px;border-radius:var(--r-sm);background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);font-size:var(--fs-13)}

/* phone bottom bar */
.m-bar{display:none}
@media (max-width:980px){
  body{overflow:auto}
  .b-top{grid-template-columns:auto 1fr auto;gap:8px;position:sticky;top:0}
  .b-top .mid{justify-content:flex-end}
  .b-top .mid .tpl-chip{display:none}
  .b-top .right .btn{display:none}
  .b-body{display:block;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .b-steps{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:10px 12px;gap:8px;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none;position:sticky;top:60px;z-index:20}
  .b-steps::-webkit-scrollbar{display:none}
  .b-steps .prog{display:none}
  .b-steps #stepNav{display:contents}
  .toast-host{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .b-steps .tools{margin:0;padding:0;border:0;display:contents}
  .b-steps .privacy{display:none}
  .b-step{width:auto;flex:none;height:38px;min-height:38px;padding:0 12px 0 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:var(--fs-13)}
  .b-step[aria-current="step"]{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
  .b-step[aria-current="step"] .tick{border-color:var(--canvas);color:var(--canvas)}
  .b-step .cnt{background:transparent;min-width:0;padding:0}
  .b-form{padding:18px 16px 40px;overflow:visible}
  .b-prev{display:none;border:0}
  body.view-preview .b-form,body.view-preview .b-steps{display:none}
  body.view-preview .b-prev{display:flex;min-height:calc(100vh - 60px)}
  body.view-preview .b-prev .stage{overflow:visible}
  .m-bar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .m-bar .tab{min-height:48px;font-weight:600;color:var(--muted);display:grid;gap:2px;justify-items:center;font-size:var(--fs-12);border-radius:var(--r-sm)}
  .m-bar .tab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .m-bar .tab[aria-selected="true"]{color:var(--accent-text)}
  .m-bar .btn{min-height:44px}
}
@media (max-width:1240px) and (min-width:981px){
  .b-body{grid-template-columns:200px minmax(380px,1fr) minmax(340px,44%)}
}

/* design sheet */
.tpl-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.tpl-pick button{display:grid;gap:8px;padding:8px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--surface);text-align:left;position:relative;overflow:hidden;transition:border-color var(--t-fast),transform var(--t-fast)}
.tpl-pick button:hover{border-color:var(--line-2);transform:translateY(-1px)}
.tpl-pick button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.tpl-pick .thumb{box-shadow:0 1px 3px rgb(0 0 0 / .12)}
.tpl-pick .nm{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-12);font-weight:600;gap:6px}
.tpl-pick .badge{height:18px;font-size:9px;padding:0 6px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:36px;height:36px;border-radius:50%;border:2px solid transparent;position:relative;box-shadow:inset 0 0 0 2px var(--surface)}
.swatch[aria-pressed="true"]{border-color:var(--ink)}
.swatch.locked::after{content:"★";position:absolute;right:-4px;top:-4px;width:16px;height:16px;border-radius:50%;background:var(--pro);color:var(--pro-ink);font-size:9px;display:grid;place-items:center}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;background:var(--surface);gap:2px}
.seg button{height:32px;padding:0 12px;border-radius:999px;font-size:var(--fs-13);font-weight:500;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--canvas)}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.setting{display:grid;gap:8px}
.setting>b{font-size:var(--fs-13);font-weight:600}
.setting .lock{font-size:var(--fs-12);color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.first-run{display:grid;gap:10px;padding:16px 18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.first-run b{font-size:var(--fs-16)}
.first-run p{font-size:var(--fs-14);color:var(--ink-2)}
.first-run .row{display:flex;gap:8px;flex-wrap:wrap}
#print-root{display:none}