:root{
  --letter-green:#1fb04a;
  --letter-red:#ff4d4d;

  --field-bg:rgba(0,0,0,0.18);
  --field-text:var(--text);
  --field-line:var(--line);

  --bg:#0b1220;
  --panel:#101a2f;
  --panel2:#0f1a33;
  --text:#e9eefc;
  --muted:#a9b6d8;
  --line:rgba(255,255,255,0.12);
  --accent:#6aa6ff;
  --danger:#ff6a6a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 25% 0%, rgba(106,166,255,0.18), transparent 60%),
              radial-gradient(900px 700px at 75% 10%, rgba(255,106,106,0.10), transparent 55%),
              var(--bg);
  color:var(--text);
}
a{color:var(--accent)}
header{
  position:sticky; top:0; z-index:10;
  background: rgba(11,18,32,0.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  gap:12px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  min-width:220px;
}
.brand img{width:34px; height:34px; border-radius:8px; object-fit:cover}
.brand .title{font-weight:700}
.brand .sub{font-size:12px; color:var(--muted)}
.actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,0.06);
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
}
.btn.small{padding:6px 8px; border-radius:9px; font-size:12px}
.btn.primary{background:rgba(106,166,255,0.20); border-color:rgba(106,166,255,0.55)}
.btn.danger{background:rgba(255,106,106,0.18); border-color:rgba(255,106,106,0.55)}
.btn:disabled{opacity:0.6; cursor:not-allowed}
.container{max-width:1200px; margin:0 auto; padding:16px}
.tabs{
  display:flex; gap:8px; flex-wrap:wrap;
  padding:0 16px 12px;
}
.tab{
  border:1px solid var(--line);
  background:rgba(255,255,255,0.05);
  color:var(--text);
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
}
.tab.active{background:rgba(106,166,255,0.22); border-color:rgba(106,166,255,0.55)}
.panel{display:none}
.panel.active{display:block}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  margin-bottom:14px;
}
.grid{display:grid; gap:12px}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
@media (max-width: 860px){
  .grid2,.grid3{grid-template-columns:1fr}
  .brand{min-width:auto}
  .actions{justify-content:flex-start}
}
.field label{display:block; font-size:12px; color:var(--muted); margin:0 0 6px}
/* Form controls: ensure readable contrast across themes */
input[type="text"], input[type="date"], select, textarea{
  width:100%;
  border:1px solid var(--field-line);
  background-color:var(--field-bg) !important;
  color:var(--field-text) !important;
  padding:10px;
  border-radius:12px;
  outline:none;
}

/* Improve consistency of native form control theming */
html[data-theme="dark"], body[data-theme="dark"], html[data-theme="contrast"], html[data-theme="contrast"], body[data-theme="contrast"]{ color-scheme: dark; }
html[data-theme="light"], html[data-theme="light"], body[data-theme="light"]{ color-scheme: light; }

input::placeholder, textarea::placeholder{ color: var(--muted); opacity: 0.9; }

/* Make selects styleable (without breaking button-like selects) */
select:not(.btn){
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(1em + 2px),
    calc(100% - 13px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  padding-right: 2.2em;
}

input:focus, textarea:focus, select:focus{
  border-color: rgba(106,166,255,0.75);
  box-shadow: 0 0 0 3px rgba(106,166,255,0.18);
}
textarea{resize:vertical}
.inline{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.check{display:flex; gap:8px; align-items:center; color:var(--text)}
hr{border:none; border-top:1px solid var(--line); margin:14px 0}
.hint{color:var(--muted); font-size:13px}
.combo2{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
@media (max-width: 860px){ .combo2{grid-template-columns:1fr} }

#toothGrid{
  display:grid;
  grid-template-columns:repeat(8, minmax(0,1fr));
  gap:8px;
}
@media (max-width: 860px){
  #toothGrid{grid-template-columns:repeat(4, minmax(0,1fr))}
}
.tooth{
  border:1px solid var(--line);
  background:rgba(255,255,255,0.04);
  border-radius:14px;
  padding:10px;
  cursor:pointer;
  user-select:none;
  text-align:center;
}
.tooth.selected{
  background:rgba(106,166,255,0.18);
  border-color:rgba(106,166,255,0.55);
}
.tlabel{font-weight:800}
.tsub{font-size:11px; color:var(--muted); margin-top:4px}
.pertooth{border:1px solid var(--line); border-radius:16px; padding:12px; background:rgba(0,0,0,0.14); margin:12px 0}
.pertooth-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.pertooth-title{font-weight:800}
.pertooth-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width: 980px){ .pertooth-grid{grid-template-columns:1fr} }

.toolbar{display:flex; gap:8px; flex-wrap:wrap}
#dropZone{
  border:2px dashed rgba(255,255,255,0.22);
  border-radius:16px;
  padding:14px;
  text-align:center;
  background:rgba(255,255,255,0.03);
}
#dropZone.drag{background:rgba(106,166,255,0.12); border-color:rgba(106,166,255,0.55)}
canvas{
  width:100%;
  max-width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(0,0,0,0.18);
}

