/*! Jejak Lamaran CV - dibuat oleh Muhammad Faisal Irsyad (@mfaisalirsyad), 2026 */
/* Tata letak: header lengket + tab, editor = 3 kolom (panel | kertas A4 | panel), bertumpuk di HP. Kertas selalu putih seperti kertas asli. */
:root{
  --bg:#f3f5f9; --sf:#ffffff; --sf2:#f7f8fb; --ln:#dde2ea; --ln2:#eceff4;
  --ink:#152033; --ink2:#334055; --mut:#5d6779; --acc:#2c56c9; --accs:#e9effc; --acc-ink:#ffffff;
  --ok:#17794a; --oks:#e4f4eb; --warn:#8d5b00; --warns:#fbf1dc; --bad:#b03a2e; --bads:#fbe9e7;
  --stage:#e4e8ef; --shadow:rgba(21,32,51,.12); --tip:#152033; --tip-ink:#ffffff;
  --ff:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0f141b; --sf:#171e28; --sf2:#1c2430; --ln:#2a3443; --ln2:#222b38;
  --ink:#e7ecf3; --ink2:#c3cad6; --mut:#94a0b2; --acc:#86a4f3; --accs:#1f2a44; --acc-ink:#0f141b;
  --ok:#5cc28d; --oks:#173226; --warn:#e0b25a; --warns:#33290f; --bad:#f08a7e; --bads:#3a1d1a;
  --stage:#0a0e14; --shadow:rgba(0,0,0,.45); --tip:#e7ecf3; --tip-ink:#0f141b; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0f141b; --sf:#171e28; --sf2:#1c2430; --ln:#2a3443; --ln2:#222b38;
  --ink:#e7ecf3; --ink2:#c3cad6; --mut:#94a0b2; --acc:#86a4f3; --accs:#1f2a44; --acc-ink:#0f141b;
  --ok:#5cc28d; --oks:#173226; --warn:#e0b25a; --warns:#33290f; --bad:#f08a7e; --bads:#3a1d1a;
  --stage:#0a0e14; --shadow:rgba(0,0,0,.45); --tip:#e7ecf3; --tip-ink:#0f141b; color-scheme:dark }

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--ff); font-size:15px; line-height:1.5; -webkit-text-size-adjust:100%}
[hidden]{display:none!important}
img{max-width:100%}
.nojs{padding:24px; text-align:center}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
h1,h2,h3{text-wrap:balance; margin:0}
svg.ic{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}

/* header */
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--sf); border-bottom:1px solid var(--ln)}
.top-in{max-width:1160px; margin:0 auto; padding:0 24px; display:flex; align-items:stretch; justify-content:space-between; gap:16px; min-height:60px}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:16.5px; white-space:nowrap}
.brand .lg{width:28px; height:28px; border-radius:6px; background:var(--acc); color:var(--acc-ink); display:flex; align-items:center; justify-content:center}
.brand .lg svg{stroke-width:3}
.badge{font-size:11.5px; font-weight:800; color:var(--acc); background:var(--accs); border-radius:4px; padding:2px 7px}
.nav{display:flex; align-items:stretch; gap:22px}
.tabs{display:flex; gap:22px; align-items:stretch}
.tab{background:none; border:0; border-bottom:3px solid transparent; padding:3px 0 0; font-weight:600; font-size:14px; color:var(--mut); white-space:nowrap}
.tab.on{color:var(--ink); border-bottom-color:var(--acc)}
.tab:hover{color:var(--ink)}
.tools{display:flex; align-items:center; gap:10px}
.vsep{width:1px; height:22px; background:var(--ln)}
.ib{background:none; border:0; padding:6px; border-radius:5px; color:var(--mut); display:flex}
.ib.on{color:var(--ink); background:var(--ln2)}
.ib:hover{color:var(--ink)}
.lang{background:none; border:0; font-size:12.5px; font-weight:700; color:var(--mut); padding:4px 3px; opacity:.55}
.lang.on{color:var(--ink); opacity:1}

