/* Identitas visual pemeriksaan gigi ibu hamil. Dimuat setelah CSS utama. */
:root {
  --ink:#283348;
  --muted:#65718a;
  --green:#316f9c;
  --green-dark:#194f78;
  --mint:#eaf5ff;
  --line:#e4e8f3;
  --cream:#f8f9ff;
  --amber:#da8a50;
  --amber-bg:#fff2e8;
  --red:#bc4770;
  --shadow:0 20px 55px rgba(76,93,145,.11);
}
body{background:radial-gradient(circle at 95% 4%,#ffedf4 0,transparent 31%),radial-gradient(circle at 4% 28%,#e9f5ff 0,transparent 35%),var(--cream)}
::selection{background:#f9c6da;color:#283348}
.eyebrow{color:#ac4d79;letter-spacing:.13em}
.button{border-radius:14px;min-height:42px}
.button.primary{background:#306f9d;box-shadow:0 9px 20px rgba(48,111,157,.22)}
.button.primary:hover{background:#205982}
.button.ghost{background:#fff;color:#245d85;border-color:#dce5f2}
.button.ghost:hover{background:#eef7ff}
.staff-entry,.staff-chip{background:#fff0f6;color:#a53d6a}
.field input,.field select,.field textarea,.search-form input,.lookup-box input{border-color:#dce3f0;border-radius:13px;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus,.search-form input:focus,.lookup-box input:focus{border-color:#5b9fcb;box-shadow:0 0 0 4px rgba(91,159,203,.16)}
.alert.success,.save-banner{background:#edf7ff;border-color:#d4e8fb;color:#245b82}
.alert.error{background:#fff0f4;border-color:#f5c9d8}
.pill.good{background:#eaf5ff;color:#245e87}
.pill.watch{background:#fff0f4;color:#a43f66}

/* Identitas, navigasi dan halaman pasien */
.public-header{height:78px;border-bottom-color:#e9eaf4;background:rgba(255,255,255,.95)}
.brand,.install-brand,.side-brand{letter-spacing:-.035em}
.brand b,.install-brand b{background:linear-gradient(145deg,#ff83af,#e65c92);box-shadow:0 6px 15px rgba(230,92,146,.23)}
.brand em,.install-brand em{color:#d35387}
.lookup-hero{position:relative;overflow:hidden;padding:80px 0 85px;background:radial-gradient(circle at 6% 18%,#fff 0 5px,transparent 6px),radial-gradient(circle at 84% 12%,#fff 0 8px,transparent 9px),linear-gradient(115deg,#ffe9f1 0%,#f7effb 46%,#e5f5ff 100%)}
.lookup-hero:before,.lookup-hero:after{position:absolute;content:"";pointer-events:none;border-radius:50%;border:24px solid rgba(255,255,255,.32)}
.lookup-hero:before{width:220px;height:220px;left:-125px;bottom:-110px}
.lookup-hero:after{width:390px;height:390px;right:-185px;top:-245px}
.lookup-grid{position:relative;z-index:1;grid-template-columns:1.08fr .92fr;gap:70px}
.lookup-grid h1{max-width:650px;color:#28354c;font-size:clamp(2.35rem,4.5vw,4.3rem);line-height:1.07}
.lookup-grid>div>p:last-child{color:#576781}
.hero-note{display:inline-flex;align-items:center;margin-top:12px;padding:9px 15px;border:1px solid #f6c9da;border-radius:999px;background:rgba(255,255,255,.7);color:#a1466e;font-size:.81rem;font-weight:700}
.lookup-box{position:relative;padding:31px;border:1px solid #fff;border-radius:25px;box-shadow:0 24px 60px rgba(114,111,161,.16)}
.lookup-box h2{font-size:1.4rem;letter-spacing:-.03em;margin-bottom:18px}
.lookup-box .eyebrow{margin-bottom:3px}
.lookup-box-icon{position:absolute;right:27px;top:21px;display:grid;place-items:center;width:43px;height:43px;border-radius:15px;background:#fff0f6;color:#d65b8d;font-size:1.5rem}
.result-space{padding-top:38px}
.empty-state,.score-card,.patient-card,.content-section,.tooth-section,.recommendation{border-radius:22px;border-color:#e5e8f3;box-shadow:0 12px 35px rgba(75,95,150,.06)}
.empty-state>span{background:#fff0f6;color:#c2537f}
.score-circle{background:conic-gradient(#ee80a8 var(--score),#e8f2fb 0)}
.score-card{background:linear-gradient(135deg,#fff 57%,#fff6fa)}
.finding-grid article{background:#fbfcff;border-color:#e8ebf4}
.finding-grid article>i.good{background:#eaf5ff;color:#3374a0}
.tooth-copy{background:linear-gradient(145deg,#fff0f6,#edf7ff)}
.recommendation{background:linear-gradient(125deg,#fff0f6,#f2f9ff)}
.recommendation>span{background:#ef78a3}
footer{background:#254766;color:#fff}
footer p{color:#dae8f4}
.footer-brand strong,.footer-brand small{display:block}
.footer-brand small{margin-top:2px;color:#d5e5f3;font-size:.78rem}
.result-qr-card{border-color:#e6e9f3}
.result-qr-card.compact{background:#f8faff}
.result-qr-heading>i{background:#edf7ff;color:#2d6f9b}
.odonto-diagnosis-list span{background:#fff0f6;color:#994268}

/* Portal petugas */
.sidebar{background:linear-gradient(180deg,#305d87,#23496e 74%,#294460);box-shadow:7px 0 24px rgba(42,65,103,.08)}
.side-brand{border-bottom-color:rgba(255,255,255,.14)}
.side-brand b{background:#f787af;color:#fff;box-shadow:0 5px 12px rgba(26,45,79,.13)}
.side-brand em{color:#ffbad2}
.sidebar nav a{color:#e7f2ff}
.sidebar nav a:hover,.sidebar nav a.active{background:rgba(255,255,255,.18)}
.sidebar nav a.active{box-shadow:inset 3px 0 #ffa8c8}
.side-user{background:rgba(255,255,255,.14)}
.side-user>b{background:#f785aa}
.side-user small{color:#d4e7f5}
.topbar{background:rgba(255,255,255,.94);border-bottom-color:#e7eaf4}
.nav-toggle{background:#edf5ff;color:#2b6893}
.account-trigger:hover,.account-menu.open .account-trigger{box-shadow:0 8px 25px rgba(62,80,121,.1)}
.account-trigger>b{background:#fff0f6;color:#b74574}
.account-dropdown{border-color:#e2e7f2;box-shadow:0 20px 55px rgba(48,67,106,.17)}
.account-dropdown>a:hover,.account-dropdown>a:focus{background:#edf6ff;color:#245e88}
.admin-content{padding-top:30px}
.page-heading.dashboard-hero,.page-heading.screening-hero{position:relative;isolation:isolate;overflow:hidden;min-height:174px;padding:28px 34px;border:1px solid #f3deea;border-radius:23px;background:linear-gradient(105deg,#ffe4ee 0%,#fdf2fa 50%,#e6f5ff 100%);box-shadow:0 12px 32px rgba(133,113,160,.07)}
.dashboard-hero:before,.screening-hero:before{position:absolute;z-index:-1;content:"";width:245px;height:245px;border:35px solid rgba(255,255,255,.4);border-radius:50%;right:14%;top:-139px}
.page-heading.dashboard-hero h1,.page-heading.screening-hero h1{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.17;max-width:600px;margin-bottom:8px}
.page-heading.dashboard-hero p:last-child,.page-heading.screening-hero p:last-child{max-width:590px;color:#5b6580}
.page-heading.dashboard-hero .button,.page-heading.screening-hero .staff-chip{position:relative;z-index:1;flex:0 0 auto}
.hero-flower{position:absolute;right:31%;bottom:-48px;color:rgba(236,112,160,.17);font-size:11rem;line-height:1;pointer-events:none;transform:rotate(-18deg)}
.screening-hero .hero-flower{right:17%}
.stats-grid article,.table-card,.form-card,.profile-card{border-color:#e5e9f4;border-radius:19px;box-shadow:0 9px 28px rgba(68,87,132,.05)}
.stats-grid article{min-height:114px;align-items:center}
.stats-grid article>i{background:#fff0f6;color:#bb507b;border-radius:14px}
.stats-grid article>i.amber{background:#fff2e9;color:#b36538}
.stats-grid article>i.blue{background:#eaf5ff;color:#3473a0}
.stats-grid article>i.violet{background:#f3edff;color:#8661ae}
.stats-grid strong{color:#2c4966}
.table-heading{background:linear-gradient(90deg,#fff,#fcf7fb);border-radius:19px 19px 0 0}
th{background:#f6f9fe;color:#65718a}
th,td{border-bottom-color:#edf0f7}
tbody tr:hover{background:#fcf7fb}
.score.good{color:#2f729f}
.score.watch{color:#b85277}
.form-card{padding:27px}
.admin-main,.admin-content,.screening-form,.form-card{min-width:0}
.screening-form{grid-template-columns:minmax(0,1fr)}
.form-grid{min-width:0}
.card-title>i{background:#fff0f6;color:#ac4c77;border-radius:14px}
.form-card:nth-of-type(even) .card-title>i{background:#eaf5ff;color:#326f9a}
.tooth-selector label>span{background:#fbfcff;border-color:#e5e9f3}
.tooth-selector input:focus-visible+span{outline-color:#7cb5d9}
.tooth-selector input:checked+span{background:#fff0f5;border-color:#e8759c}
.tooth-selector input:checked+span>i{background:#d85883}
.profile-heading>span,.profile-avatar-preview{background:#fff0f6;color:#bd4c7b}
.profile-avatar-upload{background:#f8faff}
.check-field{background:#f1f7ff}
.odonto-toolbar button,.odonto-surface-picker button{border-color:#dce4f1;color:#335a77;border-radius:10px}
.odonto-toolbar button[aria-pressed=true],.odonto-surface-picker button[aria-pressed=true]{background:#306f9d;border-color:#306f9d}
.odonto-surface-picker{background:#f1f7ff}
.odonto-tooth{border-color:#e3e8f3;color:#36576e}
.odonto-tooth.has-diagnosis{background:#fff5f8;border-color:#e69cb8}
.odonto-tooth:focus-visible{outline-color:#5d9fc7}
.odonto-tooth:not(.has-diagnosis){border-color:transparent}
.dental-view-tabs{background:#ecf5fe!important}
.dental-view-tabs button{color:#55718c}
.dental-view-tabs button[data-active],.dental-view-tabs button[aria-pressed=true]{color:#2b6793}
.dental-3d-host{background:#f6faff;border-color:#dce6f2}
.dental-3d-toolbar,.dental-3d-status{border-color:#dce6f2}
.dental-3d-toolbar button{border-color:#d9e3f0;color:#315b7b}
.dental-3d-toolbar button:hover{background:#ecf6ff}
.dental-3d-stage canvas:focus-visible,.dental-viewer button:focus-visible{outline-color:#5695c0}
.dental-3d-status{color:#345675}
.dental-3d-hint{color:#64748a}

/* Masuk / instalasi */
.login-page,.install-page{background:radial-gradient(circle at 15% 15%,#ffe6ef,transparent 33%),radial-gradient(circle at 85% 82%,#dff2ff,transparent 36%),#f9f9ff}
.login-card,.install-card{border-color:#e8e9f4;border-radius:26px;box-shadow:0 25px 70px rgba(88,99,151,.13)}
.login-card{position:relative;overflow:hidden}
.login-card:after{content:"✿";position:absolute;right:-12px;top:-55px;color:#ffe5ef;font-size:9rem;pointer-events:none;line-height:1}
.login-card>*{position:relative;z-index:1}
.back-link{color:#2d6e9c}
.password-field{position:relative}
.password-field input{padding-right:106px}
.password-field button{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-width:66px;min-height:36px;padding:5px 9px;border:0;border-radius:9px;background:#edf6ff;color:#285f88;font-size:.78rem;font-weight:800;cursor:pointer}
.password-field button:focus-visible{outline:3px solid #6aa4cc;outline-offset:2px}
.table-actions{display:flex;align-items:center;gap:6px}
.button.tiny.edit{background:#fff0f6;color:#a43f6b;border:1px solid #f3c7d9}
.button.tiny.edit:hover{background:#ffe4ee}
.save-result-block{align-items:start}
.edit-context{display:flex;flex-wrap:wrap;gap:5px;margin:-10px 0 20px;padding:11px 15px;border:1px solid #dae8f7;border-radius:12px;background:#f2f8ff;color:#365c7d;font-size:.85rem}
.edit-context strong{overflow-wrap:anywhere}
.edit-context a{margin-left:auto;color:#245d88;font-weight:800;text-decoration:underline}
.legacy-watch{margin-top:14px;padding:15px;border:1px solid #f2d5a9;border-radius:13px;background:#fff9ef}
.legacy-watch>strong{display:block;color:#765021;font-size:.87rem}
.legacy-watch p{margin:3px 0 11px;color:#765d3c;font-size:.8rem}
.legacy-watch>div{display:flex;flex-wrap:wrap;gap:7px}
.legacy-watch label{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 10px;border:1px solid #e5c99c;border-radius:9px;background:#fff;color:#694c28;font-size:.83rem;font-weight:800;cursor:pointer}
.legacy-watch input{accent-color:#2c709d;width:17px;height:17px}
.accounts-hero{padding:28px 34px;border:1px solid #f3deea;border-radius:23px;background:linear-gradient(105deg,#ffe4ee,#fdf2fa 50%,#e6f5ff);box-shadow:0 12px 32px rgba(133,113,160,.07)}
.account-form-card{max-width:830px;margin-bottom:22px}
.account-form{display:grid;gap:18px}
.account-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.account-options .check-field{background:#f4f8ff;border:1px solid #e1e9f5}
.account-list{margin-top:22px}
@media(max-width:760px){.accounts-hero{padding:22px}.account-options{grid-template-columns:1fr}.account-form .form-actions{align-items:stretch}.account-form .form-actions .button{width:100%}}
.mobile-result-jump{display:none}
.result-overview>*{min-width:0}
.patient-card strong,.result-qr-card>b{overflow-wrap:anywhere}

@media(max-width:760px){
  .lookup-hero{padding:48px 0 54px}
  .lookup-grid{grid-template-columns:1fr;gap:27px}
  .lookup-grid h1{font-size:2.45rem}
  .lookup-box{padding:25px}
  .page-heading.dashboard-hero,.page-heading.screening-hero{padding:25px 22px;min-height:0}
  .hero-flower{right:0;opacity:.6}
  .page-heading.dashboard-hero .button,.page-heading.screening-hero .staff-chip{align-self:flex-start}
}
@media(max-width:620px){
  .public-header{height:64px}
  .staff-entry{min-height:42px;display:inline-flex;align-items:center;padding-inline:10px;font-size:.8rem}
  .lookup-hero.has-result{padding:18px 0 22px}
  .lookup-hero.has-result .lookup-grid{gap:12px}
  .lookup-hero.has-result .lookup-intro>p:not(.eyebrow),.lookup-hero.has-result .hero-note{display:none}
  .lookup-hero.has-result .lookup-intro .eyebrow{margin-bottom:4px}
  .lookup-hero.has-result .lookup-intro h1{font-size:1.45rem;line-height:1.2;margin:0}
  .lookup-hero.has-result .lookup-box{padding:17px 18px;border-radius:19px}
  .lookup-hero.has-result .lookup-box-icon{width:34px;height:34px;top:14px;right:16px;font-size:1.15rem}
  .lookup-hero.has-result .lookup-box h2{font-size:1.1rem;margin-bottom:10px}
  .lookup-hero.has-result .lookup-box .eyebrow{margin-bottom:0}
  .lookup-hero.has-result .lookup-box label{margin-bottom:5px;font-size:.85rem}
  .lookup-hero.has-result .lookup-box input{font-size:16px;min-height:44px}
  .lookup-hero.has-result .lookup-box .button{min-height:44px}
  .lookup-hero.has-result .lookup-box small{font-size:.73rem}
  .mobile-result-jump{display:inline-flex;justify-content:center;align-items:center;min-height:44px;color:#1f5c86;font-size:.84rem;font-weight:800;text-decoration:underline;text-underline-offset:3px}
  .result-space{padding-top:18px}
  .score-card{gap:15px;padding:22px 18px}
  .score-circle{width:128px;height:128px}
  .score-circle strong{font-size:2.4rem}
  .score-card h2{font-size:1.3rem}
  .patient-card{padding:18px}
  .content-section,.odonto-result{padding:20px 16px}
  .tooth-copy{padding:22px 18px}
  .mouth-panel{padding:14px 10px 18px}
  .number-map button,.number-map b{height:44px;aspect-ratio:auto;font-size:.72rem}
  .number-map button{touch-action:manipulation}
  .dental-callout-bubble{border-width:2px;box-shadow:0 6px 18px rgba(42,48,83,.21)}
}
@media(max-width:360px){
  .brand{font-size:1rem}
  .number-map{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .number-map button,.number-map b{height:46px}
  .dental-callout-bubble{max-width:min(160px,calc(100% - 16px))}
}
@media(prefers-reduced-motion:reduce){.button{transition:none}}