:root{--green:#087a6d;--green-dark:#075e56;--mint:#eaf7f3;--mint-2:#f3fbf8;--ink:#183c3b;--text:#264440;--muted:#718983;--stroke:#dcebe6;--bg:#f7faf8;--white:#fff;--shadow:0 22px 75px rgba(21,87,71,.07);font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.56}.hidden{display:none!important}.shell{max-width:1170px;margin:auto;padding:0 28px}.header{height:95px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;border:0;background:none;padding:0;color:var(--ink);text-align:left}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background:var(--green);color:#fff}.brand-mark svg{width:29px}.brand-text strong{display:block;letter-spacing:-.8px;font-size:21px;line-height:1}.brand-text strong span{color:var(--green);font-weight:600}.brand-text small{display:block;color:var(--muted);font-size:11px;margin-top:5px;letter-spacing:.5px}.header-right{display:flex;align-items:center;gap:20px}.secure-chip{font-size:12px;color:#5f8275}.green-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#1da478;margin-right:5px}.staff-link{border:1px solid var(--stroke);color:#406059;border-radius:12px;padding:10px 15px;background:#fff;display:flex;gap:7px;align-items:center;font-size:12px;font-weight:700}.staff-link svg,.privacy-note svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}.staff-link:hover,.button.ghost:hover{border-color:#71b2a5;color:var(--green)}.hero{text-align:center;position:relative;padding:57px 20px 50px;overflow:hidden}.hero-topline{font-size:12px;font-weight:750;letter-spacing:.9px;text-transform:uppercase;color:var(--green)}.hero-mini-heart{font-size:18px;vertical-align:middle;margin-right:6px}.hero h1{font-size:clamp(34px,4.7vw,58px);line-height:1.16;letter-spacing:-2.2px;margin:16px 0 18px;color:var(--ink);font-weight:800}.hero h1 em{font-style:normal;color:var(--green);display:block}.hero p{max-width:565px;margin:0 auto;color:#638078;font-size:15px;line-height:1.8}.hero-caption{font-size:12px;letter-spacing:.5px;color:#8aa39a;margin-top:23px;font-style:italic}.hero-bubbles i{position:absolute;border-radius:50%;background:linear-gradient(130deg,#d4f1e7,#e7f8f3);opacity:.65}.hero-bubbles i:nth-child(1){width:70px;height:70px;left:7%;top:24px}.hero-bubbles i:nth-child(2){width:19px;height:19px;right:13%;top:35px}.hero-bubbles i:nth-child(3){width:33px;height:33px;right:3%;bottom:40px}.patient-panel{max-width:740px;margin:0 auto;border-radius:24px;background:white;box-shadow:var(--shadow);border:1px solid #e7f1ed;overflow:hidden}.tab-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 14px 0}.tab{border:0;background:transparent;color:#829b91;font-weight:720;padding:17px 12px;border-radius:12px 12px 0 0;display:flex;gap:8px;justify-content:center;align-items:center;position:relative}.tab svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}.tab.active{color:var(--green);background:var(--mint-2)}.tab.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--green)}.patient-form-area{padding:32px 39px 39px}.section-intro h2{color:var(--ink);margin:0 0 5px;font-size:22px;letter-spacing:-.5px}.section-intro p{color:var(--muted);margin:0 0 25px;font-size:13px}.field-label{display:block;color:#365b53;font-weight:730;margin:18px 0 8px;font-size:13px}.field-label b{color:#e08750}.field{width:100%;background:#fff;border:1.5px solid #dce9e3;border-radius:11px;outline:none;padding:12px 14px;color:#274840;transition:border .14s,box-shadow .14s;min-height:47px}.field:focus{border-color:#2caa94;box-shadow:0 0 0 3px rgba(15,141,121,.10)}.field::placeholder{color:#a2b3ae}.field.large{resize:vertical;min-height:112px}.form-label-line{display:flex;justify-content:space-between;align-items:center;margin-top:3px}.form-label-line .field-label{margin-bottom:8px}.minor{color:#9bb0a7;font-weight:450;font-size:12px}.pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 5px}.pill{padding:9px 14px;border:1.5px solid var(--stroke);border-radius:11px;font-size:12px;font-weight:680;cursor:pointer;transition:all .15s}.pill:has(input:checked){background:#e5f7f1;border-color:#23a88e;color:var(--green)}.pill input{accent-color:var(--green);vertical-align:middle;margin-right:4px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.upload-line{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:24px}.upload-target{display:inline-flex;gap:6px;align-items:center;color:var(--green);font-size:13px;font-weight:750;cursor:pointer}.upload-icon{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:8px;background:var(--mint);font-size:20px}.files-hint{color:#96aba3;font-size:12px}.privacy-note{display:flex;align-items:flex-start;gap:9px;border-radius:12px;background:var(--mint-2);margin:24px 0 18px;padding:14px 15px;color:#5a897b;font-size:12px}.privacy-note svg{flex:none;margin-top:2px}.button{border:0;border-radius:11px;padding:12px 18px;display:inline-flex;gap:9px;justify-content:center;align-items:center;font-weight:730;font-size:13px;transition:transform .1s,background .12s}.button:active{transform:scale(.988)}.button.primary{background:var(--green);color:#fff}.button.primary:hover{background:var(--green-dark)}.button.wide{width:100%;min-height:49px}.button.ghost{background:#fff;border:1px solid var(--stroke);color:#58786f}.button.secondary{color:var(--green);background:#eaf7f3}.button.small{padding:8px 11px;font-size:12px}.button.danger{color:#a43c38;background:#fdf0ee}.reassurance{display:flex;justify-content:space-evenly;margin:34px auto 52px;max-width:680px;gap:20px}.reassurance>div{display:flex;align-items:center;gap:10px}.reassurance-icon{width:34px;height:34px;border-radius:10px;background:#e6f4ee;display:grid;place-items:center;color:var(--green);font-size:19px}.reassurance strong,.reassurance small{display:block}.reassurance strong{font-size:12px;color:#315d50}.reassurance small{font-size:11px;color:#9cb2a8}.footer{border-top:1px solid var(--stroke);padding:22px 0 35px;display:flex;justify-content:space-between;font-size:11px;color:#90a59d}.toast{position:fixed;z-index:999;top:20px;left:50%;transform:translate(-50%,-150%);background:#173d38;border-radius:14px;padding:14px 20px;color:white;max-width:min(92vw,570px);box-shadow:0 15px 50px #214d384a;opacity:0;transition:all .2s;text-align:center;font-size:13px}.toast.show{transform:translate(-50%,0);opacity:1}.toast.error{background:#9e3738}.success-receipt{text-align:center}.receipt-icon{width:70px;height:70px;border-radius:50%;background:#e1f8eb;display:grid;place-items:center;color:#198567;font-size:35px;margin:0 auto 15px}.receipt-secret{background:var(--mint-2);border:1px dashed #a5d6c5;border-radius:13px;padding:16px;margin:20px 0;text-align:left;word-break:break-all}.receipt-secret strong{display:block;color:var(--ink);font-size:16px;letter-spacing:1px}.receipt-secret small{color:var(--muted);display:block;margin-bottom:4px}.receipt-actions{display:flex;gap:9px;margin-top:16px}.receipt-actions>*{flex:1}.tracking-result{border-top:1px solid var(--stroke);margin-top:30px;padding-top:20px}.tracking-head{border:1px solid #cde6dd;background:var(--mint-2);padding:17px;border-radius:13px}.tracking-head h3{margin:6px 0;font-size:16px}.tracking-head small{color:var(--muted)}.badge{font-size:11px;font-weight:750;border-radius:99px;padding:5px 10px;display:inline-block;color:#647a72;background:#eef3f0}.badge.NEW{color:#9e7015;background:#fff4dd}.badge.OPEN{color:#275bb1;background:#e8f0ff}.badge.RESOLVED{color:#8059a0;background:#f3eaff}.badge.CLOSED{color:#087b62;background:#e1f6ec}.timeline{border-left:2px solid #cfe8db;margin:20px 0 16px 9px;padding-left:20px}.timeline-entry{position:relative;margin:0 0 19px}.timeline-entry:before{content:"";position:absolute;left:-26px;top:6px;height:10px;width:10px;background:var(--green);border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px var(--stroke)}.timeline-entry h4{font-size:13px;margin:0;color:var(--ink)}.timeline-entry p{font-size:13px;white-space:pre-wrap;margin:4px 0;color:#526c62}.timeline-entry small{color:#94a99e}.message-card{border-radius:14px;padding:15px 17px;margin:10px 0;background:#f6f9f7;border:1px solid var(--stroke)}.message-card.patient{background:#eaf8f2;border-color:#d5eee1}.message-card h4{font-size:12px;margin:0 0 5px;color:var(--green)}.message-card p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}.message-card small{color:var(--muted);display:block;margin-top:8px}.attachment-button{border:1px solid var(--stroke);background:white;color:var(--green);padding:8px 11px;border-radius:9px;font-size:12px;margin:6px 6px 0 0}.login-panel{max-width:440px;background:white;border:1px solid var(--stroke);border-radius:22px;padding:35px;margin:55px auto 130px;box-shadow:var(--shadow)}.login-panel h1{font-size:27px;letter-spacing:-.6px;margin:12px 0 3px;color:var(--ink)}.login-panel p{font-size:13px;color:var(--muted);margin:0 0 21px}.login-icon{width:48px;height:48px;border-radius:15px;background:var(--mint);color:var(--green);font-size:26px;display:grid;place-items:center}.login-panel form .button{margin-top:22px}.text-back{background:transparent;border:0;color:var(--green);font-size:12px;font-weight:700;margin:0 0 23px;padding:0}.password-wrap{display:flex;position:relative}.password-wrap input{padding-right:65px}.show-pass{position:absolute;right:11px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:11px;color:var(--green);font-weight:700}.login-hint{margin-top:25px;padding:12px;border-radius:10px;background:var(--mint-2);color:var(--muted);font-size:11px;text-align:center}.staff-layout{margin:20px auto 80px;max-width:1090px}.staff-welcome{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:15px}.eyebrow{color:var(--green);font-size:11px;letter-spacing:1.5px;font-weight:800}.staff-welcome h1{font-size:29px;line-height:1.25;letter-spacing:-1px;margin:5px 0;color:var(--ink)}.staff-welcome p{margin:0;color:var(--muted);font-size:13px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.stat{padding:18px;background:white;border:1px solid var(--stroke);border-radius:14px}.stat small{display:block;color:var(--muted);font-size:12px}.stat strong{color:var(--ink);font-size:28px}.staff-tabs{display:flex;gap:7px;margin:25px 0 14px;border-bottom:1px solid var(--stroke)}.staff-tab{border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);padding:14px 18px;font-weight:750}.staff-tab.active{color:var(--green);border-color:var(--green)}.filter-row{display:grid;grid-template-columns:minmax(0,2fr) 1fr 1fr;gap:12px;margin:19px 0}.report-list{display:flex;flex-direction:column;gap:10px}.report-item{background:#fff;border:1px solid var(--stroke);border-radius:14px;padding:17px 20px;cursor:pointer;text-align:left;width:100%;color:inherit}.report-item:hover{border-color:#a0d6c2;box-shadow:0 5px 20px #376e5220}.item-top{display:flex;justify-content:space-between;gap:12px}.report-item h3{font-size:15px;color:var(--ink);margin:6px 0 4px}.report-item p{color:#6d8880;font-size:12px;margin:0}.report-item .meta{font-size:11px;color:#95a99f}.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:17px;color:var(--muted);font-size:12px}.pagination div{display:flex;gap:7px}.staff-create,.detail-panel{background:#fff;border:1px solid var(--stroke);border-radius:16px;padding:28px 31px}.staff-create{max-width:790px}.staff-create .field-label{margin-top:15px}.staff-create .button.primary{margin-top:21px}.staff-create .upload-line{margin-bottom:6px}.employee-results{border:1px solid var(--stroke);border-radius:12px;overflow:hidden;margin-top:5px}.employee-choice{width:100%;text-align:left;padding:10px 13px;background:white;border:0;border-bottom:1px solid var(--stroke);font-size:12px;color:var(--ink)}.employee-choice:hover{background:var(--mint-2)}.employee-choice small{color:var(--muted);display:block}.detail-panel{max-width:940px}.detail-head{display:flex;justify-content:space-between;gap:10px;align-items:start;margin-bottom:15px}.detail-head h2{color:var(--ink);margin:7px 0;font-size:22px}.detail-head p{font-size:12px;color:var(--muted);margin:0}.detail-section{border-top:1px solid var(--stroke);padding-top:20px;margin-top:21px}.detail-section h3{font-size:15px;color:var(--ink);margin:0 0 12px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.status-controls{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.status-controls>*{flex:1}.small-help{font-size:12px;color:var(--muted)}.empty{text-align:center;color:var(--muted);border:1px dashed var(--stroke);padding:27px;border-radius:13px;background:white}.reply-mode{display:flex;gap:10px;flex-wrap:wrap}.reply-mode label{font-size:12px}.reply-mode input{accent-color:var(--green)}.loading{opacity:.6;pointer-events:none}.clicklink{border:0;background:none;color:var(--green);font-weight:750;cursor:pointer;padding:0}.readable{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}.tasks-list{font-size:12px;border-left:3px solid #d8efe2;padding-left:14px}.tasks-list p{margin:6px 0}.error-box{border:1px solid #f1ceca;border-radius:12px;padding:16px;color:#9d463d;background:#fff4f2}.toast a{color:#fff}a:focus-visible,button:focus-visible{outline:3px solid #60b5a5;outline-offset:2px}@media(max-width:760px){.shell{padding:0 16px}.header{height:80px}.secure-chip{display:none}.brand-text strong{font-size:18px}.brand-text small{font-size:10px}.staff-link{font-size:11px;padding:9px 10px}.hero{padding:38px 8px 35px}.hero h1{letter-spacing:-1px;font-size:36px}.hero p{font-size:13px}.patient-panel{border-radius:18px}.patient-form-area{padding:25px 19px 27px}.form-grid,.detail-grid{grid-template-columns:1fr;gap:0}.tab{font-size:12px;padding:15px 5px}.tab svg{width:16px}.reassurance{gap:8px;flex-wrap:wrap}.reassurance>div{flex:1;min-width:140px}.footer{flex-direction:column;gap:5px}.stats{grid-template-columns:repeat(2,1fr)}.filter-row{grid-template-columns:1fr 1fr}.filter-row input{grid-column:span 2}.staff-welcome h1{font-size:23px}.staff-create,.detail-panel{padding:20px 15px}.receipt-actions{flex-direction:column}.status-controls{flex-direction:column;align-items:stretch}.status-controls>*{width:100%}}@media(max-width:380px){.brand-text strong{font-size:15px}.brand-mark{width:37px;height:37px}.header-right{gap:5px}.staff-link span{max-width:63px;line-height:1.1}.hero h1{font-size:31px}.pill{padding:8px;font-size:11px}}


/* V1.1 — tema humanis terinspirasi langsung warna logo Ananda Mendengar */

:root{--green:#507a8e;--green-dark:#345d72;--mint:#eaf2f1;--mint-2:#f4f8f6;--ink:#325365;--text:#415963;--muted:#738890;--stroke:#e4e9e5;--bg:#faf8f3;--white:#fffefa;--shadow:0 16px 56px rgba(75,102,112,.085)}
body{background:radial-gradient(ellipse 80% 28% at 50% 0%,#f2ede0 0%,transparent 100%),var(--bg);color:var(--text)}
.header{height:95px;border-bottom:1px solid rgba(154,179,180,.19)}
.brand{gap:10px}.brand-mark{width:49px;height:49px;border:1px solid #e8e6da;background:#fefcf6;border-radius:15px;overflow:hidden}.brand-mark img{width:100%;height:100%;object-fit:cover}
.brand-text strong{font-size:17px;color:#52788b;letter-spacing:.2px}.brand-text strong span{font-weight:700;color:#c37462}.brand-text small{letter-spacing:.2px;color:#91a4a7}
.staff-link{color:#516e77;border-color:#dce6e4;background:#fffdfa}.staff-link:hover{border-color:#9dbbb9;color:#335d72;background:#f5faf9}.secure-chip{color:#668c89}.green-dot{background:#8db9b2}
.hero{padding:27px 20px 35px}.hero-logo{display:block;object-fit:contain;width:135px;height:auto;margin:0 auto 12px;mix-blend-mode:multiply}.hero-topline{letter-spacing:1.2px;color:#bf795e}.hero-mini-heart{color:#d2816c}.hero h1{font-weight:780;font-size:clamp(32px,4.2vw,51px);margin:13px 0 16px}.hero h1 em{color:#c47363}.hero p{color:#728991;max-width:560px}.hero-caption{color:#a28773;margin-top:18px}.hero-bubbles i{background:linear-gradient(130deg,#e6d49f,#e7f1ee);opacity:.30}.hero-bubbles i:nth-child(2){background:#d3e4e2}.hero-bubbles i:nth-child(3){background:#e7c5b9}
.patient-panel,.staff-create,.detail-panel,.login-panel,.report-item,.stat{background:#fffdfa;border-color:#e8e8df}.patient-panel{max-width:730px;border-radius:24px;box-shadow:0 24px 76px rgba(95,104,100,.075)}
.tab.active{background:#edf5f4;color:#466f80}.tab.active:after{background:#c57a67}.tab{color:#81959a}.section-intro h2{color:#345768}.section-intro p{color:#7b8e91}.field{border-color:#e1e7e2;background:#fffefa;color:#3b5661}.field:focus{border-color:#92b5b4;box-shadow:0 0 0 4px rgba(142,184,180,.19)}.field-label{color:#476773}.field-label b{color:#bd7863}.field::placeholder{color:#a4b0ad}
.pill{border-color:#dfe7e3;color:#637b7e}.pill:has(input:checked){background:#f3ebe4;color:#a96b59;border-color:#d2a293}.pill input{accent-color:#c17765}.upload-target{color:#527e8c}.upload-icon{background:#e8f1f0}.privacy-note{background:#f1f6f4;color:#698a85}.button.primary{background:#527e8e}.button.primary:hover{background:#3a677a}.button.secondary{background:#ebf3f0;color:#466e79}.button.ghost{border-color:#e1e8e4}.reassurance-icon{background:#f1eee6;color:#b97e62}.reassurance strong{color:#506f79}.reassurance small{color:#9aa9a8}
.badge.OPEN{color:#436e88;background:#e8f2f7}.badge.CLOSED{color:#467a6c;background:#e5f2e9}.timeline{border-color:#d6e5e3}.timeline-entry:before{background:#c98772}.tracking-head,.message-card.patient{background:#f0f6f5;border-color:#dae9e6}.message-card h4,.eyebrow{color:#537d89}.receipt-secret{background:#f0f6f4;border-color:#bfd6d2}.receipt-icon{background:#e9f3ef;color:#537d7b}.login-icon{background:#f2e8df;color:#bc7968}.staff-tab.active{border-color:#c77e69;color:#8e675e}.employee-choice:hover{background:#f6f2ec}.report-item:hover{border-color:#b7cfca}.attachment-button,.text-back,.clicklink{color:#53788a}.toast{background:#355b6b}.toast.error{background:#9e5146}
@media(max-width:760px){.brand-mark{width:43px;height:43px}.brand-text strong{font-size:14px;letter-spacing:0}.hero{padding:19px 9px 27px}.hero-logo{width:105px;margin-bottom:10px}.hero h1{font-size:clamp(30px,7.1vw,37px);letter-spacing:-1.2px}.hero p{font-size:13px;line-height:1.65}.hero-caption{margin-top:12px}.patient-form-area{padding:24px 19px 28px}.staff-link{background:#fffdfa}}
@media(max-width:385px){.brand-text strong{font-size:12.5px}.hero-logo{width:92px}.staff-link{font-size:10px}}