:root{
  --font-display:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --font-ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* page desk */
  --desk1:#dfe8fb; --desk2:#eef2fc;
  --page-ink:#2a3358; --page-soft:#69749c;

  /* --- app: blue-white glass (primary) --- */
  --bg1:#e7eefb; --bg2:#dde7fa;
  --amb-a:rgba(74,108,247,.40); --amb-b:rgba(45,200,240,.30); --amb-c:rgba(150,130,255,.26);
  --glass:rgba(255,255,255,.72);
  --glass-2:rgba(255,255,255,.86);
  --glass-brd:rgba(255,255,255,.85);
  --glass-hi:rgba(255,255,255,.9);
  --neu:#e7eefb;
  --neu-lo:rgba(160,180,224,.60);
  --neu-hi:rgba(255,255,255,.95);
  --ink:#1b2547; --ink-soft:#5a6690; --ink-faint:#8b95bb;
  --line:rgba(120,140,200,.20);
  --accent:#3b5bfd; --accent2:#5f8dff; --accent-deep:#2f45c8;
  --accent-glow:rgba(59,91,253,.42);
  --accent-wash:rgba(59,91,253,.10);
  --hero1:#242e5e; --hero2:#171f42; --hero-ink:#eaefff; --hero-soft:#9aa6d6;
  --good:#12b586; --good-wash:rgba(18,181,134,.14);
  --warn:#f0a52a; --warn-wash:rgba(240,165,42,.16);
  --bad:#f2557a; --bad-wash:rgba(242,85,122,.14);
  --sh-soft:0 10px 30px -8px rgba(40,64,150,.20);
  --sh-card:0 8px 26px -6px rgba(46,66,150,.18);
  --sh-lg:0 40px 90px -24px rgba(10,20,60,.55);
  --screen-bg:radial-gradient(115% 70% at -10% -6%,var(--amb-a),transparent 40%),radial-gradient(90% 60% at 110% 14%,var(--amb-b),transparent 44%),radial-gradient(120% 74% at 55% 116%,var(--amb-c),transparent 46%),linear-gradient(168deg,var(--bg1),var(--bg2));
}
/* Tema tunggal: light. Dark mode & toggle dihapus. */
:root{color-scheme:light}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font-ui);color:var(--page-ink);
  background:radial-gradient(130% 90% at 50% -10%,var(--desk1),var(--desk2));
  min-height:100vh;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;align-items:center;padding:38px 20px 60px;gap:26px;
}
a{color:inherit;text-decoration:none}

