.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.48);display:none;align-items:center;justify-content:center;padding:18px;z-index:100}
.modal-backdrop.show{display:flex}
.modal{width:min(680px,100%);max-height:calc(100vh - 36px);overflow:auto;border-radius:8px;background:#fff;box-shadow:0 28px 70px rgba(15,23,42,.28);padding:18px}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.modal-head h3{margin:0;font-size:22px}
.modal-head p{margin:6px 0 0;font-size:13px;color:var(--muted)}
.icon-btn{appearance:none;border:1px solid var(--line);background:#fff;width:34px;height:34px;border-radius:12px;font:inherit;cursor:pointer}
.patient-form{display:grid;gap:12px}
.patient-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.patient-field{display:grid;gap:6px}
.patient-field label{font-size:12px;font-weight:700;color:var(--ink)}
.patient-field input,.patient-field textarea,.patient-field select{width:100%;min-height:40px;padding:10px 12px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);font:inherit}
.patient-field textarea{min-height:78px;resize:vertical}
.patient-field.full{grid-column:1 / -1}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.date-field-shell{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:8px;align-items:center}
.date-text-input{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);font:inherit;font-size:16px;font-weight:700}
.date-text-input::placeholder{color:var(--muted);font-weight:600}
.date-text-input.invalid{border-color:#ef4444;box-shadow:0 0 0 1px rgba(239,68,68,.18)}
.date-picker-btn{width:46px;height:46px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);font:inherit;font-size:18px;display:grid;place-items:center;cursor:pointer}
.date-popover{position:fixed;z-index:140;width:min(420px,calc(100vw - 28px));border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 28px 70px rgba(15,23,42,.24);padding:18px}
.date-popover[hidden]{display:none}
.date-popover-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.date-nav-btn{appearance:none;border:1px solid var(--line);background:#fff;width:40px;height:40px;border-radius:14px;font:inherit;font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
.date-title-btn{appearance:none;border:none;background:#f3f5f8;color:var(--ink);font:inherit;font-size:18px;font-weight:800;border-radius:16px;padding:12px 18px;cursor:pointer;min-width:180px}
.date-view{display:grid;gap:10px}
.date-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;color:var(--muted);font-size:12px;font-weight:800;text-align:center}
.date-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.date-grid-btn{appearance:none;border:none;background:#fff;color:var(--ink);font:inherit;border-radius:18px;min-height:48px;cursor:pointer;font-weight:700}
.date-grid-btn:hover{background:#f4f7fb}
.date-grid-btn.muted{color:#a4adba}
.date-grid-btn.active{background:#bfe8ee;color:#12344d;box-shadow:inset 0 0 0 2px #0b8ea1}
.date-grid-btn.today{box-shadow:inset 0 0 0 1px #c9d8eb}
.date-months,.date-years{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.date-months .date-grid-btn,.date-years .date-grid-btn{min-height:84px;font-size:17px}
.date-popover-actions{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
.date-popover-actions .btn{min-width:108px}
.treatment-manager-modal{width:min(860px,100%)}
.treatment-manager-section,.add-treatment-form{display:grid;gap:12px;padding:14px 0}
.treatment-manager-section{border-bottom:1px solid var(--line)}
.manager-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.manager-section-head strong{font-size:13px}
.manager-section-head span{font-size:11px;color:var(--muted)}
.treatment-method-list{display:grid;gap:7px;max-height:330px;overflow:auto;padding-right:4px}
.treatment-method-row{display:grid;grid-template-columns:24px 34px minmax(150px,1fr) 150px 54px 84px;gap:8px;align-items:center;padding:8px;border:1px solid var(--line);background:var(--panel-soft)}
.method-visible{width:18px;height:18px;margin:0;accent-color:var(--blue);cursor:pointer}
.manager-icon-preview{width:30px;height:30px;display:grid;place-items:center;background:#fff;border:1px solid var(--line)}
.treatment-method-row input,.treatment-method-row select,.add-treatment-grid input,.add-treatment-grid select{width:100%;min-height:36px;padding:7px 9px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);font:inherit;font-size:12px}
.method-color-input{padding:4px!important;cursor:pointer}
.method-remove-btn{appearance:none;border:1px solid #f0c5c2;background:#fff6f5;color:#b8413b;min-height:36px;padding:0 10px;font:inherit;font-size:10px;font-weight:800;cursor:pointer}
.method-remove-btn:disabled{border-color:var(--line);background:#f4f6f8;color:#9aa6b2;cursor:not-allowed}
.add-treatment-form{border-bottom:1px solid var(--line)}
.add-treatment-grid{display:grid;grid-template-columns:1.6fr 1fr 90px;gap:8px}
.add-treatment-grid label{display:grid;gap:5px;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.add-treatment-grid input[type="color"]{padding:4px;cursor:pointer}
.add-method-btn{justify-self:start}
.manager-actions{margin-top:14px}

/* The enlarged tooth picker is a mobile interaction only. */
#mobile-tooth-modal{display:none}
#mobile-entry-modal{display:none}
@media (max-width:600px){
  #mobile-tooth-modal.show{display:flex}
  .mobile-tooth-backdrop{padding:10px;background:rgba(7,14,24,.72)}
  .mobile-tooth-modal{width:100%;max-height:calc(100dvh - 20px);padding:16px;border-radius:12px}
  .mobile-tooth-modal-head{margin-bottom:8px}
  .mobile-tooth-kicker{display:block;margin-bottom:3px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
  .mobile-tooth-close{width:44px;height:44px;flex:none;font-size:18px}
  .mobile-tooth-instruction{margin:0 0 12px;color:var(--muted);font-size:12px;line-height:1.4}
  .mobile-tooth-navigation{display:grid;grid-template-columns:minmax(96px,1fr) auto minmax(96px,1fr);gap:8px;align-items:center;margin-bottom:12px}
  .mobile-tooth-nav-btn{min-width:0;min-height:48px;padding:7px 10px;border:1px solid #b9cee8;border-radius:10px;background:#eef6ff;color:#24537f;display:flex;align-items:center;justify-content:center;gap:7px;font:inherit;font-size:21px;font-weight:800;cursor:pointer;touch-action:manipulation}
  .mobile-tooth-nav-btn small{font-size:11px;font-weight:800;white-space:nowrap}
  .mobile-tooth-nav-btn:disabled{border-color:var(--line);background:#f4f5f7;color:#a4adb8;cursor:not-allowed}
  .mobile-tooth-nav-hint{color:var(--muted);font-size:9px;font-weight:700;line-height:1.25;text-align:center}
  .mobile-tooth-views{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .mobile-tooth-view{min-width:0;padding:12px 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft);text-align:center}
  .mobile-tooth-view>strong{display:block;font-size:12px;color:var(--ink)}
  .mobile-tooth-art{height:180px;display:grid;place-items:center;overflow:visible}
  .mobile-tooth-art .tooth{width:100%;height:100%;align-items:center;cursor:pointer}
  .mobile-tooth-art .tooth-art{transform:none!important;filter:none!important}
  .mobile-tooth-art.root .art-core.front.upper{transform:scale(1.35,-1.35)}
  .mobile-tooth-art.root .art-core.front.lower{transform:scale(1.35)}
  .mobile-tooth-art.crown .art-core.occ{transform:scale(2.65)}
  .mobile-tooth-art .surface-region{cursor:pointer;touch-action:manipulation}
  .mobile-tooth-selection{min-height:34px;margin-top:10px;padding:9px 10px;border-radius:8px;background:#eef6ff;color:#315778;font-size:12px;font-weight:700;text-align:center}
  .mobile-optional-molar-btn{width:100%;min-height:46px;margin-top:10px;padding:9px 12px;border:1px solid #d7a7a3;border-radius:9px;background:#fff4f3;color:#a33b35;font:inherit;font-size:12px;font-weight:800;cursor:pointer;touch-action:manipulation}
  .mobile-optional-molar-btn.activate{border-color:#9bc7ac;background:#effaf3;color:#277244}
  .mobile-optional-molar-btn[hidden]{display:none}
  .mobile-tooth-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
  .mobile-tooth-actions .btn{width:100%;min-height:44px}
  #mobile-entry-modal.show{display:flex}
  .mobile-entry-backdrop{padding:8px;background:rgba(7,14,24,.72)}
  .mobile-entry-modal{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:100%;height:calc(100dvh - 16px);max-height:none;padding:14px;overflow:hidden;border-radius:12px}
  .mobile-entry-head{margin-bottom:8px}
  .mobile-entry-heading{min-width:0;flex:1}
  .mobile-entry-head h3{margin-top:12px;font-size:19px}
  /* .mobile-entry-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:3px 4px 0} */
  .mobile-entry-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;

  width: min(260px, 100%);
  margin-inline: auto;
  padding: 3px 4px 0;
}
  .mobile-entry-stage{appearance:none;position:relative;display:grid;justify-items:center;gap:4px;min-width:0;padding:0;border:0;background:transparent;color:#9aa6b2;font:inherit;font-size:9px;font-weight:800;text-align:center;cursor:pointer;touch-action:manipulation}
  .mobile-entry-stage:focus-visible{outline:2px solid #3484e8;outline-offset:3px;border-radius:5px}
  .mobile-entry-stage:not(:last-child)::after{content:"";position:absolute;top:14px;left:calc(50% + 16px);right:calc(-50% + 16px);height:2px;background:#dce3eb}
  .mobile-entry-stage span{position:relative;z-index:1;width:28px;height:28px;border:2px solid #dce3eb;border-radius:50%;display:grid;place-items:center;background:#fff;color:#8b98a7;font-size:11px}
  .mobile-entry-stage small{font:inherit;white-space:nowrap}
  .mobile-entry-stage.current{color:#24537f}
  .mobile-entry-stage.current span{border-color:#3484e8;color:#24537f;box-shadow:0 0 0 3px rgba(52,132,232,.12)}
  .mobile-entry-stage.complete{color:#277244}
  .mobile-entry-stage.complete span{border-color:#2f9b62;background:#2f9b62;color:#fff}
  .mobile-entry-stage.complete::after{background:#2f9b62}
  .mobile-entry-content{min-height:0;overflow:auto;padding:0 2px 10px}
  .mobile-entry-content .editor{display:grid;gap:14px;padding:0}
  .mobile-entry-content .selected-head{display:grid;grid-template-columns:1fr;gap:10px;overflow:visible}
  .mobile-entry-content .selected-side{grid-row:1;max-width:none}
  .mobile-entry-content .selected-main{grid-row:2}
  .mobile-entry-content .mini-preview{width:100%;height:150px;min-height:150px}
  .mobile-entry-content .form-actions{display:none}
  .mobile-entry-content .field-pair{display:contents}
  .mobile-entry-content .editor>.field,.mobile-entry-content .field-pair>.field{display:none!important}
  /* .mobile-entry-content[data-step="1"] .selection-field,.mobile-entry-content[data-step="1"] .chart-type-field, */
  .mobile-entry-content[data-step="2"] .selection-field,.mobile-entry-content[data-step="2"] .view-field,.mobile-entry-content[data-step="2"] #surface-field,
  .mobile-entry-content[data-step="3"] .selection-field,.mobile-entry-content[data-step="3"] .treatment-field,
  .mobile-entry-content[data-step="4"] .selection-field,.mobile-entry-content[data-step="4"] .status-field,.mobile-entry-content[data-step="4"] .note-field{display:grid!important}
  .mobile-entry-content .preview{font-size:12px}
  .mobile-entry-content #treatment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mobile-entry-content .note-input{height:170px;min-height:170px}
  .mobile-entry-footer{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
  .mobile-entry-footer .btn{width:100%;min-height:46px}
  .mobile-entry-footer [hidden]{display:none}
}