#splash{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(900px 700px at 50% 20%, rgba(106,166,255,0.25), transparent 60%), rgba(11,18,32,0.96);
  transition: opacity .35s ease, visibility .35s ease;
}
#splash.hidden{opacity:0; visibility:hidden}
.splash-card{
  text-align:center;
  padding:22px;
  border-radius:22px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.06);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  max-width:520px;
}
.splash-card img{width:260px; max-width:80vw; border-radius:18px; border:1px solid rgba(255,255,255,0.18)}
.splash-card .h{font-weight:900; font-size:18px; margin-top:14px}
.splash-card .p{color:var(--muted); margin-top:6px}

@media print{
  header, .tabs, .actions, .btn, #splash{display:none !important}
  body{background:#fff; color:#000}
  .card{box-shadow:none; border:1px solid #ccc; background:#fff}
  input, textarea, select{border:1px solid #ccc; background:#fff; color:#000}
}


/* Themes */
html[data-theme="dark"], body[data-theme="dark"]{
  --bg:#0b1220;
  --panel:#101a2f;
  --panel2:#0f1a33;
  --text:#e9eefc;
  --muted:#a9b6d8;
  --line:rgba(255,255,255,0.12);
  --accent:#6aa6ff;
  --danger:#ff6a6a;
  --field-bg:rgba(0,0,0,0.18);
  --field-text:var(--text);
  --field-line:var(--line);
}

html[data-theme="light"], body[data-theme="light"]{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel2:#ffffff;
  --text:#0b1220;
  --muted:#425171;
  --line:rgba(0,0,0,0.12);
  --accent:#1f6feb;
  --danger:#b42318;
  --field-bg:rgba(0,0,0,0.04);
  --field-text:var(--text);
  --field-line:var(--line);
}

html[data-theme="contrast"], body[data-theme="contrast"]{
  --bg:#000000;
  --panel:#0b0b0b;
  --panel2:#0b0b0b;
  --text:#ffffff;
  --muted:#d0d0d0;
  --line:rgba(255,255,255,0.30);
  --accent:#00d4ff;
  --danger:#ff4d4d;
  --field-bg:#000000;
  --field-text:#ffffff;
  --field-line:rgba(255,255,255,0.40);
}

/* Option list colours are browser-dependent; force where possible */
select option, select optgroup{
  background-color: var(--panel) !important;
  color: var(--text) !important;
}




/* Radiograph thumbnails */
.thumbs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.thumb{
  width:88px;
  height:60px;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background: rgba(0,0,0,0.12);
  cursor:pointer;
  position:relative;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.thumb.active{
  outline:3px solid rgba(106,166,255,0.55);
  border-color: rgba(106,166,255,0.75);
}
.thumb .badge{
  position:absolute;
  right:6px;
  top:6px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size:11px;
  padding:2px 6px;
  border-radius:999px;
}


/* Modal */
.modal{
  position:fixed; inset:0;
  display:none;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.modal.show{ display:flex; }
.modal-card{
  width:min(860px, 100%);
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  overflow:hidden;
}
.modal-head{ padding:16px 16px 10px; border-bottom:1px solid var(--line); }
.modal-title{ font-weight:900; font-size:18px; }
.modal-body{ padding:16px; }
.modal-actions{
  display:flex; gap:10px; justify-content:flex-end;
  padding:12px 16px; border-top:1px solid var(--line);
}

/* Output styling */
#out_letter, #out_patient, #out_notes, #g_output, #x_interp{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
#out_letter, #out_patient, #out_notes, #g_output, #x_interp{
  color: var(--letter-green) !important;
}


/* Treatment tables */
.tbl{width:100%; border-collapse:collapse; margin-top:8px;}
.tbl th,.tbl td{border:1px solid var(--line); padding:6px; font-size:12px; vertical-align:top;}
.tbl th{background:rgba(255,255,255,0.06); text-align:left;}
.tbl input{width:100%;}
.card.sub{margin-top:12px;}
.subhead{font-weight:800; margin:2px 0 10px; color:var(--green);}