/* ============ SPT Karar Destek — stiller + temalar ============ */
:root, html[data-theme="teal"]{
  --paper:#E9EEEC; --panel:#FFFFFF; --ink:#15201F; --muted:#5C6B69; --line:#D5DDDA;
  --canvas:#0C1416; --canvas2:#10201F; --accent:#0C7C84; --accent2:#15A2A8;
  --pos:#C0432B; --pos-bg:#FBEAE4; --pos-line:#E7B6A8; --valid:#2C7B57; --valid-bg:#E3F1E9;
  --measure:#57E6C6; --coin:#F2C14E;
  --header-bg:rgba(255,255,255,.72); --tag-bg:#16302E; --tag-fg:#9FE9DF;
  --row-alt:#F6F9F8; --row-line:#EEF2F0; --chip-neg-bg:#EAEFED; --chip-neg-fg:#5C6B69; --input-bg:#F8FAF9;
}
html[data-theme="night"]{
  --paper:#0C1416; --panel:#101A1B; --ink:#E6F0EE; --muted:#8AA09C; --line:#21302F;
  --canvas:#070D0E; --canvas2:#0C1718; --accent:#15A2A8; --accent2:#27C2C2;
  --pos:#E5654B; --pos-bg:#2A1714; --pos-line:#5A2B22; --valid:#48B07E; --valid-bg:#0F2A20;
  --measure:#57E6C6; --coin:#F2C14E;
  --header-bg:rgba(16,26,27,.82); --tag-bg:#16302E; --tag-fg:#9FE9DF;
  --row-alt:#0E1A1A; --row-line:#1B2827; --chip-neg-bg:#1B2827; --chip-neg-fg:#8AA09C; --input-bg:#0C1718;
}
html[data-theme="vivid"]{
  --paper:#F3F0FC; --panel:#FFFFFF; --ink:#1E1633; --muted:#6B6388; --line:#E2DAF3;
  --canvas:#140C26; --canvas2:#1E1140; --accent:#6938EF; --accent2:#D6409F;
  --pos:#E5484D; --pos-bg:#FCE7E9; --pos-line:#F0B7BA; --valid:#2FA866; --valid-bg:#E4F5EC;
  --measure:#36E0C4; --coin:#FFC53D;
  --header-bg:rgba(255,255,255,.74); --tag-bg:#2A1A52; --tag-fg:#C9B6FF;
  --row-alt:#F7F4FE; --row-line:#EFEAFB; --chip-neg-bg:#EEEAF8; --chip-neg-fg:#6B6388; --input-bg:#F8F6FE;
}
html[data-theme="plain-light"]{
  --paper:#F6F6F5; --panel:#FFFFFF; --ink:#1A1A1A; --muted:#6B6B6B; --line:#E4E4E2;
  --canvas:#15161A; --canvas2:#1E2026; --accent:#37607A; --accent2:#4A7B96;
  --pos:#B23A2E; --pos-bg:#F6E9E7; --pos-line:#E2C2BC; --valid:#3A7D55; --valid-bg:#E9F1EC;
  --measure:#5BD0BE; --coin:#E8B23E;
  --header-bg:rgba(255,255,255,.82); --tag-bg:#2B2B2B; --tag-fg:#ECECEC;
  --row-alt:#F7F7F6; --row-line:#EDEDEC; --chip-neg-bg:#ECECEA; --chip-neg-fg:#6B6B6B; --input-bg:#F7F7F6;
}
html[data-theme="plain-dark"]{
  --paper:#161616; --panel:#1E1E1E; --ink:#EAEAEA; --muted:#9A9A9A; --line:#2C2C2C;
  --canvas:#0C0C0C; --canvas2:#161616; --accent:#7FA9BF; --accent2:#94BBCF;
  --pos:#E0705C; --pos-bg:#2A1815; --pos-line:#4A2820; --valid:#5BB387; --valid-bg:#13251D;
  --measure:#5BD0BE; --coin:#E8B23E;
  --header-bg:rgba(30,30,30,.84); --tag-bg:#2A2A2A; --tag-fg:#D6D6D6;
  --row-alt:#1A1A1A; --row-line:#272727; --chip-neg-bg:#272727; --chip-neg-fg:#9A9A9A; --input-bg:#161616;
}

