.brand{gap:12px;font-size:9px;letter-spacing:1.35px}
.brand-logo{width:170px;height:auto;display:block}
.topbar-actions{display:flex;align-items:center;gap:14px}
.install-app-button{border:1px solid #cbd9d1;border-radius:7px;background:#fff;color:var(--green);font:600 11px 'DM Sans',sans-serif;padding:8px 11px;cursor:pointer;white-space:nowrap}
.install-app-button:hover{background:#f5eff7;border-color:#8eb09a}
.install-app-button[hidden]{display:none}
.brand>span{border-left:1px solid var(--line);padding:9px 0 9px 12px;color:#728078}
.field-hint{display:block;margin-top:6px;color:#89968f;font-size:10px;font-weight:400}
.input-suffix{position:relative}
.input-suffix input{padding-right:53px!important}
.input-suffix>span{position:absolute;right:13px;top:20px;color:#89968f;font-size:11px;font-weight:400}
.fixed-toggle{display:flex;align-items:center;gap:8px;margin-top:16px;padding:10px 12px;border:1px solid #e1e9e4;border-radius:7px;background:#f8faf8;font-size:12px;color:#52635c}
.fixed-toggle input{accent-color:var(--green);margin:0}
.fixed-toggle .optional{font-size:10px}
.fixed-panel{border:1px solid #dfe8e3;border-radius:10px;background:#f8fbf9;padding:15px 17px;margin:0 0 17px}
.fixed-panel[hidden]{display:none}
.clasp-panel[hidden]{display:none}
.fixed-placement-row{display:grid;grid-template-columns:130px minmax(220px,420px);align-items:center;gap:12px}
.fixed-placement-row label{font-size:11px}
.fixed-placement-row select{margin:0;min-height:37px;font-size:11px}
.fixed-status{margin-top:8px;font-size:10px;color:#73847a;line-height:1.5}
.clasp-panel{border:1px solid #e2eae5;border-radius:10px;background:#fbfcfb;padding:16px 17px;margin:0 0 18px}
.clasp-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:13px}
.clasp-title h3{font:700 14px Manrope,sans-serif;margin:0 0 4px;color:var(--ink)}
.clasp-title h3 span{font:400 11px 'DM Sans',sans-serif;color:#89968f}
.clasp-title p{margin:0;font-size:11px;color:#78867f;line-height:1.5}
.clasp-hint{font-size:9px;color:#87948c;white-space:nowrap;padding-top:3px}
.clasp-table{border:1px solid #e5ebe7;border-radius:7px;overflow:hidden;background:#fff}
.clasp-table-head,.clasp-row{display:grid;grid-template-columns:minmax(0,1fr) 112px 112px;align-items:center}
.clasp-table-head{min-height:31px;background:#f2f6f3;color:#849188;font-size:9px;letter-spacing:.8px;font-weight:700}
.clasp-table-head span:first-child,.clasp-row>span:first-child{padding-left:12px}
.clasp-table-head span:not(:first-child){text-align:center}
.clasp-row{min-height:34px;border-top:1px solid #eef1ef;color:#52635c;font-size:11px;font-weight:500;margin:0;cursor:default;transition:background .15s}
.clasp-row:hover,.clasp-row.placing{background:#f5eff7}
.clasp-row.placing>span:first-child{color:var(--green);font-weight:700}
.clasp-row input[type=checkbox]{width:15px;height:15px;margin:0 auto;accent-color:var(--green);cursor:pointer}
.clasp-row em{font-size:10px;color:#89968f;font-weight:400}
.clasp-row.other-clasp{grid-template-columns:minmax(0,1fr) 40px 40px minmax(140px,220px)}
.clasp-row.other-clasp input[type=text]{min-height:29px;margin:2px 7px 2px 0;padding:5px 8px;font-size:11px}
.active-clasp-select{display:flex;align-items:center;gap:10px;margin-top:11px;font-size:11px}
.active-clasp-select select{max-width:360px;min-height:36px;margin:0;font-size:11px}
.clasp-status{margin-top:8px;color:#74837a;font-size:10px;line-height:1.5}
.labial-bow-row{display:flex;align-items:center;flex-wrap:wrap;gap:11px 17px;border-top:1px solid #e9eeeb;margin-top:12px;padding-top:11px;color:#596b61;font-size:11px}
.labial-bow-row strong{font-size:11px;color:var(--ink)}
.labial-bow-row label{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500;cursor:pointer}
.labial-bow-row input{accent-color:#56156f;margin:0}
.clasp-badges{position:absolute;top:-5px;right:-7px;display:flex;gap:1px;max-width:27px;flex-wrap:wrap;justify-content:flex-end}
.clasp-badge{min-width:12px;height:12px;padding:0 2px;display:grid;place-items:center;border-radius:6px;background:#56156f;color:#fff;font-size:7px;line-height:1;font-weight:700;box-shadow:0 1px 3px #17241d35}
.fixed-badge{background:#287d8c}
.labial-bow-svg{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible;pointer-events:none}
.labial-bow-path{fill:none;stroke:#111;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #fff)}
.clasp-key{height:13px;min-width:13px;border-radius:7px;background:#56156f;color:white;text-align:center;font-size:8px;font-weight:700;font-style:normal;line-height:13px}
.fixed-key{height:13px;min-width:13px;border-radius:7px;background:#287d8c;color:white;text-align:center;font-size:8px;font-weight:700;font-style:normal;line-height:13px}
.bow-key{width:20px;height:2px;background:#56156f;display:inline-block}
.legend{flex-wrap:wrap;row-gap:8px}
.chart-note{margin:10px 2px 0;color:#829088;font-size:10px;line-height:1.5;text-align:center}
.arch-heading{display:flex;justify-content:space-between;max-width:680px;margin:0 auto;color:#829088;font-size:9px;letter-spacing:1.2px;font-weight:700;padding:0 5px}
.arch-heading>span:last-child{display:flex;align-items:center;gap:7px;letter-spacing:.7px;color:#6f7d75}
.arch-heading i{height:16px;width:1px;background:#c7d2ca;display:inline-block}
.arch{position:relative;width:min(100%,680px);height:240px;margin:0 auto;isolation:isolate}
.arch:before{display:none}
.upper-arch:before{top:-62px}
.lower-arch:before{top:22px}
.lower-heading{margin-top:3px}
.tooth{position:absolute;z-index:1;width:var(--tooth-width);height:var(--tooth-height);padding:0;border:1px solid #cfdbd2;border-radius:50%;background:#fff;color:#596c61;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transform:translate(-50%,-50%) rotate(var(--tilt));cursor:pointer;box-shadow:0 2px 4px #20392d0c;transition:background .15s,border-color .15s,box-shadow .15s}
.tooth:hover{transform:translate(-50%,-50%) rotate(var(--tilt));border-color:#9b78a7}
.tooth.selected{background:#32745f;border-color:#32745f;color:#fff;box-shadow:0 2px 6px #32745f35}
.tooth .shape{width:12px;height:17px;border:1px solid currentColor;border-radius:49% 49% 37% 37%;opacity:.66}
.tooth .num{font-size:9px;font-weight:700;line-height:1;transform:rotate(calc(var(--tilt)*-1))}
.arch-panel{overflow:hidden}
.input-suffix input::-webkit-inner-spin-button,.input-suffix input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.tooth{width:var(--tooth-width);height:var(--tooth-height);border-color:transparent;border-radius:0;background:transparent;box-shadow:none}
.tooth:hover{background:transparent;box-shadow:none}
.tooth.selected{background:transparent;border-color:transparent;box-shadow:none;color:#32745f}
.tooth-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tooth-svg path{fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.tooth-svg .tooth-outline{fill:#fff;stroke:#748078;stroke-width:1.8}
.tooth.selected .tooth-svg .tooth-outline{fill:#e4f1e8;stroke:#32745f;stroke-width:2.3}
.tooth .num{position:absolute;z-index:1;bottom:-2px;padding:1px 2px;border-radius:3px;background:#fff;color:#53645a;font-size:8px;line-height:1;box-shadow:0 0 2px #fff}
.tooth.selected .num{background:#e4f1e8;color:#245d4b}
.clasp-geometry{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible;pointer-events:none}
.clasp-wire{fill:none;stroke:#202521;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 1px #fff)}
.clasp-ball{fill:#fff;stroke:#202521;stroke-width:2.2;filter:drop-shadow(0 1px 1px #26352d70)}
.clasp-geometry .clasp-draggable{pointer-events:all;cursor:grab;touch-action:none}
.clasp-geometry .clasp-draggable.dragging{cursor:grabbing}
.clasp-drag-hit{pointer-events:all}
.clasp-status-row{display:flex;align-items:flex-start;gap:8px}
.clasp-status-row .clasp-status{flex:1}
.clasp-status-row .text-button{margin-top:2px;padding:3px 5px;white-space:nowrap;font-size:10px}
.clasp-joint{fill:#202521;stroke:#fff;stroke-width:1.3}
.retention-wire-svg,.clear-bow-svg{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible;pointer-events:none}
.retention-wire{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #fff)}
.hawley-wire{stroke:#56156f}
.lingual-retainer-wire{stroke:#287d8c;stroke-width:4}
.clear-bow-path{fill:none;stroke:#ef3434;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #fff)}
.lower-clear-acrylic-band{fill:none;stroke:#ef3434;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #fff)}
.occlusal-rest-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:4}
.clear-bow-stop{fill:#287ec1;stroke:#fff;stroke-width:2}
.clear-bow-row{display:flex;align-items:center;flex-wrap:wrap;gap:11px 17px;border-top:1px solid #e9eeeb;margin-top:12px;padding-top:11px;color:#596b61;font-size:11px}
.clear-bow-row strong{font-size:11px;color:var(--ink)}
.clear-bow-row label{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:500;cursor:pointer}
.clear-bow-row input{accent-color:#327ec1;margin:0}
.tooth-chart{position:relative;width:min(100%,481px);margin:0 auto;display:grid;gap:10px;isolation:isolate;background:#fff}
.arch-view{position:relative;width:100%;aspect-ratio:481/372;overflow:hidden;background:#fff}
.arch-view.lower-view{aspect-ratio:842/634}
.arch-reference-image{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0;pointer-events:none;user-select:none}
.lower-reference-image{transform:rotate(180deg)}
.diagram-icon-mask,.lower-label-mask,.lower-icon-mask{position:absolute;z-index:1;background:#fff;pointer-events:none}
.ap-icon svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.clasp-row.labial-bow-option{min-height:58px}
.clasp-row .labial-name{display:flex;align-items:center;padding-left:12px}
.labial-arch-options{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:5px 8px}
.labial-arch-options label{display:flex;align-items:center;gap:5px;font-size:9px;line-height:1.2;font-weight:500;cursor:pointer;color:#52635c}
.clasp-row.labial-bow-option .labial-arch-options input{flex:0 0 14px;width:14px;height:14px;margin:0;accent-color:var(--green)}
.labial-arch-options>.labial-bow-check{align-self:center;margin-bottom:2px!important}
.transfer-actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:14px}
.transfer-link{display:inline-flex;align-items:center;text-decoration:none}
.transfer-link span{margin-left:12px}
.transfer-actions>span{flex:1 1 100%;color:#78867f;font-size:10px;line-height:1.5}
.diagram-icon-mask{right:4%;top:3%;width:10%;height:13%}
.lower-label-mask{left:0;right:0;top:0;height:16%}
.lower-icon-mask{left:4%;bottom:4%;width:9%;height:10%}
.lower-arch-labels{position:absolute;z-index:3;left:5%;right:5%;top:5%;display:flex;justify-content:space-between;align-items:center;color:#6d736f;font-size:13px;letter-spacing:1px;pointer-events:none}
.lower-arch-labels b{font-size:13px}
.tooth-chart .tooth{position:absolute;z-index:2;padding:0;border:1px solid transparent;border-radius:0;background:transparent;box-shadow:none;transform:none;clip-path:polygon(var(--tooth-outline));cursor:pointer;transition:background .12s,border-color .12s,box-shadow .12s}
.tooth-chart .tooth:hover{border-color:transparent;background:#32745f35;box-shadow:none;transform:none}
.tooth-chart .tooth.selected{border-color:transparent;background:#32745f70;box-shadow:none;transform:none}
.tooth-chart .tooth:focus-visible{outline:3px solid #287d8c;outline-offset:1px}
.tooth-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tooth-svg path{fill:none;stroke:#707a72;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tooth-svg .tooth-outline{fill:#fff;stroke-width:2}
.tooth.selected .tooth-svg .tooth-outline{fill:#dcefe3;stroke:#32745f;stroke-width:2.8}
.tooth-chart .tooth.selected{animation:tooth-selection-flash .65s ease-out forwards}
.tooth-chart .tooth.selected .tooth-svg .tooth-outline{animation:tooth-outline-flash .65s ease-out forwards}
.tooth-chart .tooth:hover{background:transparent}
@keyframes tooth-selection-flash{from{background:#32745f70}to{background:transparent}}
@keyframes tooth-outline-flash{from{fill:#dcefe3;stroke:#32745f;stroke-width:2.8}to{fill:#fff;stroke:#707a72;stroke-width:2}}
@media(prefers-reduced-motion:reduce){.tooth-chart .tooth.selected{animation:none;background:transparent}.tooth-chart .tooth.selected .tooth-svg .tooth-outline{animation:none;fill:#fff;stroke:#707a72;stroke-width:2}}
.tooth-chart .clasp-badges{top:-4px;right:-4px;z-index:5}
.tooth-chart .clasp-badges{right:auto;z-index:6;transform:translate(0,-50%);pointer-events:none}
.tooth-chart .clasp-badges{transform:rotate(calc(-1 * var(--tooth-angle)))}
.arch-view .clasp-geometry,.arch-view .retention-wire-svg,.arch-view .clear-bow-svg,.arch-view .retention-plate-svg,.arch-view .retention-components-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.tooth-chart .clasp-geometry{z-index:4}
.tooth-chart .retention-wire-svg,.tooth-chart .clear-bow-svg{z-index:3}
.tooth-chart .clear-bow-path{stroke-width:6}
.retention-options[hidden]{display:none}
.retention-options{border-top:1px solid #e9eeeb;margin-top:12px;padding-top:12px}
.retention-help{margin:8px 0 0;color:#78867f;font-size:10px;line-height:1.5}
.retention-badge{background:#b64d68}
.retention-plate-svg{z-index:1}
.retention-components-svg{z-index:4}
.retention-plate{fill:#e5798a55;stroke:#be596a;stroke-width:2;stroke-linejoin:round}
.retention-mark path{fill:none;stroke:#202521;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 1px #fff)}
.retention-mark-dot{fill:#b64d68;stroke:#fff;stroke-width:1.5}
@media(max-width:650px){
  .brand-logo{width:130px}
  .brand{gap:8px;font-size:8px;letter-spacing:.8px}
  .brand>span{padding-left:8px}
  .clasp-panel{padding:12px 10px}
  .fixed-panel{padding:12px 10px}
  .fixed-placement-row{grid-template-columns:1fr;gap:5px}
  .clasp-title{display:block}
  .clasp-hint{display:block;margin-top:5px}
  .clasp-table-head,.clasp-row{grid-template-columns:minmax(0,1fr) 76px 76px}
  .clasp-table-head{font-size:8px;letter-spacing:.4px}
  .clasp-row{font-size:10px;min-height:32px}
  .clasp-row>span:first-child,.clasp-table-head span:first-child{padding-left:8px}
  .clasp-row .labial-name{padding-left:8px}
  .labial-arch-options{padding:4px 3px}
  .labial-arch-options label{font-size:8px;gap:3px}
  .clasp-row.other-clasp{grid-template-columns:minmax(0,1fr) 30px 30px minmax(92px,115px)}
  .clasp-row.other-clasp input[type=text]{margin-right:4px;font-size:10px;padding:4px}
  .active-clasp-select{align-items:flex-start;flex-direction:column;gap:5px}
  .active-clasp-select select{width:100%;max-width:none}
  .labial-bow-row{gap:9px 12px}
  .steps{flex-wrap:wrap;gap:10px 14px}
  .steps i{display:none}
  .steps .step{flex:0 0 calc(50% - 7px)}
  .tooth-chart .tooth{min-width:16px;min-height:18px;border-width:1.5px}
  .upper-arch:before{top:-69px;height:178px}
  .lower-arch:before{top:17px;height:178px}
  .secure-note{font-size:0}
}

#customApplianceLabel[hidden]{display:none}