:root { --ljk-primary: #3b7ddd; --ljk-dark: #222e3c; }
.brand-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 4px solid var(--ljk-primary); vertical-align: middle; box-shadow: 0 0 0 2px #fff inset; }
.brand-lg { font-size: 1.6rem; font-weight: 700; color: var(--ljk-dark); text-decoration: none; }
.brand-lg .brand-dot { border-color: var(--ljk-primary); background: var(--ljk-primary); box-shadow: 0 0 0 3px #fff inset; }
.auth-bg { background: linear-gradient(160deg, #eef3fb 0%, #fff 60%); min-height: 100vh; }
.avatar-initial { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: var(--ljk-primary); color: #fff; align-items: center; justify-content: center; font-weight: 600; margin-right: .25rem; }
.stat-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(59,125,221,.12); color: var(--ljk-primary); }

/* Landing */
.lp-nav { background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-bottom: 1px solid #e9ecef; }
.lp-hero { background: radial-gradient(1200px 500px at 85% -10%, rgba(59,125,221,.18), transparent 60%), linear-gradient(180deg, #f4f7fc, #fff); padding: 5rem 0 4rem; }
.lp-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; line-height: 1.15; color: var(--ljk-dark); }
.lp-hero h1 span { color: var(--ljk-primary); }
.lp-section { padding: 4.5rem 0; }
.lp-section.alt { background: #f5f7fb; }
.lp-feature { border: 0; box-shadow: 0 2px 14px rgba(33,37,41,.07); height: 100%; transition: transform .15s; }
.lp-feature:hover { transform: translateY(-3px); }
.lp-step-no { width: 44px; height: 44px; border-radius: 50%; background: var(--ljk-primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.lp-sheet { background: #fff; border: 1px solid #dee2e6; border-radius: 10px; box-shadow: 0 18px 50px rgba(34,46,60,.18); overflow: hidden; }
.lp-sheet svg { display: block; width: 100%; height: auto; }
.lp-demo-table td, .lp-demo-table th { white-space: nowrap; }
.lp-footer { background: var(--ljk-dark); color: #aab4c3; padding: 3rem 0 1.5rem; }
.lp-footer a { color: #cfd7e3; }

/* Pindai */
.dropzone { border: 2px dashed #b7c4d8; border-radius: 12px; padding: 2.5rem 1rem; text-align: center; background: #f8fafd; cursor: pointer; transition: all .15s; }
.dropzone.drag, .dropzone:hover { border-color: var(--ljk-primary); background: #eef4fd; }
.scan-log { max-height: 340px; overflow: auto; font-size: .85rem; }

/* Editor hasil */
.edit-wrap { display: grid; grid-template-columns: minmax(300px, 46%) 1fr; gap: 1rem; }
@media (max-width: 991px) { .edit-wrap { grid-template-columns: 1fr; } }
.scan-view { position: relative; background: #222; border-radius: 6px; overflow: auto; max-height: 72vh; }
.scan-view .inner { position: relative; transform-origin: top left; }
.scan-view img { display: block; width: 100%; }
.scan-view svg.ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 4px; max-height: 56vh; overflow: auto; padding-right: 4px; }
.q-row { display: flex; align-items: center; gap: 3px; padding: 3px 6px; border: 1px solid #e3e7ee; border-radius: 6px; background: #fff; font-size: .82rem; }
.q-row .no { width: 24px; font-weight: 600; text-align: right; color: #555; }
.q-row.flag { border-color: #f0ad4e; background: #fff8ec; }
.q-row.ok { background: #effaf2; border-color: #b9e5c6; }
.q-row.bad { background: #fdf1f1; border-color: #f0b8b8; }
.q-row .opt { width: 25px; height: 25px; border: 1px solid #c4ccd9; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: .72rem; user-select: none; background: #fff; }
.q-row .opt.sel { background: var(--ljk-primary); border-color: var(--ljk-primary); color: #fff; }
.q-row .opt.key { box-shadow: 0 0 0 2px #28a745; }
.q-row .key-tag { font-size: .65rem; color: #28a745; margin-left: auto; }
.key-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; max-height: 45vh; overflow: auto; }
.table-hover tbody tr { cursor: default; }
.sel-row { cursor: pointer; }