:root{
  --sans:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;
  --serif:"IBM Plex Serif", Georgia, serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  background-image:
    radial-gradient(circle at 18% -10%, color-mix(in srgb, var(--accent2) 12%, transparent), transparent 42%),
    radial-gradient(circle at 110% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 46%);
  -webkit-font-smoothing:antialiased; overflow:hidden;
  transition:background-color .25s, color .25s;
}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- top bar ---------- */
header{height:62px; display:flex; align-items:center; gap:16px; padding:0 20px;
  background:var(--header-bg); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.logo{display:flex; align-items:center; gap:12px}
.mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--accent),var(--accent2));
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.4)}
.mark svg{width:20px;height:20px}
.title b{font-family:var(--serif); font-weight:600; font-size:16px; letter-spacing:.2px; display:block; line-height:1.05}
.title span{font-size:11px; color:var(--muted); letter-spacing:.6px; text-transform:uppercase}
.tabs{display:flex; gap:4px; background:color-mix(in srgb,var(--ink) 7%, transparent); padding:3px; border-radius:9px}
.tab{border:none; background:transparent; color:var(--muted); font-family:var(--sans); font-size:12.5px;
  font-weight:600; padding:6px 14px; border-radius:7px; cursor:pointer}
.tab.active{background:var(--panel); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12)}
.annmodes{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px}
.annmodes .mc-cap{width:100%}
/* fırça (boyama) kontrolleri */
.brushctl{margin-bottom:8px}
.brush-size{display:flex; align-items:center; gap:8px; font-size:11.5px; margin-bottom:8px; color:var(--muted)}
.brush-size input[type=range]{flex:1; accent-color:var(--measure)}
.brush-size span{min-width:22px; text-align:right; color:var(--ink)}
.brush-btns{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px}
.brush-btns .brush-save{background:var(--measure); color:#08201C; border-color:var(--measure); font-weight:600}
#brush-erase.active{background:var(--coin); color:#1a1206; border-color:var(--coin); font-weight:600}
/* boyama tuvali: JS ile letterbox kutusuna konumlanır, sadece boyama modunda görünür */
#paintcv{position:absolute; pointer-events:none; display:none; border-radius:2px}
.spacer{flex:1}
.pill{font-family:var(--mono); font-size:11px; color:var(--accent); border:1px solid var(--accent);
  border-radius:999px; padding:4px 11px; background:color-mix(in srgb,var(--accent) 8%, transparent); letter-spacing:.3px}
.themesel{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted)}
.themesel select{font-family:var(--sans); font-size:12.5px; padding:6px 9px; border-radius:8px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer}
.user{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}
.user b{color:var(--ink); font-weight:600}
.rolechip{font-size:10px; font-weight:600; padding:3px 8px; border-radius:999px; background:var(--tag-bg); color:var(--tag-fg); letter-spacing:.4px; text-transform:uppercase}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--tag-bg);color:var(--tag-fg);
  display:grid;place-items:center;font-size:12px;font-weight:600;font-family:var(--mono)}
.logout{border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:8px;
  padding:7px 11px; font-size:12px; cursor:pointer; display:flex; align-items:center; gap:6px}
.logout:hover{color:var(--pos); border-color:var(--pos-line)}
.logout svg{width:14px;height:14px}

/* ---------- layout ---------- */
main{height:calc(100% - 62px); display:grid; grid-template-columns:1.62fr 1fr}
.viewer{position:relative; background:radial-gradient(circle at 50% 35%, var(--canvas2), var(--canvas) 70%);
  overflow:hidden; border-right:1px solid var(--line)}
.viewer .grid{position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(87,230,198,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(87,230,198,.05) 1px,transparent 1px); background-size:40px 40px}
.stage{position:absolute; inset:54px 30px 30px 30px; display:grid; place-items:center}
/* imgwrap fills the stage; the image is contained (letterboxed) inside it so the
   bitmap, the overlay SVGs (inset:0) and click->natural mapping all share one box. */
.imgwrap{position:relative; width:100%; height:100%; border-radius:10px; overflow:hidden}
.imgwrap img{display:block; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 18px 50px rgba(0,0,0,.5))}
.imgwrap svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
#iov.measuring{pointer-events:auto}
body.etiket #iov{pointer-events:auto; cursor:crosshair}
#iov.editing{pointer-events:auto; cursor:grab}
#iov.editing:active{cursor:grabbing}

