:root{
  --bg:#f3f4f6; --panel:#ffffff; --text:#111827; --muted:#6b7280;
  --border:#d1d5db; --accent:#2563eb; --danger:#b91c1c;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select{font:inherit}
button{border:1px solid var(--border);background:white;border-radius:10px;padding:10px 13px;min-height:42px}
button:active{transform:translateY(1px)}
.topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#111827;color:white;padding-top:max(10px,env(safe-area-inset-top))}
.topbar h1{font-size:19px;margin:0}
.sub{font-size:12px;opacity:.75}
main{max-width:1500px;margin:0 auto}
.panel{background:var(--panel);border-bottom:1px solid var(--border);padding:10px 12px}
.controls{position:sticky;top:61px;z-index:20}
.row{display:flex;align-items:center;gap:8px}
.wrap{flex-wrap:wrap}
.compact{margin-top:8px}
.fileBtn{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:white;border-radius:10px;padding:10px 14px;min-height:42px;font-weight:600}
.fileBtn input{display:none}
.toolgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.tool.active{background:var(--accent);color:white;border-color:var(--accent)}
label{display:flex;gap:6px;align-items:center;font-size:14px}
input,select{border:1px solid var(--border);border-radius:8px;padding:8px;background:white;max-width:190px}
.status{font-size:13px;color:var(--muted);margin-top:8px}
.viewerShell{background:#374151;min-height:45vh;overflow:auto}
.viewer{position:relative;margin:0 auto;touch-action:none;transform-origin:0 0}
canvas{display:block;position:absolute;left:0;top:0}
#overlayCanvas{z-index:5}
.summary{padding-bottom:max(18px,env(safe-area-inset-bottom))}
.summaryHead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.summary h2{margin:4px 0;font-size:18px}
.projectRow{margin:10px 0}
.projectRow input{min-width:260px}
.tableWrap{overflow:auto;border:1px solid var(--border);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:9px;border-bottom:1px solid #e5e7eb;text-align:left;white-space:nowrap}
th{background:#f9fafb}
.hidden{display:none!important}
dialog{border:none;border-radius:14px;max-width:360px;width:calc(100% - 30px);padding:18px}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog form{display:grid;gap:12px}
menu{display:flex;justify-content:flex-end;gap:8px;padding:0;margin:4px 0 0}
.deleteBtn{color:var(--danger);padding:5px 8px;min-height:auto}
@media(min-width:900px){
  main{display:grid;grid-template-columns:minmax(650px,1fr) 390px;grid-template-rows:auto 1fr}
  .controls{grid-column:1;top:61px}
  .viewerShell{grid-column:1;min-height:calc(100vh - 210px)}
  .summary{grid-column:2;grid-row:1 / span 2;border-left:1px solid var(--border);border-bottom:none}
}