@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--ink:#17292a;--muted:#667879;--green:#0e796f;--green-dark:#075e57;--mint:#eaf8f4;--line:#dbe8e5;--cream:#f7faf8;--white:#fff;--amber:#e49a22;--amber-bg:#fff5df;--red:#b93f42;--shadow:0 18px 55px rgba(21,63,60,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:'DM Sans',Arial,sans-serif;line-height:1.5}h1,h2,h3,p{margin-top:0}h1,h2,h3,.brand,.side-brand,.install-brand{font-family:'Manrope',Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.public-shell{width:min(1160px,calc(100% - 40px));margin-inline:auto}.eyebrow{color:var(--green);font-size:.73rem;font-weight:800;letter-spacing:.14em;margin-bottom:10px}.button{border:0;border-radius:12px;padding:11px 16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;cursor:pointer;transition:.18s ease}.button.primary{background:var(--green);color:white;box-shadow:0 8px 20px rgba(14,121,111,.19)}.button.primary:hover{background:var(--green-dark);transform:translateY(-1px)}.button.ghost{background:white;color:var(--green);border:1px solid var(--line)}.button.whatsapp{background:#25d366;color:#083c1c}.button.tiny{padding:7px 10px;font-size:.82rem}.alert{border-radius:13px;padding:13px 15px;margin:16px 0;font-weight:600}.alert.error{background:#fff0f0;color:var(--red);border:1px solid #f4cccc}.alert.success{background:var(--mint);color:var(--green-dark);border:1px solid #c4e6de}.field{display:flex;flex-direction:column;gap:7px}.field span{font-weight:700;font-size:.88rem}.field small{color:var(--muted)}.field input,.field select,.field textarea,.search-form input,.lookup-box input{width:100%;border:1px solid #ccdeda;background:white;border-radius:11px;padding:12px 13px;color:var(--ink);outline:0}.field textarea{resize:vertical}.field input:focus,.field select:focus,.field textarea:focus,.search-form input:focus,.lookup-box input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(14,121,111,.12)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid .full{grid-column:1/-1}.form-grid hr{border:0;border-top:1px solid var(--line);width:100%;margin:4px 0}

