*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;background:#f6f6f4;color:#111}
.app{width:min(1180px,100%);margin:0 auto;padding:28px 18px 48px}
.hero{padding:22px 0 10px}
.eyebrow{color:#777;font-size:13px;margin:0 0 8px}
h1{font-size:clamp(40px,10vw,72px);line-height:1;letter-spacing:-.04em;margin:0 0 22px;font-weight:850}
.lead{margin:0;color:#666;font-size:16px;line-height:1.7;font-weight:600}
.card{background:#fff;border:1px solid #e7e2dc;border-radius:18px;padding:16px;margin-top:16px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
label{display:block;font-weight:700;margin:14px 0 8px;color:#333}
.grid{display:grid;grid-template-columns:1fr;gap:10px}
input,select,textarea{width:100%;border:1px solid #ded8d0;border-radius:12px;padding:12px;font-size:16px;background:#fff}
textarea{height:280px;line-height:1.7;resize:vertical}
.small-textarea{height:100px;margin-top:10px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
button{appearance:none;border:0;border-radius:999px;background:#e9e9ed;color:#111;padding:12px 18px;font-size:16px;font-weight:700}
button:disabled{opacity:.45}
#generateBtn,#startRecBtn,#generateReferralBtn,#saveToothBtn{background:#111;color:#fff}
.status,.hint{margin:12px 0 0;color:#666;font-size:13px;line-height:1.6}
.record-panel{border:1px solid #eee;border-radius:14px;padding:14px;background:#fbfbfa}
.timer{font-size:40px;font-weight:850}
.summary-box{white-space:pre-wrap;background:#fbfbfa;border:1px solid #e6e1db;border-radius:14px;padding:14px;margin-top:14px;font-size:14px;line-height:1.8}

.circle-chart-wrap{position:relative;background:#fff;border:1px solid #ddd;border-radius:18px;min-height:720px;margin-top:12px;overflow:auto}
.circle-chart{position:relative;width:min(720px,96vw);height:680px;margin:18px auto}
.axis-v:before{content:"";position:absolute;top:40px;bottom:40px;left:50%;border-left:2px solid #8ac27d;z-index:0}
.axis-h:before{content:"";position:absolute;left:40px;right:40px;top:50%;border-top:2px solid #8ac27d;z-index:0}
.axis-v span:first-child{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:28px;color:#55a24c;font-weight:800}
.axis-v span:last-child{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:28px;color:#55a24c;font-weight:800}
.axis-h span:first-child{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:28px;color:#55a24c;font-weight:800}
.axis-h span:last-child{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:28px;color:#55a24c;font-weight:800}
.circle-tooth{position:absolute!important;transform:translate(-50%,-50%);width:62px;min-height:62px;border-radius:50%;padding:4px;background:transparent;border:0}
.tooth-surface{position:relative;width:42px;height:42px;border:2px solid #444;border-radius:50%;display:block;background:#fff;margin:0 auto 2px}
.tooth-surface i{position:absolute;background:transparent}
.s-o{left:14px;top:14px;width:10px;height:10px;border:1px solid #aaa;border-radius:50%}
.s-top{left:13px;top:2px;width:12px;height:10px}
.s-bottom{left:13px;bottom:2px;width:12px;height:10px}
.s-left{left:2px;top:13px;width:10px;height:12px}
.s-right{right:2px;top:13px;width:10px;height:12px}
.marked{background:#e74c3c!important;border-radius:4px}
.tooth-no{font-size:14px;font-weight:700}
.has-caries:after{content:"C";position:absolute;top:3px;right:5px;font-size:10px;font-weight:900;color:#b00020}
.subgingival{box-shadow:0 0 0 3px #b00020 inset}
.missing .tooth-surface{background:#eee;border:2px dashed #777}
.missing:before{content:"×";position:absolute;font-size:30px;color:#777}
.root .tooth-surface{background:#ffd6d6;border-color:#b00020}
.prosthetic-ceramic .tooth-surface{background:#fff;border-color:#bbb}
.prosthetic-fmc .tooth-surface{background:#b8b8b8;border-color:#777}
.prosthetic-cadcam .tooth-surface{background:#f7f2e9;border-color:#d8cbb8}
.prosthetic-inlay .tooth-surface{background:linear-gradient(135deg,#fff 50%,#b8b8b8 50%)}
.prosthetic-cr .tooth-surface{opacity:.65}
.prosthetic-br .tooth-surface{background:#cfe8ff;border-color:#3a7bd5}
.prosthetic-pontic .tooth-surface{background:transparent;border:2px dashed #3a7bd5}
.prosthetic-denture .tooth-surface{background:#ffd6e8;border-color:#e76f9a}
.prosthetic-facing .tooth-surface{background:#e9ecef;border-color:#9aa0a6}
.prosthetic-clasp{box-shadow:0 0 0 3px #8a63d2 inset}

.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;font-size:13px;color:#555}
.legend span{display:flex;align-items:center;gap:4px}
.lg{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid #aaa}
.lg.missing{background:#eee;border-style:dashed}.lg.root{background:#ffd6d6}.lg.denture{background:#ffd6e8}.lg.fmc{background:#b8b8b8}.lg.ceramic{background:#fff}.lg.cadcam{background:#f7f2e9}.lg.br{background:#cfe8ff}.lg.pontic{background:#fff;border:2px dashed #3a7bd5}.lg.clasp{background:#e6d5ff}

.tabs{display:flex;gap:8px}
.tab.active{background:#111;color:#fff}
.perio-aux{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.perio-table-wrap{overflow:auto;margin-top:14px}
.perio-form-table{border-collapse:collapse;width:100%;min-width:900px;background:#fff;font-size:13px}
.perio-form-table caption{font-weight:800;font-size:16px;padding:8px}
.perio-form-table th,.perio-form-table td{border:1px solid #333;text-align:center;padding:3px;min-width:34px}
.perio-form-table th{background:#f3f3f3}
.perio-form-table td.excluded{background:#eee}
.perio-cell{width:32px!important;border:0!important;border-radius:0!important;padding:5px!important;text-align:center;font-size:16px;background:#fff}
.perio-cell:disabled{background:#eee;color:#777}
.precision-table td{min-width:30px}

.modal{display:none;position:fixed;z-index:9999;inset:0;background:rgba(0,0,0,.35);padding:18px;overflow:auto}
.modal.active{display:block}
.modal-card{background:#fff;max-width:820px;margin:20px auto;border-radius:18px;padding:18px}
.modal-head{display:flex;align-items:center;justify-content:space-between}
.modal-head h2{margin:0;font-size:22px}
.pill-row,.surface-pad{display:flex;flex-wrap:wrap;gap:8px}
.pill-row button,.surface-pad button{padding:10px 14px}
.pill-row button.selected,.surface-pad button.selected{background:#111;color:#fff}

pre{min-height:220px;white-space:pre-wrap;word-break:break-word;background:#fbfbfa;border:1px solid #e6e1db;border-radius:14px;padding:14px;font-size:14px;line-height:1.8;margin:0}

@media(min-width:720px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  .perio-aux{grid-template-columns:1fr}
  .circle-chart-wrap{min-height:620px}
  .circle-chart{height:580px}
  .circle-tooth{width:50px;min-height:50px}
  .tooth-surface{width:34px;height:34px}
  .s-o{left:11px;top:11px;width:8px;height:8px}
  .perio-form-table{font-size:12px;min-width:780px}
}
@media print{
  body{background:#fff}
  .no-print,.hero{display:none!important}
  .app{padding:0;margin:0;width:100%}
  .card{border:0;box-shadow:none;padding:0;margin:0}
  .print-area{display:block}
  pre{border:0;background:#fff;font-size:11pt;line-height:1.6;padding:0}
}

/* v10.2 fixes */
.circle-chart-wrap{min-height:760px}
.circle-chart{width:min(760px,96vw);height:720px}
.circle-tooth{width:58px;min-height:58px}
.circle-tooth.primary-tooth{width:48px;min-height:48px;opacity:.92}
.circle-tooth.primary-tooth .tooth-surface{width:32px;height:32px}
.circle-tooth.primary-tooth .tooth-no{font-size:12px}
.tooth-surface{
  overflow:hidden;
  background:
    linear-gradient(45deg, transparent 48%, #777 49%, #777 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, #777 49%, #777 51%, transparent 52%),
    #fff;
}
.tooth-surface:after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:34%;
  height:34%;
  border:2px solid #777;
  border-radius:50%;
  background:#fff;
  z-index:2;
}
.tooth-surface i{z-index:1}
.s-top{left:34%;top:3%;width:32%;height:24%}
.s-bottom{left:34%;bottom:3%;width:32%;height:24%}
.s-left{left:3%;top:34%;width:24%;height:32%}
.s-right{right:3%;top:34%;width:24%;height:32%}
.s-o{left:38%;top:38%;width:24%;height:24%;border:0;z-index:3}
.marked{background:#e74c3c!important}
.flag-tool.active{background:#111;color:#fff}
.perio-form-table td.flag-pcr{background:#ffb3b3!important}
.perio-form-table td.flag-bop{background:#ffd1e6!important}
.perio-form-table td.flag-pus{background:#bdefff!important}
.perio-form-table td.flag-pcr.flag-bop{background:linear-gradient(135deg,#ffb3b3 50%,#ffd1e6 50%)!important}
.perio-form-table td.flag-pcr.flag-pus{background:linear-gradient(135deg,#ffb3b3 50%,#bdefff 50%)!important}
.perio-form-table td.flag-bop.flag-pus{background:linear-gradient(135deg,#ffd1e6 50%,#bdefff 50%)!important}
.perio-flag-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
@media(max-width:760px){
  .circle-chart-wrap{min-height:690px}
  .circle-chart{height:640px}
  .circle-tooth{width:48px;min-height:48px}
}

/* v10.3 FDI circle + perio color semantics */
.circle-chart-wrap{min-height:820px}
.circle-chart{width:min(780px,96vw);height:760px}
.circle-tooth{width:58px;min-height:58px}
.circle-tooth .tooth-no{
  position:relative;
  z-index:5;
  font-size:14px;
  font-weight:800;
  line-height:1;
  margin-top:1px;
}
.circle-tooth.primary-tooth{width:48px;min-height:48px}
.circle-tooth.primary-tooth .tooth-no{font-size:12px}
@media(max-width:760px){
  .circle-chart-wrap{min-height:720px}
  .circle-chart{height:680px;width:680px;max-width:none}
}

/* PCR is not a fill. It is an orange bold outline to avoid confusion with BOP. */
.perio-form-table td.flag-pcr{
  background:#fff!important;
  outline:3px solid #ff8a00;
  outline-offset:-3px;
  font-weight:900;
}

/* BOP = pink fill */
.perio-form-table td.flag-bop{
  background:#ffd1e6!important;
}

/* Pus = light blue fill */
.perio-form-table td.flag-pus{
  background:#bdefff!important;
}

/* BOP + Pus = diagonal half-and-half */
.perio-form-table td.flag-bop.flag-pus{
  background:linear-gradient(135deg,#ffd1e6 0 50%,#bdefff 50% 100%)!important;
}

/* PCR combined with BOP/Pus keeps orange outline */
.perio-form-table td.flag-pcr.flag-bop{
  background:#ffd1e6!important;
  outline:3px solid #ff8a00;
  outline-offset:-3px;
}
.perio-form-table td.flag-pcr.flag-pus{
  background:#bdefff!important;
  outline:3px solid #ff8a00;
  outline-offset:-3px;
}
.perio-form-table td.flag-pcr.flag-bop.flag-pus{
  background:linear-gradient(135deg,#ffd1e6 0 50%,#bdefff 50% 100%)!important;
  outline:3px solid #ff8a00;
  outline-offset:-3px;
}

/* v10.4 FDI oval refinements */
.circle-chart-wrap{min-height:840px}
.circle-chart{width:min(820px,96vw);height:790px}
.circle-tooth{width:56px;min-height:56px}
.circle-tooth.primary-tooth{width:44px;min-height:44px}
.circle-tooth.primary-tooth .tooth-surface{width:30px;height:30px}
.circle-tooth .tooth-no{
  display:block;
  text-align:center;
  margin-top:0;
  text-shadow:0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.legend-note{font-weight:700;color:#444}
.perio-voice-tools{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:12px;
}
.perio-voice-tools select{width:auto;min-width:220px}
@media(max-width:760px){
  .circle-chart-wrap{min-height:720px}
  .circle-chart{height:660px;width:650px;max-width:none}
  .circle-tooth{width:46px;min-height:46px}
  .circle-tooth.primary-tooth{width:38px;min-height:38px}
}

/* v10.6 stable repair: chart and perio flags */
.circle-chart-wrap{
  min-height:840px;
}
.circle-chart{
  width:min(820px,96vw);
  height:790px;
}
.circle-tooth{
  width:56px;
  min-height:56px;
}
.circle-tooth.primary-tooth{
  width:44px;
  min-height:44px;
}
.circle-tooth.primary-tooth .tooth-surface{
  width:30px;
  height:30px;
}
.circle-tooth .tooth-no{
  display:block;
  text-align:center;
  margin-top:0;
  text-shadow:0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.legend-note{
  font-weight:700;
  color:#444;
}

/* Perio flag rendering: full cell fill + PCR orange outline */
.perio-form-table td{
  position:relative;
  background-clip:padding-box;
}
.perio-form-table td.flag-bop{
  background:#ffd1e6!important;
}
.perio-form-table td.flag-pus{
  background:#bdefff!important;
}
.perio-form-table td.flag-bop.flag-pus{
  background:linear-gradient(135deg,#ffd1e6 0 50%,#bdefff 50% 100%)!important;
}
.perio-form-table td.flag-pcr{
  outline:3px solid #ff8a00!important;
  outline-offset:-3px;
  font-weight:900;
}
.perio-form-table td.flag-pcr.flag-bop{
  background:#ffd1e6!important;
  outline:3px solid #ff8a00!important;
  outline-offset:-3px;
}
.perio-form-table td.flag-pcr.flag-pus{
  background:#bdefff!important;
  outline:3px solid #ff8a00!important;
  outline-offset:-3px;
}
.perio-form-table td.flag-pcr.flag-bop.flag-pus{
  background:linear-gradient(135deg,#ffd1e6 0 50%,#bdefff 50% 100%)!important;
  outline:3px solid #ff8a00!important;
  outline-offset:-3px;
}
.perio-form-table td.excluded{
  background:#eee!important;
}
.perio-cell{
  background:transparent!important;
}
@media(max-width:760px){
  .circle-chart-wrap{min-height:720px}
  .circle-chart{height:660px;width:650px;max-width:none}
  .circle-tooth{width:46px;min-height:46px}
  .circle-tooth.primary-tooth{width:38px;min-height:38px}
}

/* v10.7 axis-aligned FDI chart */
.circle-chart-wrap{
  min-height:820px;
}
.circle-chart{
  width:min(780px,96vw);
  height:760px;
}
.circle-tooth{
  width:58px;
  min-height:58px;
}
.circle-tooth.primary-tooth{
  width:46px;
  min-height:46px;
}
.circle-tooth.primary-tooth .tooth-surface{
  width:32px;
  height:32px;
}
.circle-tooth.anterior-tooth .tooth-surface:after{
  display:none;
}
.circle-tooth.anterior-tooth .s-o{
  display:none;
}
.circle-tooth.anterior-tooth .tooth-surface{
  background:
    linear-gradient(45deg, transparent 48%, #777 49%, #777 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, #777 49%, #777 51%, transparent 52%),
    #fff;
}
.circle-tooth .tooth-no{
  display:block;
  text-align:center;
  font-size:14px;
  font-weight:800;
  line-height:1;
  text-shadow:0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
@media(max-width:760px){
  .circle-chart-wrap{min-height:700px}
  .circle-chart{height:650px;width:620px;max-width:none}
  .circle-tooth{width:46px;min-height:46px}
  .circle-tooth.primary-tooth{width:38px;min-height:38px}
}

/* v10.8 7-teeth chart fitting */
.circle-chart-wrap{min-height:780px}
.circle-chart{width:min(760px,96vw);height:720px}
.circle-tooth{width:56px;min-height:56px}
@media(max-width:760px){
  .circle-chart-wrap{min-height:690px}
  .circle-chart{height:640px;width:600px;max-width:none}
  .circle-tooth{width:46px;min-height:46px}
}

/* v10.9 molar spacing adjustment */
.circle-tooth{
  width:52px;
  min-height:52px;
}
.circle-tooth .tooth-surface{
  width:38px;
  height:38px;
}
.circle-tooth.primary-tooth{
  width:42px;
  min-height:42px;
}
.circle-tooth.primary-tooth .tooth-surface{
  width:29px;
  height:29px;
}
@media(max-width:760px){
  .circle-tooth{width:43px;min-height:43px}
  .circle-tooth .tooth-surface{width:32px;height:32px}
  .circle-tooth.primary-tooth{width:36px;min-height:36px}
  .circle-tooth.primary-tooth .tooth-surface{width:26px;height:26px}
}

/* v10.10 U-arch spacing */
.circle-chart-wrap{min-height:800px}
.circle-chart{width:min(820px,96vw);height:760px}
.circle-tooth{
  width:50px;
  min-height:50px;
}
.circle-tooth .tooth-surface{
  width:36px;
  height:36px;
}
.circle-tooth.primary-tooth{
  width:40px;
  min-height:40px;
}
.circle-tooth.primary-tooth .tooth-surface{
  width:28px;
  height:28px;
}
@media(max-width:760px){
  .circle-chart-wrap{min-height:710px}
  .circle-chart{height:660px;width:640px;max-width:none}
  .circle-tooth{width:42px;min-height:42px}
  .circle-tooth .tooth-surface{width:31px;height:31px}
  .circle-tooth.primary-tooth{width:35px;min-height:35px}
  .circle-tooth.primary-tooth .tooth-surface{width:25px;height:25px}
}

/* v11 flat dental chart */
.circle-chart.hidden{display:none!important}
.flat-chart-wrap{background:#fff;border:1px solid #ddd;border-radius:18px;padding:16px;overflow:auto;margin-top:12px}
.flat-chart{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;min-width:880px;align-items:start}
.flat-midline{grid-column:1 / -1;height:2px;background:#8ac27d;margin:2px 0}
.flat-row,.mixed-group{display:grid;grid-template-columns:76px repeat(8,82px);gap:6px;align-items:start}
.primary-only .flat-row,.primary-only .mixed-group{grid-template-columns:76px repeat(5,82px)}
.mixed-group{grid-template-rows:auto auto}
.mixed-row{display:contents}
.primary-mixed-row .flat-tooth{margin-top:4px}
.flat-row-title{font-weight:800;color:#4c9448;align-self:center;text-align:center}
.flat-tooth{position:relative!important;transform:none!important;width:76px;min-height:88px;border-radius:12px;padding:4px;background:#fff;border:1px solid #eee;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.flat-tooth.primary-tooth{width:66px;min-height:78px}
.flat-tooth-no{font-weight:900;font-size:16px;line-height:1}
.flat-tooth .tooth-surface{width:42px;height:42px;margin:4px auto 2px}
.flat-tooth.primary-tooth .tooth-surface{width:36px;height:36px}
.tooth-label{min-height:18px;font-size:10px;font-weight:900;line-height:1.1;text-align:center;word-break:break-word;max-width:72px}
.flat-tooth.missing{opacity:.45;background:#f2f2f2}
.flat-tooth.missing .tooth-surface{background:#eee!important;border:2px dashed #aaa!important}
.flat-tooth.root .tooth-surface{background:#ffd6d6!important;border-color:#b00020!important}
.mark-caries{background:#000!important}
.mark-cr{background:#fff2c6!important}
.mark-inlay{background:#aaa!important}
.mark-cad{background:#bfe3ff!important}
.mark-cer{background:#fff!important;border:1px solid #bbb!important}
.prosthetic-fmc .tooth-surface{background:#aaa!important;border-color:#777!important}
.prosthetic-cadcam .tooth-surface{background:#bfe3ff!important;border-color:#4b9ed8!important}
.prosthetic-ceramic .tooth-surface{background:#fff!important;border-color:#bbb!important}
.prosthetic-mb .tooth-surface{background:linear-gradient(135deg,#fff 0 50%,#aaa 50% 100%)!important;border-color:#777!important}
.prosthetic-facing .tooth-surface{background:linear-gradient(135deg,#bfe3ff 0 50%,#aaa 50% 100%)!important;border-color:#777!important}
.prosthetic-br .tooth-surface{background:#cfe8ff!important;border-color:#3a7bd5!important}
.prosthetic-pontic .tooth-surface{background:transparent!important;border:2px dashed #3a7bd5!important}
.prosthetic-denture .tooth-surface{background:#ffd6e8!important;border-color:#e76f9a!important}
.prosthetic-clasp{box-shadow:0 0 0 3px #8a63d2 inset}
.chart-rule-note{margin-top:12px;background:#fbfbfa;border:1px solid #e6e1db;border-radius:12px;padding:10px;font-size:13px;line-height:1.6}
@media(max-width:760px){.flat-chart{min-width:780px;gap:12px 18px}.flat-row,.mixed-group{grid-template-columns:66px repeat(8,70px)}.primary-only .flat-row{grid-template-columns:66px repeat(5,70px)}.flat-tooth{width:64px;min-height:82px}.flat-tooth.primary-tooth{width:58px;min-height:72px}.flat-tooth .tooth-surface{width:36px;height:36px}}

/* v11.1 refinements */
.flat-row,.mixed-group{grid-template-columns:64px repeat(8,82px)}
.flat-row-title{font-size:12px}
.flat-spacer{width:66px;min-height:78px}
.surface-pad{border:1px solid #eee;border-radius:12px;padding:8px;background:#fbfbfa}
.mark-fracture{
  background:repeating-linear-gradient(135deg, transparent 0 4px, #d60000 4px 7px, transparent 7px 11px)!important;
  outline:2px solid #d60000;
  outline-offset:-2px;
}
.tooth-surface i.mark-caries{
  background:#000!important;
  outline:2px solid #000;
  outline-offset:-1px;
}
.tooth-surface i.mark-caries.mark-inlay,
.tooth-surface i.mark-caries.mark-cad,
.tooth-surface i.mark-caries.mark-cer,
.tooth-surface i.mark-caries.mark-cr{
  background:#000!important;
}
.precision-mobility-cell{font-weight:900}
@media(max-width:760px){
  .flat-row,.mixed-group{grid-template-columns:58px repeat(8,70px)}
  .flat-spacer{width:58px;min-height:72px}
}

/* v11.2 clinical UI fixes */
.flat-chart-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.flat-chart{
  --tooth-col: clamp(46px, 6.6vw, 76px);
  --title-col: clamp(46px, 6vw, 72px);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px 24px;
  min-width:0!important;
  width:100%;
}
.flat-row,.mixed-group{
  display:grid;
  grid-template-columns: repeat(8, var(--tooth-col)) var(--title-col);
  gap:6px;
  align-items:start;
  justify-content:center;
}
.primary-only .flat-row{
  grid-template-columns: repeat(5, var(--tooth-col)) var(--title-col);
}
.mixed-row{
  display:grid;
  grid-template-columns: repeat(8, var(--tooth-col)) var(--title-col);
  gap:6px;
  align-items:start;
}
.primary-mixed-row{
  margin-top:5px;
}
.flat-spacer{
  width:var(--tooth-col);
  min-height:calc(var(--tooth-col) + 16px);
}
.flat-row-title{
  font-size:12px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  align-self:center;
  justify-self:center;
  white-space:nowrap;
}
.flat-tooth{
  width:var(--tooth-col)!important;
  min-height:calc(var(--tooth-col) + 24px)!important;
  padding:3px;
  box-sizing:border-box;
}
.flat-tooth.primary-tooth{
  width:calc(var(--tooth-col) * .86)!important;
  min-height:calc(var(--tooth-col) + 18px)!important;
  justify-self:center;
}
.flat-tooth .tooth-surface{
  width:calc(var(--tooth-col) * .54)!important;
  height:calc(var(--tooth-col) * .54)!important;
  min-width:28px;
  min-height:28px;
  max-width:42px;
  max-height:42px;
}
.flat-tooth.primary-tooth .tooth-surface{
  width:calc(var(--tooth-col) * .48)!important;
  height:calc(var(--tooth-col) * .48)!important;
}
.flat-tooth-no{
  font-size:clamp(11px, 1.5vw, 16px)!important;
}
.tooth-label{
  font-size:clamp(8px, 1.1vw, 10px)!important;
  max-width:var(--tooth-col);
}

/* 前歯は4面。O面は視覚的にも完全に非表示 */
.flat-tooth.anterior-tooth .s-o{
  display:none!important;
}
.flat-tooth.anterior-tooth .tooth-surface:after{
  display:none!important;
}
.flat-tooth.anterior-tooth .tooth-surface{
  background:
    linear-gradient(45deg, transparent 48%, #777 49%, #777 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, #777 49%, #777 51%, transparent 52%),
    #fff!important;
}

/* O面含む歯面マークを確実に表示 */
.tooth-surface .s-o.mark-caries,
.tooth-surface .s-top.mark-caries,
.tooth-surface .s-bottom.mark-caries,
.tooth-surface .s-left.mark-caries,
.tooth-surface .s-right.mark-caries{
  background:#000!important;
  opacity:1!important;
}
.tooth-surface .s-o.mark-cr{background:#fff2c6!important}
.tooth-surface .s-o.mark-inlay{background:#aaa!important}
.tooth-surface .s-o.mark-cad{background:#bfe3ff!important}
.tooth-surface .s-o.mark-cer{background:#fff!important;border:1px solid #bbb!important}
.tooth-surface .s-o.mark-fracture{
  background:repeating-linear-gradient(135deg, transparent 0 4px, #d60000 4px 7px, transparent 7px 11px)!important;
  outline:2px solid #d60000;
  outline-offset:-2px;
}

.surface-pad button.disabled-surface{
  opacity:.25;
  pointer-events:none;
}

@media(max-width:900px){
  .flat-chart{
    --tooth-col: clamp(40px, 6.2vw, 58px);
    --title-col: 40px;
    gap:14px 18px;
  }
}
@media(max-width:680px){
  .flat-chart{
    --tooth-col: 38px;
    --title-col: 34px;
    min-width:720px!important;
  }
}


.flag-tool{pointer-events:auto!important;position:relative;z-index:10;}
.tooth-surface .s-o{display:block!important;z-index:3;}


/* ===== Mixed dentition overlap fix ===== */
.mixed-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mixed-row{
  display:grid;
  grid-template-columns: repeat(8, 1fr) auto;
  gap:6px;
}

.primary-mixed-row{
  margin-top:6px;
}

/* ensure vertical separation */
.mixed-row + .mixed-row{
  margin-top:4px;
}

/* prevent absolute overlap */
.flat-tooth{
  position:relative;
}