/* common */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:8px; padding:8px 15px; min-height:40px; font-size:14px; font-weight:650; font-family:inherit; text-decoration:none; white-space:nowrap; border:1px solid var(--ln); background:var(--sf); color:var(--ink)}
.btn:hover{border-color:var(--mut)}
.btn.pri{background:var(--acc); border-color:var(--acc); color:var(--acc-ink)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.soft{background:var(--accs); border-color:var(--accs); color:var(--acc)}
.btn.sm{padding:5px 10px; font-size:12.5px}
.btn.icon{padding:6px 8px}
.btn.danger{color:var(--bad)}
.btn.danger.conf{background:var(--bad); border-color:var(--bad); color:var(--sf)}
.tag{font-size:11.5px; font-weight:700; border-radius:4px; padding:2px 7px; white-space:nowrap; color:var(--acc); background:var(--accs)}
.tag.mut{color:var(--mut); background:var(--ln2)}
.tag.ok{color:var(--ok); background:var(--oks)}
.tag.warn{color:var(--warn); background:var(--warns)}
.box{background:var(--sf); border:1px solid var(--ln); border-radius:10px; box-shadow:0 1px 2px rgba(21,32,51,.05), 0 1px 1px rgba(21,32,51,.03)}
.mut{color:var(--mut)}
.wrap{max-width:1160px; margin:0 auto; padding-inline:16px; padding-block:28px 48px; width:100%; box-sizing:border-box; display:flex; flex-direction:column; gap:22px}
.ph{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap}
.ph h1{font-size:28px; font-weight:800; line-height:1.2; letter-spacing:-.02em}
.ph p{margin:4px 0 0; color:var(--mut)}
.row{display:flex; gap:10px; flex-wrap:wrap}

/* thumbnails of paper */
.thumb{ --z:var(--z0); width:calc(var(--pw) * var(--z)); height:calc(var(--ph) * var(--z)); overflow:hidden; flex:none; box-shadow:0 1px 2px var(--shadow), 0 6px 18px var(--shadow); background:#fff; max-width:100%}
.thumb>.paper{transform:scale(var(--z)); transform-origin:0 0; pointer-events:none}

/* my docs */
.grid-docs{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:18px}
.dcard{display:flex; flex-direction:column; overflow:hidden}
.dcard .tw{background:var(--ln2); height:262px; display:flex; justify-content:center; padding-top:16px; overflow:hidden; cursor:pointer}
.dcard .meta{padding:12px 14px; border-top:1px solid var(--ln); display:flex; flex-direction:column; gap:4px}
.dcard .nm{font-weight:700; font-size:14.5px; overflow-wrap:anywhere}
.dcard .when{font-size:12.5px; color:var(--mut)}
.dcard .acts{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.newcard{background:none; font:inherit; cursor:pointer; border:1.5px dashed var(--ln); border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--mut); text-align:center; padding:22px; min-height:300px}
.newcard b{color:var(--ink)}
.note{display:flex; gap:14px; align-items:center; padding:14px 18px; flex-wrap:wrap}
.note .tx{flex:1; min-width:220px}
.note .tx div{font-size:13.5px; color:var(--mut)}
.note svg.big{width:26px; height:26px; color:var(--ok)}

/* picker */
.modes{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.mode{display:flex; gap:12px; padding:14px 18px}
.mode svg{width:22px; height:22px; color:var(--acc); margin-top:2px}
.mode div{font-size:13.5px; color:var(--mut)}
.mode b{color:var(--ink); font-size:15px}
.grid-tpl{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
.tcard{display:flex; flex-direction:column; overflow:hidden}
.tcard .tw{background:var(--ln2); height:calc(1123px * var(--tz,.3) + 26px); display:flex; justify-content:center; padding-top:14px; overflow:hidden}
.tcard .meta{padding:12px 14px; border-top:1px solid var(--ln); display:flex; flex-direction:column; gap:8px; flex:1}
.tcard .meta .t{display:flex; justify-content:space-between; align-items:center; gap:8px}
.tcard .meta .d{font-size:12.5px; color:var(--mut); flex:1}
.tcard .meta .bt{display:flex; flex-direction:column; gap:6px}
.upcard{border:1.5px dashed var(--acc); background:var(--accs); border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px; text-align:center; min-height:300px}
.upcard svg{width:30px; height:30px; color:var(--acc)}
.upcard div{font-size:13.5px; color:var(--ink2)}
.foot{font-size:13px; color:var(--mut)}

/* editor */
.bar{background:var(--sf); border-bottom:1px solid var(--ln); padding:10px 20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.bar .dn{font-weight:700; font-size:15px; border:1px solid transparent; border-radius:5px; padding:4px 6px; background:none; min-width:0; width:240px; max-width:100%}
.bar .dn:hover,.bar .dn:focus{border-color:var(--ln)}
.seg{display:inline-flex; border:1px solid var(--ln); border-radius:6px; overflow:hidden; background:var(--sf)}
.seg button{border:0; background:none; padding:6px 13px; font-size:13px; font-weight:600; color:var(--ink2); border-right:1px solid var(--ln)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--acc); color:var(--acc-ink)}
.seg.full{display:flex; width:100%}
.seg.full button{flex:1; padding:6px 4px}
.bar .sp{flex:1}
.saved{font-size:12.5px; color:var(--ok); white-space:nowrap}
.edg{display:grid; grid-template-columns:270px minmax(0,1fr) 300px; height:calc(100dvh - 160px); min-height:560px}
.edg.free-mode{grid-template-columns:78px minmax(0,1fr) 300px}
.pnl{background:var(--sf); overflow:auto; padding:16px; display:flex; flex-direction:column; gap:16px; min-width:0}
.pnl.l{border-right:1px solid var(--ln)}
.pnl.r{border-left:1px solid var(--ln)}
.lbl{font-size:11.5px; font-weight:700; color:var(--mut); letter-spacing:.06em; text-transform:uppercase}
.fld{display:flex; flex-direction:column; gap:7px}
.fld>b{font-size:13.5px; display:flex; justify-content:space-between; align-items:center}
.fld>b span{color:var(--acc)}
.hint{font-size:12.5px; color:var(--mut)}
.hintbox{font-size:12.5px; color:var(--mut); background:var(--sf2); border:1px solid var(--ln2); border-radius:5px; padding:9px 11px}
.lock{display:flex; justify-content:space-between; align-items:center; font-size:13.5px}
.lock span{display:flex; align-items:center; gap:6px; color:var(--mut)}
input[type=range]{width:100%; accent-color:var(--acc)}
.rng{display:flex; justify-content:space-between; font-size:11.5px; color:var(--mut); margin-top:-4px}
.divd{border-top:1px solid var(--ln2)}
.sw{display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.sw button{width:26px; height:26px; border-radius:5px; border:1px solid var(--ln); padding:0}
.sw button.on{outline:2px solid var(--acc); outline-offset:2px}
.sw input[type=color]{width:30px; height:28px; border:1px solid var(--ln); border-radius:5px; padding:1px; background:var(--sf)}
.ln-st{display:flex; gap:6px}
.ln-st button{flex:1; height:32px; border:1px solid var(--ln); border-radius:5px; background:var(--sf); display:flex; align-items:center; justify-content:center; font-size:11.5px; color:var(--mut)}
.ln-st button i{width:34px; border-top:2px solid var(--ink)}
.ln-st button.on{border-color:var(--acc); background:var(--accs)}
.pos2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.pos2 label{display:flex; align-items:center; gap:6px; border:1px solid var(--ln); border-radius:5px; padding:5px 8px; font-size:13px; color:var(--mut)}
.pos2 input{width:100%; border:0; background:none; padding:0; min-width:0}
.sec-l{display:flex; flex-direction:column; gap:6px}
.si{border:1px solid var(--ln); border-radius:6px; background:var(--sf)}
.si.open{border-color:var(--acc)}
.si-h{display:flex; align-items:center; gap:4px; padding:5px 6px}
.si-h input{flex:1; min-width:0; border:1px solid transparent; border-radius:4px; padding:4px 6px; font-weight:600; font-size:13.5px; background:none}
.si-h input:hover,.si-h input:focus{border-color:var(--ln)}
.si-h .ib{padding:4px}
.si-h .ib.off{opacity:.45}
.si-b{border-top:1px solid var(--ln2); padding:8px; display:flex; flex-direction:column; gap:6px}
.ent-l{display:flex; align-items:center; gap:2px; font-size:13px; border:1px solid var(--ln2); border-radius:5px; padding:3px 4px 3px 8px}
.ent-l span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ent-l .ib{padding:3px}
.addsec{display:flex; flex-wrap:wrap; gap:6px}
.fs-photo{display:flex; gap:12px; align-items:center}
.fs-photo .pv{width:54px; height:66px; border-radius:4px; overflow:hidden; background:var(--ln2); flex:none}
.fs-photo .pv img,.fs-photo .pv svg{width:100%; height:100%; object-fit:cover; display:block}
.err{font-size:12.5px; color:var(--bad)}
.toolcol{background:var(--sf); border-right:1px solid var(--ln); padding:10px 8px; display:flex; flex-direction:column; gap:4px; overflow:auto}
.tool{display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 0; border-radius:6px; border:0; background:none; font-size:11px; font-weight:600; color:var(--ink2)}
.tool svg{width:20px; height:20px}
.tool:hover{background:var(--ln2)}
.tool.on{background:var(--accs); color:var(--acc)}
.toolcol .vsp{flex:1}

.stage{background:var(--stage); overflow:auto; position:relative; padding:24px; min-width:0}
.pw{margin:0 auto; position:relative}
.pw>.paper{transform-origin:0 0; box-shadow:0 1px 2px var(--shadow), 0 10px 30px var(--shadow)}
.zoom{margin:14px auto 0; width:max-content; display:flex; gap:6px; align-items:center; background:var(--sf); border:1px solid var(--ln); border-radius:6px; padding:4px 8px; font-size:12.5px; font-weight:600; color:var(--ink2)}
.zoom button{border:0; background:none; padding:2px 6px; font-weight:700}
.zoom .ovf{color:var(--bad)}
.zoom .fit{color:var(--ok)}

/* paper (always white: it is a sheet of paper) */
.paper{width:794px; height:1123px; background:#fff; color:#1d232d; position:relative; overflow:hidden; padding:48px 52px;
  font-family:var(--pf); font-size:var(--fs); line-height:1.45}
.paper .ed{outline:none; border-radius:2px; overflow-wrap:anywhere}
.paper.editing .ed:hover{background:rgba(44,86,201,.07)}
.paper.editing .ed:focus{background:rgba(44,86,201,.1); box-shadow:0 0 0 1px rgba(44,86,201,.55)}
.paper.editing .ed:empty::before{content:attr(data-ph); color:#a3abb8}
.paper span.ed{display:inline-block; min-width:.6em}
.paper .blk{display:block}
.paper .b{font-weight:700}
.paper .i{font-style:italic}
.paper .pm{color:#6b7380}
.paper .dt{color:#4a5260; white-space:nowrap; text-align:right}
.paper .pre{white-space:pre-line}
.paper .sh{font-family:var(--hf); font-size:var(--hs); font-weight:700; color:var(--pacc); line-height:1.2}
.paper .tl{border-top:var(--lnw) var(--lns) var(--lnc); position:relative}
.paper .tl.v{border-top:0; border-left:var(--lnw) var(--lns) var(--lnc)}
.paper.lines-none .tl{border-color:transparent}
.paper.free .tl{cursor:pointer}
.paper.free .tl::after{content:""; position:absolute; inset:-6px -2px}
.paper.free .tl.v::after{inset:0 -6px}
.paper.tl-sel .tl{outline:2px solid rgba(44,86,201,.5); outline-offset:3px}
.paper .sec{margin-top:18px}
.paper .ent{margin-top:8px}
.paper .ent:first-of-type{margin-top:4px}
.paper .ent-r{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.paper ul{margin:3px 0 0; padding-left:18px}
.paper li{margin:1px 0}
.paper .pair{margin-top:2px}
.paper .sep{color:#8a929e}
/* header blocks */
.paper .nm{font-family:var(--hf); font-size:var(--ns,30px); font-weight:700; color:var(--pacc); line-height:1.15}
.paper .rl{font-size:calc(var(--fs) + 1px)}
.paper .ct{color:#4a5260; font-size:calc(var(--fs) - 1px)}
.t-rapi .h-c{text-align:center}
.t-rapi .nm{letter-spacing:.5px}
.t-rapi .ct{margin-top:4px}
.t-rapi .sh-row{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.t-rapi .abar{width:4px; height:20px; background:var(--pacc); flex:none}
.t-rapi .sh-row .tl{flex:1}
.t-label .nm{color:#1d232d; font-size:var(--ns,32px)}
.t-label .h-row{display:flex; justify-content:space-between; gap:16px; margin:4px 0 12px; align-items:baseline}
.t-label .h-row .ct{text-align:right}
.t-label .sec{display:grid; grid-template-columns:180px minmax(0,1fr); gap:18px; margin-top:16px}
.t-label .sh{color:var(--pacc)}
.t-tegas .h-t{display:flex; justify-content:space-between; gap:20px; align-items:flex-end}
.t-tegas .nm{font-size:var(--ns,34px)}
.t-tegas .ct{text-align:right}
.t-tegas .sec .tl{margin-bottom:6px}
.t-tegas .sec .sh{margin-bottom:4px}
.t-fkiri .sec .sh,.t-fkanan .sec .sh{margin-bottom:3px}
.t-fkiri .sec .tl,.t-fkanan .sec .tl{margin-bottom:6px}
.t-fkanan .sec .sh{text-transform:uppercase; letter-spacing:1px}
.h-ph{display:flex; gap:22px}
.h-ph.ph-kanan{flex-direction:row-reverse; justify-content:space-between}
.h-ph.ph-atas{flex-direction:column; align-items:center; text-align:center; gap:12px}
.h-ph.al-atas{align-items:flex-start}
.h-ph.al-tengah{align-items:center}
.h-ph.al-bawah{align-items:flex-end}
.h-ph.ph-atas.al-atas,.h-ph.ph-atas.al-tengah,.h-ph.ph-atas.al-bawah{align-items:center}
.h-ph .h-info{min-width:0}
.h-ph.tint{background:#f6f1ee; margin:-48px -52px 0; padding:40px 52px 24px}
.photo{overflow:hidden; flex:none; background:linear-gradient(160deg,#cfd8e6,#aab6c8)}
.photo img,.photo svg{width:100%; height:100%; object-fit:cover; display:block}
.photo.s-kotak{border-radius:0}
.photo.s-sudut{border-radius:12px}
.photo.s-bulat{border-radius:50%}
.paper.editing .photo{cursor:pointer}
/* cover letters */
.paper .para{margin-bottom:10px}
.paper .lt-hi{margin:14px 0 10px}
.paper .close{margin-top:16px}
.paper .sign{margin-top:34px}
.t-lini .h-l{padding-bottom:12px; border-bottom:var(--lnw) var(--lns) var(--lnc)}
.t-lini .nm{font-size:var(--ns,32px)}
.t-lini .rl{color:var(--pacc); margin-top:2px}
.t-lini .ct{margin-top:6px}
.t-lini .sec{margin-top:16px}
.t-lini .sec>.sh{text-transform:uppercase; letter-spacing:1.5px; font-size:calc(var(--hs) - 4px); margin-bottom:2px}
.t-lini .sec>.tl{display:none}
.t-lini .ent{position:relative; padding-left:132px}
.t-lini .ent-r{display:block}
.t-lini .ent .dt{position:absolute; left:0; top:0; width:118px; text-align:left; white-space:normal; color:var(--pacc); font-size:calc(var(--fs) - 1px)}
.t-ftengah .nm{letter-spacing:.5px}
.t-ftengah .h-ph{gap:10px}
.t-ftengah .sec{margin-top:16px}
.t-ftengah .sh-row{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.t-ftengah .sh-row .tl{flex:1}
.t-ftengah .sh{text-transform:uppercase; letter-spacing:1.5px; font-size:calc(var(--hs) - 4px); text-align:center; flex:none; max-width:70%}
.t-aksen{padding-left:68px}
.t-aksen .bar-l{position:absolute; left:0; top:0; bottom:0; width:12px; background:var(--pacc)}
.t-aksen .h-a{display:flex; justify-content:space-between; gap:20px; align-items:flex-end; padding-bottom:12px}
.t-aksen .nm{font-size:var(--ns,28px)}
.t-aksen .rl{color:#4a5260; margin-top:2px}
.t-aksen .h-a .ct{text-align:right}
.t-aksen .tl{margin-bottom:20px}
.t-aksen .dt-l{margin-bottom:14px}
.t-pita .band{background:var(--pacc); color:#fff; margin:-48px -52px 26px; padding:40px 52px 22px}
.t-pita .band .nm{color:#fff; font-size:var(--ns,28px)}
.t-pita .band .rl{color:rgba(255,255,255,.85); margin-top:2px}
.t-pita .band .ct{color:rgba(255,255,255,.85); margin-top:8px}
.t-pita .band .sep{color:rgba(255,255,255,.55)}
.t-pita .dt-l{margin-bottom:14px}
.t-klasik .nm{font-size:var(--ns,28px); color:var(--pacc)}
.t-klasik .tl{margin:12px 0 20px}
.t-klasik .dt-l{margin-bottom:14px}
.t-sisi .cols{display:grid; grid-template-columns:200px auto minmax(0,1fr); gap:24px; height:100%}
.t-sisi .nm{font-size:var(--ns,26px)}
.t-garis .nm{font-size:var(--ns,28px)}
.t-sisi .side .rl{margin:6px 0 18px; color:#4a5260}
.t-sisi .side .ct div{margin-bottom:3px}
.t-sisi .dt-l{margin-bottom:14px}
.t-garis .h-g{display:flex; justify-content:space-between; gap:16px; align-items:flex-end; padding-bottom:10px}
.t-garis .h-g .ct{text-align:right}
.t-garis .tl{margin-bottom:18px}
.t-garis .row2{display:flex; justify-content:space-between; gap:16px}
/* free layer */
.free-l{position:absolute; inset:0; pointer-events:none}
.paper.free .free-l{pointer-events:none}
.paper.free .fe{pointer-events:auto}
.paper.grid .free-l{background-image:linear-gradient(rgba(44,86,201,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(44,86,201,.08) 1px, transparent 1px); background-size:16px 16px}
.safe{position:absolute; inset:45px; border:1px dashed rgba(176,58,46,.5); pointer-events:none; display:none}
.paper.free.show-safe .safe{display:block}
.fe{position:absolute; touch-action:none}
.paper.free .fe{cursor:move}
.fe-text .fe-txt{min-height:1.4em; white-space:pre-wrap; overflow-wrap:anywhere; outline:none; line-height:1.4}
.fe-text .fe-txt[contenteditable="true"]{cursor:text; background:rgba(44,86,201,.06)}
.fe-line.h{height:12px}
.fe-line.v{width:12px}
.fe-line i{position:absolute; display:block}
.fe-line.h i{left:0; right:0; top:5px}
.fe-line.v i{top:0; bottom:0; left:5px}
.paper.free .fe:hover{outline:1px dashed rgba(44,86,201,.6)}
.fe.sel{outline:1.5px solid #2c56c9 !important}
.hd{position:absolute; width:12px; height:12px; background:#fff; border:2px solid #2c56c9; border-radius:50%; display:none}
.fe.sel .hd{display:block}
.hd-r{right:-7px; top:50%; margin-top:-6px; cursor:ew-resize}
.fe-line.h .hd-end{right:-7px; top:0; cursor:ew-resize}
.fe-line.v .hd-end{bottom:-7px; left:0; cursor:ns-resize}
.hd-br{right:-7px; bottom:-7px; cursor:nwse-resize}
.paper:not(.free) .fe{pointer-events:none}

/* modal + toast */
.mbg{position:fixed; inset:0; background:rgba(10,14,20,.5); z-index:60; display:flex; align-items:center; justify-content:center; padding:16px}
.modal{background:var(--sf); border-radius:8px; max-width:880px; width:100%; max-height:calc(100dvh - 32px); overflow:auto; padding:24px; display:flex; flex-direction:column; gap:16px; border:1px solid var(--ln)}
.modal h2{font-size:21px}
.modal .mh{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.pdfm{display:grid; grid-template-columns:auto 1fr; gap:24px}
.pdfm ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.pdfm li{display:flex; gap:10px; align-items:flex-start}
.pdfm li svg{color:var(--ok); margin-top:3px}
.pdfm li.bad svg{color:var(--bad)}
.steps{display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none}
.steps li{display:flex; gap:12px}
.steps li>span{width:26px; height:26px; border-radius:50%; background:var(--ln2); color:var(--ink2); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none}
.steps li div{font-size:13.5px; color:var(--mut)}
.steps li b{color:var(--ink); display:block; font-size:14.5px}
.mtpl{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:12px}
.mtpl button{border:1px solid var(--ln); border-radius:6px; background:var(--ln2); padding:10px 8px 8px; display:flex; flex-direction:column; align-items:center; gap:8px; font-weight:600; font-size:13px}
.mtpl button.on{border-color:var(--acc); box-shadow:0 0 0 1px var(--acc)}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--tip); color:var(--tip-ink); padding:9px 14px; border-radius:6px; font-size:13.5px; z-index:80; max-width:calc(100% - 32px)}

/* full-width header in the editor so it lines up with the editor bar */
.top-in.full{max-width:none; padding:0 20px}
.paper.editing .photo{cursor:grab}
.prow{position:relative}
.pdel{position:absolute; right:-34px; top:0; width:24px; height:24px; border-radius:5px; border:1px solid #dde2ea; background:#fff; color:#b03a2e; font-size:16px; line-height:1; display:none; align-items:center; justify-content:center; padding:0}
.prow:hover .pdel,.prow:focus-within .pdel{display:flex}
.selx{width:100%; padding:7px 9px; border:1px solid var(--ln); border-radius:5px; background:var(--sf); color:var(--ink); font-size:13.5px}
.fmt{display:flex; flex-direction:column; gap:9px; padding:12px; border:1px solid var(--ln); border-radius:6px; background:var(--sf2)}
.fmt.off .fmt-c{opacity:.4; pointer-events:none}
.fmt-row{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.fmt-row button{border:1px solid var(--ln); background:var(--sf); border-radius:5px; padding:4px 9px; font-size:12.5px; font-weight:600; min-width:32px}
.fmt-row .cur{font-size:13px; font-weight:700; min-width:44px; text-align:center; color:var(--acc)}
.nudge{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; color:var(--mut)}
/* app switcher + save state */
.brand{background:none; border:0; padding:4px 6px; margin-left:-6px; border-radius:6px; color:var(--ink); font-family:var(--ff); cursor:pointer}
.brand:hover{background:var(--ln2)}
.brand .chev{width:14px; height:14px; color:var(--mut)}
.bwrap{position:relative; display:flex; align-items:center}
.swm{position:absolute; top:calc(100% + 4px); left:0; z-index:40; width:300px; max-width:calc(100vw - 32px); background:var(--sf); border:1px solid var(--ln); border-radius:8px; box-shadow:0 12px 32px var(--shadow); padding:6px; display:flex; flex-direction:column; gap:2px}
.swi{display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:6px; color:var(--ink); text-decoration:none; font-size:14px}
a.swi:hover{background:var(--ln2)}
.swi .sq{width:28px; height:28px; border-radius:6px; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800}
.swi b{display:block; font-size:14px}
.swi small{color:var(--mut); font-size:12.5px}
.swi.here{background:var(--accs)}
.swi.soon{opacity:.55}
.swm .ft{font-size:12px; color:var(--mut); padding:6px 10px 4px; border-top:1px solid var(--ln2); margin-top:4px}
.saved.dirty{color:var(--warn)}
.btn.save-on{border-color:var(--warn); color:var(--warn)}
@media (max-width:1100px){
  .edg{grid-template-columns:240px minmax(0,1fr) 270px}
}
@media (max-width:900px){
  .top-in{flex-wrap:wrap; padding:0 16px; gap:0 12px}
  .brand{min-height:52px}
  .nav{width:100%; justify-content:space-between; gap:12px; overflow-x:auto; min-height:44px}
  .tabs{gap:16px}
  .tab{font-size:13.5px}
  .wrap{padding-inline:16px}
  .bar{padding:10px 16px}
  .edg,.edg.free-mode{display:flex; flex-direction:column; height:auto; min-height:0}
  .stage{order:1; padding:16px; min-height:0}
  .toolcol{order:0; flex-direction:row; border-right:0; border-bottom:1px solid var(--ln); overflow-x:auto}
  .tool{padding:6px 10px}
  .toolcol .vsp{display:none}
  .pnl.l{order:2; border-right:0; border-top:1px solid var(--ln)}
  .pnl.r{order:3; border-left:0; border-top:1px solid var(--ln)}
  .modes{grid-template-columns:1fr}
  .pdfm{grid-template-columns:1fr}
  .pdfm .thumb{margin:0 auto}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }

/* ===== tambahan versi web ===== */
.edg{height:calc(100vh - 122px); height:calc(100dvh - 122px)}
.btn.link{border:0; background:none; color:var(--acc); padding:7px 4px}
.btn:disabled{opacity:.6; cursor:wait}
.row.end{justify-content:flex-end}
.sp{flex:1}
.note-s{font-size:13px; color:var(--mut)}
.newcard{min-height:280px}
.newcard span{font-size:13px}
.newcard.up{border-color:var(--acc); background:var(--accs)}
.newcard.up svg{color:var(--acc)}
.newcard svg{width:26px; height:26px}
.banner{display:flex; gap:14px; align-items:center; padding:14px 18px; border:1px solid var(--acc); background:var(--accs); border-radius:6px; flex-wrap:wrap}
.banner>svg{width:22px; height:22px; color:var(--acc)}
.banner .tx{flex:1; min-width:220px}
.banner .tx div{font-size:13.5px; color:var(--ink2)}
.foot{border-top:1px solid var(--ln); background:var(--sf); flex-shrink:0}
.foot-in{max-width:1160px; margin:0 auto; padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px)); display:flex; justify-content:space-between; align-items:center; gap:8px 16px; flex-wrap:wrap; font-size:13px; color:var(--mut)}
.foot-in b,.foot-in a{color:var(--ink2); font-weight:700; text-decoration:none}
.foot-in a:hover{color:var(--acc); text-decoration:underline}
.foot-r{display:flex; gap:16px; flex-wrap:wrap}

/* akun */
.acct{position:relative; display:flex; align-items:center}
.g-btn{gap:6px}
.g-btn svg{width:15px; height:15px}
.av-btn{position:relative; border:0; background:none; padding:2px; border-radius:50%}
.av{width:30px; height:30px; border-radius:50%; background:var(--acc); color:var(--acc-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block; background:var(--mut); flex:none}
.av-btn .dot{position:absolute; right:0; bottom:0; border:2px solid var(--sf)}
.dot.ok{background:var(--ok)} .dot.warn{background:#d39b2a} .dot.bad{background:var(--bad)} .dot.busy{background:var(--acc)}
.accm{position:absolute; right:0; top:calc(100% + 8px); z-index:45; width:300px; max-width:calc(100vw - 24px); background:var(--sf); border:1px solid var(--ln); border-radius:8px; box-shadow:0 12px 32px var(--shadow); padding:6px; display:flex; flex-direction:column; gap:2px}
.accm-h{padding:8px 10px 10px; border-bottom:1px solid var(--ln2); margin-bottom:4px; display:flex; flex-direction:column; gap:2px; min-width:0}
.accm-h b{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.accm-h small{color:var(--mut); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.accm-s{display:flex; gap:7px; align-items:baseline; font-size:12.5px; color:var(--ink2); margin-top:6px}
.accm-s .dot{position:relative; top:1px}
.accm-i{display:flex; gap:10px; align-items:center; border:0; background:none; padding:9px 10px; border-radius:6px; font-size:13.5px; color:var(--ink); text-align:left}
.accm-i:hover{background:var(--ln2)}
.accm-i.danger{color:var(--bad)}
.accm-f{font-size:12px; color:var(--mut); padding:8px 10px 4px; border-top:1px solid var(--ln2); margin-top:4px}

/* dialog kunci */
.kform{display:flex; flex-direction:column; gap:12px}
.kf{display:flex; flex-direction:column; gap:5px; font-size:13.5px; font-weight:600}
.kf input{border:1px solid var(--ln); border-radius:6px; padding:9px 11px; background:var(--sf); font-size:15px; font-weight:400}
.kf input:focus{border-color:var(--acc); outline:none; box-shadow:0 0 0 3px var(--accs)}
.krules{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; font-size:12.5px; color:var(--mut)}
.krules li{display:flex; gap:7px; align-items:baseline}
.krules li::before{content:""; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--mut); flex:none; position:relative; top:1px}
.krules li.ok{color:var(--ok)}
.krules li.ok::before{background:var(--ok); border-color:var(--ok)}
.kchk{display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--ink2); background:var(--sf2); border:1px solid var(--ln2); border-radius:6px; padding:10px 12px}
.kchk input{margin-top:3px; accent-color:var(--acc)}
.modal .err{min-height:0}
.opts{display:flex; flex-direction:column; gap:8px}
.opt{display:flex; flex-direction:column; gap:3px; text-align:left; border:1px solid var(--ln); background:var(--sf); border-radius:8px; padding:12px 14px}
.opt:hover{border-color:var(--acc)}
.opt b{font-size:14.5px}
.opt span{font-size:13px; color:var(--mut)}
.opt.danger b{color:var(--bad)}
.opt.danger:hover{border-color:var(--bad)}
.modal{max-width:640px}
.modal:has(.pdfm),.modal:has(.mtpl){max-width:900px}
.modal:has(.imp){max-width:990px}
.pdfm-r{display:flex; flex-direction:column; gap:16px; min-width:0}
.pdfm li.warn svg{color:#d39b2a}
.pdfm li.warn{background:var(--warns); border-radius:6px; padding:8px 10px; color:var(--ink)}

/* import */
.imp{display:grid; grid-template-columns:minmax(0,352px) minmax(0,1fr); gap:22px}
.imp-l{display:flex; flex-direction:column; gap:14px; min-width:0}
.imp-r{min-width:0; display:flex; flex-direction:column; gap:14px}
.drop{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; border:1.5px dashed var(--ln); border-radius:8px; padding:22px 14px; cursor:pointer; color:var(--mut); font-size:13px}
.drop svg{width:24px; height:24px; color:var(--acc)}
.drop b{color:var(--ink); font-size:14.5px}
.drop:hover,.drop.over{border-color:var(--acc); background:var(--accs)}
.steps li.run>span{background:var(--acc); color:var(--acc-ink)}
.steps li.done>span{background:var(--ok); color:var(--sf)}
.steps li.fail>span{background:var(--bad); color:var(--sf)}
.steps .pg{display:block; font-style:normal; font-size:12.5px; color:var(--acc)}
.imp-cmp{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
.imp-cmp .lbl{margin-bottom:6px}
.imp-orig{background:var(--ln2); border:1px solid var(--ln); border-radius:4px; overflow:hidden; max-height:374px}
.imp-orig img{display:block; width:100%}
.imp-cmp .thumb{max-width:100%}
.hintbox.warn{background:var(--warns); border-color:var(--warns); color:var(--ink)}
mark{background:#fde68a; color:#1d232d; border-radius:3px; padding:0 3px}

@media (max-width:900px){
  .imp{grid-template-columns:1fr}
  .edg,.edg.free-mode{height:auto}
  .krules{grid-template-columns:1fr}
  .foot-in{padding-inline:16px}
  .tools{gap:8px}
}

/* cetak: hanya kertas yang dicetak, ukuran A4 tanpa margin */
#printRoot{display:none}
@media print{
  @page{margin:0}
  html,body{background:#fff!important}
  body>*:not(#printRoot){display:none!important}
  #printRoot{display:block!important}
  #printRoot .paper{box-shadow:none!important; transform:none!important; overflow:hidden; -webkit-print-color-adjust:exact; print-color-adjust:exact; page-break-after:avoid; break-after:avoid}
  #printRoot .safe,#printRoot .hd{display:none!important}
}
@media (max-width:900px){
  .top-in{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:0 8px}
  .nav{display:contents}
  .tools{grid-column:2; grid-row:1; gap:6px}
  .tools>.vsep:first-child{display:none}
  .tabs{grid-column:1/-1; grid-row:2; overflow-x:auto; min-height:44px; gap:16px; scrollbar-width:none}
  .brand .chev{display:none}
  .badge{display:none}
}
@media (max-width:380px){ .tools .lang{padding:4px 1px} .tools .vsep{display:none} }

/* halaman depan: footer selalu di bawah, galeri template */
#app{display:flex; flex-direction:column; min-height:100vh; min-height:100dvh}
#app>main{flex:1 0 auto}
.btn.sm{min-height:32px; padding:5px 11px; font-size:13px; border-radius:7px}
.btn.icon{min-height:40px; padding:6px 10px}
.seg button{font-family:inherit}
.sec-h{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:6px}
.sec-h h2{font-size:18px; font-weight:800; letter-spacing:-.01em}
.sec-h p{margin:2px 0 0; color:var(--mut); font-size:13.5px}
.gal{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
.gcard{display:flex; flex-direction:column; overflow:hidden; text-align:left; padding:0; cursor:pointer; font:inherit; color:inherit; transition:border-color .12s, transform .12s}
.gcard:hover{border-color:var(--acc); transform:translateY(-2px)}
.gcard .tw{background:var(--ln2); height:calc(1123px * var(--tz,.26) + 22px); display:flex; justify-content:center; padding-top:12px; overflow:hidden; pointer-events:none}
.gcard .meta{padding:10px 12px 12px; border-top:1px solid var(--ln); display:flex; flex-direction:column; gap:3px}
.gcard .meta .t{display:flex; justify-content:space-between; align-items:center; gap:6px}
.gcard .meta b{font-size:14px}
.gcard .meta span.d{font-size:12.5px; color:var(--mut); line-height:1.4}
.gcard.up{border:1.5px dashed var(--acc); background:var(--accs); align-items:center; justify-content:center; gap:8px; padding:18px; text-align:center; min-height:270px}
.gcard.up svg{width:28px; height:28px; color:var(--acc)}
.gcard.up span{font-size:13px; color:var(--ink2)}
.empty-hero{display:flex; gap:18px; align-items:center; padding:20px 22px; flex-wrap:wrap}
.empty-hero .tx{flex:1; min-width:240px}
.empty-hero h2{font-size:18px; font-weight:800}
.empty-hero p{margin:4px 0 0; color:var(--mut); font-size:14px}
.empty-hero ol{margin:8px 0 0; padding-left:18px; color:var(--ink2); font-size:13.5px; display:flex; flex-direction:column; gap:2px}

@media (prefers-reduced-motion:reduce){ .gcard{transition:none} .gcard:hover{transform:none} }
.empty-hero svg.big{width:30px; height:30px; color:var(--acc)}
@media (max-width:900px){
  .brand{min-width:0; overflow:hidden; white-space:nowrap}
  .tools .ib.on{display:none}
  .empty-hero>svg{display:none}
}
@media (max-width:480px){ .g-btn .gtx{display:none} .g-btn{padding:5px 8px} }

/* galeri template: 4 per baris, preview ikut lebar layar */
.tcard .thumb{--z:var(--tz,.3)}
.gcard .thumb{--z:var(--tz,.26)}
@media (max-width:1180px){ .grid-tpl,.gal{--tz:.27} }
@media (max-width:1060px){ .grid-tpl,.gal{grid-template-columns:repeat(3, minmax(0,1fr)); --tz:.3} }
@media (max-width:780px){ .grid-tpl,.gal{grid-template-columns:repeat(2, minmax(0,1fr)); --tz:.25} }
@media (max-width:560px){ .grid-tpl,.gal{gap:12px; --tz:.19} }
@media (max-width:380px){ .grid-tpl,.gal{--tz:.165} }
.upcard .btn{max-width:100%; white-space:normal; text-align:center}