body {
          font-family: 'Sora', system-ui, -apple-system, sans-serif;
         /* max-width:1800px;*/
          color: #0f172a;
          background-color: #f1f5f9;
          line-height: 1.5;
          overflow:hidden;
          overflow-y:auto;
          display:grid;
          gap:20px 0px;
          
      }


@media(max-width:750px) {

    .three-panel {
        max-height:500px;
    }
}




    canvas {
        width:95% !important;
       margin: 0 auto;
       /* height:100% !important;*/
       
    }


    .input-panel > * {
       font-size:clamp(12px,2vw,14px) !important; 
    }
    .input-panel input {
        font-size:clamp(12px,2vw,14px) !important; 
        
        
    }
    .input-panel label {
        font-size:clamp(10px,1vw,12px) !important; 
    }

    .analysis-footer > * {
        font-size:clamp(12px,2vw,14px) !important; 
    }



    .analysis-card.final p {
        margin-bottom: 0px !important;
        margin-top: 0px !important;
    }

#compute {
    font-size:14px !important;
}

    .appendix {
        /*padding: 20px;*/
        background: white;
        border-radius: 20px;
        border: 1px solid #e2e8f0;
        font-size:12px;
        width:calc(100vw - 20px);
        padding:0px;
        overflow:hidden;

    }

        .appendix a {
          color:rgba(0,0,255,.5);
        }

    .analysis-card.final {
        grid-column: 1 / 3;
    }


    table {
        background: #f1f5f9;
        border-collapse: unset;
        font-family: 'Sora' !important;
        font-size: 12px !important;
       
    }

   
    tr {
        background: white !important;
      
    }
    th {
        border: 1px solid #e2e8f0 !important;
    }

    table {
  border-collapse: separate; 
  border-spacing: 0;        
  border: 1px solid #ccc;    
  border-radius: 12px;      
  overflow: hidden;      
}

th, td {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 10px;
}


th:last-child, td:last-child {
  border-right: none;
}
tr:last-child td {
  border-bottom: none;
}

    .analysis-footer sup {
        background: black;
        width: auto;
        height: auto;
    }

    span#pct {
    font-weight: 900;
    color: #10b981;
    font-size: clamp(14px, 1vw, 20px);
    }


    .hero-stat {
        display: grid;
        justify-content: center;
        grid-template-rows: repeat(3, 1fr);
        max-height:80px;
     
    }

.total div, .total label {
    font-size:14px !important;
}

#ai-total,#f9-total {
    display: block;
    font-weight: 600;
    font-size:clamp(12px,2vw,14px) !important;
    /*color: #475569;*/
    margin-bottom: 4px;
    text-align: end;
}

.total {
    column-gap: 0px !important;
}


sup {
    padding: 3px;
    /*border: 1px solid;*/
    margin-top:-5px;
    border-radius: 100%;
    display: inline-block;
    width: 10px;
    height: 10px;
    line-height: 10px;
    text-align: center;
    margin-left: 5px;
    background: #8b5cf6;
    text-rendering:optimizeLegibility;
    color:white;
}

.field-group.total label, .field-group.total div {
    border-top: 1px solid;
    border-bottom: 2px solid;
    padding-top:5px;
    padding-bottom:5px;
}


    label.main.header.total {
        color: black;
        text-wrap-mode:nowrap;
        font-size:clamp(12px,2vw,14px) !important
    }

    
    ::-webkit-scrollbar {
        width: 5px;
     }


        label:not(.main) {
            margin-bottom: 0px !important;
            font-weight:500;
            text-align:end;
            font-size:12px;
        }


    .savings-hero span:nth-child(2) {
             font-size: clamp(14px, 1vw, 20px);
             
     }
     

      .dashboard-container {
            display: grid;
            width: calc(100vw - 15px);
            grid-template-columns: repeat(auto-fit, minmax(400px, auto));
            gap: 20px;
        }



      /* Input Panel */
      .input-panel {
          background: #ffffff;
          padding: 25px;
          border-radius: 20px;
          box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
          border: 1px solid #e2e8f0;
          overflow-y: auto;
          
      }

      h2 {
          margin: 0 0 20px 0;
          font-size: 1.4rem;
          color: #1e293b;
      }

      .section-title {
          font-size: 0.75rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: #64748b;
          margin: 20px 0 10px 0;
          border-bottom: 1px solid #f1f5f9;
          padding-bottom: 5px;
      }

      label.main {
             grid-column: 1 / 3;
        }


      label.main.header {
             grid-column: revert;
             grid-column:auto;
    
        }

        label.main.header.year {
            text-align: right;
        }


          .field-group {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            padding: 10px;
            column-gap:10px;
            align-items:center;
          /*  padding-right:25px;*/
        }



      label {
          display: block;
          font-weight: 600;
          font-size: 0.8rem;
          color: #475569;
          margin-bottom: 4px;
      }

      input {
          width: 100%;
          padding: 10px;
          border: 1px solid #cbd5e1;
          border-radius: 8px;
          font-size: 14px;
          box-sizing: border-box;
          outline:none;
      }

      .ai-accent {
          border-left: 4px solid #8b5cf6;
          padding-left: 12px;
          background: #f5f3ff;
         /* border-radius: 0 8px 8px 0;*/
          padding-top: 8px;
      }

      .f9-accent {
          border-left: 4px solid #10b981;
          padding-left: 12px;
          background: #ecfdf5;
         /* border-radius: 0 8px 8px 0;*/
          padding-top: 8px;
      }

      .btn-update {
          background:black;
          border:none;
          color: white;
          width: 100%;
          padding: 15px;
          border-radius: 10px;
          font-weight: 700;
          cursor: pointer;
          margin-top: 20px;
          transition: all ease 500ms;
          font-size: 1rem;
      }

          .btn-update:hover {
           
              transform: scale(.98);
          }


        .btn-update:active {
            transform: scale(.95);
        }

      /* Visualization Panel */
      .viz-container {
          width:100%;
          display: flex;
          flex-direction: column;
          gap: 20px;
          height: 100%;
         /* min-height:700px;*/
      }

      .three-panel {
          background: #020617;
          border-radius: 20px;
          flex-grow: 1;
          position: relative;
          overflow: hidden;
          box-shadow: inset 0 0 100px rgba(0,0,0,0.5);
          width:100%;
          height:100%;
          
          
      }
        .three-panel > * {
            font-size: clamp(10px,1vw,14px) !important;
        }


      #canvas-mount {
          width: 100%;
          height: 100%;
          display: block;
          min-height:500px;
          /*max-height:600px;*/
      }

      /* HUD Overlay */
      .hud-label {
          position: absolute;
          color: white;
          padding: 12px clamp(10px, 1vw, 20px);
          border-radius: 12px;
          font-size: 12px;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          pointer-events: none;
          text-align: center;
      }

      #hud-baseline {
          top: 8%;
          left: 8%;
          border: 1px solid #8b5cf6;
          background: rgba(139, 92, 246, 0.15);
      }

      #hud-optimized {
          top: 8%;
          right: 8%;
          border: 1px solid #10b981;
          background: rgba(16, 185, 129, 0.15);
      }

      /* Results Summary */
      .savings-hero {
          background: white;
          padding: 25px;
          border-radius: 20px;
          border: 1px solid #e2e8f0;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          text-align: center;
          gap: 20px;
          box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
      }

     

      .stat-label {
          font-size: 0.75rem;
          font-weight: 700;
          color: #64748b;
          text-transform: uppercase;
          margin-bottom: 5px;
      }

      .stat-val {
          font-size: 1.8rem;
          font-weight: 900;
          color: #1e293b;
      }

      .val-savings {
          color: #10b981;
      }

   
      .analysis-footer {
         display: grid;    
        grid-template-columns: repeat(auto-fit, minmax(300px, auto));
        gap: 0px 20px;
        background: white;
        padding: 20px;
        border-radius: 20px;
        border: 1px solid #e2e8f0;
        width: calc(100vw - 60px);
      }

      /*.af-card.final {
          grid-column: 1 / 3;
        }*/

      .analysis-card h3 {
          margin-top: 0;
          font-size: 1rem;
          color: #1e293b;
          border-bottom: 2px solid #f1f5f9;
          padding-bottom: 10px;
          margin-bottom: 15px;
      }

      .analysis-card p {
          font-size: 13px;
          color: #475569;
          margin-bottom: 12px;
      }