:root{
    --ink:#1a1a2e;
    --sub:#5a5a72;
    --accent:#2b6cb0;
    --accent-dark:#1e4e8c;
    --line:#e2e5ec;
    --bg-panel:#f7f8fa;
    --good:#2f9e44;
    --radius:10px;
    --proj:#9aa3b5;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0;padding:0;height:100%;
    font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:#eef1f6;
    overflow:hidden;
  }
  .app{
    display:flex;
    width:100%;
    height:100vh;
    gap:10px;
    padding: 10px 20px 10px 10px;
    
  }
  .col-left{
    flex:0 0 60%;
    max-width:60%;
    height:100%;
    display:flex;
    flex-direction:column;
    gap:8px;
    min-height:0;
  }
  .col-right{
    flex:0 0 40%;
    max-width:40%;
    height:100%;
    display:flex;
    flex-direction:column;
    gap:8px;
    overflow-y:auto;

  }
  .card{
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:10px 20px 20px 20px;
    box-shadow:0 1px 2px rgba(20,20,40,0.04);
  }

  

  /* Graph */
  .graph-card{
    padding:6px;
    flex:1 1 auto;
    min-height:0;
    display:flex;
  }
  #graph-svg {
  display:block;
  width:100%;
  height:100%;
  background:#ffffff;
  cursor:grab;
  /* Prevent text selection and visual callouts on long-press */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
  .axis path, .axis line{
    stroke:#333;
    shape-rendering:crispEdges;
    stroke-width: 2.5px; /* Increased stroke width */
  }
  .axis text{
    fill:var(--sub);
    font-size:16px; /* Increased font size */
    font-weight: 600;
  }
 

     .demand-line-hitbox {
  stroke: transparent;
  stroke-width: 24px;
  cursor: grab;
  fill: none;
 
}
.demand-line-hitbox:active {
            cursor: grabbing;
        }

         .demand-line{
    fill:none;
    stroke:var(--accent-dark);
    stroke-width:4px; /* Increased line stroke width */
    pointer-events: none;
  }

  .proj-line{
    stroke:var(--proj);
    stroke-width:2px; /* Increased line stroke width */
    stroke-dasharray:5,4;
  }
  .drag-dot{
    fill:#ffffff;
    stroke:var(--accent);
    stroke-width:4px;
    cursor:grab;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  }
  .drag-dot:active{cursor:grabbing;}
  .axis-label{
    fill:var(--ink);
    font-size:16px; /* Increased axis label font size */
    font-weight:600;
  }