:root{
  --paper:#F3F5F2; --surface:#FFFFFF; --ink:#12201D; --muted:#5A6A66; --line:#D4DCD7;
  --jade:#0B6B58; --jade-deep:#07493D; --jade-soft:#DDEFE9; --mark:#F1C84B;
  --danger:#B3261E; --warn-bg:#FFF4D6; --warn-line:#E5C45A;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tabs-h:62px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans)}
h1,h2{font-family:var(--serif);font-weight:700;line-height:1.2;margin:0 0 .5rem}
h1{font-size:1.65rem} h2{font-size:1.15rem}
p{margin:.35rem 0 .75rem}
a{color:var(--jade-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.bubble:focus-within,.day:focus-within{outline:3px solid var(--mark);outline-offset:2px}
.muted{color:var(--muted)} .lead{font-size:1.1rem} .lead-sm{margin-bottom:1rem}

/* shell */
.shell{min-height:100vh;padding-bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom))}
.top{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;background:var(--jade);color:#fff}
.brand{font-family:var(--serif);font-weight:700;font-size:1.1rem;color:#fff;text-decoration:none}
.logout{margin:0}
.top .btn-quiet{color:#fff;border-color:rgba(255,255,255,.45)}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs a{flex:1;text-align:center;padding:.9rem .25rem;text-decoration:none;color:var(--muted);font-weight:600;font-size:.9rem;border-top:3px solid transparent}
.tabs a[aria-current=page]{color:var(--jade-deep);border-top-color:var(--mark);background:var(--jade-soft)}
main{max-width:46rem;margin:0 auto;padding:1rem}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}
.head-row h1{margin:0}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1rem;margin:0 0 .85rem}
.card.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.card.narrow{max-width:26rem;margin:2rem auto}
.danger-zone{border-color:#E8B8B4}
ul.plain{list-style:none;margin:.25rem 0 .75rem;padding:0}
ul.plain li{padding:.15rem 0}
.item{display:flex;gap:.75rem;align-items:flex-start;justify-content:space-between}
.item-main{min-width:0;flex:1}
.item h2{margin-bottom:.15rem}
.item h2 a{text-decoration:none}
.item.is-off{opacity:.7}
.meta{font-size:.88rem;color:var(--muted);margin:.25rem 0 0}
.bad{color:var(--danger);font-weight:600}
.tag{font:600 .72rem var(--sans);background:var(--line);color:var(--muted);border-radius:99px;padding:.1rem .5rem;margin-left:.35rem;vertical-align:middle}

/* buttons */
.btn,.btn-quiet{display:inline-block;font:600 .95rem var(--sans);border-radius:8px;padding:.6rem 1rem;border:1px solid var(--jade);background:var(--jade);color:#fff;text-decoration:none;cursor:pointer;min-height:44px}
.btn:hover{background:var(--jade-deep)}
.btn-ghost{background:transparent;color:var(--jade-deep)}
.btn-ghost:hover{background:var(--jade-soft)}
.btn-quiet{background:transparent;color:var(--muted);border-color:var(--line)}
.btn-danger{background:var(--danger);border-color:var(--danger)}
.btn-block{display:block;width:100%}
button.link{background:none;border:0;color:var(--jade-deep);text-decoration:underline;padding:.4rem .25rem;font:inherit;cursor:pointer;min-height:44px}

/* forms */
.field{display:block;margin:0 0 1rem;border:0;padding:0;min-width:0}
.field>span,.field>legend{display:block;font-weight:600;margin-bottom:.3rem;padding:0}
input[type=text],input[type=password],input[type=number],input[type=time],select,textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid #AEB9B4;border-radius:8px;padding:.6rem .7rem;min-height:44px}
textarea{resize:vertical}
.hint{display:block;color:var(--muted);font-size:.85rem;margin-top:.25rem}
.err{display:block;color:var(--danger);font-weight:600;margin-top:.3rem}
.check{display:flex;gap:.6rem;align-items:center;margin:.25rem 0 1rem;min-height:44px}
.check input{width:1.25rem;height:1.25rem;accent-color:var(--jade)}
.actions{margin-top:.5rem}
.days{display:flex;flex-wrap:wrap;gap:.4rem}
.day{position:relative}
.day input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.day span{display:block;min-width:3rem;text-align:center;padding:.5rem .6rem;border:1px solid #AEB9B4;border-radius:8px;background:#fff;font-weight:600}
.day input:checked+span{background:var(--jade);color:#fff;border-color:var(--jade)}

/* flash */
.flash{background:var(--jade-soft);border:1px solid #A9D3C7;border-left:5px solid var(--jade);padding:.7rem .9rem;border-radius:8px;margin-bottom:.9rem}
.flash-err{background:#FBE9E7;border-color:#E8B8B4;border-left-color:var(--danger)}

/* bubbles: grup sebagai gelembung chat, ciri khas pemetaan */
.bubbles{display:flex;flex-wrap:wrap;gap:.5rem}
.bubble{position:relative;display:inline-block}
.bubble input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.bubble>span,.bubble.on{display:inline-block;padding:.55rem .95rem;min-height:44px;border:1.5px solid #AEB9B4;background:#fff;color:var(--ink);font-weight:600;border-radius:18px 18px 18px 4px;line-height:1.3}
span.bubble.on{min-height:0;padding:.35rem .8rem;background:var(--jade);border-color:var(--jade);color:#fff;font-size:.9rem}
span.bubble.on>span{padding:0;min-height:0;border:0;background:none;color:inherit;border-radius:0}
.bubble input:checked+span{background:var(--jade);border-color:var(--jade);color:#fff}
.bubble.off>span,.bubble.on.off{border-style:dashed}
.bubble.on.off{opacity:.65}
.map-theme{padding:.85rem 1rem 0;margin-bottom:.85rem}
.map-theme legend{font:700 1.1rem var(--serif);padding:0 .35rem}
.map-theme.is-off{opacity:.75}
.mini{margin:.4rem 0 .2rem}
.savebar{position:sticky;bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom) + .5rem);padding:.4rem 0}
.savebar .btn{width:100%;box-shadow:0 2px 10px rgba(7,73,61,.35)}

/* bare (login/error) */
body.bare{background:var(--jade-deep)}
.bare-main{max-width:26rem;padding:1.25rem}
.bare .card h1{font-size:1.5rem}
.bare .card.narrow{margin-top:12vh}
.login .btn{margin-top:.5rem}

@media (min-width:860px){
  .shell{padding-bottom:0;padding-left:13.5rem}
  .top{position:fixed;top:0;left:0;width:13.5rem;height:3.4rem;z-index:11}
  .tabs{top:3.4rem;bottom:0;right:auto;width:13.5rem;flex-direction:column;border-top:0;border-right:1px solid var(--line);padding-top:.5rem}
  .tabs a{flex:0;text-align:left;padding:.8rem 1.1rem;border-top:0;border-left:4px solid transparent}
  .tabs a[aria-current=page]{border-left-color:var(--mark)}
  main{margin:0 auto 0 0;max-width:48rem;padding:1.75rem 2rem}
  .savebar{bottom:.5rem}
  .savebar .btn{width:auto}
}
@media (prefers-reduced-motion:no-preference){
  .bubble>span,.btn{transition:background-color .12s,color .12s,border-color .12s}
}

/* ---------- Fase 2 ---------- */
.x-desk{display:none!important}
.mb{margin-bottom:.85rem}
.small{font-size:.85rem;font-weight:400}
.small-h{font:700 1rem var(--sans)}
.wrap{overflow-wrap:anywhere;word-break:break-word}
.chips{display:flex;gap:.4rem;overflow-x:auto;margin:0 0 .85rem;padding-bottom:.25rem}
.chips a{flex:0 0 auto;padding:.5rem .8rem;border:1px solid #AEB9B4;border-radius:99px;background:#fff;color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem;min-height:40px}
.chips a[aria-current=page]{background:var(--jade);border-color:var(--jade);color:#fff}
.badge{display:inline-block;font:600 .74rem var(--sans);border-radius:99px;padding:.12rem .55rem;margin-right:.35rem;background:var(--line);color:var(--ink);vertical-align:middle}
.st-ready,.st-done,.st-approved,.st-sent{background:#CFEBDD;color:#0E4D34}
.st-queued,.st-processing,.st-running,.st-draft{background:#E3E8F4;color:#273C75}
.st-failed,.st-rejected{background:#F7D6D2;color:#8A1C14}
.st-needs_manual,.st-warn,.st-review{background:var(--warn-bg);color:#6B4E00;border:1px solid var(--warn-line)}
.note{border-radius:8px;padding:.6rem .8rem;margin:.5rem 0;border:1px solid var(--line);background:#F7F9F8}
.note-err{background:#FBE9E7;border-color:#E8B8B4;color:#6E1610}
.note-warn{background:var(--warn-bg);border-color:var(--warn-line)}
.ok-line{color:#0E4D34;font-weight:600}
.menu a{display:block;padding:.8rem .2rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.menu a:last-child{border-bottom:0}
.menu a span{display:block;font-size:.88rem}
ol.sections,ol.refs{padding-left:1.3rem;margin:.25rem 0}
ol.sections li{margin-bottom:.6rem}
.preview{font-size:.85rem;color:var(--muted);margin:.15rem 0 0}
.idea-pick{margin:0 0 .25rem}
.idea-pick strong{font-family:var(--serif);font-size:1.05rem}
ul.kp{margin:.25rem 0 .5rem;padding-left:1.2rem}
details.field summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.wa-preview{white-space:pre-wrap;background:#E7F6E9;border:1px solid #BFE3C6;border-radius:12px 12px 12px 4px;padding:.8rem .9rem;font-size:.95rem;overflow-wrap:anywhere}
.article-full h2{font-size:1.1rem}
.article-full h3{font-family:var(--serif);font-size:1.05rem;margin:1rem 0 .4rem}
.article-full blockquote,.flags blockquote{margin:.4rem 0;padding:.4rem .7rem;border-left:4px solid var(--warn-line);background:#FFFBEE}
ul.flags{padding-left:1.1rem;margin:.25rem 0}
ul.flags li{margin-bottom:.6rem}
ul.stats{list-style:none;padding:0;margin:.25rem 0 .5rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
ul.stats a{display:block;border:1px solid var(--line);border-radius:8px;padding:.6rem .7rem;text-decoration:none;color:var(--ink)}
ul.stats strong{display:block;font:700 1.35rem var(--serif)}
ul.stats span{font-size:.85rem;color:var(--muted)}
.meter{height:10px;border-radius:99px;background:var(--line);overflow:hidden;margin:.3rem 0 .6rem}
.meter span{display:block;height:100%}
.meter-ok{background:var(--jade)} .meter-high{background:#D49A00} .meter-full{background:var(--danger)}
.w0{width:0%}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}
@media (min-width:860px){ .x-desk{display:block!important} .x-mob{display:none!important} ul.stats{grid-template-columns:repeat(4,1fr)} }