/* Akredia · gaya dasbor, ringkasan proyek, butir kerja, editor LED, dan halaman panduan. */
:root {
    --ak-blue: #1f528c; --ak-blue-50: #eef4fb; --ak-ink: #0f172a; --ak-muted: #64748b; --ak-line: #e2e8f0;
    --ak-card: #ffffff; --ak-soft: #f8fafc; --ak-green: #10b981; --ak-amber: #f59e0b; --ak-red: #e11d48; --ak-gray: #94a3b8;
    --ak-violet: #7c3aed; --ak-radius: 14px; --ak-shadow: 0 1px 2px rgba(15,23,42,.05), 0 4px 16px rgba(15,23,42,.04);
}
.dark { --ak-ink: #e2e8f0; --ak-muted: #94a3b8; --ak-line: rgba(148,163,184,.2); --ak-card: #111827; --ak-soft: #0b1220; --ak-blue-50: rgba(31,82,140,.18); }

.ak-muted { color: var(--ak-muted); font-size: .85rem; }
.ak-good { color: #047857; font-weight: 600; }
.ak-link { color: var(--ak-blue); font-size: .8rem; font-weight: 600; background: none; border: 0; cursor: pointer; padding: 0; }
.dark .ak-link, .ak-dash a, .ak-summary a { color: inherit; }
.ak-row { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0; }
.ak-input { width: 100%; border: 1px solid var(--ak-line); border-radius: 10px; padding: .55rem .75rem; background: var(--ak-card); color: var(--ak-ink); font-size: .9rem; }
.ak-alert { padding: .75rem 1rem; border-radius: 10px; margin: .75rem 0; font-size: .9rem; }
.ak-alert.warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.dark .ak-alert.warn { background: rgba(245,158,11,.12); color: #fcd34d; border-color: rgba(245,158,11,.3); }

/* Chip & pill */
.ak-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .5rem; }
.ak-chip { display: inline-flex; align-items: center; padding: .2rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--ak-soft); border: 1px solid var(--ak-line); color: var(--ak-ink); }
.ak-chip.ok { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.ak-chip.bad { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
.ak-chip.warn { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.dark .ak-chip.ok { background: rgba(16,185,129,.12); color: #6ee7b7; border-color: rgba(16,185,129,.3); }
.dark .ak-chip.bad { background: rgba(225,29,72,.12); color: #fda4af; border-color: rgba(225,29,72,.3); }
.dark .ak-chip.warn { background: rgba(245,158,11,.12); color: #fcd34d; border-color: rgba(245,158,11,.3); }
.ak-chip[class*="state-"] { background: var(--ak-blue); color: #fff; border-color: var(--ak-blue); }
.ak-pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.ak-pill.green { background: #d1fae5; color: #065f46; } .ak-pill.red { background: #ffe4e6; color: #9f1239; } .ak-pill.gray { background: #f1f5f9; color: #475569; }

/* Dasbor */
.ak-dash { display: flex; flex-direction: column; gap: 1.1rem; }
.ak-hero { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 1.75rem; border-radius: 20px; color: #fff;
    background: radial-gradient(120% 140% at 0% 0%, #2f68a8 0%, #17406f 55%, #0b1d33 100%); box-shadow: 0 10px 30px rgba(17,45,76,.25); }
.ak-hero h1 { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; margin: .15rem 0 .35rem; }
.ak-hero p { color: #dbeafe; font-size: .92rem; margin: .2rem 0; }
.ak-hero a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ak-hero .ak-muted { color: #bcd3ee; font-size: .8rem; }
.ak-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: #93c5fd; }
.ak-gauge { position: relative; width: 210px; min-width: 210px; text-align: center; text-decoration: none !important; }
.ak-gauge svg { width: 100%; display: block; }
.ak-gauge path { fill: none; stroke-width: 12; stroke-linecap: round; }
.ak-gauge .bg { stroke: rgba(255,255,255,.18); }
.ak-gauge .fg { stroke: #34d399; transition: stroke-dasharray .8s ease; }
.ak-gauge strong { position: absolute; left: 0; right: 0; top: 46%; font-size: 2.4rem; font-weight: 800; line-height: 1; }
.ak-gauge span { display: block; margin-top: -.2rem; font-size: .75rem; color: #bcd3ee; text-transform: uppercase; letter-spacing: .08em; }

.ak-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
@media (min-width: 1400px) { .ak-kpis { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.ak-kpi { display: flex; flex-direction: column; gap: .15rem; padding: .95rem 1rem; border-radius: var(--ak-radius); background: var(--ak-card); border: 1px solid var(--ak-line);
    box-shadow: var(--ak-shadow); text-decoration: none; color: var(--ak-ink); border-top: 4px solid var(--ak-blue); transition: transform .15s, box-shadow .15s; }
.ak-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,23,42,.1); }
.ak-kpi span { font-size: .75rem; font-weight: 600; color: var(--ak-muted); text-transform: uppercase; letter-spacing: .03em; }
.ak-kpi strong { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.ak-kpi small { font-size: .74rem; color: var(--ak-muted); }
.ak-kpi.good { border-top-color: var(--ak-green); } .ak-kpi.warning { border-top-color: var(--ak-amber); } .ak-kpi.danger { border-top-color: var(--ak-red); }
.ak-kpi.danger strong { color: var(--ak-red); }

.ak-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ak-panel { background: var(--ak-card); border: 1px solid var(--ak-line); border-radius: var(--ak-radius); padding: 1.1rem 1.2rem; box-shadow: var(--ak-shadow); min-width: 0; }
.ak-panel.span-2 { grid-column: span 2; } .ak-panel.span-3 { grid-column: span 3; }
.ak-panel h3 { font-size: .95rem; font-weight: 700; margin-bottom: .8rem; display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; color: var(--ak-ink); }
.ak-panel h3 small { font-size: .74rem; font-weight: 500; color: var(--ak-muted); text-align: right; }
.ak-chart { position: relative; } .ak-chart.h-180 { height: 180px; } .ak-chart.h-200 { height: 200px; } .ak-chart.h-220 { height: 220px; } .ak-chart.h-240 { height: 240px; } .ak-chart.h-260 { height: 260px; }
@media (max-width: 1100px) { .ak-grid { grid-template-columns: 1fr; } .ak-panel.span-2, .ak-panel.span-3 { grid-column: span 1; } .ak-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ak-hero { flex-direction: column; align-items: flex-start; } }

.ak-heatmap { display: flex; flex-direction: column; gap: .45rem; }
.ak-heat-row { display: flex; align-items: center; gap: .6rem; }
.ak-heat-row .crit { width: 2.2rem; font-weight: 800; color: var(--ak-muted); font-size: .8rem; }
.ak-heat-row .cells { display: flex; flex-wrap: wrap; gap: .35rem; }
.ak-heat { position: relative; width: 2.6rem; height: 2.3rem; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff; text-decoration: none; transition: transform .12s; }
.ak-heat:hover { transform: scale(1.12); z-index: 2; box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.ak-heat.green { background: var(--ak-green); } .ak-heat.yellow { background: var(--ak-amber); } .ak-heat.red { background: var(--ak-red); } .ak-heat.gray { background: var(--ak-gray); }
.ak-heat.prereq::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
.ak-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .8rem; font-size: .75rem; color: var(--ak-muted); }
.ak-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; background: var(--ak-gray); }
.ak-legend .green::before, .ak-legend .ok::before { background: var(--ak-green); } .ak-legend .yellow::before { background: var(--ak-amber); } .ak-legend .red::before, .ak-legend .bad::before { background: var(--ak-red); }
.ak-legend .prereq::before { border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--ak-muted); } .ak-legend .mark::before { width: 2px; background: var(--ak-ink); }

.ak-actions { counter-reset: a; display: flex; flex-direction: column; gap: .6rem; }
.ak-actions li { counter-increment: a; position: relative; padding: .6rem .7rem .6rem 2.3rem; border-radius: 10px; background: var(--ak-soft); border: 1px solid var(--ak-line); font-size: .85rem; }
.ak-actions li::before { content: counter(a); position: absolute; left: .65rem; top: .6rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--ak-blue); color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center; }
.ak-actions a { font-weight: 700; color: var(--ak-blue) !important; font-size: .8rem; }
.dark .ak-actions a { color: #93c5fd !important; }

.ak-table-wrap { overflow-x: auto; }
.ak-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.ak-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ak-muted); padding: .45rem .6rem; border-bottom: 1px solid var(--ak-line); }
.ak-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--ak-line); vertical-align: top; }
.ak-table tbody tr { cursor: pointer; } .ak-table tbody tr:hover { background: var(--ak-blue-50); }

.ak-ratios { display: flex; flex-direction: column; gap: .5rem; }
.ak-ratio { display: grid; grid-template-columns: minmax(0, 15rem) 1fr 5.5rem; align-items: center; gap: .75rem; text-decoration: none; color: var(--ak-ink); font-size: .82rem; }
.ak-ratio .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-ratio .track { position: relative; height: .7rem; border-radius: 999px; background: var(--ak-soft); border: 1px solid var(--ak-line); }
.ak-ratio .fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--ak-blue); }
.ak-ratio.ok .fill { background: var(--ak-green); } .ak-ratio.bad .fill { background: var(--ak-red); }
.ak-ratio .mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ak-ink); }
.ak-ratio .val { text-align: right; } .ak-ratio:hover .label { text-decoration: underline; }

.ak-matrix { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ak-matrix .cell { aspect-ratio: 1.35; border-radius: 6px; display: grid; place-items: center; text-decoration: none; color: #fff; font-weight: 800; opacity: .45; }
.ak-matrix .cell.has { opacity: 1; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.ak-matrix .rendah { background: var(--ak-green); } .ak-matrix .sedang { background: #0ea5e9; } .ak-matrix .tinggi { background: var(--ak-amber); } .ak-matrix .kritis { background: var(--ak-red); }
.ak-axis { display: flex; justify-content: space-between; font-size: .72rem; color: var(--ak-muted); margin-top: .4rem; }
.ak-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .7rem; text-align: center; }
.ak-minis b { display: block; font-size: 1.15rem; } .ak-minis span { font-size: .72rem; color: var(--ak-muted); }
.ak-list { display: flex; flex-direction: column; gap: .4rem; }
.ak-list li a { display: flex; flex-direction: column; padding: .45rem .65rem; border-radius: 9px; border-left: 4px solid var(--ak-amber); background: var(--ak-soft); text-decoration: none; color: var(--ak-ink); font-size: .84rem; }
.ak-list li.bad a { border-left-color: var(--ak-red); } .ak-list li span { font-size: .75rem; color: var(--ak-muted); }
.ak-disclaimer { font-size: .76rem; color: var(--ak-muted); text-align: center; padding: .5rem 0 1rem; }

/* Ringkasan proyek */
.ak-summary { display: flex; flex-direction: column; gap: 1rem; }
.ak-summary-head { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.ak-aki { --pct: 0%; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--ak-blue) var(--pct), var(--ak-line) 0); }
.ak-aki > div { width: 118px; height: 118px; border-radius: 50%; background: var(--ak-card); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ak-aki strong { font-size: 2rem; font-weight: 800; } .ak-aki span { font-size: .72rem; letter-spacing: .1em; color: var(--ak-muted); }
.ak-summary-meta { flex: 1; min-width: 280px; }
.ak-components { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .4rem 1.2rem; margin-top: .6rem; }
.ak-comp { display: grid; grid-template-columns: 9.5rem 1fr 3rem; align-items: center; gap: .5rem; font-size: .82rem; }
.ak-comp small { color: var(--ak-muted); font-size: .7rem; }
.ak-comp .track, .ak-proj-bar { position: relative; height: .6rem; border-radius: 999px; background: var(--ak-soft); border: 1px solid var(--ak-line); overflow: visible; }
.ak-comp .fill, .ak-proj-bar .fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--ak-green); }
.ak-comp .fill.mid { background: var(--ak-amber); } .ak-comp .fill.bad, .ak-proj-bar .fill.bad { background: var(--ak-red); }
.ak-comp b { text-align: right; }
.ak-summary-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1rem; }
@media (max-width: 1000px) { .ak-summary-grid { grid-template-columns: 1fr; } }
.ak-summary-grid section, .ak-wi-grid section, .ak-editor-side section { border: 1px solid var(--ak-line); border-radius: 12px; padding: .9rem 1rem; background: var(--ak-soft); }
.ak-summary-grid h4, .ak-wi-grid h4, .ak-editor-side h4 { font-weight: 700; font-size: .9rem; margin-bottom: .6rem; display: flex; justify-content: space-between; gap: .5rem; }
.ak-summary-grid h4 small, .ak-wi-grid h4 small, .ak-editor-side h4 small { font-weight: 500; color: var(--ak-muted); font-size: .74rem; }
.ak-proj { margin-bottom: .9rem; } .ak-proj.active .ak-proj-label span { font-weight: 700; }
.ak-proj-label { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .3rem; }
.ak-proj-bar { height: .85rem; } .ak-proj-bar .mark { position: absolute; top: -5px; bottom: -5px; width: 3px; border-radius: 2px; background: var(--ak-ink); }
.ak-gate { display: flex; flex-direction: column; gap: .45rem; }
.ak-gate li { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; }
.ak-gate li .icon { flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #fff; background: var(--ak-green); }
.ak-gate li.bad .icon { background: var(--ak-red); }
.ak-gate li small { display: block; color: var(--ak-muted); font-size: .76rem; }
.ak-gate.compact li { font-size: .8rem; }

/* Butir kerja */
.ak-wi { display: flex; flex-direction: column; gap: .8rem; }
.ak-wi-head { display: flex; gap: .8rem; align-items: flex-start; }
.ak-dot { flex: none; width: 1rem; height: 1rem; border-radius: 50%; margin-top: .3rem; background: var(--ak-gray); }
.ak-dot.green { background: var(--ak-green); } .ak-dot.yellow { background: var(--ak-amber); } .ak-dot.red { background: var(--ak-red); }
.ak-wi-statement { font-size: 1.02rem; font-weight: 600; line-height: 1.5; color: var(--ak-ink); }
.ak-wi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 1000px) { .ak-wi-grid { grid-template-columns: 1fr; } }
.ak-wi-grid section.active { border-color: var(--ak-blue); box-shadow: 0 0 0 1px var(--ak-blue) inset; }
.ak-wi-grid section p { font-size: .86rem; line-height: 1.55; }
.ak-kw { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 .3rem; }
.ak-kw span { font-size: .74rem; padding: .2rem .55rem; border-radius: 7px; border: 1px solid; }
.ak-kw .ok { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; } .ak-kw .missing { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.dark .ak-kw .ok { background: rgba(16,185,129,.12); color: #6ee7b7; border-color: rgba(16,185,129,.3); } .dark .ak-kw .missing { background: rgba(249,115,22,.12); color: #fdba74; border-color: rgba(249,115,22,.3); }
.ak-assess { margin-top: .6rem; font-size: .84rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.ak-assess b.ok { color: #047857; } .ak-assess b.bad { color: #be123c; }
.ak-metric { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: baseline; padding: .7rem .9rem; border-radius: 10px; background: var(--ak-blue-50); font-size: .86rem; }
span.ak-metric { display: inline; padding: .05rem .35rem; border-radius: 5px; font-weight: 700; color: var(--ak-blue); }

/* Editor LED */
.ak-editor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.2rem; align-items: start; }
@media (max-width: 1200px) { .ak-editor { grid-template-columns: 1fr; } }
.ak-editor-main { background: var(--ak-card); border: 1px solid var(--ak-line); border-radius: var(--ak-radius); padding: 1.1rem 1.2rem; box-shadow: var(--ak-shadow); }
.ak-editor-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin: .9rem 0 .6rem; position: sticky; top: 4rem; z-index: 5; background: var(--ak-card); padding: .35rem 0; }
.ak-counter { font-size: .85rem; display: flex; align-items: center; gap: .55rem; }
.ak-counter strong { font-size: 1.15rem; }
.ak-counter .bar { width: 140px; height: .5rem; border-radius: 999px; background: var(--ak-soft); border: 1px solid var(--ak-line); overflow: hidden; }
.ak-counter .bar span { display: block; height: 100%; background: var(--ak-green); transition: width .2s; }
.ak-counter.near .bar span { background: var(--ak-amber); } .ak-counter.over .bar span { background: var(--ak-red); } .ak-counter.over strong { color: var(--ak-red); }
.ak-insert { display: flex; gap: .5rem; flex-wrap: wrap; }
.ak-insert select { max-width: 260px; border: 1px solid var(--ak-line); border-radius: 9px; padding: .35rem .5rem; font-size: .8rem; background: var(--ak-card); color: var(--ak-ink); }
.ak-toggle { font-size: .82rem; display: flex; gap: .35rem; align-items: center; }
.ak-textarea { width: 100%; border: 1px solid var(--ak-line); border-radius: 12px; padding: .9rem 1rem; font: 400 .94rem/1.7 'Inter', ui-sans-serif, system-ui; background: var(--ak-soft); color: var(--ak-ink); resize: vertical; }
.ak-textarea:focus { outline: 2px solid var(--ak-blue); background: var(--ak-card); }
.ak-preview { border: 1px solid var(--ak-line); border-radius: 12px; padding: 1rem 1.2rem; line-height: 1.75; font-size: .94rem; background: var(--ak-card); min-height: 300px; }
.ak-cite { display: inline-block; padding: 0 .3rem; border-radius: 5px; background: #e0ecfa; color: var(--ak-blue) !important; font-weight: 700; font-size: .82rem; text-decoration: none; }
.ak-cite.warn { background: #fef3c7; color: #92400e !important; } .ak-cite.broken { background: #ffe4e6; color: #9f1239; }
.ak-editor-actions { display: flex; gap: .6rem; margin-top: .8rem; align-items: center; }
.ak-editor-side { display: flex; flex-direction: column; gap: .9rem; }
.ak-editor-side section { background: var(--ak-card); }
.ak-kwlist li { font-size: .8rem; padding: .18rem 0; } .ak-kwlist li.ok { color: #047857; } .ak-kwlist li.missing { color: #c2410c; }
.ak-score { font-size: .85rem; margin: .6rem 0; } .ak-score b { font-size: 1.2rem; }
.ak-suggest { list-style: decimal; padding-left: 1.2rem; font-size: .8rem; margin-top: .6rem; display: flex; flex-direction: column; gap: .3rem; }
.ak-ai { margin-top: .7rem; padding: .7rem .8rem; border-radius: 10px; background: var(--ak-blue-50); font-size: .82rem; line-height: 1.55; }
.ak-ai.warn { background: #fffbeb; color: #92400e; }
.ak-comment { border-bottom: 1px dashed var(--ak-line); padding: .45rem 0; font-size: .82rem; }
.ak-comment.resolved { opacity: .55; } .ak-comment small { color: var(--ak-muted); }
.ak-editor-side textarea { margin: .5rem 0; }
.ak-revs li { font-size: .78rem; padding: .3rem 0; border-bottom: 1px dashed var(--ak-line); } .ak-revs small { display: block; color: var(--ak-muted); }

/* Panduan pimpinan */
.ak-guide { max-width: 1100px; display: flex; flex-direction: column; gap: 1.1rem; }
.ak-guide-hero { padding: 1.6rem 1.8rem; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #17406f, #2f68a8); }
.ak-guide-hero h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: .4rem; } .ak-guide-hero p { color: #dbeafe; line-height: 1.6; }
.ak-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.ak-card { background: var(--ak-card); border: 1px solid var(--ak-line); border-radius: var(--ak-radius); padding: 1.1rem 1.2rem; box-shadow: var(--ak-shadow); }
.ak-card h3 { font-weight: 700; margin-bottom: .45rem; font-size: 1rem; color: var(--ak-ink); }
.ak-card p, .ak-card li { font-size: .88rem; line-height: 1.6; color: var(--ak-ink); }
.ak-card ul { list-style: disc; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .25rem; }
.ak-card .icon { width: 2.4rem; height: 2.4rem; border-radius: 12px; display: grid; place-items: center; background: var(--ak-blue-50); color: var(--ak-blue); font-size: 1.2rem; margin-bottom: .6rem; }
.ak-card a.more { display: inline-block; margin-top: .6rem; font-weight: 700; font-size: .82rem; color: var(--ak-blue); }
.ak-steps { counter-reset: s; display: flex; flex-direction: column; gap: .9rem; }
.ak-step { counter-increment: s; position: relative; padding: 1rem 1.2rem 1rem 4rem; background: var(--ak-card); border: 1px solid var(--ak-line); border-radius: var(--ak-radius); box-shadow: var(--ak-shadow); }
.ak-step::before { content: counter(s); position: absolute; left: 1.1rem; top: 1rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ak-blue); color: #fff; font-weight: 800; display: grid; place-items: center; }
.ak-step h3 { font-weight: 700; margin-bottom: .3rem; } .ak-step p, .ak-step li { font-size: .88rem; line-height: 1.6; }
.ak-step .when { font-size: .74rem; font-weight: 700; color: var(--ak-blue); text-transform: uppercase; letter-spacing: .06em; }
.ak-step .modules { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.ak-faq details { background: var(--ak-card); border: 1px solid var(--ak-line); border-radius: 12px; padding: .8rem 1rem; margin-bottom: .6rem; }
.ak-faq summary { font-weight: 700; cursor: pointer; font-size: .92rem; } .ak-faq p { margin-top: .5rem; font-size: .88rem; line-height: 1.6; }
.ak-crit { border-left: 5px solid var(--ak-blue); }
.ak-crit table { width: 100%; font-size: .82rem; margin-top: .5rem; border-collapse: collapse; }
.ak-crit td { padding: .3rem .4rem; border-top: 1px solid var(--ak-line); vertical-align: top; }

/* Tab halaman & tabel polos */
[x-cloak] { display: none !important; }
.ak-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.ak-tabs button { padding: .4rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid var(--ak-line); background: var(--ak-card); color: var(--ak-ink); }
.ak-tabs button.on { background: var(--ak-blue); color: #fff; border-color: var(--ak-blue); }
.ak-table.plain tbody tr { cursor: default; }
.ak-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem 1rem; margin-bottom: .8rem; font-size: .84rem; }
.ak-meta dt { color: var(--ak-muted); font-size: .74rem; } .ak-meta dd { font-weight: 600; }
.ak-sim-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .ak-sim-grid { grid-template-columns: 1fr; } }
.ak-sim-result { position: sticky; top: 4.5rem; display: flex; flex-direction: column; gap: .8rem; }
.ak-sim-row { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .2rem; border-bottom: 1px solid var(--ak-line); font-size: .84rem; }
.ak-sim-row input { margin-top: .25rem; }
.ak-sim-row .code { font-weight: 800; min-width: 2.6rem; }
.ak-delta { font-size: .8rem; font-weight: 700; color: #047857; }
.ak-kanban { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 1rem; align-items: start; overflow-x: auto; }
.ak-col { background: var(--ak-soft); border: 1px solid var(--ak-line); border-radius: var(--ak-radius); padding: .7rem; min-height: 300px; }
.ak-col h4 { font-weight: 700; font-size: .9rem; display: flex; justify-content: space-between; margin: .1rem .2rem .6rem; }
.ak-task { background: var(--ak-card); border: 1px solid var(--ak-line); border-left: 4px solid var(--ak-gray); border-radius: 10px; padding: .6rem .7rem; margin-bottom: .55rem; cursor: grab; font-size: .83rem; box-shadow: var(--ak-shadow); }
.ak-task.tinggi { border-left-color: var(--ak-amber); } .ak-task.mendesak { border-left-color: var(--ak-red); } .ak-task.rendah { border-left-color: var(--ak-green); }
.ak-task.overdue .due { color: var(--ak-red); font-weight: 700; }
.ak-task small { display: block; color: var(--ak-muted); margin-top: .2rem; }
.ak-col.drop { outline: 2px dashed var(--ak-blue); }
.ak-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ak-cal .dow { font-size: .72rem; font-weight: 700; color: var(--ak-muted); text-align: center; padding: .3rem; }
.ak-cal .day { min-height: 105px; background: var(--ak-card); border: 1px solid var(--ak-line); border-radius: 8px; padding: .3rem .35rem; font-size: .74rem; }
.ak-cal .day.out { opacity: .4; } .ak-cal .day.today { outline: 2px solid var(--ak-blue); }
.ak-cal .day .n { font-weight: 800; font-size: .78rem; }
.ak-cal .ev { display: block; margin-top: .2rem; padding: .1rem .3rem; border-radius: 5px; background: var(--ak-blue-50); color: var(--ak-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.ak-cal .ev.overdue { background: #ffe4e6; color: #9f1239; } .ak-cal .ev.done { text-decoration: line-through; opacity: .6; } .ak-cal .ev.item { background: #ede9fe; color: #5b21b6; } .ak-cal .ev.doc { background: #fef3c7; color: #92400e; }
.ak-tree details { border: 1px solid var(--ak-line); border-radius: 10px; margin-bottom: .45rem; background: var(--ak-card); }
.ak-tree summary { padding: .6rem .8rem; cursor: pointer; font-size: .88rem; }
.ak-tree .body { padding: .2rem .9rem .8rem; font-size: .84rem; }
.ak-tree .sub { border-top: 1px dashed var(--ak-line); padding: .55rem 0; }
.ak-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }