:root{--bg:#0b0d10;--panel:#11151a;--muted:#98a2b3;--ink:#e5e7eb;--accent:#2bdc8d;--warn:#ef4444}
*{box-sizing:border-box}
html, body { height:100%; overflow:hidden; }
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
.app{display:grid;grid-template-columns:var(--side, 500px) 6px 1fr;height:100vh}
aside{background:var(--panel);border-right:1px solid #23272f;padding:14px 16px;display:flex;flex-direction:column;gap:12px;overflow:auto}
h1{font-size:18px;margin:2px 0 6px}
h2{font-size:15px;margin:2px 0 6px;color:#d1d5db}
label{font-size:12px;color:var(--muted)}
.card{background:#0f1318;border:1px solid #1b2028;border-radius:16px;padding:12px}
.row{display:flex;gap:10px;flex-wrap:wrap}
input[type="file"],select,button,textarea,input[type="number"],input[type="text"],input[type="date"],input[type="color"]{background:#0b0f14;color:var(--ink);border:1px solid #1b2028;border-radius:12px;padding:10px 12px;font-size:14px;width:100%}
textarea{min-height:90px;resize:vertical}
button{cursor:pointer}
button.primary{background:linear-gradient(135deg,#1cc37e,#0ca86a);border:0}
button.ghost{background:transparent}
small.muted{color:var(--muted);display:block;margin-top:6px}
.legend{max-height:200px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.badge{display:inline-flex;align-items:center;gap:8px}
.dot{width:12px;height:12px;border-radius:50%}
.warn{color:var(--warn)}
main{display:grid;grid-template-rows:auto 1fr;overflow:hidden;position:relative}
.toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #23272f;background:#0f1318}
canvas{width:100%;height:100%;display:block;background:#0b0d10;cursor:crosshair}
.help{font-size:12px;color:#cbd5e1}
.controls{display:flex;gap:8px;align-items:center}
.man-ctrl{display:none;gap:8px;align-items:center}
.man-ctrl.show{display:flex}

/* HUD floating */
.hud{
  position:absolute;left:5px;top:230px;z-index:20;
  background:rgba(15,17,21,.92);
  border:1px solid #2a2f36;border-radius:12px;
  padding:12px 14px;color:#e5e7eb;font-size:13px;
  box-shadow:0 8px 24px rgba(70, 53, 53, 0.35);
  display:none;max-width:220px;pointer-events:none;
}
.hud table{border-collapse:separate;border-spacing:8px 6px;width:100%}
.hud td{white-space:nowrap}
.hud td.key{color:#cbd5e1}
.hud td.val{font-weight:700;text-align:right}
.hud td.unit{color:#94a3b8;text-align:left;width:1%}
.hud .hr{height:1px;background:#263141;margin:6px 0 2px;opacity:.6}

/* Mouse coords */
.coords{position:absolute;left:10px;bottom:10px;z-index:20;background:rgba(15,17,21,.9);border:1px solid #2a2f36;border-radius:12px;padding:8px 10px;color:#e5e7eb;font-size:12px;box-shadow:0 8px 24px rgba(0,0,0,.35);min-width:230px;pointer-events:none}
.coords .muted{color:#9aa3af}

/* Context menu */
.ctx{position:absolute;z-index:70;background:#0f1115;border:1px solid #2a2f36;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.5);min-width:220px;display:none}
.ctx button{all:unset;display:block;width:100%;padding:10px 12px;color:var(--ink);cursor:pointer}
.ctx button:hover{background:#1a1f27}

/* Plan tools */
.plan-tools{position:fixed;right:12px;top:62px;display:none;gap:8px;align-items:center;background:#0f1115;border:1px solid #2a2f36;border-radius:12px;padding:8px 10px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.plan-tools .muted{font-size:12px}

/* Overlay list / plan list */
.overlay-list,.plan-list{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow:auto}
.overlay-item,.plan-item{display:flex;flex-direction:column;gap:6px;background:#0b0f14;border:1px solid #1b2028;border-radius:10px;padding:8px}
.overlay-item .name,.plan-item .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.overlay-item button,.plan-item button{padding:6px 8px}

/* Print */
@media print{
  body *{visibility:hidden}
  #printArea, #printArea *{visibility:visible}
  #printArea{position:absolute;inset:0;padding:16mm}
  #printArea table thead { display: table-header-group; }
  #printArea table tr { page-break-inside: avoid; }
}
#printArea{display:none;background:#fff;color:#000;font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
#printArea.show{display:block}
#printArea h1{font-size:20px;margin:0 0 6px}
#printArea h2{font-size:16px;margin:14px 0 6px}
#printArea table{width:100%;border-collapse:collapse;font-size:12px}
#printArea th,#printArea td{border:1px solid #ccc;padding:6px 8px;text-align:right}
#printArea th:first-child,#printArea td:first-child{text-align:left}
#printArea .meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;margin-bottom:8px}
#printArea .meta div{background:#f5f5f5;border:1px solid #e5e5e5;border-radius:8px;padding:6px 8px}
#printArea .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
#printArea .mini{width:140px;height:140px;border:1px solid #ddd;border-radius:8px;background:#fff}
.tests{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:#0b0f14;border:1px solid #1b2028;border-radius:10px;padding:8px;max-height:220px;overflow:auto;color:#dbeafe}

/* Splitter (resize sidebar/canvas) */
.splitter{
  background:#0e1217;
  border-right:1px solid #1e242c;
  border-left:1px solid #1e242c;
  cursor:col-resize;
}
.splitter:hover{ background:#121822; }

/* Canvas top-center checkbox overlay */
.canvas-top-center{
  position:absolute;
  left: 24%;
  top:140px;
  transform:translateX(-70%);
  z-index:20;
  background:rgba(15,17,21,.92  );
  border:1px solid #2a2f36;
  border-radius:12px;
  padding:8px 12px;
  box-shadow:0 8px 8px rgba(0,0,0,.35);
  backdrop-filter: blur(5px);
}
.canvas-top-center .check{
  display:flex; align-items:center; gap:10px; font-size:15px;
}
.canvas-top-center input[type="checkbox"]{
  width:30px; height:30px;
}


/* Manual list */
.manual-header{ font-weight:600; margin-top:8px; margin-bottom:6px; }
.manual-list{ display:flex; flex-direction:column; gap:6px; max-height:220px; overflow:auto; }
.manual-item{ display:flex; align-items:center; gap:8px; padding:6px 8px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:10px; }
.manual-item .chip{ width:14px; height:14px; border-radius:50%; border:2px solid rgba(0,0,0,0.2); flex:0 0 auto; }
.manual-item .name{ flex:1 1 auto; font-size:12px; }
.manual-item .meta{ font-size:11px; opacity:0.75; margin-left:6px; }
.manual-item .actions{ display:flex; gap:6px; }
.manual-item .actions .btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,0.15); padding:2px 6px; border-radius:8px; font-size:11px; cursor:pointer; }
.manual-item.active{ outline:2px solid rgba(255,255,255,0.25); }


/* Manual export controls */
.manual-export{ margin:8px 0 10px; display:flex; flex-direction:column; gap:4px; }
.manual-export .row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.manual-export .btn{ padding:4px 10px; font-size:10px; border-radius:8px; }


/* Progress bar */
.progress{ position:relative; flex:1 1 160px; height:14px; background:#0b0f14; border:1px solid #1b2028; border-radius:999px; overflow:hidden; min-width:160px }
.progress .bar{ position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,#1cc37e,#0ca86a) }
.progress .label{ position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:11px; color:#cbd5e1 }


#planTools .field{display:flex;gap:8px;align-items:center;margin:6px 0}
#planTools .field label{min-width:220px;color:var(--muted)}
#planTools .field select{padding:4px 8px;background:var(--panel);color:var(--ink);border:1px solid #222;border-radius:8px}



canvas{touch-action:none}


/* Ensure floating UI doesn't block canvas interactions */
.canvas-top-center{ pointer-events:none; }
.canvas-top-center .check,
.canvas-top-center input,
.canvas-top-center button,
.canvas-top-center select,
.canvas-top-center label{ pointer-events:auto; }


.plan-tools{ pointer-events:none; }
.plan-tools *{ pointer-events:auto; }
/* ==== Auth & Account Styles (injected) ==== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:200}
.modal.hidden{display:none}
.modal .modal-content{background:#0f1318;border:1px solid #1b2028;border-radius:14px;padding:16px 18px;min-width:320px;max-width:92vw}
.modal .tabs{display:flex;gap:8px;margin:8px 0 10px}
.modal .tabs button{padding:6px 10px;border-radius:8px;border:1px solid #1b2028;background:#0b0f14;color:var(--ink);cursor:pointer}
.modal .tabs button.active{background:linear-gradient(135deg,#1cc37e,#0ca86a);border:0}
.modal .form{display:flex;flex-direction:column;gap:6px}
.account-chip{
  position:fixed; right:12px; top:135px; z-index:180;
  background:#0f1115; border:1px solid #2a2f36; border-radius:12px; padding:8px 10px;
  display:flex; gap:10px; align-items:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.account-chip .name{font-weight:700}
.account-chip .dir{font-size:12px; color:var(--muted)}
.dropdown{
  position:fixed; right:12px; top:175px; z-index:190;
  background:#0f1115; border:1px solid #2a2f36; border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.45); padding:10px; width:280px;
}
.dropdown.hidden{display:none}
.dropdown .section{border-top:1px solid #1d232c; padding-top:8px; margin-top:8px}
.dropdown .section:first-child{border-top:0; padding-top:0; margin-top:0}
.dropdown .title{font-size:12px; color:var(--muted); margin-bottom:6px}
.dropdown .rowlike{display:flex; align-items:center; justify-content:space-between; gap:8px}
.dropdown .warn{color:var(--warn)}
#repositionPanel{
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: rgba(255,255,255,0.9);
  border: 1px solid #ddd;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  font-size: 14px;
  z-index: 9999;
}
#repositionPanel input[type="checkbox"]{
  transform: translateY(1px);
  margin-right: 6px;
}


/* ====== RESPONSIVE LAYOUT: Desktop ↔ Mobile (Grid + Flex) ====== */

/* Desktop default: sidebar | splitter | main */
@media (min-width: 901px){
  .app{
    grid-template-columns: var(--side, 400px) 6px 1fr;
  }
}

/* Mobile: main full width; sidebar as drawer */
@media (max-width: 700px){
  html, body { overflow: hidden; }
  .app{
    grid-template-columns: 1fr;
  }
  .splitter{ display:none; }

  aside{
    position: fixed;
    inset: 0 auto 0 0;
    width: min(92vw, 300px);
    max-width: 92vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 220;
    box-shadow: 18px 0 40px rgba(0,0,0,.45);
    border-right: 1px solid #1f2530;
    background: inherit;
  }
  body.drawer-open aside{
    transform: translateX(0);
  }

  .drawer-backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    z-index: 150; display: none;
  }
  body.drawer-open .drawer-backdrop{ display:block; }

  .toolbar{
    position: sticky; top: 0; z-index: 140;
    display: flex; align-items: center; gap: 8px;
  }

  .gridbar{
    position: fixed; left: 0; right: 0; bottom: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 10px;
    background: rgba(15,17,21,.95);
    border-top: 1px solid #23272f;
    z-index: 140;
  }
  .gridbar .gb-item{
    display: flex; align-items: center; justify-content: center;
    padding: 10px 8px;
    border: 1px solid #1b2028; border-radius: 11px;
    background: #0b0f14;
    font-size: 13px;
  }

  main{ padding-bottom: 68px; }
}

.btn-menu{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid #1b2028; background: #0b0f14; cursor: pointer;
}
.btn-menu:active{ transform: translateY(1px); }

.icon-12{ width:12px; height:12px; display:inline-block; }