.vtools{position:absolute; top:16px; left:18px; display:flex; gap:8px; z-index:3}
.vtool{font-size:12px; color:#CFE9E4; background:rgba(8,20,20,.66); border:1px solid rgba(87,230,198,.22);
  padding:7px 12px; border-radius:8px; display:flex; align-items:center; gap:7px; cursor:pointer; backdrop-filter:blur(6px)}
.vtool.active{border-color:var(--measure); color:#0C1416; background:var(--measure)}
.vtool svg{width:14px;height:14px}
.scalebadge{position:absolute; right:18px; top:16px; z-index:3; background:rgba(8,20,20,.7);
  border:1px solid rgba(242,193,78,.4); border-radius:9px; padding:9px 13px; color:#F4E2B5; backdrop-filter:blur(6px); text-align:right}
.scalebadge .k{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:#C7B88E}
.scalebadge .v{font-family:var(--mono); font-size:15px; color:var(--coin); font-weight:500}
.hint{position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:3; font-size:11.5px;
  color:#9FB7B3; background:rgba(8,20,20,.6); padding:6px 13px; border-radius:999px; border:1px solid rgba(87,230,198,.16)}

/* measurement console */
.mconsole{position:absolute; left:18px; bottom:46px; z-index:4; width:268px; background:rgba(8,20,20,.82);
  border:1px solid rgba(87,230,198,.28); border-radius:12px; padding:13px 14px; backdrop-filter:blur(8px);
  color:#D8F1EC; box-shadow:0 14px 40px rgba(0,0,0,.5)}
.mc-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:9px}
.mc-title{font-size:12px; font-weight:600; letter-spacing:.3px; color:#9FF0DC}
.mc-scale{font-size:11px; color:var(--coin)}
.mconsole select{width:100%; padding:8px 9px; border-radius:8px; font-family:var(--sans); font-size:12.5px;
  border:1px solid rgba(87,230,198,.25); background:#0C1C1A; color:#D8F1EC; margin-bottom:9px}
.mc-dia{display:grid; grid-template-columns:auto 1fr; gap:7px 10px; align-items:center; margin-bottom:10px}
.mc-cap{font-size:11.5px; padding:6px 10px; border-radius:7px; cursor:pointer; border:1px solid rgba(87,230,198,.3);
  background:transparent; color:#9FF0DC; font-family:var(--sans)}
.mc-cap.active{background:var(--measure); color:#08201C; border-color:var(--measure); font-weight:600}
.mc-dia .mono{font-size:13px; color:#fff}
.mc-save{width:100%; padding:9px; border:none; border-radius:8px; cursor:pointer;
  background:linear-gradient(150deg,var(--accent),var(--accent2)); color:#fff; font-weight:600; font-family:var(--sans); font-size:12.5px}
.mc-status{font-size:11px; color:#86A6A0; margin-top:8px; line-height:1.35}

/* panel */
.panel{background:var(--panel); overflow-y:auto; display:flex; flex-direction:column}
.phead{padding:18px 22px 14px; border-bottom:1px solid var(--line)}
.ptop{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.pno{font-family:var(--mono); font-size:23px; font-weight:600; letter-spacing:.5px; color:var(--ink)}
.pno small{display:block;font-family:var(--sans);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;font-weight:600;margin-bottom:2px}
.armtag{font-family:var(--mono); font-size:12px; padding:5px 11px; border-radius:7px; background:var(--tag-bg); color:var(--tag-fg); font-weight:500}
.meta{display:flex; gap:18px; margin-top:12px; flex-wrap:wrap}
.meta div{font-size:12px;color:var(--muted)}
.meta b{display:block; color:var(--ink); font-weight:500; font-size:12.5px; margin-top:1px}

.verdict{margin:14px 22px 4px; border-radius:11px; padding:13px 15px; display:flex; gap:12px; align-items:center}
.verdict.ok{background:var(--valid-bg); border:1px solid color-mix(in srgb,var(--valid) 35%, transparent)}
.verdict.bad{background:var(--pos-bg); border:1px solid var(--pos-line)}
.vico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}
.verdict.ok .vico{background:var(--valid);color:#fff}
.verdict.bad .vico{background:var(--pos);color:#fff}
.verdict .vt{font-weight:600;font-size:13.5px}
.verdict .vs{font-size:11.5px;color:var(--muted);margin-top:1px}
.verdict .vs b{color:var(--ink)}

.counts{display:flex; gap:10px; padding:14px 22px 6px}
.stat{flex:1; border:1px solid var(--line); border-radius:10px; padding:11px 13px}
.stat .n{font-family:var(--mono); font-size:22px; font-weight:600; line-height:1}
.stat .l{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:5px}
.stat.pos .n{color:var(--pos)} .stat.neg .n{color:var(--muted)} .stat.histo .n{color:var(--valid)}

.tablewrap{padding:8px 14px 14px; flex:1}
table{width:100%; border-collapse:collapse; font-size:12.5px}
thead th{font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); text-align:left;
  padding:8px 8px; border-bottom:1px solid var(--line); font-weight:600}
thead th.r,tbody td.r{text-align:right}
tbody td{padding:7px 8px; border-bottom:1px solid var(--row-line); color:var(--ink)}
tbody tr.ctrl{background:var(--row-alt)}
tbody tr.pos{background:linear-gradient(90deg,var(--pos-bg),transparent 85%)}
.sira{font-family:var(--mono); color:var(--muted); font-size:11px}
.dia{font-family:var(--mono); font-weight:500}
.chip{font-size:10.5px; font-weight:600; padding:3px 9px; border-radius:999px; letter-spacing:.3px}
.chip.p{background:var(--pos); color:#fff}
.chip.n{background:var(--chip-neg-bg); color:var(--chip-neg-fg)}
.chip.c{background:var(--tag-bg); color:var(--tag-fg)}

.pfoot{padding:14px 22px 20px; border-top:1px solid var(--line); display:flex; gap:10px}
.btn{flex:1; border:none; border-radius:10px; padding:12px; font-family:var(--sans); font-size:13px; font-weight:600;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px}
.btn.primary{background:linear-gradient(150deg,var(--accent),var(--accent2)); color:#fff;
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%, transparent)}
.btn.ghost{background:var(--panel); color:var(--ink); border:1px solid var(--line); flex:none; width:46px}
.btn svg{width:16px;height:16px}

/* read-only role: hide write actions */
body.readonly .vtools, body.readonly .mconsole, body.readonly .pfoot{display:none}

/* ---------- login / register ---------- */
#auth{position:fixed; inset:0; z-index:50; display:grid; place-items:center;
  background:radial-gradient(circle at 30% 20%, color-mix(in srgb,var(--accent) 55%, #08110F), #08110F)}
#auth.hidden{display:none}
.card{width:372px; background:color-mix(in srgb,var(--panel) 96%, transparent); border-radius:18px;
  padding:30px 30px 26px; box-shadow:0 30px 80px rgba(0,0,0,.5)}
.card .mark{width:46px;height:46px;margin-bottom:16px}
.card h1{font-family:var(--serif); font-size:21px; font-weight:600; margin-bottom:3px; color:var(--ink)}
.card p{font-size:12.5px; color:var(--muted); margin-bottom:20px}
.field{margin-bottom:13px}
.field label{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:600}
.field input{width:100%; margin-top:6px; padding:11px 13px; border:1px solid var(--line); border-radius:10px;
  font-family:var(--mono); font-size:13px; background:var(--input-bg); color:var(--ink)}
.field input:focus{outline:none; border-color:var(--accent)}
#auth .btn{width:100%; margin-top:8px}
.swap{font-size:12.5px; color:var(--muted); margin-top:14px; text-align:center}
.swap a{color:var(--accent); cursor:pointer; font-weight:600}
.err{font-size:12px;color:var(--pos);margin-top:8px;min-height:16px}
.hide{display:none}

/* admin overlay */
#admin{position:fixed; inset:0; z-index:55; display:grid; place-items:center;
  background:rgba(8,16,16,.6); backdrop-filter:blur(3px)}
#admin.hidden{display:none}
#admin table{margin-top:4px}
#admin select{font-family:var(--sans); font-size:12.5px; padding:5px 8px; border-radius:7px;
  border:1px solid var(--line); background:var(--input-bg); color:var(--ink); cursor:pointer}