*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:#F0F4F8;font-family:'DM Sans',sans-serif;color:#1B2A4A;min-height:100vh;overscroll-behavior:none}
#app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}

/* HEADER */
.hdr{background:#1B2A4A;padding:14px 16px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:100;flex-shrink:0}
.logo{width:34px;height:34px;background:#DC2626;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;color:#fff}
.hdr-text .ht{color:#fff;font-size:16px;font-weight:700;letter-spacing:-0.01em}
.hdr-text .hs{color:#94A3B8;font-size:11px;margin-top:1px}
.hdr-right{margin-left:auto;color:#94A3B8;font-size:11px;font-weight:500}

/* PROGRESS */
.prog-wrap{height:3px;background:#2A3F6B;flex-shrink:0}
.prog-fill{height:100%;background:#DC2626;border-radius:0 2px 2px 0;transition:width .35s ease}

/* BODY */
.body{flex:1;padding:16px;padding-bottom:40px;overflow-y:auto}

/* TYPOGRAPHY */
.sc-title{font-size:21px;font-weight:700;color:#1B2A4A;letter-spacing:-0.025em;margin-bottom:4px}
.sc-sub{font-size:13px;color:#475569;line-height:1.6;margin-bottom:20px}
.back-btn{display:flex;align-items:center;gap:5px;background:none;border:none;color:#64748B;font-size:13px;font-weight:500;font-family:'DM Sans',sans-serif;cursor:pointer;margin-bottom:16px;padding:0}

/* CARDS */
.card{background:#fff;border-radius:14px;padding:16px;margin-bottom:12px;border:1px solid #E2E8F0}
.card-title{font-size:10px;font-weight:700;color:#64748B;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}

/* FORM */
.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
.fl{font-size:12px;font-weight:600;color:#475569;margin-bottom:5px;display:flex;align-items:center;gap:6px}
.opt-tag{font-size:10px;font-weight:500;color:#94A3B8;background:#F1F5F9;padding:1px 6px;border-radius:10px}
.req-tag{font-size:10px;font-weight:500;color:#DC2626;background:#FEF2F2;padding:1px 6px;border-radius:10px}
.rec-tag{font-size:10px;font-weight:500;color:#B45309;background:#FEF3C7;padding:1px 6px;border-radius:10px}
.fn{font-size:10px;color:#94A3B8;margin-top:3px;line-height:1.5}
.iw{position:relative;display:flex;align-items:center}
.iu{position:absolute;right:12px;font-size:12px;color:#94A3B8;font-family:'DM Mono',monospace;pointer-events:none}
input[type=number],input[type=text],input[type=date],select,textarea{width:100%;background:#F0F4F8;border:1.5px solid #E2E8F0;border-radius:10px;padding:0 14px;font-size:15px;font-family:'DM Sans',sans-serif;color:#1B2A4A;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .15s}
input[type=number],input[type=text],input[type=date],select{height:48px}
textarea{padding:12px 14px;height:80px;resize:none;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:#1B2A4A;background:#fff}
.hu{padding-right:52px}
.af{height:46px;background:#EFF6FF;border:1.5px solid #BFDBFE;border-radius:10px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.af-l{font-size:12px;color:#1E40AF;font-weight:500}
.af-v{font-size:15px;font-weight:700;color:#1E40AF;font-family:'DM Mono',monospace}
.af-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
select{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394A3B8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}

/* TOGGLE */
.tgl-grp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tgl-grp3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.tgl{height:48px;border-radius:12px;border:1.5px solid #E2E8F0;background:#F0F4F8;font-size:13px;font-weight:600;color:#475569;cursor:pointer;transition:all .15s;font-family:'DM Sans',sans-serif;line-height:1.3;padding:4px 8px}
.tgl.on{background:#1B2A4A;border-color:#1B2A4A;color:#fff}
.tgl.on-red{background:#DC2626;border-color:#DC2626;color:#fff}

/* MULTI SELECT CHIPS */
.chip-wrap{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.chip{padding:6px 12px;border-radius:20px;border:1.5px solid #E2E8F0;background:#F0F4F8;font-size:12px;font-weight:600;color:#475569;cursor:pointer;transition:all .15s;font-family:'DM Sans',sans-serif}
.chip.on{background:#1B2A4A;border-color:#1B2A4A;color:#fff}

/* BUTTONS */
.btn-p{width:100%;height:52px;background:#DC2626;border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:700;font-family:'DM Sans',sans-serif;cursor:pointer;letter-spacing:.01em;transition:background .15s}
.btn-p:active{background:#B91C1C}
.btn-p:disabled{opacity:.5;cursor:default}
.btn-s{width:100%;height:48px;background:transparent;border:1.5px solid #CBD5E1;border-radius:12px;color:#475569;font-size:14px;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;margin-bottom:10px}

/* TIER BADGE */
.tier-badge{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.04em}
.tier-1{background:#FEF2F2;color:#DC2626;border:1.5px solid #FECACA}
.tier-2{background:#FFF7ED;color:#C2410C;border:1.5px solid #FED7AA}
.tier-3{background:#F0FDF4;color:#15803D;border:1.5px solid #BBF7D0}

/* FLAGS */
.fc{border-radius:12px;border:1px solid;padding:10px 14px;margin-bottom:8px;margin-top:8px}
.fc-crit{background:#FFF1F2;border-color:#FECDD3}
.fc-warn{background:#FFF7ED;border-color:#FED7AA}
.fc-info{background:#EFF6FF;border-color:#BFDBFE}
.ft{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.fx{font-size:12px;line-height:1.55}
.fc-crit .ft,.fc-crit .fx{color:#9F1239}
.fc-warn .ft,.fc-warn .fx{color:#9A3412}
.fc-info .ft,.fc-info .fx{color:#1E40AF}

/* NOTES */
.nc{background:#F8FAFC;border-radius:12px;border:1px solid #E2E8F0;padding:10px 14px;margin-bottom:8px}
.nt{font-size:11px;color:#64748B;line-height:1.65}

/* REPORT */
.rb{background:#fff;border-radius:14px;padding:16px;border:1px solid #E2E8F0;margin-bottom:10px}
.rl{font-size:10px;font-weight:700;color:#64748B;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.rt{font-family:'DM Mono',monospace;font-size:11px;color:#1B2A4A;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.cp-btn{width:100%;height:44px;background:#F0F4F8;border:1.5px solid #E2E8F0;border-radius:10px;color:#475569;font-size:13px;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;margin-top:10px;transition:all .15s}
.cp-btn.ok{background:#DCFCE7;border-color:#86EFAC;color:#15803D}

/* UPLOAD */
.upload-area{border:2px dashed #CBD5E1;border-radius:12px;padding:20px;text-align:center;cursor:pointer;transition:all .15s;background:#F8FAFC;margin-bottom:8px}
.upload-area:hover{border-color:#1B2A4A;background:#F0F4F8}
.upload-area.has-file{border-color:#15803D;border-style:solid;background:#F0FDF4}
.upload-icon{font-size:24px;margin-bottom:6px}
.upload-text{font-size:13px;font-weight:600;color:#475569}
.upload-sub{font-size:11px;color:#94A3B8;margin-top:2px}
.upload-ok{font-size:12px;font-weight:600;color:#15803D}

/* VITAL PANEL */
.vp{border:1px solid #E2E8F0;border-radius:12px;overflow:hidden;margin-bottom:8px}
.vr{display:flex;border-bottom:1px solid #F1F5F9}
.vr:last-child{border-bottom:none}
.vc{flex:1;display:flex;justify-content:space-between;align-items:center;padding:10px 12px}
.vc:first-child{border-right:1px solid #F1F5F9}
.vk{font-size:12px;color:#64748B}
.vv{font-size:14px;font-weight:700;color:#1B2A4A;font-family:'DM Mono',monospace}
.vv-warn{font-size:14px;font-weight:700;color:#DC2626;font-family:'DM Mono',monospace}

/* DIAGNOSIS BOX */
.dx-box{border-radius:12px;padding:14px;margin-bottom:10px}
.dx-t1{background:#FEF2F2;border:1.5px solid #FECACA}
.dx-t2{background:#FFF7ED;border:1.5px solid #FED7AA}
.dx-t3{background:#F0FDF4;border:1.5px solid #BBF7D0}
.dx-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.dx-t1 .dx-label{color:#DC2626}
.dx-t2 .dx-label{color:#C2410C}
.dx-t3 .dx-label{color:#15803D}
.dx-name{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.dx-t1 .dx-name{color:#9F1239}
.dx-t2 .dx-name{color:#7C2D12}
.dx-t3 .dx-name{color:#14532D}
.dx-basis{font-size:12px;line-height:1.6}
.dx-t1 .dx-basis{color:#9F1239}
.dx-t2 .dx-basis{color:#7C2D12}
.dx-t3 .dx-basis{color:#14532D}

/* LANDING */
.land-hero{background:#1B2A4A;border-radius:16px;padding:24px 20px;margin-bottom:14px;position:relative;overflow:hidden}
.land-bg{position:absolute;right:-20px;top:-20px;width:120px;height:120px;background:#DC2626;border-radius:50%;opacity:.08}
.land-logo{width:52px;height:52px;background:#DC2626;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff;margin-bottom:16px;position:relative;z-index:1}
.land-name{font-size:26px;font-weight:700;color:#fff;letter-spacing:-.03em;margin-bottom:6px;position:relative;z-index:1}
.land-tag{font-size:13px;color:#94A3B8;line-height:1.6;position:relative;z-index:1}
.land-divider{height:1px;background:#2A3F6B;margin:16px 0}
.land-desc{font-size:12px;color:#64748B;line-height:1.7}
.ver-strip{background:#fff;border-radius:12px;border:1px solid #E2E8F0;padding:11px 16px;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ver-l{font-size:11px;color:#94A3B8}
.ver-r{font-size:11px;font-weight:600;color:#475569}
.disc{font-size:10px;color:#94A3B8;text-align:center;margin-top:10px;line-height:1.65;padding:0 4px}

/* LEAD GRID */
.lead-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px}
.lead-btn{height:38px;border-radius:8px;border:1.5px solid #E2E8F0;background:#F0F4F8;font-size:12px;font-weight:600;color:#475569;cursor:pointer;font-family:'DM Mono',monospace;transition:all .15s}
.lead-btn.on{background:#DC2626;border-color:#DC2626;color:#fff}

/* ── REVIEW SIDE ── */

/* Tabs */
.review-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.rt-tab{height:42px;border-radius:10px;border:1.5px solid #E2E8F0;background:#fff;font-size:13px;font-weight:600;color:#475569;cursor:pointer;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}
.rt-tab.on{background:#1B2A4A;border-color:#1B2A4A;color:#fff}
.rt-count{background:#DC2626;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;min-width:18px;text-align:center}
.rt-count-ok{background:#15803D}
.rt-tab.on .rt-count{background:#fff;color:#1B2A4A}
.rt-tab.on .rt-count-ok{background:#fff;color:#15803D}

/* List row */
.list-row{background:#fff;border-radius:12px;border:1px solid #E2E8F0;padding:14px 14px 12px;margin-bottom:10px;cursor:pointer;transition:all .15s;position:relative}
.list-row:hover{border-color:#1B2A4A;transform:translateY(-1px);box-shadow:0 2px 8px rgba(27,42,74,.06)}
.list-row-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.list-time{font-size:11px;color:#94A3B8;font-family:'DM Mono',monospace}
.list-urgent{font-size:10px;font-weight:700;color:#DC2626;background:#FEF2F2;padding:2px 8px;border-radius:10px;border:1px solid #FECACA;margin-left:auto;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.65}}
.list-dx{font-size:15px;font-weight:700;color:#1B2A4A;line-height:1.3;margin-bottom:4px;letter-spacing:-.01em}
.list-meta{font-size:12px;color:#64748B;margin-bottom:8px}
.list-foot{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid #F1F5F9}
.list-relative{font-size:11px;color:#94A3B8}
.list-arrow{font-size:18px;color:#CBD5E1;font-weight:300}

/* Editor area */
.editor-area{width:100%;min-height:340px;background:#F8FAFC;border:1.5px solid #E2E8F0;border-radius:10px;padding:14px;font-family:'DM Mono',monospace;font-size:12px;line-height:1.7;color:#1B2A4A;outline:none;resize:vertical;white-space:pre-wrap}
.editor-area:focus{border-color:#1B2A4A;background:#fff}
.editor-area[readonly]{background:#F8FAFC;color:#475569}

/* Template rows */
.tpl-row{background:#fff;border-radius:12px;border:1px solid #E2E8F0;padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:all .15s}
.tpl-row:hover{border-color:#1B2A4A;transform:translateY(-1px)}
.tpl-name{font-size:13px;font-weight:700;color:#1B2A4A;margin-bottom:4px}
.tpl-preview{font-size:11px;color:#64748B;line-height:1.5;font-family:'DM Mono',monospace}

/* Attachment */
.attach-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#F8FAFC;border-radius:10px;margin-bottom:6px}
.attach-icon{font-size:20px}
.attach-name{font-size:12px;font-weight:700;color:#1B2A4A}
.attach-file{font-size:11px;color:#64748B;font-family:'DM Mono',monospace;margin-top:2px}

/* Review bottom bar */
.review-bottom{margin-top:8px}

/* ── REVIEW REDESIGN ── */

/* List rows */
.list-row{background:#fff;border-radius:14px;border:1px solid #E2E8F0;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:all .18s;position:relative}
.list-row:active{transform:scale(.99)}
.list-row-urgent{border-color:#FECACA;background:#FFFAFA}
.list-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.list-time{font-size:11px;color:#94A3B8;font-family:'DM Mono',monospace;margin-left:2px}
.list-urgent-badge{margin-left:auto;font-size:10px;font-weight:700;color:#DC2626;background:#FEF2F2;padding:2px 8px;border-radius:10px;border:1px solid #FECACA;animation:pulse 1.5s ease-in-out infinite}
.list-verified-badge{margin-left:auto;font-size:10px;font-weight:700;color:#15803D;background:#F0FDF4;padding:2px 8px;border-radius:10px;border:1px solid #BBF7D0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.list-dx{font-size:15px;font-weight:700;color:#1B2A4A;line-height:1.3;margin-bottom:8px;letter-spacing:-.015em}
.list-meta-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.list-meta-chip{font-size:11px;color:#475569;background:#F1F5F9;padding:3px 8px;border-radius:6px;border:1px solid #E2E8F0}
.list-foot{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid #F1F5F9}
.list-relative{font-size:11px;color:#94A3B8}
.list-caret{font-size:20px;color:#CBD5E1;line-height:1}

/* Empty state */
.empty-state{background:#fff;border-radius:14px;border:1px solid #E2E8F0;padding:48px 24px;text-align:center;margin-bottom:12px}
.empty-icon{font-size:40px;color:#CBD5E1;margin-bottom:12px}
.empty-title{font-size:15px;font-weight:600;color:#475569;margin-bottom:6px}
.empty-sub{font-size:12px;color:#94A3B8;line-height:1.6}

/* Bottom buttons */
.btn-outline-icon{width:100%;height:46px;background:#fff;border:1.5px solid #E2E8F0;border-radius:12px;color:#475569;font-size:13px;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s}
.btn-outline-icon:hover{border-color:#1B2A4A;color:#1B2A4A}

/* Detail header */
.detail-header{background:#fff;border-radius:14px;border:1px solid #E2E8F0;padding:16px;margin-bottom:12px}
.detail-header-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.verified-chip{font-size:11px;font-weight:700;color:#15803D;background:#F0FDF4;padding:3px 10px;border-radius:20px;border:1px solid #BBF7D0;margin-left:auto}
.detail-dx{font-size:18px;font-weight:700;color:#1B2A4A;letter-spacing:-.02em;margin-bottom:8px;line-height:1.3}
.detail-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:#64748B}
.detail-dot{color:#CBD5E1}

/* Card title row */
.card-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.editor-hint{font-size:11px;color:#94A3B8;font-style:italic}

/* Editor */
.editor-area{width:100%;min-height:360px;background:#F8FAFC;border:1.5px solid #E2E8F0;border-radius:10px;padding:14px;font-family:'DM Mono',monospace;font-size:11.5px;line-height:1.75;color:#1B2A4A;outline:none;resize:vertical;white-space:pre-wrap}
.editor-area:focus{border-color:#1B2A4A;background:#fff}
.editor-area[readonly]{background:#F8FAFC;color:#475569;cursor:default}

/* Attach row */
.attach-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#F8FAFC;border-radius:10px;border:1px solid #F1F5F9}
.attach-icon-wrap{width:36px;height:36px;border-radius:8px;background:#EFF6FF;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.attach-label{font-size:12px;font-weight:700;color:#1B2A4A;margin-bottom:2px}
.attach-fname{font-size:11px;color:#64748B;font-family:'DM Mono',monospace}

/* Template rows in settings */
.tpl-row{background:#fff;border-radius:12px;border:1px solid #E2E8F0;padding:14px;margin-bottom:8px;cursor:pointer;transition:all .15s}
.tpl-row:hover{border-color:#1B2A4A}
.tpl-name{font-size:13px;font-weight:700;color:#1B2A4A;margin-bottom:4px}
.tpl-preview{font-size:11px;color:#64748B;line-height:1.55;font-family:'DM Mono',monospace}

/* ── PIN SCREEN — DOKTER JAGA ── */
.pin-screen{padding:8px 4px 24px;display:flex;flex-direction:column;align-items:center;min-height:calc(100vh - 80px)}
.pin-hero{text-align:center;margin-bottom:32px;margin-top:8px}
.pin-logo{width:56px;height:56px;background:#DC2626;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;margin:0 auto 14px}
.pin-app-name{font-size:22px;font-weight:700;color:#1B2A4A;letter-spacing:-.02em;margin-bottom:6px}
.pin-sub{font-size:13px;color:#64748B;line-height:1.55}
.pin-dots{display:flex;gap:14px;margin-bottom:24px;transition:transform .1s}
.pin-dots.shake{animation:pin-shake .5s ease}
@keyframes pin-shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-8px)}
  40%,80%{transform:translateX(8px)}
}
.pin-dot{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #CBD5E1;transition:all .15s}
.pin-dot.filled{background:#1B2A4A;border-color:#1B2A4A;transform:scale(1.05)}
.pin-dot.err{background:#FEF2F2;border-color:#DC2626}
.pin-dot.filled.err{background:#DC2626;border-color:#DC2626}
.pin-err-msg{font-size:12px;color:#DC2626;font-weight:600;margin-bottom:18px;text-align:center}
.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:300px;margin-bottom:24px}
.pin-key{aspect-ratio:1;background:#fff;border:1.5px solid #E2E8F0;border-radius:50%;color:#1B2A4A;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .12s;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;min-height:64px}
.pin-key:active{background:#F1F5F9;transform:scale(.95)}
.pin-key-num{font-size:26px;font-weight:500;line-height:1}
.pin-key-sub{font-size:9px;font-weight:600;color:#94A3B8;letter-spacing:.12em;margin-top:2px}
.pin-key-action{background:#F8FAFC;color:#64748B;font-size:20px}
.pin-foot{font-size:11px;color:#94A3B8;text-align:center;line-height:1.6;margin-top:auto;padding:0 8px}
.pin-code-hint{background:#F1F5F9;padding:1px 6px;border-radius:4px;font-family:'DM Mono',monospace;color:#475569;font-size:11px;font-weight:600}