.public-header{height:72px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center}.public-header .public-shell{display:flex;justify-content:space-between;align-items:center}.brand,.install-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem}.brand b,.install-brand b{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--green);color:white}.brand em,.install-brand em,.side-brand em{font-style:normal;color:var(--green)}.staff-entry{font-weight:700;color:var(--green);background:var(--mint);padding:9px 13px;border-radius:10px}.lookup-hero{background:linear-gradient(135deg,#e9f7f3 0%,#f8fbf9 62%,#fff7e6 100%);padding:58px 0}.lookup-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center}.lookup-grid h1{font-size:clamp(2rem,4vw,3.35rem);line-height:1.08;letter-spacing:-.045em;margin-bottom:15px}.lookup-grid>div>p:last-child{font-size:1.08rem;color:var(--muted);max-width:570px}.lookup-box{background:white;padding:24px;border-radius:18px;box-shadow:var(--shadow);border:1px solid rgba(218,233,229,.8)}.lookup-box label{display:block;font-weight:700;margin-bottom:9px}.lookup-box>div{display:flex;gap:10px}.lookup-box small{display:block;margin-top:9px;color:var(--muted)}.result-space{padding:44px 0 70px}.empty-state{text-align:center;background:white;border:1px solid var(--line);padding:55px 25px;border-radius:18px}.empty-state>span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin:0 auto 15px;background:var(--mint);color:var(--green);font-size:1.5rem;font-weight:800}.empty-state p{color:var(--muted)}.result-overview{display:grid;grid-template-columns:1.4fr .8fr;gap:22px}.score-card,.patient-card,.content-section,.tooth-section,.recommendation{background:white;border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 35px rgba(21,63,60,.05)}.score-card{display:flex;align-items:center;gap:28px;padding:30px}.score-circle{width:156px;height:156px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) var(--score),#e5efec 0);position:relative}.score-circle:after{content:'';position:absolute;inset:12px;background:white;border-radius:50%}.score-circle span{position:relative;z-index:1;display:flex;align-items:baseline;gap:3px}.score-circle strong{font-size:2.9rem;letter-spacing:-.07em}.score-circle small{color:var(--muted)}.score-card h2{margin:14px 0 8px;font-size:1.55rem}.score-card p{margin:0;color:var(--muted)}.pill{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:.78rem;font-weight:800;white-space:nowrap}.pill.good{background:var(--mint);color:var(--green-dark)}.pill.watch{background:var(--amber-bg);color:#99620c}.patient-card{padding:22px}.patient-card p{margin:0;padding:11px 0;border-bottom:1px solid #edf3f1;display:flex;justify-content:space-between;gap:20px}.patient-card span{color:var(--muted)}.patient-card .button{width:100%;margin-top:15px}.content-section{padding:28px;margin-top:22px}.section-title{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}.section-title h2{margin:0}.section-title small{color:var(--muted);max-width:420px;text-align:right}.finding-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.finding-grid article{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:16px}.finding-grid article>i{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-style:normal;font-weight:900}.finding-grid article>i.good{background:var(--mint);color:var(--green)}.finding-grid article>i.watch{background:var(--amber-bg);color:#a76908}.finding-grid span,.finding-grid strong{display:block}.finding-grid span{font-size:.78rem;color:var(--muted)}.finding-grid strong{font-size:.94rem}.tooth-section{display:grid;grid-template-columns:.72fr 1.28fr;margin-top:22px;overflow:hidden}.tooth-copy{padding:32px;background:linear-gradient(150deg,#f0faf7,#fff)}.tooth-copy h2{font-size:1.6rem}.tooth-copy>p:not(.eyebrow){color:var(--muted)}.legend{display:flex;gap:15px;flex-wrap:wrap;font-size:.8rem;font-weight:700;margin-top:24px}.legend span,.tooth-count span{display:flex;align-items:center;gap:6px}.legend i,.tooth-count>span i{width:10px;height:10px;border-radius:50%}.healthy{background:var(--green)}.watch{background:var(--amber)}.mouth-panel{padding:24px;text-align:center}.mouth-panel>img{width:100%;max-height:385px;object-fit:contain;border-radius:15px}.number-map{display:grid;grid-template-columns:repeat(16,1fr);gap:4px;margin-top:14px}.number-map b{aspect-ratio:1;min-width:0;border-radius:7px;color:white;display:grid;place-items:center;font-size:.72rem}.mouth-panel small{display:block;color:var(--muted);margin-top:10px}.recommendation{margin-top:22px;padding:28px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;background:linear-gradient(130deg,#e9f8f4,#fff)}.recommendation>span{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--green);color:white;font-size:1.4rem}.recommendation h2{margin-bottom:6px}.recommendation p:last-child{margin-bottom:0;color:var(--muted)}footer{background:#173c3a;color:white;padding:28px 0}footer .public-shell{display:flex;justify-content:space-between;gap:30px}footer p{margin:0;color:#c4d8d4}

.install-page,.login-page{min-height:100vh;padding:42px 20px;display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,#dff4ee,transparent 38%),var(--cream)}.install-card,.login-card{width:min(760px,100%);background:white;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:34px}.login-card{width:min(430px,100%)}.install-card>.install-brand,.login-card>.install-brand{margin-bottom:28px}.install-card h1,.login-card h1{font-size:2rem;letter-spacing:-.04em;margin-bottom:8px}.install-card>p:not(.eyebrow),.login-card>p:not(.eyebrow){color:var(--muted)}.login-card form{display:grid;gap:16px;margin-top:23px}.login-card form .button{width:100%;margin-top:3px}.back-link{display:block;text-align:center;color:var(--green);font-weight:700;margin-top:22px}

.admin-layout{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:255px;background:#123d3a;color:white;z-index:20;display:flex;flex-direction:column;transition:width .2s ease}.side-brand{height:68px;display:flex;align-items:center;gap:10px;padding:0 19px;border-bottom:1px solid rgba(255,255,255,.09);overflow:hidden;font-weight:800}.side-brand b{width:31px;height:31px;flex:0 0 31px;border-radius:10px;display:grid;place-items:center;background:#2da296}.side-brand em{color:#72d6c8}.sidebar nav{padding:15px 10px;display:grid;gap:5px}.sidebar nav a{display:flex;align-items:center;gap:12px;min-height:42px;padding:8px 12px;border-radius:10px;color:#d6e8e5;overflow:hidden}.sidebar nav a:hover,.sidebar nav a.active{background:rgba(255,255,255,.11);color:white}.sidebar nav i{width:22px;flex:0 0 22px;text-align:center;font-style:normal;font-size:1.05rem}.side-user{margin:auto 11px 14px;padding:12px;display:flex;align-items:center;gap:10px;border-radius:12px;background:rgba(255,255,255,.08);overflow:hidden}.side-user>b{width:33px;height:33px;flex:0 0 33px;border-radius:50%;display:grid;place-items:center;background:#2da296}.side-user span,.side-user strong,.side-user small{display:block;white-space:nowrap}.side-user small{color:#bcd2ce}.admin-main{margin-left:255px;min-height:100vh;transition:margin .2s ease}.topbar{height:68px;position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 26px;gap:13px}.nav-toggle{border:0;background:var(--mint);color:var(--green);width:37px;height:37px;border-radius:10px;cursor:pointer;font-size:1.1rem}.topbar>span{color:var(--muted);font-size:.85rem}.top-account{margin-left:auto;display:flex;align-items:center;gap:13px}.top-account a{color:var(--red);font-size:.85rem;font-weight:700}.admin-content{padding:32px;max-width:1480px;margin:auto}.sidebar-collapsed .sidebar{width:56px}.sidebar-collapsed .side-brand{padding:0 12px}.sidebar-collapsed .side-brand span,.sidebar-collapsed .sidebar nav span,.sidebar-collapsed .side-user span{display:none}.sidebar-collapsed .sidebar nav{padding-inline:7px}.sidebar-collapsed .sidebar nav a{padding-inline:10px}.sidebar-collapsed .side-user{margin-inline:6px;padding:6px}.sidebar-collapsed .admin-main{margin-left:56px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:25px}.page-heading h1,.profile-heading h1{font-size:2rem;letter-spacing:-.04em;margin-bottom:6px}.page-heading>div>p:last-child,.profile-heading>div>p:last-child{color:var(--muted);margin:0}.staff-chip{background:var(--mint);color:var(--green-dark);padding:8px 12px;border-radius:999px;font-weight:700}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px}.stats-grid article{background:white;border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;gap:13px}.stats-grid article>i{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;background:var(--mint);color:var(--green);font-style:normal;font-weight:900}.stats-grid article>i.amber{background:var(--amber-bg);color:#a26708}.stats-grid article>i.blue{background:#ebf4ff;color:#3473b7}.stats-grid article>i.violet{background:#f2edff;color:#7651b7}.stats-grid small,.stats-grid strong,.stats-grid p{display:block}.stats-grid small{color:var(--muted)}.stats-grid strong{font-size:1.7rem}.stats-grid p{font-size:.75rem;color:var(--muted);margin:0}.table-card,.form-card,.profile-card{background:white;border:1px solid var(--line);border-radius:18px;box-shadow:0 7px 28px rgba(21,63,60,.04)}.table-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px;border-bottom:1px solid var(--line)}.table-heading h2{font-size:1.15rem;margin-bottom:4px}.table-heading p{font-size:.85rem;color:var(--muted);margin:0}.search-form{display:flex;gap:8px}.search-form input{min-width:260px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:15px 18px;text-align:left;border-bottom:1px solid #edf3f1;white-space:nowrap}th{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:#fbfdfc}td{font-size:.9rem}td strong,td small{display:block}td small{color:var(--muted);margin-top:2px}.score{background:none!important}.score.good{color:var(--green)}.score.watch{color:#ae6d09}.save-banner{background:var(--mint);border:1px solid #c5e8df;border-radius:16px;padding:16px;display:flex;align-items:center;gap:13px;margin-bottom:20px}.save-banner>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:white;font-weight:900}.save-banner>div{margin-right:auto}.save-banner p{margin:0}.screening-form{display:grid;gap:18px}.form-card{padding:24px}.card-title{display:flex;gap:12px;align-items:center;margin-bottom:22px}.card-title>i{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:var(--mint);display:grid;place-items:center;font-style:normal}.card-title h2{font-size:1.12rem;margin-bottom:3px}.card-title p{font-size:.85rem;color:var(--muted);margin:0}.tooth-count{display:flex;align-items:center;gap:16px;margin-bottom:17px;font-size:.83rem}.tooth-count strong{margin-left:auto}.tooth-selector{display:grid;grid-template-columns:repeat(16,1fr);gap:8px}.tooth-selector label{cursor:pointer}.tooth-selector input{position:absolute;opacity:0;pointer-events:none}.tooth-selector label>span{min-height:80px;padding:7px 3px;border:1px solid var(--line);border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:#fbfdfc;transition:.15s ease}.tooth-selector img{width:31px;height:45px;object-fit:contain;filter:saturate(.45)}.tooth-selector b{font-size:.72rem}.tooth-selector span>i{position:absolute;top:4px;right:4px;width:17px;height:17px;border-radius:50%;background:var(--amber);color:white;display:none;place-items:center;font-size:.65rem;font-style:normal}.tooth-selector input:checked+span{border-color:var(--amber);background:var(--amber-bg)}.tooth-selector input:checked+span>i{display:grid}.tooth-selector input:focus-visible+span{outline:3px solid rgba(14,121,111,.2)}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:20px}.form-actions p{color:var(--muted);margin:0}.profile-heading{display:flex;align-items:center;gap:15px;margin-bottom:24px}.profile-heading>span{width:50px;height:50px;border-radius:15px;background:var(--mint);color:var(--green);display:grid;place-items:center;font-size:1.3rem}.profile-card{padding:25px;max-width:780px}.check-field{display:flex;align-items:center;gap:9px;padding:13px;background:var(--mint);border-radius:11px}.check-field input{width:18px;height:18px}.check-field span{font-weight:700}

@media(max-width:1050px){.finding-grid,.stats-grid{grid-template-columns:1fr 1fr}.tooth-selector{grid-template-columns:repeat(8,1fr)}.result-overview{grid-template-columns:1fr}.tooth-section{grid-template-columns:1fr}.number-map{grid-template-columns:repeat(8,1fr)}}
@media(max-width:760px){.public-shell{width:min(100% - 24px,1160px)}.lookup-grid{grid-template-columns:1fr;gap:25px}.lookup-hero{padding:38px 0}.lookup-box>div{flex-direction:column}.result-space{padding-top:24px}.score-card{flex-direction:column;text-align:center}.finding-grid,.stats-grid,.form-grid{grid-template-columns:1fr}.section-title,.page-heading,.table-heading,.save-banner{align-items:stretch;flex-direction:column}.section-title small{text-align:left}.recommendation{grid-template-columns:1fr}.patient-card p{flex-direction:column;gap:3px}.number-map{grid-template-columns:repeat(8,1fr)}footer .public-shell{flex-direction:column}.sidebar{width:255px;transform:translateX(0);transition:transform .2s ease}.admin-main,.sidebar-collapsed .admin-main{margin-left:0}.sidebar-collapsed .sidebar{width:255px;transform:translateX(-100%)}.sidebar-collapsed .side-brand{padding:0 19px}.sidebar-collapsed .side-brand span,.sidebar-collapsed .sidebar nav span,.sidebar-collapsed .side-user span{display:block}.sidebar-collapsed .sidebar nav{padding-inline:10px}.sidebar-collapsed .sidebar nav a{padding-inline:12px}.sidebar-collapsed .side-user{margin:0 11px 14px;padding:12px}.admin-content{padding:22px 14px}.topbar{padding-inline:14px}.topbar>span{display:none}.top-account strong{display:none}.search-form{flex-direction:column}.search-form input{min-width:0}.tooth-selector{grid-template-columns:repeat(4,1fr)}.tooth-count{flex-wrap:wrap}.tooth-count strong{width:100%;margin:0}.form-actions{align-items:stretch;flex-direction:column}.form-actions .button{width:100%}}

/* Cegah sidebar berkedip atau beranimasi saat halaman pertama kali dirender. */
html:not(.sidebar-ready) .sidebar,html:not(.sidebar-ready) .admin-main{transition:none!important}

.account-menu{position:relative;margin-left:auto}.account-trigger{min-height:46px;border:1px solid transparent;background:transparent;border-radius:13px;padding:5px 8px 5px 6px;display:flex;align-items:center;gap:10px;color:var(--ink);cursor:pointer;text-align:left}.account-trigger:hover,.account-menu.open .account-trigger{background:white;border-color:var(--line);box-shadow:0 8px 25px rgba(21,63,60,.08)}.account-trigger>b{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--green);font-size:.82rem}.account-trigger>span{display:flex;flex-direction:column;line-height:1.25;min-width:118px}.account-trigger strong{font-size:.8rem}.account-trigger small{color:var(--muted);max-width:155px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-trigger>i{font-style:normal;color:var(--muted);transition:transform .16s ease}.account-menu.open .account-trigger>i{transform:rotate(180deg)}.account-dropdown{position:absolute;z-index:50;right:0;top:calc(100% + 8px);width:245px;padding:7px;background:white;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 55px rgba(19,56,53,.16)}.account-dropdown[hidden]{display:none!important}.account-label{padding:10px 11px}.account-label strong,.account-label span{display:block}.account-label strong{font-size:.9rem}.account-label span{font-size:.78rem;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis}.account-separator{height:1px;background:var(--line);margin:5px}.account-dropdown>a{min-height:38px;padding:8px 10px;border-radius:9px;display:flex;align-items:center;gap:9px;font-size:.86rem;font-weight:600}.account-dropdown>a:hover,.account-dropdown>a:focus{background:var(--mint);color:var(--green-dark);outline:0}.account-dropdown>a>i{width:20px;text-align:center;font-style:normal}.account-dropdown>a.account-logout{color:var(--red)}

@media(max-width:760px){.account-trigger>span{display:none}.account-trigger{gap:5px}.account-dropdown{right:-2px}}

.side-user>b img,.account-trigger>b img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.profile-avatar-upload{display:flex;align-items:center;gap:17px;margin-bottom:22px;padding:16px;background:#f6faf9;border:1px solid var(--line);border-radius:15px}.profile-avatar-preview{width:76px;height:76px;flex:0 0 76px;display:grid;place-items:center;overflow:hidden;color:var(--green);background:var(--mint);border:3px solid white;border-radius:50%;box-shadow:0 5px 16px rgba(27,84,73,.13);font-size:1.4rem;font-weight:800}.profile-avatar-preview img{width:100%;height:100%;object-fit:cover}.profile-avatar-upload>div:last-child{display:grid;gap:3px}.profile-avatar-upload strong{font-size:.84rem}.profile-avatar-upload p{margin:0;color:var(--muted);font-size:.74rem}.profile-avatar-upload small{color:var(--muted);font-size:.68rem}.avatar-file-button{width:fit-content;margin-top:6px;padding:8px 11px;color:var(--green);background:white;border:1px solid var(--line);border-radius:9px;font-size:.72rem;font-weight:800;cursor:pointer}.avatar-file-button:hover{background:var(--mint)}.avatar-file-button input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

@media(max-width:560px){.profile-avatar-upload{align-items:flex-start}.profile-avatar-preview{width:62px;height:62px;flex-basis:62px}}