.masthead{max-width:540px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:13px}
.wordmark{display:flex;align-items:center;gap:12px}
.seal-mark{
  width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(150deg,#5f8dff,#3b5bfd 60%,#2f45c8);
  color:#fff;font-weight:800;font-size:17px;letter-spacing:-.5px;
  box-shadow:0 8px 20px -4px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.5);
}
.wordmark b{font-size:24px;letter-spacing:-.3px;color:var(--page-ink);font-weight:800}
.wordmark b span{background:linear-gradient(120deg,#5f8dff,#3b5bfd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}
.masthead h1{font-weight:800;font-size:clamp(21px,4.4vw,30px);line-height:1.2;margin:0;color:var(--page-ink);letter-spacing:-.5px;text-wrap:balance}
.masthead p{margin:0;color:var(--page-soft);font-size:14.5px;line-height:1.55;max-width:46ch}
.kbd-hints{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:3px}
.hint{font-size:12px;color:var(--page-ink);background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);padding:6px 12px;border-radius:100px;box-shadow:0 4px 12px -4px rgba(40,64,150,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hint b{color:var(--accent);font-weight:700}

/* phone */
.phone{
  width:392px;max-width:100%;height:812px;position:relative;flex:none;
  background:linear-gradient(160deg,#f4f7ff,#dbe6fb);
  border-radius:56px;padding:12px;
  box-shadow:var(--sh-lg),inset 0 1px 2px rgba(255,255,255,.9),0 0 0 1px rgba(255,255,255,.5);
}
.app{
  position:relative;width:100%;height:100%;overflow:hidden;border-radius:44px;
  background:var(--screen-bg);
  font-size:15px;color:var(--ink);isolation:isolate;
}
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:118px;height:28px;background:rgba(20,28,60,.9);border-radius:0 0 16px 16px;z-index:56}
.screen-glass{position:absolute;inset:12px;border-radius:44px;pointer-events:none;z-index:60;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}

/* ambient blobs */
.ambient{position:absolute;inset:0;overflow:hidden;z-index:0}
.ambient i{position:absolute;border-radius:50%;filter:blur(46px);opacity:.9}
.ambient .b1{width:230px;height:230px;background:var(--amb-a);top:-40px;left:-50px}
.ambient .b2{width:200px;height:200px;background:var(--amb-b);top:180px;right:-70px}
.ambient .b3{width:240px;height:240px;background:var(--amb-c);bottom:-60px;left:-40px}
.ambient .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(120,140,220,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,140,220,.06) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(80% 60% at 50% 30%,#000,transparent)}

.statusbar{position:absolute;top:0;left:0;right:0;height:50px;padding:14px 26px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:var(--ink);z-index:40}
.statusbar .dots{display:flex;gap:5px;align-items:center}

.viewport{position:absolute;inset:0;top:0;overflow:hidden;z-index:10}
.screen{position:absolute;inset:0;padding-top:50px;display:flex;flex-direction:column;background:var(--screen-bg)}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.scroll::-webkit-scrollbar{width:0}

.glass{background:var(--glass);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--glass-brd);box-shadow:var(--sh-card),inset 0 1px 0 var(--glass-hi)}

/* inbox */
.inbox-top{padding:6px 20px 0;display:flex;flex-direction:column;gap:16px}
.topbar{display:flex;align-items:center;justify-content:space-between}
.topbar .hi .e{font-size:12px;color:var(--ink-faint);font-weight:600}
.topbar .hi h2{font-size:20px;font-weight:800;margin:2px 0 0;color:var(--ink);letter-spacing:-.3px}
.avatar{width:46px;height:46px;border-radius:15px;flex:none;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;background:linear-gradient(150deg,#5f8dff,#3b5bfd);box-shadow:0 8px 18px -4px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.5)}

.searchbar{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:18px;color:var(--ink-soft);font-size:14px}
.searchbar svg{width:18px;height:18px;flex:none;color:var(--ink-faint)}
.searchbar input{flex:1;border:none;background:none;outline:none;font:inherit;font-size:14px;color:var(--ink)}
.searchbar input::placeholder{color:var(--ink-faint)}

/* hero card */
.hero{
  position:relative;border-radius:26px;padding:20px;overflow:hidden;color:var(--hero-ink);
  background:linear-gradient(155deg,var(--hero1),var(--hero2));
  box-shadow:0 20px 44px -14px rgba(15,25,70,.6),inset 0 1px 0 rgba(255,255,255,.14);
}
.hero::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,var(--accent-glow),transparent 70%);top:-50px;right:-30px;filter:blur(6px)}
.hero .row{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.hero .lbl{font-size:12px;color:var(--hero-soft);font-weight:600;letter-spacing:.02em}
.hero .big{display:flex;align-items:baseline;gap:9px;margin-top:8px}
.hero .big .n{font-size:44px;font-weight:800;line-height:1;letter-spacing:-1px;background:linear-gradient(120deg,#fff,#a9c2ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.hero .big .u{font-size:14px;color:var(--hero-soft);line-height:1.3}
.hero .chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:6px 11px;border-radius:100px;font-size:11.5px;font-weight:600}
.hero .chip .glow{width:7px;height:7px;border-radius:50%;background:#5fe0b0;box-shadow:0 0 8px #5fe0b0}
.hero .prog{margin-top:16px;position:relative;z-index:1}
.hero .prog .bar{height:8px;border-radius:100px;background:rgba(255,255,255,.14);overflow:hidden}
.hero .prog .fill{height:100%;border-radius:100px;background:linear-gradient(90deg,#5f8dff,#57e0c6);box-shadow:0 0 12px rgba(95,141,255,.7);transition:width .5s ease}
.hero .prog .cap{display:flex;justify-content:space-between;margin-top:8px;font-size:11.5px;color:var(--hero-soft)}
.hero .prog .cap b{color:#fff;font-weight:700}

.deleg-banner{margin:14px 20px 0;padding:12px 15px;border-radius:16px;display:none;align-items:center;gap:11px;font-size:12.5px;color:var(--ink);background:var(--warn-wash);border:1px solid color-mix(in srgb,var(--warn) 34%,transparent)}
.deleg-banner.on{display:flex}
.deleg-banner .dot{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none;box-shadow:0 0 0 4px var(--warn-wash)}

.section-label{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 12px;font-size:12px;letter-spacing:.02em;color:var(--ink-soft);font-weight:700}
.section-label button, .section-label a{font:inherit;font-size:12.5px;color:var(--accent);background:none;border:none;font-weight:700;cursor:pointer;padding:0}

.doc-list{display:flex;flex-direction:column;gap:13px;padding:0 18px 140px}
.doc{position:relative;border-radius:22px;padding:15px 16px;cursor:pointer;display:flex;gap:14px;align-items:center;transition:transform .14s ease}
.doc:active{transform:scale(.98)}
.doc .ic{width:52px;height:52px;border-radius:17px;flex:none;display:grid;place-items:center;color:#fff;position:relative;box-shadow:0 10px 20px -6px var(--ic-glow,rgba(59,91,253,.5)),inset 0 1px 0 rgba(255,255,255,.55);background:var(--ic-grad,linear-gradient(150deg,#5f8dff,#3b5bfd))}
.doc .ic::after{content:"";position:absolute;inset:0;border-radius:17px;background:linear-gradient(160deg,rgba(255,255,255,.4),transparent 45%);pointer-events:none}
.doc .ic svg{width:25px;height:25px;position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.doc-main{flex:1;min-width:0}
.doc-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.doc-type{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-deep)}
.badge-api{font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--good);background:var(--good-wash);padding:2px 7px;border-radius:6px}
.doc h3{font-size:15px;font-weight:700;line-height:1.28;margin:4px 0 0;color:var(--ink);letter-spacing:-.2px}
.doc .meta{margin-top:5px;font-size:12px;color:var(--ink-soft);display:flex;flex-direction:column;gap:1px}
.doc .meta .unit{font-weight:700;color:var(--ink-soft)}
.doc .amount{font-family:var(--font-mono);font-size:12px;color:var(--accent-deep);font-weight:700}
.doc-foot{margin-top:9px;display:flex;align-items:center;gap:8px;justify-content:space-between}
.wait{font-size:11px;color:var(--ink-faint);display:inline-flex;align-items:center;gap:5px}
.prio{font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:3px 10px;border-radius:100px}
.prio.tinggi{color:var(--bad);background:var(--bad-wash)}
.prio.normal{color:var(--ink-soft);background:rgba(120,140,200,.12)}
.doc .check{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);flex:none;display:none;place-items:center;background:var(--glass-2)}
.app.bulk .doc .check{display:grid}
.app.bulk .doc .ic{display:none}
.doc.sel .check{background:linear-gradient(150deg,#5f8dff,#3b5bfd);border-color:transparent;box-shadow:0 4px 12px -2px var(--accent-glow)}
.doc.sel .check svg{width:15px;height:15px;color:#fff;opacity:1}
.doc .check svg{opacity:0}
.empty{padding:40px 24px;text-align:center;color:var(--ink-faint);font-size:13px}

/* floating dock */
.dock{position:absolute;left:0;right:0;bottom:0;z-index:30;padding:0 16px calc(14px + env(safe-area-inset-bottom));pointer-events:none}
.dock::before{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(to top,var(--bg2) 36%,transparent);pointer-events:none;z-index:0}
.dock>*{pointer-events:auto;position:relative;z-index:1}
.fab{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(38px + env(safe-area-inset-bottom));width:62px;height:62px;border-radius:22px;border:none;cursor:pointer;color:#fff;display:grid;place-items:center;background:linear-gradient(150deg,#6f9bff,#3b5bfd);box-shadow:0 16px 34px -8px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.5);z-index:2;transition:transform .15s ease}
.fab:active{transform:translateX(-50%) scale(.94)}
.fab svg{width:27px;height:27px}
.tabbar{display:flex;align-items:center;border-radius:26px;padding:10px 8px;background:var(--glass-2);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border:1px solid var(--glass-brd);box-shadow:var(--sh-card),inset 0 1px 0 var(--glass-hi)}
.tab{flex:1;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-faint);font:inherit;padding:4px 0;text-decoration:none}
.tab.spacer{visibility:hidden}
.tab svg{width:22px;height:22px}
.tab span{font-size:10px;font-weight:700}
.tab.on{color:var(--accent)}
.tab .badge{position:absolute;transform:translate(12px,-5px);background:linear-gradient(150deg,#ff8aa6,#f2557a);color:#fff;font-size:9px;font-weight:800;min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;padding:0 4px;box-shadow:0 2px 6px rgba(242,85,122,.5)}

.bulkbar{position:absolute;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:45;border-radius:22px;padding:14px 16px;display:none;align-items:center;justify-content:space-between;gap:12px;color:#fff;background:linear-gradient(150deg,#2a366e,#1a2148);box-shadow:0 20px 44px -12px rgba(15,25,70,.6),inset 0 1px 0 rgba(255,255,255,.14)}
.app.bulk .bulkbar{display:flex}
.app.bulk .dock{display:none}
.bulkbar .cnt{font-size:13px;color:var(--hero-soft)}
.bulkbar .cnt b{font-size:20px;color:#fff;font-weight:800;margin-right:4px}
.bulkbar button{font:inherit;font-weight:700;font-size:14px;border:none;cursor:pointer;background:linear-gradient(150deg,#6f9bff,#3b5bfd);color:#fff;padding:11px 18px;border-radius:15px;display:inline-flex;align-items:center;gap:7px;box-shadow:0 8px 18px -4px var(--accent-glow)}
.bulkbar button[disabled]{opacity:.5}

/* detail */
.subhead{display:flex;align-items:center;gap:12px;padding:10px 16px 14px}
.iconbtn{width:42px;height:42px;border-radius:15px;border:1px solid var(--glass-brd);background:var(--glass-2);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--sh-card)}
.iconbtn svg{width:19px;height:19px}
.subhead .t{flex:1;min-width:0}
.subhead .t .k{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-faint)}
.subhead .t .n{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}

.paper-wrap{padding:4px 18px 8px}
.paper{background:#fff;color:#1a1f33;border-radius:20px;box-shadow:0 20px 40px -14px rgba(20,35,90,.35),inset 0 1px 0 rgba(255,255,255,.9);padding:24px 22px;font-size:11px;line-height:1.7;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.8)}
.paper .ph-logo{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #3b5bfd;padding-bottom:12px;margin-bottom:15px}
.paper .ph-logo .co{font-weight:800;font-size:13.5px;color:#1b2547;line-height:1.2;letter-spacing:-.2px}
.paper .ph-logo .co small{display:block;font-weight:500;font-size:8.5px;color:#7a83a6;letter-spacing:.02em;margin-top:2px}
.paper .ph-logo .rt{text-align:right;font-family:var(--font-mono);font-size:8.5px;color:#7a83a6}
.paper h4{text-align:center;font-weight:800;font-size:12.5px;margin:6px 0 3px;color:#1b2547;letter-spacing:.02em}
.paper .doc-no{text-align:center;font-family:var(--font-mono);font-size:9px;color:#8b93b5;margin-bottom:15px}
.paper p{margin:0 0 9px;color:#3a4266}
.paper .row2{display:grid;grid-template-columns:88px 1fr;gap:3px 8px;margin:2px 0 12px;font-size:10.5px;color:#3a4266}
.paper .row2 b{color:#1b2547;font-weight:700}
.paper .amt{font-family:var(--font-mono);font-weight:700;font-size:11px;color:#2f45c8}
.paper .ttd-slot{margin-top:20px;display:flex;justify-content:flex-end}
.paper .ttd-slot .box{width:150px;text-align:center;font-size:9.5px;color:#7a83a6}
.paper .ttd-line{height:52px;border-bottom:1px dashed #c2c9e0;margin:4px 0 5px;display:grid;place-items:center;position:relative}
.paper .ttd-line.signed{border-bottom:1px solid #1b2547}
.paper .ttd-here{color:var(--accent);font-weight:700;font-size:9px;border:1.5px dashed var(--accent);border-radius:8px;padding:3px 9px;background:var(--accent-wash)}
.paper .ttd-img{max-height:48px;max-width:140px}
.sig-ink{position:absolute;inset:0;width:100%;height:100%}
.paper .watermark{position:absolute;right:-6px;bottom:2px;font-weight:800;font-size:50px;color:rgba(59,91,253,.06);transform:rotate(-8deg);pointer-events:none;letter-spacing:-2px}

.block{padding:16px 20px}
.block-title{font-size:12px;color:var(--ink-soft);font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.block-title::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.trail-card{border-radius:20px;padding:18px}
.trail{position:relative;padding-left:26px}
.trail::before{content:"";position:absolute;left:8px;top:6px;bottom:20px;width:2px;background:var(--line)}
.step{position:relative;padding-bottom:18px}
.step:last-child{padding-bottom:0}
.step .node{position:absolute;left:-26px;top:1px;width:18px;height:18px;border-radius:50%;background:var(--glass-2);border:2px solid var(--line);display:grid;place-items:center}
.step.done .node{background:linear-gradient(150deg,#2fd3a6,#12b586);border-color:transparent;box-shadow:0 3px 8px -1px rgba(18,181,134,.5)}
.step.done .node svg{width:10px;height:10px;color:#fff}
.step.current .node{background:linear-gradient(150deg,#6f9bff,#3b5bfd);border-color:transparent;box-shadow:0 0 0 4px var(--accent-wash),0 3px 8px -1px var(--accent-glow)}
.step .who{font-size:13.5px;font-weight:700;color:var(--ink)}
.step .role{font-size:11.5px;color:var(--ink-soft);margin-top:1px}
.step .stamp{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-faint);margin-top:3px}
.step.current .role{color:var(--accent);font-weight:700}
.step .act{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--good);margin-left:6px;background:var(--good-wash);padding:1px 6px;border-radius:5px}
.step.slow .node{background:linear-gradient(150deg,#f7c56a,#f0a52a);border-color:transparent;box-shadow:0 0 0 4px var(--warn-wash)}
.step .dur-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.durc{font-size:10.5px;color:var(--ink-faint)}
.hold{font-size:10px;font-weight:800;letter-spacing:.02em;color:var(--warn);background:var(--warn-wash);padding:2px 8px;border-radius:100px;display:inline-flex;align-items:center;gap:4px}
.hold svg{width:10px;height:10px}
.nowtag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);background:var(--accent-wash);padding:2px 8px;border-radius:100px}

.flow-summary{display:flex;flex-direction:column;gap:11px;padding:15px;border-radius:18px;margin-bottom:12px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-brd);box-shadow:var(--sh-card)}
.fs-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fs-stage{font-size:13px;font-weight:700;color:var(--ink)}
.fs-here{font-size:11px;color:var(--accent);font-weight:800;background:var(--accent-wash);padding:3px 10px;border-radius:100px}
.fs-dots{display:flex;gap:5px;align-items:center}
.fs-dots i{flex:1;height:6px;border-radius:100px;background:var(--line)}
.fs-dots i.done{background:linear-gradient(90deg,#2fd3a6,#12b586)}
.fs-dots i.cur{background:linear-gradient(90deg,#6f9bff,#3b5bfd)}
.fs-warn{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--warn);font-weight:700;background:var(--warn-wash);padding:9px 12px;border-radius:12px}
.fs-warn svg{width:15px;height:15px;flex:none}

.flow-mini{display:flex;align-items:center;gap:8px;margin-top:9px}
.flow-mini .fm-dots{display:flex;gap:3px}
.flow-mini .fm-dots i{width:15px;height:4px;border-radius:100px;background:var(--line)}
.flow-mini .fm-dots i.done{background:#12b586}
.flow-mini .fm-dots i.cur{background:var(--accent)}
.flow-mini .fm-label{font-size:10.5px;color:var(--ink-faint);font-weight:600}
.flow-mini .fm-hold{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--warn);background:var(--warn-wash);padding:2px 7px;border-radius:100px}

.guide-bar{display:flex;align-items:center;gap:11px;margin:0 16px 4px;padding:11px 14px;border-radius:18px;color:#fff;background:linear-gradient(150deg,#2a366e,#1a2148);box-shadow:0 12px 26px -8px rgba(15,25,70,.5),inset 0 1px 0 rgba(255,255,255,.14)}
.guide-bar .gtxt{flex:1;font-size:12.5px}
.guide-bar .gtxt b{font-weight:800}
.guide-bar .gtxt span{display:block;font-size:10.5px;color:var(--hero-soft);margin-top:1px}
.guide-bar a.gx{font:inherit;font-size:12px;font-weight:700;border:none;border-radius:11px;padding:8px 13px;cursor:pointer;background:rgba(255,255,255,.15);color:#fff}

.actionbar{display:flex;gap:11px;padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
.btn{flex:1;font:inherit;font-weight:700;font-size:15px;border-radius:18px;padding:16px;cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn svg{width:18px;height:18px}
.btn-reject{flex:0 0 44%;background:var(--glass-2);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 32%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn-sign{background:linear-gradient(150deg,#6f9bff,#3b5bfd);color:#fff;box-shadow:0 14px 30px -8px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-sign:active{transform:translateY(1px)}

/* sign sheet */
.scrim{position:absolute;inset:0;background:rgba(12,20,50,.4);opacity:0;pointer-events:none;transition:opacity .3s;z-index:70;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:75;border-radius:30px 30px 0 0;transform:translateY(100%);transition:transform .38s cubic-bezier(.32,.72,0,1);padding:12px 20px calc(22px + env(safe-area-inset-bottom));max-height:90%;display:flex;flex-direction:column;background:var(--glass-2);backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);border:1px solid var(--glass-brd);border-bottom:none;box-shadow:0 -20px 50px -14px rgba(15,25,70,.4),inset 0 1px 0 var(--glass-hi)}
.sheet.up{transform:translateY(0)}
.sheet:not(.up){pointer-events:none}
@media (prefers-reduced-motion:reduce){.sheet,.scrim{transition:none}}
.grabber{width:40px;height:5px;border-radius:100px;background:var(--line);margin:0 auto 16px}
.sheet h3{font-weight:800;font-size:20px;margin:0;color:var(--ink);text-align:center;letter-spacing:-.3px}
.sheet .sub{text-align:center;font-size:12.5px;color:var(--ink-soft);margin:5px 0 16px}
.sig-tabs{display:flex;gap:6px;background:rgba(120,140,200,.12);border-radius:15px;padding:5px;margin-bottom:14px}
.sig-tab{flex:1;text-align:center;font:inherit;font-size:13px;font-weight:700;border:none;background:none;cursor:pointer;padding:10px;border-radius:11px;color:var(--ink-soft)}
.sig-tab.on{background:var(--glass-hi);color:var(--accent);box-shadow:0 4px 12px -3px rgba(40,64,150,.2)}
.pad-wrap{position:relative;border:1.5px dashed var(--line);border-radius:18px;background:linear-gradient(var(--glass),var(--glass));height:172px;overflow:hidden}
.pad-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.pad-hint{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-faint);font-size:13px;pointer-events:none}
.pad-base{position:absolute;left:16px;right:16px;bottom:44px;border-bottom:1px solid var(--line)}
.pad-x{position:absolute;left:16px;bottom:46px;color:var(--ink-faint);font-size:15px}
.saved-sig{height:172px;border-radius:18px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--glass);border:1.5px solid var(--line)}
.saved-sig.show{display:flex}
.saved-sig svg.sg{width:190px;height:70px;color:var(--ink)}
.saved-sig img.sg{max-width:190px;max-height:80px}
.saved-sig .cap{font-size:11px;color:var(--ink-faint);font-family:var(--font-mono)}
.upload-sig{height:172px;border-radius:18px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--glass);border:1.5px dashed var(--line);text-align:center;padding:14px}
.upload-sig.show{display:flex}
.upload-sig img{max-width:200px;max-height:96px;display:none;border-radius:8px}
.upload-sig.has-img img{display:block}
.upload-sig.has-img .up-hint{display:none}
.upload-sig .up-hint{color:var(--ink-faint);font-size:12.5px;line-height:1.5}
.upload-sig .up-btn{font:inherit;font-size:13px;font-weight:700;color:var(--accent);background:var(--accent-wash);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);border-radius:12px;padding:9px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.upload-sig .up-btn svg{width:15px;height:15px}
.pad-tools{display:flex;justify-content:space-between;align-items:center;margin:10px 2px 14px}
.pad-tools .clr{font:inherit;font-size:12.5px;color:var(--accent);background:none;border:none;cursor:pointer;font-weight:700;display:inline-flex;gap:5px;align-items:center}
.pad-tools .who-sign{font-size:12px;color:var(--ink-soft)}
.pad-tools .who-sign b{color:var(--ink);font-weight:700}
.toggle-meterai{display:flex;align-items:center;justify-content:space-between;padding:13px 0 15px;border-top:1px solid var(--line);margin-top:2px}
.toggle-meterai .lab{font-size:12px;color:var(--ink-soft)}
.toggle-meterai .lab b{color:var(--ink);font-weight:700;display:block;font-size:13.5px;margin-bottom:1px}
.sw{width:46px;height:27px;border-radius:100px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:.2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 2px 5px rgba(20,35,90,.35)}
.sw.on{background:linear-gradient(150deg,#2fd3a6,#12b586)}
.sw.on::after{left:22px}
.confirm{width:100%;font:inherit;font-weight:800;font-size:15.5px;border:none;cursor:pointer;border-radius:18px;padding:17px;color:#fff;background:linear-gradient(150deg,#6f9bff,#3b5bfd);box-shadow:0 14px 30px -8px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;gap:8px}
.confirm[disabled]{opacity:.45;box-shadow:none;cursor:not-allowed}

/* success */
.success{position:absolute;inset:0;z-index:90;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:40px;text-align:center;background:var(--screen-bg)}
.success.show{display:flex}
.seal-big{width:130px;height:130px;position:relative;margin-bottom:12px}
.seal-ring{position:absolute;inset:0;border-radius:34px;display:grid;place-items:center;background:linear-gradient(150deg,#6f9bff,#3b5bfd 60%,#2f45c8);box-shadow:0 20px 44px -10px var(--accent-glow),inset 0 2px 0 rgba(255,255,255,.4);transform:scale(0);animation:seal .5s cubic-bezier(.2,1.3,.4,1) forwards}
.seal-ring::before{content:"";position:absolute;inset:10px;border-radius:26px;border:1.5px dashed rgba(255,255,255,.5)}
.seal-ring svg{width:56px;height:56px;color:#fff;opacity:0;transform:scale(.4);animation:pop .35s ease .32s forwards;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
@keyframes seal{to{transform:scale(1)}}
@keyframes pop{to{opacity:1;transform:scale(1)}}
.success h2{font-weight:800;font-size:23px;margin:6px 0 0;color:var(--ink);opacity:0;animation:fade .4s ease .5s forwards;letter-spacing:-.3px}
.success p{font-size:13.5px;color:var(--ink-soft);margin:6px 0 0;opacity:0;animation:fade .4s ease .62s forwards;line-height:1.5;max-width:30ch}
.success .stampline{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint);margin-top:14px;opacity:0;animation:fade .4s ease .74s forwards}
.success .done-btn{margin-top:24px;font:inherit;font-weight:700;font-size:15px;border:none;color:#fff;background:linear-gradient(150deg,#6f9bff,#3b5bfd);padding:14px 36px;border-radius:16px;cursor:pointer;opacity:0;animation:fade .4s ease .86s forwards;box-shadow:0 12px 26px -8px var(--accent-glow)}
@keyframes fade{to{opacity:1}}

/* plain screens */
.plain-head{padding:14px 22px 8px}
.plain-head h2{font-weight:800;font-size:22px;margin:0;color:var(--ink);letter-spacing:-.3px}
.plain-head p{font-size:13px;color:var(--ink-soft);margin:6px 0 0;line-height:1.5}
.card{border-radius:22px;margin:8px 18px 14px;overflow:hidden}
.deleg-active{padding:16px 18px;display:flex;gap:13px;align-items:center;border-bottom:1px solid var(--line)}
.deleg-active .av{width:44px;height:44px;border-radius:15px;background:linear-gradient(150deg,#7c6cff,#4a6cf7);color:#fff;display:grid;place-items:center;font-weight:800;flex:none;box-shadow:0 8px 18px -4px rgba(74,108,247,.5)}
.deleg-active .info{flex:1}
.deleg-active .info b{font-size:14px;font-weight:700;color:var(--ink);display:block}
.deleg-active .info span{font-size:12px;color:var(--ink-soft)}
.field{padding:15px 18px;border-bottom:1px solid var(--line)}
.field:last-child{border-bottom:none}
.field label{font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;display:block;margin-bottom:7px}
.field .val{font-size:14.5px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;font-weight:600}
.field .val .mut{color:var(--ink-soft);font-size:13px;font-weight:400}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:14px;color:var(--ink);background:#fff;border:1.5px solid rgba(96,118,180,.42);border-radius:12px;padding:11px 13px;outline:none}
.field textarea{resize:vertical;min-height:80px}
.row-toggle{display:flex;justify-content:space-between;align-items:center;padding:16px 18px}
.row-toggle .lab b{font-size:14.5px;color:var(--ink);font-weight:700;display:block}
.row-toggle .lab span{font-size:12px;color:var(--ink-soft)}
.hist-item{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);cursor:pointer;text-decoration:none}
.hist-item:last-child{border-bottom:none}
.hist-item .hi-ic{width:38px;height:38px;border-radius:13px;background:linear-gradient(150deg,#2fd3a6,#12b586);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 6px 14px -4px rgba(18,181,134,.5)}
.hist-item .hi-ic.rej{background:linear-gradient(150deg,#ff8aa6,#f2557a);box-shadow:0 6px 14px -4px rgba(242,85,122,.5)}
.hist-item .hi-ic svg{width:18px;height:18px}
.hist-item .hm{flex:1;min-width:0}
.hist-item .hm b{font-size:13.5px;font-weight:700;color:var(--ink);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-item .hm span{font-size:11px;color:var(--ink-faint);font-family:var(--font-mono)}
.hist-item .qr{width:36px;height:36px;border-radius:9px;flex:none;padding:3px;background:#fff;box-shadow:0 4px 10px -3px rgba(20,35,90,.25)}

.verify-card{margin:8px 18px 16px;text-align:center;border-radius:24px;padding:24px}
.verify-card .qbig{width:154px;height:154px;margin:6px auto 14px;padding:11px;background:#fff;border-radius:18px;box-shadow:0 14px 30px -10px rgba(20,35,90,.35)}
.verify-card .vh{font-size:17px;color:var(--ink);font-weight:800;letter-spacing:-.2px}
.verify-card .vsub{font-size:12px;color:var(--ink-soft);margin:5px 0 0;line-height:1.5}
.verify-badge{display:inline-flex;align-items:center;gap:6px;margin-top:16px;background:var(--good-wash);color:var(--good);font-size:12px;font-weight:700;padding:8px 15px;border-radius:100px}
.verify-badge.pending{background:var(--warn-wash);color:var(--warn)}
.verify-badge svg{width:15px;height:15px}
.hashline{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-faint);margin-top:14px;word-break:break-all;line-height:1.6}

.foot-note{max-width:440px;text-align:center;color:var(--page-soft);font-size:12px;line-height:1.6}
.foot-note b{color:var(--page-ink);font-weight:700}

.theme-toggle{position:fixed;top:16px;right:16px;z-index:100;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);color:var(--page-ink);width:42px;height:42px;border-radius:14px;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 16px -4px rgba(40,64,150,.25)}
.theme-toggle svg{width:19px;height:19px}

/* toast */
.toast{position:absolute;left:16px;right:16px;bottom:96px;z-index:95;color:#fff;padding:13px 16px;border-radius:16px;font-size:13px;text-align:center;background:linear-gradient(150deg,#2a366e,#1a2148);box-shadow:0 16px 34px -10px rgba(15,25,70,.6);opacity:0;transition:.25s}
.toast.show{opacity:1}

/* login */
.login-screen{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:34px 30px calc(30px + env(safe-area-inset-bottom));gap:8px;z-index:20}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:26px}
.login-brand .seal-mark{width:56px;height:56px;border-radius:18px;font-size:24px}
.login-brand h1{font-size:24px;font-weight:800;margin:2px 0 0;color:var(--ink);letter-spacing:-.4px}
.login-brand h1 span{background:linear-gradient(120deg,#5f8dff,#3b5bfd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.login-brand p{font-size:12.5px;color:var(--ink-soft);margin:2px 0 0;text-align:center}
.login-form{display:flex;flex-direction:column;gap:13px}
.login-form label{font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;display:block;margin-bottom:6px}
.login-form input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1.5px solid rgba(96,118,180,.42);border-radius:15px;padding:14px 15px;outline:none;box-shadow:var(--sh-card)}
.login-form input:focus{border-color:var(--accent)}
.login-err{font-size:12px;color:var(--bad);background:var(--bad-wash);border-radius:12px;padding:10px 13px;text-align:center}
.login-btn{margin-top:6px;width:100%;font:inherit;font-weight:800;font-size:15.5px;border:none;cursor:pointer;border-radius:16px;padding:16px;color:#fff;background:linear-gradient(150deg,#6f9bff,#3b5bfd);box-shadow:0 14px 30px -8px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.4)}
.login-hint{margin-top:14px;font-size:11px;color:var(--ink-faint);text-align:center;line-height:1.7}
.login-hint b{color:var(--ink-soft)}
.login-hint a{color:var(--accent);text-decoration:none;font-weight:600}
.login-hint a:hover{text-decoration:underline}
/* Tombol yang harus tampil sebagai tautan (mis. "Sign out instead" yang
   sebenarnya form POST agar terlindung CSRF). */
.link-plain{background:none;border:0;padding:0;font:inherit;font-size:12.5px;color:var(--ink-faint);cursor:pointer;text-decoration:underline}
.link-plain:hover{color:var(--ink-soft)}
/* Bukan label isian: aturan .login-form label di atas membuatnya jadi kapital
   dan sebaris sendiri, jadi di sini dikembalikan ke bentuk kotak centang. */
.login-remember{display:flex!important;align-items:center;gap:8px;margin:0!important;font-size:12.5px;letter-spacing:0!important;text-transform:none!important;font-weight:500!important;color:var(--ink-soft);cursor:pointer;user-select:none}
.login-remember input{width:auto!important;margin:0;padding:0!important;box-shadow:none!important;accent-color:var(--accent)}

/* ============ DESKTOP (penyiap PDF) ============ */
body.desk{display:block;padding:0;background:linear-gradient(168deg,#5b7cf5,#3f5fe0 46%,#5b7cf5);min-height:100vh;color:var(--page-ink)}

/* jendela aplikasi */
.shell{max-width:1280px;margin:26px auto 30px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(12,26,80,.55),0 6px 20px -8px rgba(12,26,80,.25)}

/* baris atas: pencarian (kiri) + akun + brand (kanan) — mengikuti referensi */
.desk-top{display:flex;align-items:center;gap:18px;padding:12px 22px;background:#fff}
.topsearch{flex:1;min-width:0;max-width:520px;display:flex;align-items:center;gap:9px;color:var(--ink-faint);
  background:#f4f6fc;border:1.5px solid rgba(96,118,180,.28);border-radius:12px;padding:0 13px;transition:border-color .15s,box-shadow .15s}
.topsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);background:#fff}
.topsearch svg{width:16px;height:16px;flex:none}
.topsearch input{flex:1;min-width:0;font:inherit;font-size:13.5px;color:var(--ink);border:none;background:none;padding:9px 0;box-shadow:none}
.topsearch input::placeholder{color:#8b95bb}
.topsearch input:focus{outline:none;border:none;box-shadow:none}
.desk-brand{display:flex;align-items:center;gap:9px;flex:none;padding-left:18px;border-left:1px solid rgba(120,140,200,.20)}
.desk-brand img{height:52px;width:auto;max-width:190px;object-fit:contain}
.desk-brand b{font-size:18px;font-weight:800;letter-spacing:-.3px;color:var(--page-ink)}
.desk-user{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--ink-soft);flex:none}
.desk-user .who{text-align:right;line-height:1.3}
.desk-user .who .nm{display:block;font-weight:700;font-size:13px;color:var(--ink)}
.desk-user .who .ps{display:block;font-size:11px;color:var(--ink-faint)}
.desk-link{font-weight:700;color:var(--accent);font-size:12.5px}

/* pita navigasi biru — gradasi cyan menyerong di kiri, tab aktif bersudut miring */
.topnav{position:relative;background:linear-gradient(95deg,#3fc6e4,#4a86f2 26%,#3b5bfd 62%,#5079ff);padding:0 16px;overflow:hidden}
.topnav::before{content:"";position:absolute;inset:0;background:linear-gradient(101deg,rgba(63,198,228,.85) 0%,rgba(63,198,228,.28) 13%,transparent 26%);pointer-events:none}
.topnav::after{content:"";position:absolute;inset:0;background:linear-gradient(101deg,transparent 62%,rgba(255,255,255,.09) 62.4%,rgba(255,255,255,.09) 82%,transparent 82.4%);pointer-events:none}
.topnav-in{position:relative;z-index:1;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.topnav-in::-webkit-scrollbar{display:none}
.topnav a{position:relative;display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:13.5px;font-weight:700;color:rgba(255,255,255,.9);padding:15px 20px 14px;transition:color .15s}
.topnav a svg{width:17px;height:17px;flex:none}
.topnav a > *{position:relative;z-index:1}
.topnav a::before{content:"";position:absolute;inset:0;border-radius:12px 12px 0 0;transform:skewX(-13deg);transition:background .15s;z-index:0}
.topnav a:hover{color:#fff}
.topnav a:hover::before{background:rgba(255,255,255,.16)}
.topnav a.on{color:var(--accent)}
.topnav a.on::before{background:#fff;box-shadow:0 -8px 20px -10px rgba(8,20,70,.45)}

.desk-main{padding:26px 26px 44px}

/* di dalam lembar putih, panel pakai border solid (bukan glass) */
body.desk .desk-card,
body.desk .web-panel,
body.desk .stat,
body.desk .table-wrap,
body.desk .doc-grid .doc{background:#fff;border:1px solid rgba(120,140,200,.22);box-shadow:0 4px 16px -10px rgba(40,64,150,.30);backdrop-filter:none;-webkit-backdrop-filter:none}
body.desk .desk-card{border-radius:16px;padding:22px}
body.desk .web-panel{border-radius:14px}
body.desk .stat{border-radius:14px}
body.desk .table-wrap{border-radius:14px}
body.desk .doc-grid .doc{border-radius:16px}
body.desk .doc-grid .doc:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 10px 26px -14px var(--accent-glow)}
body.desk .filterbar a:not(.on),
body.desk .unit-pick,
body.desk .web-search{background:#fff;border:1px solid rgba(120,140,200,.28)}

/* pencarian dalam halaman: beri tepi agar tak hilang di atas lembar putih */
body.desk .web-search{box-shadow:none}
/* tombol sekunder juga perlu tepi terlihat di atas putih */
body.desk .desk-btn.ghost,
body.desk .mini-btn{background:#fff;border:1px solid rgba(120,140,200,.32)}
body.desk .desk-btn.ghost:hover,
body.desk .mini-btn:hover{border-color:var(--accent);color:var(--accent)}
/* panel menempel: header tak lagi sticky, jadi jaraknya dirapatkan */
body.desk .prep-side,
body.desk .web-detail .side{top:16px}
body.desk .desk-h1{font-size:27px}
body.desk .app-copyright{color:rgba(255,255,255,.78)}
body.desk .app-copyright em{color:#fff}

body.desk .unit-pick:has(input:checked){background:var(--accent-wash);border-color:var(--accent)}

/* penanda jenis tugas di kartu kotak masuk */
.task-tag{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:100px}
.task-tag.ttd{color:var(--accent);background:var(--accent-wash)}
.task-tag.paraf{color:#0f9d78;background:var(--good-wash)}
.task-tag.deleg{color:#a06a00;background:var(--warn-wash)}

@media (max-width:1120px){.shell{margin:0 auto;border-radius:0;min-height:100vh}}
.desk-flash{background:var(--good-wash);color:var(--good);border:1px solid color-mix(in srgb,var(--good) 34%,transparent);padding:12px 16px;border-radius:14px;font-size:13.5px;font-weight:600;margin-bottom:18px}
.desk-h1{font-size:26px;font-weight:800;letter-spacing:-.4px;margin:0 0 4px;color:var(--page-ink)}
.desk-sub{font-size:14px;color:var(--page-soft);margin:0 0 22px}
.desk-card{background:var(--glass);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border:1px solid var(--glass-brd);box-shadow:var(--sh-card);border-radius:22px;padding:26px}
.desk-upload{max-width:620px;margin:0 auto}
.desk-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.desk-field{margin-bottom:16px}
/* Keterangan kecil di bawah isian, dan kotak penjelas untuk hal yang
   TIDAK lagi diisi manual (mis. sandi awal yang dibangkitkan sistem). */
.desk-hint{margin:6px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-faint)}
.desk-note{margin:0 0 16px;padding:11px 14px;font-size:12.5px;line-height:1.55;color:var(--ink-soft);background:var(--accent-wash,rgba(96,118,180,.10));border-left:3px solid var(--accent);border-radius:0 10px 10px 0}
.desk-field label{display:block;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-bottom:7px}
.desk-field input,.desk-field select{width:100%;font:inherit;font-size:14.5px;color:var(--ink);background:#fff;border:1.5px solid rgba(96,118,180,.42);border-radius:12px;padding:12px 14px;outline:none;box-shadow:inset 0 1px 2px rgba(40,64,150,.06)}
.desk-field input:hover,.desk-field select:hover{border-color:rgba(96,118,180,.68)}
.desk-field input:focus,.desk-field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.desk-drop{border:2px dashed var(--line);border-radius:16px;padding:34px 20px;text-align:center;cursor:pointer;transition:.15s;background:var(--glass-2)}
.desk-drop:hover,.desk-drop.drag{border-color:var(--accent);background:var(--accent-wash)}
.desk-drop svg{width:38px;height:38px;color:var(--accent);margin-bottom:8px}
.desk-drop b{display:block;font-size:15px;color:var(--ink);font-weight:700}
.desk-drop span{font-size:12.5px;color:var(--ink-soft)}
.desk-drop .fname{margin-top:10px;font-size:13px;color:var(--good);font-weight:700}
.desk-btn{font:inherit;font-weight:800;font-size:15px;border:none;cursor:pointer;border-radius:14px;padding:14px 22px;color:#fff;background:linear-gradient(150deg,#6f9bff,#3b5bfd);box-shadow:0 12px 26px -8px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.4);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.desk-btn.ghost{background:var(--glass-2);color:var(--ink);border:1px solid var(--glass-brd);box-shadow:none}
.desk-btn svg{width:18px;height:18px}

/* editor penempatan */
.prep-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;align-items:start}
.prep-layout > *{min-width:0}
.prep-side{position:sticky;top:78px}
.prep-side h3{font-size:14px;font-weight:800;margin:0 0 4px;color:var(--ink)}
.prep-side p{font-size:12.5px;color:var(--ink-soft);line-height:1.55;margin:0 0 16px}
.tool{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font:inherit;cursor:pointer;border:1px solid var(--glass-brd);background:var(--glass-2);border-radius:14px;padding:12px 13px;margin-bottom:10px;color:var(--ink)}
.tool:hover{border-color:var(--accent)}
.tool .ti{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none}
.tool.ttd .ti{background:linear-gradient(150deg,#6f9bff,#3b5bfd)}
.tool.paraf .ti{background:linear-gradient(150deg,#3ad9c0,#2b8ff0)}
.tool b{font-size:13.5px;font-weight:700;display:block}
.tool span{font-size:11.5px;color:var(--ink-soft)}
.prep-hint{font-size:11.5px;color:var(--ink-faint);line-height:1.6;margin-top:6px}
.prep-stage{background:var(--glass);border:1px solid var(--glass-brd);border-radius:18px;padding:18px;box-shadow:var(--sh-card);min-height:400px}
.pdf-page{position:relative;margin:0 auto 18px;box-shadow:0 10px 30px -12px rgba(20,35,90,.4);background:#fff;border-radius:4px;overflow:hidden}
.pdf-page canvas{display:block;width:100%;height:auto}
.fld{position:absolute;border-radius:6px;cursor:move;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;user-select:none;box-shadow:0 4px 12px -3px rgba(20,35,90,.3)}
.fld.ttd{background:rgba(59,91,253,.16);border:1.5px dashed var(--accent);color:var(--accent-deep)}
.fld.paraf{background:rgba(43,143,240,.14);border:1.5px dashed #2b8ff0;color:#1c6fd0}
.fld .del{position:absolute;top:-9px;right:-9px;width:20px;height:20px;border-radius:50%;background:var(--bad);color:#fff;border:none;cursor:pointer;font-size:12px;display:grid;place-items:center;line-height:1}
.fld .rz{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;border-radius:3px;background:#fff;border:1.5px solid var(--accent);cursor:nwse-resize}
.prep-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.prep-count{font-size:12.5px;color:var(--ink-soft)}
.prep-count b{color:var(--ink)}
@media (max-width:820px){.prep-layout{grid-template-columns:1fr}.prep-side{position:static}.desk-grid2{grid-template-columns:1fr}}

/* PDF embed di layar signer/verifikasi */
.pdf-embed{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#f4f6fc;box-shadow:var(--sh-card)}
.pdf-embed iframe{width:100%;height:min(78vh,900px);min-height:520px;border:none;display:block;background:#f4f6fc}
.pdf-note{font-size:11.5px;color:var(--ink-soft);text-align:center;margin:9px 6px 0;line-height:1.5}
.pdf-note b{color:var(--accent);font-weight:700}

/* ============ ADMIN ============ */
.admin-nav{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.admin-nav a{font-size:13.5px;font-weight:700;color:var(--ink-soft);padding:9px 15px;border-radius:12px;background:var(--glass-2);border:1px solid var(--glass-brd)}
.admin-nav a.on{color:#fff;background:linear-gradient(150deg,#6f9bff,#3b5bfd);border-color:transparent;box-shadow:0 8px 18px -6px var(--accent-glow)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--glass);border:1px solid var(--glass-brd);border-radius:18px;padding:18px 20px;box-shadow:var(--sh-card)}
.stat .v{font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--ink);font-variant-numeric:tabular-nums}
.stat .k{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-top:2px}
.stat.awaiting .v{color:var(--accent)}.stat.signed .v{color:var(--good)}.stat.rejected .v{color:var(--bad)}.stat.review .v{color:var(--warn)}
.table-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--glass-brd);background:var(--glass)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
table.tbl th{text-align:left;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;padding:12px 15px;border-bottom:1px solid var(--line);background:var(--glass-2)}
table.tbl td{padding:12px 15px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tr:hover td{background:var(--accent-wash)}
.pill{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:3px 9px;border-radius:100px;display:inline-block}
.pill.role-admin{color:#7c6cff;background:rgba(124,108,255,.14)}
.pill.role-user{color:var(--ink-soft);background:rgba(120,140,200,.14)}
.pill.role-direktur{color:var(--accent);background:var(--accent-wash)}
.pill.role-reviewer{color:#2b8ff0;background:rgba(43,143,240,.14)}
.pill.role-staff{color:var(--ink-soft);background:rgba(120,140,200,.14)}
.pill.st-signed{color:var(--good);background:var(--good-wash)}
.pill.st-awaiting_signature{color:var(--accent);background:var(--accent-wash)}
.pill.st-in_review{color:var(--warn);background:var(--warn-wash)}
.pill.st-rejected{color:var(--bad);background:var(--bad-wash)}
.pill.st-draft{color:var(--ink-soft);background:rgba(120,140,200,.14)}
.pill.on{color:var(--good);background:var(--good-wash)}.pill.off{color:var(--bad);background:var(--bad-wash)}
.tbl-act{font-size:12.5px;font-weight:700;color:var(--accent)}
.mini-btn{font:inherit;font-size:12px;font-weight:700;border:1px solid var(--glass-brd);background:var(--glass-2);color:var(--ink);border-radius:9px;padding:6px 11px;cursor:pointer}
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filterbar a{font-size:12.5px;font-weight:700;color:var(--ink-soft);padding:7px 13px;border-radius:100px;background:var(--glass-2);border:1px solid var(--glass-brd)}
.filterbar a.on{color:#fff;background:linear-gradient(150deg,#6f9bff,#3b5bfd);border-color:transparent}
.audit-json{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-faint);max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* multi-signer editor */
.add-signer{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.add-signer select{width:100%;font:inherit;font-size:13px;padding:9px 11px;border-radius:11px;border:1.5px solid rgba(96,118,180,.42);background:#fff;color:var(--ink)}

/* catatan yang dicetak di lembar dokumen */
.sheet-note label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.sheet-note label em{font-style:normal;font-weight:400;color:var(--ink-faint)}
/* min-height agar tetap lega walau atribut rows terlupa; baris baru memang
   dipakai (ikut tercetak di PDF), jadi ruangnya perlu lebih dari dua baris. */
.sheet-note textarea{width:100%;font:inherit;font-size:13px;line-height:1.5;padding:10px 12px;
  min-height:92px;border-radius:12px;border:1.5px solid rgba(96,118,180,.42);
  background:#fff;color:var(--ink);resize:vertical}
.sheet-note textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.sheet-note small{display:block;font-size:11px;color:var(--ink-faint);margin-top:5px;line-height:1.5}

/* pilih unit bisnis tambahan (kerja 2 kaki) */
.unit-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px}
.unit-pick{display:flex;align-items:center;gap:9px;border:1px solid var(--glass-brd);background:var(--glass-2);border-radius:11px;padding:9px 11px;cursor:pointer;font-size:12.5px}
.unit-pick:hover{border-color:var(--accent)}
.unit-pick input{width:17px;height:17px;flex:none}
.unit-pick b{font-weight:600;color:var(--ink)}
.unit-pick em{display:block;font-style:normal;font-size:10.5px;color:var(--ink-faint);font-family:var(--font-mono)}
.unit-pick:has(input:checked){border-color:var(--accent);background:var(--accent-wash)}

/* combobox ketik-cari penandatangan */
.combo{position:relative}
.combo input{width:100%;font:inherit;font-size:13px;padding:9px 30px 9px 11px;border-radius:11px;border:1.5px solid rgba(96,118,180,.42);background:#fff;color:var(--ink)}
.combo input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.combo.picked input{font-weight:700}
.combo-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:none;color:var(--ink-faint);font-size:17px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:8px}
.combo-clear:hover{color:var(--bad)}
.combo-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 5px);max-height:236px;overflow-y:auto;background:var(--card,#fff);border:1px solid var(--glass-brd);border-radius:12px;box-shadow:0 14px 34px rgba(16,24,54,.14);padding:5px}
.combo-opt{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px;cursor:pointer}
.combo-opt:hover,.combo-opt.active{background:var(--accent-wash)}
.combo-opt .av{width:25px;height:25px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:9.5px;font-weight:800;color:#fff;background:var(--accent)}
.combo-opt .ci{flex:1;min-width:0}
.combo-opt .ci b{display:block;font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-opt .ci span{display:block;font-size:10.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-opt mark{background:color-mix(in srgb,var(--accent) 26%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.combo-empty{padding:11px 10px;font-size:12px;color:var(--ink-faint);text-align:center}
.signer{display:flex;align-items:center;gap:9px;border:1px solid var(--glass-brd);background:var(--glass-2);border-radius:12px;padding:9px 11px;margin-bottom:8px;cursor:pointer}
.signer.armed{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-wash)}
.signer .ord{font-size:10px;font-weight:800;color:#fff;border-radius:50%;width:19px;height:19px;display:grid;place-items:center;flex:none}
.signer .si{flex:1;min-width:0}
.signer .si b{font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.signer .si span{font-size:10.5px;color:var(--ink-soft)}
.signer .rm{border:none;background:none;color:var(--bad);cursor:pointer;font-size:16px;flex:none;line-height:1}
.fld .lbl{pointer-events:none}

/* notifikasi */
.notif-bell{position:relative;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:var(--glass-2);border:1px solid var(--glass-brd);color:var(--ink-soft);flex:none;cursor:pointer}
.notif-bell svg{width:21px;height:21px}
.notif-bell.desk{width:40px;height:40px;border-radius:12px}
.nb-badge{position:absolute;top:-5px;right:-5px;background:linear-gradient(150deg,#ff8aa6,#f2557a);color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px;box-shadow:0 2px 6px rgba(242,85,122,.5)}
.notif-item{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-bottom:1px solid var(--line);text-decoration:none}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{background:var(--accent-wash)}
.notif-item .ni{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}
.notif-item .ni svg{width:18px;height:18px}
.notif-item .ni.turn{background:linear-gradient(150deg,#6f9bff,#3b5bfd)}
.notif-item .ni.signed{background:linear-gradient(150deg,#2fd3a6,#12b586)}
.notif-item .ni.rejected{background:linear-gradient(150deg,#ff8aa6,#f2557a)}
.notif-item .nm{flex:1;min-width:0}
.notif-item .nm b{font-size:13.5px;color:var(--ink);display:block}
.notif-item .nm span{font-size:12px;color:var(--ink-soft);display:block;margin-top:1px;line-height:1.4}
.notif-item .nm em{font-style:normal;font-size:10.5px;color:var(--ink-faint);font-family:var(--font-mono)}

/* ===== WEB signer (desktop) ===== */
.web-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(155deg,var(--hero1),var(--hero2));color:var(--hero-ink);border-radius:20px;padding:20px 24px;margin-bottom:20px;box-shadow:0 20px 44px -18px rgba(15,25,70,.5)}
.web-hero .n{font-size:38px;font-weight:800;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(120deg,#fff,#a9c2ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.web-hero .lbl{font-size:13px;color:var(--hero-soft);margin-top:4px}
.web-hero .chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:7px 13px;border-radius:100px;font-size:12px;font-weight:600}
.web-hero .chip .glow{width:7px;height:7px;border-radius:50%;background:#5fe0b0;box-shadow:0 0 8px #5fe0b0}
.web-search{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-brd);margin-bottom:18px;max-width:460px}
.web-search svg{width:18px;height:18px;color:var(--ink-faint)}
.web-search input{flex:1;border:none;background:none;outline:none;font:inherit;font-size:14px;color:var(--ink);box-shadow:none;border-radius:0}
.web-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.doc-grid .doc{background:var(--glass);border:1px solid var(--glass-brd);box-shadow:var(--sh-card)}
/* minmax(0,1fr) — BUKAN 1fr. Kolom 1fr punya batas bawah 'auto', dan lembar
   PDF di dalamnya lebar; akibatnya grid menolak menyusut lalu panel kanan
   terdorong keluar .shell (yang overflow:hidden) sehingga terpotong tanpa
   bisa digulir. Batas 0 memberi izin menyusut. */
.web-detail{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}
.web-detail > *{min-width:0}
.web-detail .paper-wrap{padding:0}
.web-detail .side{position:sticky;top:78px;display:flex;flex-direction:column;gap:16px}
.web-panel{background:var(--glass);border:1px solid var(--glass-brd);border-radius:18px;padding:18px;box-shadow:var(--sh-card)}
.web-actions{display:flex;gap:10px}
@media (max-width:1180px){.web-detail{grid-template-columns:minmax(0,1fr)}.web-detail .side{position:static}}

/* modal desktop */
.modal-scrim{position:fixed;inset:0;background:rgba(12,20,50,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal-scrim.on{display:flex}
.modal{background:var(--glass-2);backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);border:1px solid var(--glass-brd);border-radius:24px;padding:26px;max-width:420px;width:100%;box-shadow:0 30px 70px -20px rgba(10,20,60,.6)}
.modal h3{font-size:20px;font-weight:800;margin:0 0 4px;color:var(--ink);text-align:center}
.modal .sub{font-size:13px;color:var(--ink-soft);text-align:center;margin-bottom:16px}

/* toggle versi web/app di layar mobile */
.view-switch{position:fixed;top:16px;left:16px;z-index:100;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);color:var(--page-ink);padding:9px 14px;border-radius:100px;font-size:12px;font-weight:700;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 16px -4px rgba(40,64,150,.25)}

/* viewer PDF (penanda posisi TTD/paraf, read-only) */
.pdf-viewer .pdf-page{max-width:100%;position:relative;box-shadow:0 10px 30px -12px rgba(20,35,90,.4);border-radius:4px;overflow:hidden;background:#fff}
.pdf-viewer .pdf-page canvas{display:block;width:100%;height:auto}
.vfld{position:absolute;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;pointer-events:none;text-align:center;padding:2px;line-height:1.1}
.vfld.mine{background:rgba(59,91,253,.16);border:2px dashed var(--accent);color:var(--accent-deep);animation:vpulse 1.6s ease-in-out infinite}
.vfld.other{background:rgba(120,140,200,.08);border:1.5px dashed var(--ink-faint);color:var(--ink-faint)}
.vfld.filled{background:rgba(18,181,134,.12);border:1.5px solid var(--good);color:var(--good)}
@keyframes vpulse{0%,100%{box-shadow:0 0 0 0 var(--accent-wash)}50%{box-shadow:0 0 0 7px var(--accent-wash)}}

/* status revisi */
.pill.st-revision{color:var(--warn);background:var(--warn-wash)}
.notes-thread{display:flex;flex-direction:column;gap:10px}
.note-item{background:var(--glass-2);border:1px solid var(--glass-brd);border-radius:14px;padding:11px 14px}
.note-item .nh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.note-item .nh b{font-size:12.5px;color:var(--ink)}
.note-item .nh em{font-style:normal;font-size:10.5px;color:var(--ink-faint);font-family:var(--font-mono)}
.note-item .nb{font-size:13px;color:var(--ink-soft);line-height:1.5;white-space:pre-wrap}
.note-form textarea{width:100%;font:inherit;font-size:13.5px;padding:10px 12px;border-radius:12px;border:1.5px solid rgba(96,118,180,.42);background:#fff;color:var(--ink);resize:vertical}

/* copyright */
.app-copyright{width:100%;text-align:center;color:var(--page-soft);font-size:11.5px;padding:18px 12px 24px;line-height:1.5}
.app-copyright em{font-style:normal;color:var(--accent);font-weight:600}
body.desk .app-copyright{max-width:1180px;margin:0 auto}

/* ===== Analisa per unit (admin) ===== */
.ana-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px}
.ana-card{background:var(--glass);border:1px solid var(--glass-brd);border-radius:18px;padding:18px 20px;box-shadow:var(--sh-card)}
.ana-card .ah{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ana-card h3{font-size:15.5px;font-weight:800;margin:0;color:var(--ink);letter-spacing:-.2px}
.ana-card .code{font-size:10px;font-weight:800;color:var(--accent);background:var(--accent-wash);padding:2px 8px;border-radius:100px}
.ana-big{font-size:32px;font-weight:800;letter-spacing:-1.2px;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;margin-top:8px}
.ana-big small{font-size:12px;font-weight:600;color:var(--ink-soft);letter-spacing:0}
.stacked{display:flex;height:12px;border-radius:100px;overflow:hidden;background:var(--line);margin:14px 0 9px}
.stacked i{height:100%;transition:width .4s ease}
.leg{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--ink-soft)}
.leg span{display:inline-flex;align-items:center;gap:5px}
.leg .dot{width:9px;height:9px;border-radius:3px;flex:none}
.ana-metrics{display:flex;gap:20px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.ana-metrics .m b{display:block;font-size:15px;font-weight:800;color:var(--ink)}
.ana-metrics .m span{font-size:11px;color:var(--ink-soft)}
.c-signed{background:var(--good)}.c-progress{background:var(--accent)}.c-revision{background:var(--warn)}.c-rejected{background:var(--bad)}.c-draft{background:var(--ink-faint)}

/* ============================================================
   KETERBACAAN FIELD — diletakkan di akhir agar berlaku menyeluruh.
   Semua isian harus jelas terlihat sebagai field: tepi tegas,
   latar putih, bayangan dalam tipis, dan fokus yang jelas.
   ============================================================ */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], input:not([type]),
select, textarea{
  background:#fff;
  border:1.5px solid rgba(96,118,180,.42);
  border-radius:12px;
  box-shadow:inset 0 1px 2px rgba(40,64,150,.06);
  color:var(--ink);
}
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover,
input[type=number]:hover, input[type=date]:hover, select:hover, textarea:hover{
  border-color:rgba(96,118,180,.68);
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-wash);
}
input::placeholder, textarea::placeholder{color:#95a0c4}

/* Select diberi panah agar dikenali sebagai pilihan.
   Selektor disamakan/ditinggikan agar tak tertimpa aturan `background:#fff`
   milik .desk-field/.field yang punya spesifisitas lebih tinggi. */
select,
.desk-field select,
.field select,
.add-signer select,
#signerType{
  appearance:none;-webkit-appearance:none;padding-right:34px;
  background-color:#fff;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6690' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px;
}

/* Pengecualian: input yang SUDAH berada di dalam wadah bertepi
   (pencarian atas, pencarian dalam halaman, pencarian mobile) tetap polos —
   kalau tidak, tepinya jadi dobel. */
.topsearch input, .web-search input, .searchbar input{
  background:none;border:none;box-shadow:none;border-radius:0;padding-left:0;padding-right:0;
}
.topsearch input:focus, .web-search input:focus, .searchbar input:focus{box-shadow:none;border:none}

/* Kotak centang & pilihan unit juga harus terbaca sebagai kontrol */
input[type=checkbox]{accent-color:var(--accent);cursor:pointer}
.unit-pick{border-width:1.5px;border-color:rgba(96,118,180,.34)}
.spec-initials-input{width:100%;font:inherit;font-size:16px;font-weight:800;letter-spacing:.10em;
  text-transform:uppercase;text-align:center;padding:11px 12px}

/* Tombol keluar di Profil (app & web) */
.logout-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  font:inherit;font-size:14px;font-weight:800;cursor:pointer;padding:14px;border-radius:16px;
  color:var(--bad);background:#fff;border:1.5px solid color-mix(in srgb,var(--bad) 45%,transparent)}
.logout-btn:hover{background:var(--bad-wash)}
.logout-btn svg{width:18px;height:18px}

/* ---------- Template alur (admin) & pemilih template di editor TTD ------- */
.tpl-step{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tpl-step .tpl-no{width:20px;font-size:12.5px;font-weight:800;color:var(--ink-soft)}
.tpl-step select:first-of-type{flex:1}
.tpl-step select{background:#fff;border:1.5px solid rgba(96,118,180,.42);border-radius:12px;padding:9px 11px;font-size:13px;color:var(--ink)}
.tpl-step .tpl-del{padding:6px 11px;font-size:15px;line-height:1}
.tpl-pick{display:grid;gap:8px;margin-bottom:14px;padding:12px;border-radius:14px;background:var(--accent-wash);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.tpl-pick label{font-size:11.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--accent)}
.tpl-pick select{background:#fff;border:1.5px solid rgba(96,118,180,.42);border-radius:12px;padding:10px 11px;font-size:13px;color:var(--ink);width:100%}
.tpl-pick .desk-btn{padding:9px 12px;font-size:13px}

/* =======================================================================
   TABLET (iPad & tablet Android) — potret maupun lanskap
   -----------------------------------------------------------------------
   Layar 700–1120px terlalu sempit untuk tata letak desktop penuh, tetapi
   terlalu lega untuk cangkang ponsel. Aturan di bawah merapikan bar atas,
   grid, dan tabel supaya tetap terbaca pada kedua orientasi.
   Semua memakai max-width (bukan deteksi perangkat) supaya ikut berubah
   saat tablet diputar.
   ======================================================================= */
@media (max-width:1024px){
    /* Bar atas: pencarian tetap lebar, identitas diringkas. */
    .desk-top{gap:12px;padding:10px 16px;flex-wrap:wrap}
    .topsearch{order:1;max-width:none;flex:1 1 260px}
    .desk-brand{order:2;margin-left:auto}
    .desk-brand img{height:40px}
    .desk-user{order:3;gap:10px}
    .desk-user .who .ps{display:none}          /* jabatan+dept terlalu panjang */

    /* Pita menu: rapatkan dulu agar sebanyak mungkin tab muat; sisanya
       digeser lewat .topnav-in (itulah wadah yang menggulir, bukan .topnav).
       Gradasi tipis di tepi kanan menandakan masih ada tab di sebelahnya. */
    .topnav{padding:0 10px}
    .topnav a{padding:14px 13px;font-size:13px;gap:6px}
    .topnav::after{background:linear-gradient(90deg,transparent 88%,rgba(15,25,70,.20));}
    .topnav-in{scroll-behavior:smooth}

    .desk-main{padding:18px 16px}
    .desk-h1{font-size:22px}

    /* Grid kartu SENGAJA tidak disentuh: .stat-row & .doc-grid sudah memakai
       auto-fit/auto-fill minmax(), jadi jumlah kolomnya menyesuaikan sendiri —
       memaksanya 2 kolom justru membuat kartu statistik jadi terlalu besar. */

    /* Tabel lebar digulir di dalam wadahnya sendiri, bukan menggeser halaman. */
    .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .desk-table{min-width:720px}
}

/* Tablet POTRET — ruang mendatar paling terbatas. */
@media (max-width:834px){
    .desk-top{padding:10px 14px}
    .desk-user .who{display:none}              /* nama pun disembunyikan */
    .web-detail,.prep-layout,.desk-grid2{grid-template-columns:1fr}
    .prep-side,.web-detail .side{position:static}
    .desk-main{padding:16px 14px}
}

/* Sentuh: perbesar sasaran ketuk pada perangkat tanpa tetikus. */
@media (hover:none) and (pointer:coarse){
    .topnav a{padding-top:13px;padding-bottom:13px}
    .mini-btn,.desk-btn{min-height:42px}
    .desk-table td,.desk-table th{padding-top:13px;padding-bottom:13px}
}

/* ---------- Kursi langganan per unit bisnis ----------------------------- */
.seat-card{display:flex;flex-direction:column;gap:8px}
.seat-card .seat-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.seat-card .seat-top b{font-size:14px;color:var(--ink)}
.seat-card .seat-num{font-size:18px;font-weight:800;color:var(--accent);letter-spacing:-.4px}
.seat-card.full .seat-num{color:var(--bad)}
.seat-bar{height:6px;border-radius:100px;background:rgba(96,118,180,.18);overflow:hidden}
.seat-bar span{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,#5FE0B0,var(--accent))}
.seat-card.full .seat-bar span{background:linear-gradient(90deg,#f7a08c,var(--bad))}
.seat-note{font-size:11.5px;color:var(--ink-soft)}

/* ---------- Kemajuan unggah berkas -------------------------------------- */
.up-prog{margin:12px 0 4px;padding:14px 16px;border-radius:14px;background:var(--accent-wash);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.up-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink)}
.up-top b{font-size:15px;color:var(--accent);letter-spacing:-.3px}
.up-bar{height:8px;margin:8px 0 6px;border-radius:100px;background:rgba(96,118,180,.20);overflow:hidden}
.up-bar span{display:block;width:0;height:100%;border-radius:100px;
  background:linear-gradient(90deg,#5FE0B0,var(--accent));transition:width .18s ease-out}
.up-note{font-size:11.5px;color:var(--ink-soft)}


/* --- Kolom aksi tabel: tautan di kiri, aksi merusak menempel di kanan ------
   Batalkan diberi bingkai supaya terbaca sebagai tombol dan tidak menyatu
   dengan tautan di sebelahnya. */
.tbl td.act-cell{white-space:nowrap}
.act-cell{display:flex;align-items:center;gap:12px;justify-content:space-between}
.act-cell .act-links{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.act-cell form{display:inline-flex;margin-left:auto}
.btn-batal{font:inherit;font-size:12.5px;font-weight:700;line-height:1;cursor:pointer;
  padding:7px 13px;border-radius:100px;white-space:nowrap;
  color:var(--bad);background:var(--bad-wash);
  border:1.3px solid color-mix(in srgb,var(--bad) 30%,transparent);
  transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.btn-batal:hover{background:var(--bad);color:#fff;box-shadow:0 4px 12px -3px color-mix(in srgb,var(--bad) 60%,transparent)}
.btn-batal:focus-visible{outline:2px solid var(--bad);outline-offset:2px}

/* --- Jejak: tahap yang batal ----------------------------------------------
   Bedanya harus terbaca sekilas dari tahap "selesai" (hijau) maupun "menunggu"
   (biru): silang merah, teks diredupkan, dan satu kotak keterangan pada titik
   berhentinya. */
.step.cancelled .node{background:linear-gradient(150deg,#f8879f,var(--bad));border-color:transparent;
  box-shadow:0 3px 8px -1px color-mix(in srgb,var(--bad) 45%,transparent)}
.step.cancelled .node svg{width:10px;height:10px;color:#fff}
.step.cancelled .who,.step.cancelled .role{color:var(--ink-faint)}
.step.cancelled .who{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--bad) 55%,transparent)}
.batal-note{grid-column:2/-1;margin:6px 0 2px;padding:9px 12px;border-radius:12px;
  background:var(--bad-wash);border:1px solid color-mix(in srgb,var(--bad) 26%,transparent);
  border-left-width:3px;display:flex;flex-direction:column;gap:2px}
.batal-note b{font-size:12.5px;color:var(--bad);letter-spacing:-.1px}
.batal-note span{font-size:11.5px;color:var(--ink-soft);line-height:1.45}
.batal-note .alasan{font-style:italic}

/* Textarea di dalam .desk-field ikut aturan yang sama dengan input — dulu
   terlewat, sehingga lebarnya mengikuti atribut cols (±183px) dan terlihat
   sempit di tengah modal. */
.desk-field textarea{width:100%;font:inherit;font-size:14.5px;line-height:1.5;color:var(--ink);
  background:#fff;border:1.5px solid rgba(96,118,180,.42);border-radius:12px;padding:11px 14px;
  outline:none;box-shadow:inset 0 1px 2px rgba(40,64,150,.06);resize:vertical;min-height:88px}
.desk-field textarea:hover{border-color:rgba(96,118,180,.68)}
.desk-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}