:root{
      /* Festool-inspired palette (clear, high-contrast, workshop-friendly) */
      --festool-green:#4fff1c;
      --festool-green-2:#4fff1c;
      --festool-dark:#00002e;
      --festool-dark-2:#00002e;
      --bg:#F4F6F8;
      --panel:#FFFFFF;
      --panel2:#FBFCFD;
      --text:#0F172A;
      --muted:#556070;
      --line:rgba(15,23,42,.14);
      --accent:var(--festool-green);
      --bad:#DC2626;
      --ok:#16A34A;
      --warn:#D97706;
      --chip:rgba(15,23,42,.04);
      --shadow: 0 18px 45px rgba(15,23,42,.10);
      --shadow2: 0 10px 22px rgba(15,23,42,.08);
      --radius:14px;
      --radius-sm:12px;
      --radius-xs:10px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier Nefont sizew", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    *{box-sizing:border-box}

    body{
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(0,166,81,.10), transparent 55%),
    radial-gradient(900px 520px at 95% 10%, rgba(0,166,81,.08), transparent 55%);
  padding-bottom: 32px;
}

    a{ color:inherit; }

    /* ===== Top bar ===== */
    header{
      position:sticky; top:0;
      z-index:50;
      border-bottom:1px solid rgba(255,255,255,.08);
      background: linear-gradient(180deg, rgba(0,0,46,.98), rgba(0,0,46,.92));
      backdrop-filter: blur(10px);
    }
    header::after{
      content:"";
      display:block;
      height:4px;
      background: linear-gradient(90deg, var(--festool-green), var(--festool-green-2));
    }
    header .row{
      max-width:1200px;
      margin:0 auto;
      padding:14px 18px;
      display:flex;
      gap:12px;
      align-items:center;
      flex-wrap:wrap;
    }

    h1{
      margin:0;
      font-size:20px;
      letter-spacing:.2px;
      color:#fff;
      display:flex;
      align-items:center;
      gap:10px;
    }
    h1::before{
      content:"";
      width:12px;
      height:12px;
      border-radius:3px;
      background: var(--festool-green);
      box-shadow: 0 0 0 4px rgba(0,166,81,.20);
    }

    .topbarMenu{
      position: relative;
    }

    .iconBtn{
      font-size: 20px;
      padding: 6px 10px;
      line-height: 1;
    }

    .menuPanel{
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      min-width: 220px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow2);
      padding: 6px;
      display: none;
      z-index: 200;
    }

    /* Mobile: keep the main menu dropdown fully on-screen */
    @media (max-width: 640px){
      .menuPanel{
        position: fixed;
        left: 12px;
        right: 12px;
        top: 64px;
        min-width: 0;
        max-width: none;
      }
    }

    .menuPanel button{
      width: 100%;
      text-align: left;
      padding: 10px 12px;
      border: none;
      background: transparent;
      box-shadow: none !important;
      border-radius: 8px;
      font-weight: 600;
    }

     .menuPanel button:hover{
     background: rgba(79,255,28,.10) !important;
     outline-color: rgba(79,255,28,.45) !important;
     }


    .menuPanel button:active{
    background: rgba(79,255,28,.10) !important;
    outline-color: rgba(79,255,28,.45) !important;
    }


    .menuPanel hr{
      border: none;
      border-top: 1px solid var(--line);
      margin: 6px 0;
    }

    .badge{
      font-size:12px;
      color:rgba(255,255,255,.78);
      padding:4px 10px;
      border:1px solid rgba(255,255,255,.14);
      border-radius:999px;
      background: rgba(255,255,255,.06);
    }

    main{
      max-width:1200px;
      margin:0 auto;
      padding:16px 18px 24px;
      display:grid;
      grid-template-columns: 420px 1fr;
      gap:14px;
    }
    @media (max-width: 1100px){
      main{grid-template-columns: 1fr}
    }

    /* ===== Cards ===== */
    .card{
      background: var(--panel);
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .card .hd{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:12px 14px;
      border-bottom:1px solid var(--line);
      background: linear-gradient(180deg, #FFFFFF, var(--panel2));
    }

    .card .hd > *{
      display: inline-flex;
      align-items: center;
      min-height: 42px;
    }
    .card .hd h2{
      font-size:18px;
      margin:0;
      letter-spacing:.18px;
    }
    .card .bd{ padding:14px; }

    .subtle{ color:var(--muted); font-size:12px; line-height:1.45; }

    /* ===== Layout helpers ===== */
    .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
    .grid3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; }
    .grid4{ display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:10px; }

    /* Responsive: collapse multi-column grids + make buttons easier to tap on phones */
    @media (max-width: 520px){
      main{ padding:12px 12px 18px; }
      .grid2, .grid3, .grid4{ grid-template-columns: 1fr; }
      .btnrow button{ flex:1 1 160px; }
      .topbarButtons .btnLine{ flex-wrap:wrap; }
      button{ padding:11px 12px; }
      /* Prevent iOS zoom on focus for common fields */
      input, select, textarea{ font-size:16px; }
    }

    /* ===== Form fields ===== */
    .field label{
      font-size:12px;
      color:var(--muted);
      margin:0 0 6px;
      min-height: 34px;
      display:flex;
      align-items:flex-end;
    }

    .field input, .field select, .field textarea{
      width:100%;
      padding:10px 11px;
      border-radius: var(--radius-xs);
      border:1px solid rgba(15,23,42,.16);
      outline:none;
      background:#fff;
      color:var(--text);
      box-shadow: inset 0 1px 0 rgba(15,23,42,.03);
      transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
    }
    .field input::placeholder{ color:rgba(85,96,112,.55); }

    .field input:focus, .field select:focus, .field textarea:focus{
      border-color: rgba(0,166,81,.65);
      box-shadow: 0 0 0 4px rgba(0,166,81,.14);
    }

    .btnrow{ display:flex; gap:10px; flex-wrap:wrap; }

    /* ===== Buttons ===== */
    button{
      border:1px solid rgba(15,23,42,.16);
      background: #ffffff;
      color:var(--text);
      padding:10px 12px;
      border-radius: var(--radius-sm);
      cursor:pointer;
      font-weight:600;
      letter-spacing:.12px;
      transition: transform .05s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
      box-shadow: var(--shadow2);
    }
    button:hover{ background: rgba(15,23,42,.03); transform: translateY(-1px); }
    button:active{ transform: translateY(0px); box-shadow: 0 6px 14px rgba(79,255,28,1); }

    button.primary{
      background: linear-gradient(180deg, var(--festool-green-2), var(--festool-green));
      border-color: rgba(0,166,81,.55);
      color:#06140C;
      box-shadow: 0 0px 0px rgba(0,166,81,.22);
    }
    button.primary:hover{ box-shadow: 0 0px 0px rgba(79,255,28,0.5); }

    button.ghost{
      background: rgba(255,255,255,.04);
      border-color: rgba(255,255,255,.16);
      color: rgba(255,255,255,.88);
      box-shadow: none;
    }
    button.ghost:hover{ background: rgba(15,23,42,.03); transform: translateY(-1px); }

    /* Ghost buttons inside cards should stay light */
    .card button.ghost{
      background: transparent;
      color: var(--text);
      border-color: rgba(15,23,42,.14);
      box-shadow: none;
    }
    .card button.ghost:hover{ background: rgba(15,23,42,.03); }

    button.danger{
      border-color: rgba(220,38,38,0.35);
      color: var(--bad);
      background: rgba(220,38,38,0.06);
      box-shadow: none;
    }
    button.danger:hover{ background: rgba(220,38,38,0.06); }

    button:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

    .projectButtons{ display:flex; flex-direction:column; gap:10px; }
    .projectButtons .btnLine{ display:flex; gap:10px; flex-wrap:wrap; }
    .topbar{ justify-content: space-between; }
    .topbarButtons{ align-items:flex-end; }
    @media (max-width: 900px){
      .topbar{ flex-direction: column; align-items: flex-start; gap: 10px; }
      .topbarButtons{ align-items: flex-start; }
    }
    .topbarButtons{ display:flex; flex-direction:row; gap:8px; flex-wrap:wrap; }
    .topbarButtons .btnLine{ display:flex; gap:8px; }

    /* ===== Tables ===== */
    table{
      width:100%;
      border-collapse: collapse;
      font-size:12px;
      border:1px solid var(--line);
      border-radius: var(--radius-sm);
      overflow:hidden;
      background:#fff;
    }
    thead th{
      text-align:left;
      color:var(--muted);
      font-weight:600;
      padding:10px 10px;
      background: linear-gradient(180deg, #FFFFFF, var(--panel2));
      border-bottom:1px solid var(--line);
    }
    tbody td{
      padding:9px 10px;
      border-bottom:1px solid rgba(15,23,42,.08);
      vertical-align:top;
    }
    tbody tr:hover td{ background: rgba(0,166,81,.035); }
    tbody tr:last-child td{ border-bottom:none; }
    .mono{ font-family: var(--mono); }

    /* ===== Chips / status ===== */
    .chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:5px 10px;
      border-radius:999px;
      background: var(--chip);
      border:1px solid rgba(15,23,42,.10);
      color:var(--muted);
      font-size:12px;
      white-space:nowrap;
    }
    .pill-ok{ color: #06331C; background: rgba(22,163,74,.14); border-color: rgba(22,163,74,.22); }
    .pill-warn{ color: #3A2106; background: rgba(217,119,6,.14); border-color: rgba(217,119,6,.22); }
    .pill-bad{ color: #3A0B0B; background: rgba(220,38,38,.14); border-color: rgba(220,38,38,.22); }

    /* ===== Viewer ===== */
    .viewerTop{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      margin-bottom:10px;
    }
    .tabs{ display:flex; gap:8px; flex-wrap:wrap; }
    .tab{
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(15,23,42,.14);
      background: #ffffff;
      cursor:pointer;
      font-size:12px;
      color:var(--muted);
      font-weight:600;
      transition: background .15s ease, border-color .15s ease, transform .05s ease;
    }
    .tab:hover{ transform: translateY(-1px); background: rgba(0,166,81,.05); }
    .tab.active{
      background: rgba(0,166,81,.12);
      color:var(--text);
      border-color: rgba(0,166,81,.35);
      box-shadow: 0 10px 18px rgba(0,166,81,.12);
    }

    .album{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      margin: 10px 0 12px;
    }
    .album .navbtn{
      min-width:110px;
      display:flex;
      justify-content:center;
      align-items:center;
      gap:8px;
    }

    /* ===== Output sheet ===== */
    .sheetWrap{
      border:1px solid rgba(15,23,42,.14);
      border-radius: var(--radius);
      overflow:hidden;
      background:#fff;
      box-shadow: var(--shadow);
    }
    .sheetHeader{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      padding:10px 12px;
      border-bottom:1px solid rgba(15,23,42,.10);
      background: linear-gradient(180deg, #FFFFFF, var(--panel2));
    }
    .sheetHeader .left{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .sheetHeader .title{ font-weight:600; font-size:14px; }
    .sheetHeader .meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

    /* Fit-to-screen (no horizontal scroll) */
    .sheetCanvas{
      width:100%;
      overflow:hidden;
      padding:10px;
      background: #ffffff;
    }
    .sheetCanvas svg{ width:100%; height:auto; display:block; }

    .legend{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      padding:10px 12px;
      border-top:1px solid rgba(255,255,255,.16);
      color:var(--muted);
      font-size:12px;
      background: rgba(255,255,255,.04);
    }

    .kpi{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

    /* ===== Modal ===== */
    .modal{
      position:fixed;
      inset:0;
      background:rgba(16,18,20,0.55);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:16px;
      z-index:1000;
    }
    .modalCard{
      width:min(720px, 96vw);
      background:#ffffff;
      border:1px solid rgba(15,23,42,.16);
      border-radius: var(--radius);
      box-shadow:0 22px 70px rgba(0,0,0,.35);
      overflow:hidden;
    }
    .modalHd{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      padding:12px;
      border-bottom:1px solid rgba(15,23,42,.10);
      background: linear-gradient(180deg, #FFFFFF, var(--panel2));
    }
    .modalBd{ padding:12px; }
    .modalFt{
      display:flex;
      justify-content:flex-end;
      gap:10px;
      padding:12px;
      border-top:1px solid rgba(15,23,42,.10);
      background: linear-gradient(180deg, var(--panel2), #FFFFFF);
    }

    .modal { position: fixed; inset: 0; z-index: 1000; }
    #presetModal { z-index: 1100; }
    #libraryModal { z-index: 1000; }

    /* ===== Toasts ===== */
    .toast{
      margin-top:10px;
      padding:10px 12px;
      border-radius: var(--radius-sm);
      border:1px solid rgba(15,23,42,.14);
      background: #ffffff;
      color:var(--muted);
      font-size:12px;
      box-shadow: var(--shadow2);
    }
    .toast.err{
      border-color: rgba(220,38,38,.35);
      color: rgba(220,38,38,.95);
      background: rgba(220,38,38,.06);
    }
    .toast.ok{
      border-color: rgba(0,166,81,.35);
      color: rgba(6,20,12,.95);
      background: rgba(0,166,81,.10);
    }

    .svgtext{ font-family: var(--sans); }
    ul{ margin:0; padding-left:18px; }
  

/* Material library (tool database style) */
.ml-wrap{display:flex; height:70vh; min-height:420px}
.ml-left{width:38%; border-right:1px solid var(--line); display:flex; flex-direction:column}
.ml-right{flex:1; padding:14px; overflow:auto; background:var(--panel)}
.ml-left-top{padding:12px; border-bottom:1px solid var(--line); var(--ml-solid)!important}
.ml-search{width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text)}
.ml-actions{display:flex; flex-direction: row; flex-wrap:nowrap; gap:8px; margin-top:10px}
.ml-tree{overflow:auto; padding:8px}
.ml-folder{margin-bottom:10px}
.ml-folder-h{display:flex; align-items:center; gap:8px; padding:8px; border-radius:8px; cursor:pointer}
.ml-folder-h:hover{background:rgba(255,255,255,.04)}
.ml-folder-h.sel{background:rgba(255,255,255,.06)}
.ml-icon{width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--text)}
.ml-folder-name{font-weight:600}
.ml-list{margin-left:36px; margin-top:6px; display:flex; flex-direction:column; gap:6px}
.ml-item{padding:8px; border:1px solid var(--line); border-radius:10px; cursor:pointer; background:rgba(0,0,0,.08)}
.ml-item:hover{background:rgba(255,255,255,.04)}
.ml-item.sel{outline:2px solid rgba(61,148,255,.4)}
.ml-item-title{font-weight:600}
.ml-item-sub{font-size:12px; color:var(--muted); margin-top:2px}
.ml-box{border:1px solid var(--line); border-radius:12px; padding:12px; background:rgba(0,0,0,.06)}
.ml-box-title{font-weight:600}

/* Responsive: Material Library modal on small screens */
@media (max-width: 640px){
  /* Make the Material Library feel like a proper full-screen mobile panel */
  #matLibModal{ padding:0; }
  #matLibCard{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh;
    border-radius:0;
    display:flex;
    flex-direction:column;
  }

  /* Allow the body area to take remaining height so the library can scroll */
  #matLibCard .modalBd{
    flex:1;
    min-height:0;
  }

  /* Modal header buttons wrap instead of squashing */
  .modalHd{ flex-direction:column; align-items:stretch; }
  .modalHd > div:last-child{ width:100%; justify-content:flex-start; flex-wrap:wrap; }
  .modalHd > div:last-child button{ flex:1 1 auto; min-width:140px; }

  /* Library becomes ONE scrollable unit (folders + editor scroll together) */
  .ml-wrap{
    flex-direction:column;
    height:100%;
    min-height:0;
    overflow:auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .ml-left{ width:100%; border-right:none; border-bottom:1px solid var(--line); }
  .ml-left-top{ position:static; top:0; z-index:2; }

  /* Remove nested scroll containers on mobile */
  .ml-tree{ max-height:none; overflow:visible; }
  .ml-right{ max-height:none; overflow:visible; }

  /* Folder action buttons: wrap and keep tap-friendly */
  .ml-actions{ flex-wrap:wrap; }
  .ml-actions button{ flex:1 1 140px; white-space:nowrap; }

  /* Prevent iOS zoom on focus */
  .ml-search{ font-size:16px; }
}

    /* Fix: ghost buttons were white-on-white inside modal */
    .modalCard button.ghost{
      background: transparent;
      color: var(--text);
      border-color: rgba(15,23,42,.14);
      box-shadow: none;
    }
    .modalCard button.ghost:hover{ background: rgba(15,23,42,.03); }



    /* ===== Streamlined left input panel ===== */
    #inputsCard{ position: sticky; top: 72px; align-self: start; }
    @media (max-width: 1100px){ #inputsCard{ position: static; } }

    /* Section cards inside the left panel */
    .card.subcard{
      box-shadow: none;
      border-color: rgba(15,23,42,.12);
      background: linear-gradient(180deg, #FFFFFF, rgba(15,23,42,.01));
    }
    .card.subcard .hd{
      border-bottom-color: rgba(15,23,42,.10);
    }

    /* Make left panel sections stand out */
    .leftSection{
      border: 1px solid rgba(15,23,42,.12);
      border-radius: var(--radius);
      background: linear-gradient(180deg, #FFFFFF, var(--panel2));
      box-shadow: var(--shadow2);
      overflow: hidden;
      margin-bottom: 12px;
    }
    .leftSection .leftSectionHd{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:12px 14px;
      border-bottom:1px solid rgba(15,23,42,.10);
      background: linear-gradient(180deg, rgba(79,255,28,.22), rgba(79,255,28,.04));
    }
    .leftSection .leftSectionHd h2{
      margin:0;
      font-size:15px;
      letter-spacing:.18px;
    }
    .leftSection .leftSectionBd{ padding:14px; }

    .helper{
      margin-top:8px;
      padding:10px 12px;
      border-radius: var(--radius-sm);
      border:1px dashed rgba(15,23,42,.18);
      background: rgba(15,23,42,.02);
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    /* Compact icon buttons (table actions) */
    .iconAction{
      width: 34px;
      height: 34px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      box-shadow: none;
      background: rgba(15,23,42,.02);
    }
    .iconAction:hover{ background: rgba(15,23,42,.05); transform: translateY(-1px); }
    .iconAction:active{ transform: translateY(0px); }
    .iconAction svg{ width: 18px; height: 18px; }

    .iconAction.danger{
      background: rgba(220,38,38,.06);
      border-color: rgba(220,38,38,.25);
      color: rgba(220,38,38,.95);
    }

    /* Action cell layout */
    .actionsCell{ display:flex; gap:6px; justify-content:flex-end; }



    /* Wider primary actions in the left panel */
    .wide{ width: 100%; justify-content: center; }
    #inputsCard .chip{ background: rgba(15,23,42,.04); }
    .leftSection .leftSectionHd .chip{
      background: rgba(255,255,255,.55);
      border-color: rgba(15,23,42,.10);
      font-weight: 600;
    }
    /* Make the left panel read more like a guided flow */
    #inputsCard .bd{ padding-top: 12px; }
    .leftSection{ border-left: 4px solid rgba(79,255,28,.95); }
    .leftSection .leftSectionBd{ padding-top: 12px; }
    .leftSection .leftSectionBd .btnrow{ align-items: center; }
    /* Make the component preset selector visually important */
    #partPresetSelect{ font-weight: 600; }



    /* ===== Left-panel polish (streamlined) ===== */
    .leftSectionHd .chip{
      background: rgba(255,255,255,.72);
      border-color: rgba(15,23,42,.14);
      color: var(--text);
      font-weight: 600;
    }
    .leftSectionHd .chip{ box-shadow: 0 10px 18px rgba(15,23,42,.08); }

    button.primary.wide{ width:100%; justify-content:center; }
    #btnNest{ width:100%; padding:12px 14px; font-size:16px; }

    /* Make the left panel feel like a guided checklist */
    #inputsCard .bd{ padding-top: 12px; }
    #inputsCard .leftSection:last-of-type{ margin-bottom: 6px; }

    /* Nicer spacing for the components actions */
    .btnrow.tight{ gap:8px; }

    /* ===== Printer-friendly PDF export (outline + transparent) =====
   On-screen: parts remain shaded.
   In PDF export: we wrap the export DOM in `.pdfOutlineMode`.
   - Parts: outline only, black
   - Sheet: no fills, black outlines
   - Text: slightly larger + black for legibility
*/
.pdfOutlineMode .partRect{
  fill: none !important;
  stroke: #000 !important;
  stroke-width: 1.25 !important;
}
.pdfOutlineMode .sheetOutline{
  fill: none !important;
  stroke: #000 !important;
  stroke-width: 1.6 !important;
}
.pdfOutlineMode .usableOutline{
  fill: none !important;
  stroke: #000 !important;
  stroke-width: 1.1 !important;
  stroke-dasharray: 6 6 !important;
}
.pdfOutlineMode .svgtext{
  fill: #000 !important;
}
.pdfOutlineMode .sheetTitleText{
  font-size: 22px !important;
  font-weight: 600 !important;
}
.pdfOutlineMode .sheetSubText{
  font-size: 22px !important;
  font-weight: 600 !important;
}
.pdfOutlineMode .partLabelText{
  font-size: 22x !important;
  font-weight: 600 !important;
}
.pdfOutlineMode .partDimsText{
  font-size: 22px !important;
  font-weight: 600 !important;
}
.pdfOutlineMode .dimGroup line{
  stroke: #000 !important;
  stroke-width: 1 !important;
}
.pdfOutlineMode .dimGroup text{
  fill: #000 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
}

/* ===== PDF SUMMARY TABLE ONLY =====
   Does NOT affect generator tables
*/
.pdfOutlineMode.pdfSummary table,
.pdfOutlineMode.pdfSummary thead th,
.pdfOutlineMode.pdfSummary tbody td {
  color: #000 !important;
  background: transparent !important;
}

/* Optional: ensure borders stay visible in PDF */
.pdfOutlineMode.pdfSummary table {
  border-color: #000 !important;
}
.pdfOutlineMode.pdfSummary thead th,
.pdfOutlineMode.pdfSummary tbody td {
  border-bottom-color: #000 !important;
}

    /* ===== Output: material selector + cost summary ===== */
    #materialSelect{ font-weight: 600; }
    #costSummary{ margin: 10px 0 12px; }
    #costSummary table{ font-size: 12px; }
    #costSummary td, #costSummary th{ padding: 8px 10px; }
    #costSummary .totalRow td{ font-weight: 600; }


/* === Font normalization for component measurements === */
.component-list,
.component-list * {
  font-size: 0.95rem;
}

.component-list .measurement,
.component-list .dim,
.component-list .size,
.component-list small {
  font-size: inherit !important;
}


/* =========================
   ProTool Ultra Theme Layer
   Scoped to body.protool
   ========================= */
body.protool{
  --bg:#0B1020;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.085);
  --text:#EAF0FF;
  --muted: rgba(234,240,255,.72);
  --line: rgba(255,255,255,.12);
  --accent: #4FFF1C;

  --shadow: 0 18px 55px rgba(0,0,0,.38);
  --shadow2: 0 10px 30px rgba(0,0,0,.30);
  --ring: 0 0 0 4px rgba(79,255,28,.22);

  --r-lg:16px;
  --r-md:14px;
  --r-sm:12px;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 15% 0%, rgba(79,255,28,.12), transparent 52%),
    radial-gradient(900px 520px at 95% 10%, rgba(79,255,28,.08), transparent 55%),
    radial-gradient(900px 650px at 40% 110%, rgba(85,110,255,.10), transparent 55%),
    linear-gradient(180deg, #0B1020, #0E1630);
  -webkit-font-smoothing: antialiased;
}

body.protool::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(800px 500px at 20% 0%, #000 30%, transparent 72%);
  z-index:0;
}

body.protool header,
body.protool main{ position:relative; z-index:1; }

/* Header = pro sticky topbar */
body.protool header{
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(11,16,32,.92), rgba(11,16,32,.70));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body.protool header .row{
  max-width: 1240px;
  margin: 0 auto;
}

body.protool h1, body.protool h2, body.protool h3{
  letter-spacing: .2px;
}

body.protool .chip{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  color: rgba(234,240,255,.82);
}

/* Cards / sections */
body.protool .card{
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}

body.protool .card .hd{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body.protool .leftSection{
  border-radius: var(--r-md);
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);
}

body.protool .leftSectionHd{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Buttons */
body.protool button,
body.protool .btn{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: transform .06s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body.protool button:hover,
body.protool .btn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.24);
  transform: translateY(-1px);
}

body.protool button:active,
body.protool .btn:active{ transform: translateY(0px); }

body.protool button:focus-visible,
body.protool input:focus,
body.protool select:focus,
body.protool textarea:focus{
  outline: none;
  box-shadow: var(--ring);
  border-color: rgba(79,255,28,.55);
}

body.protool .primary,
body.protool button.primary{
  background: linear-gradient(180deg, #7CFF3A, var(--accent));
  border-color: rgba(79,255,28,.45);
  color: #06140C;
  box-shadow: 0 10px 22px rgba(79,255,28,.10);
}

/* Inputs */
body.protool input,
body.protool select,
body.protool textarea{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: var(--text);
  border-radius: 12px;
}

body.protool input::placeholder,
body.protool textarea::placeholder{ color: rgba(234,240,255,.52); }

/* Tables */
body.protool table{
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  overflow:hidden;
}

body.protool thead th{
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.72);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body.protool tbody td{
  border-bottom: 1px solid rgba(255,255,255,.06);
}

body.protool tbody tr:hover td{
  background: rgba(79,255,28,.06);
}

/* Component list: keep readable + pro mono for dimensions */
body.protool .component-list,
body.protool .componentRow,
body.protool .componentsList{
  font-size: 0.95rem;
}

body.protool .measurement,
body.protool .dim,
body.protool .size{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: inherit !important;
  color: rgba(234,240,255,.82);
}

/* Mobile tap comfort */
@media (max-width: 760px){
  body.protool .componentRow,
  body.protool .rowItem,
  body.protool .compItem{
    padding-top: .6rem;
    padding-bottom: .6rem;
  }
}


/* === ProTool Dark Mode Overrides (fix light UI remnants) === */
/* Menus / dropdown panels */
.menuPanel{
  background: linear-gradient(180deg, rgba(14,22,48,.96), rgba(11,16,32,.92)) !important;
  color: var(--text) !important;
  border-color: rgba(79,255,28,.08) !important;
  backdrop-filter: blur(14px);
}

/* Core form controls (earlier rules used white backgrounds) */
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(79,255,28,.55);
  background: var(--ml-solid-2) !important;
  
}

.field select:hover{
  background: rgba(79,255,28,.08);
}

/* Native option menus (best-effort; some browsers limit styling) */
select option{
  background: var(--ml-solid-2) !important;
  color: #EAF0FF;
}

/* Buttons (ensure no white button surfaces remain) */
button{
  background: transparent !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,.16) !important;
}
button.primary{
  background: linear-gradient(180deg, var(--accent2), var(--accent)) !important;
  color: #06140C !important;
  border-color: rgba(79,255,28,.45) !important;
}

/* Modals (Material Library lives inside) */
.modalCard{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.modalHd{
  background: rgba(255,255,255,.06) !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
}
.modalFt{
  background: rgba(255,255,255,.04) !important;
  border-top-color: rgba(255,255,255,.10) !important;
}

/* Toasts / summaries */
.toast{
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Output areas that were still white */
.sheetWrap,
.sheetHeader,
.sheetCanvas{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}

/* Tables inside summaries/outputs */
table{
  background: rgba(0,0,0,.18) !important;
  border-color: rgba(255,255,255,.10) !important;
}
thead th{
  background: rgba(255,255,255,.06) !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
  color: var(--muted) !important;
}
tbody td{
  border-bottom-color: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
}



/* === ProTool fixes: solid Material Library + custom grouped selects === */
/* Make Material Library (modal card + panels) fullyF solid, not translucent */
#libraryModal .modalCard#matLibCard{
  background: linear-gradient(180deg, #0E1630, #0B1020) !important;
  border-color: rgba(255,255,255,.16) !important;
}
#libraryModal .modalHd,
#libraryModal .modalFt{
  background: rgba(0,0,0,.18) !important;
}
#libraryModal .ml-wrap,
#libraryModal .ml-left,
#libraryModal .ml-left-top,
#libraryModal .ml-right{
  background: #0E1630 !important;
}
#libraryModal .ml-right{ background: #0B1020 !important; }

/* Custom select (replaces native select popup so optgroup "folders" aren't white) */
.proSelect{ position:relative; }
.proSelectBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight:600;
  letter-spacing:.12px;
  cursor:pointer;
}
.proSelectBtn:focus-visible{ outline:none; box-shadow: var(--ring); border-color: rgba(79,255,28,.55); }
.proSelectChevron{ opacity:.85; font-size: .95rem; }
.proSelectMenu{
  position:absolute;
  left:0; right:0;
  top: calc(100% + 8px);
  z-index: 3000;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(14,22,48,.98), rgba(11,16,32,.94));
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  max-height: min(360px, 52vh);
  overflow:auto;
  backdrop-filter: blur(14px);
}
.proSelectGroup{
  padding:10px 12px 6px;
  font-size:0.95rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: rgba(234,240,255,.60);
}
.proSelectOpt{
  margin: 0 8px;
  padding: 10px 10px;
  border-radius: 12px;
  cursor:pointer;
  color: var(--text);
}
.proSelectOpt:hover{ background: rgba(79,255,28,.08); }
.proSelectOpt[aria-selected="true"]{
  outline: 2px solid rgba(79,255,28,.35);
  background: rgba(79,255,28,.10);
}

/* Mobile: make the menu feel like a bottom sheet */
@media (max-width: 760px){
  .proSelectMenu{
    position: fixed;
    left: 10px; right: 10px;
    top: auto;
    bottom: 12px;
    max-height: 60vh;
  }
}


/* === v7: Material Library solid (no transparency) === */
:root{
  --ml-solid:#0E1630;          /* solid panel */
  --ml-solid-2:#0B1020;        /* deeper */
  --ml-stroke: rgba(255,255,255,.10);
}

/* Ensure the Material Library modal/card is fully opaque and matches dark theme */
#matLibModal .modalCard,
#matLibCard{
  background: var(--ml-solid) !important;
  border-color: var(--ml-stroke) !important;
}

/* If any inner wrappers were using translucent fills, make them solid */
#matLibCard .modalHd,
#matLibCard .modalBd{
  background: var(--ml-solid) !important;
}

/* Library list + editor surfaces */
#matLibCard .ml-left,
#matLibCard .ml-right,
#matLibCard .ml-wrap,
#matLibCard .ml-box{
  background: var(--ml-solid-2) !important;
  border-color: var(--ml-stroke) !important;
}

/* Items: keep hover/selected states but remove translucent base */
#matLibCard .ml-item{
  background: transparent !important;
}
#matLibCard .ml-item:hover{
  background: rgba(255,255,255,.06) !important;
}
#matLibCard .ml-item.sel{
  background: rgba(79,255,28,.10) !important;
  outline-color: rgba(79,255,28,.45) !important;
}


/* === v8: Match Material Library top bar to main top bar === */
#matLibCard .modalHd{
  background: linear-gradient(180deg, rgba(11,16,32,.95), rgba(11,16,32,.75)) !important;
  border-bottom: 1px solid rgba(79,255,28,.35) !important;
  box-shadow: inset 0 -1px 0 rgba(79,255,28,.35);
}

/* Thin green accent line */
#matLibCard .modalHd::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: linear-gradient(90deg, rgba(79,255,28,.9), rgba(79,255,28,.5));
}


/* === v9: Primary button text fluro green === */
button.primary,
.btn.primary,
.primary{
  color: var(--accent2) !important;
  background: linear-gradient(180deg, rgba(79,255,28,.22), rgba(79,255,28,.12)) !important;
  border-color: rgba(79,255,28,.55) !important;
}

button.primary:hover,
.btn.primary:hover,
.primary:hover{
  color: var(--accent2) !important;
  box-shadow: var(--ringStrong), 0 10px 22px rgba(79,255,28,.18);
}


/* === v10: Destructive buttons with red glow === */
button.danger,
.btn.danger,
.danger{
  color: var(--accent2) !important;
  background: linear-gradient(180deg, rgba(255,77,77,.22), rgba(255,77,77,.12)) !important;
  border-color: rgba(255,77,77,.55) !important;
  box-shadow: 0 0 0 0 rgba(255,77,77,0), 0 10px 22px rgba(255,77,77,.12);
}

button.danger:hover,
.btn.danger:hover,
.danger:hover{
  color: var(--accent2) !important;
  box-shadow: var(--ringStrong), 0 10px 22px rgba(255,77,77,.22);
}

button.danger:focus-visible,
.btn.danger:focus-visible,
.danger:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(255,77,77,.32),
    0 10px 22px rgba(255,77,77,.24);
}

/* === Fix: Account / Login modal solid (no transparency) === */
#authModal .modalCard{
  background: var(--ml-solid) !important;
  border-color: var(--ml-stroke) !important;
}

#authModal .modalHd,
#authModal .modalBd,
#authModal .modalFt{
  background: var(--ml-solid) !important;
}

/* === Fix: Account Info modal solid (match Account/Login modal) === */
#accountInfoModal .modalCard{
  background: var(--ml-solid) !important;
  border-color: var(--ml-stroke) !important;
}

#accountInfoModal .modalHd,
#accountInfoModal .modalBd,
#accountInfoModal .modalFt{
  background: var(--ml-solid) !important;
}

/* === Pro status overlay (entitlements gating) === */
.overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 9999;
}
.overlayCard{
  width: min(420px, calc(100vw - 32px));
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: var(--card, #111);
  color: var(--text, #fff);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  text-align: center;
}
.spinner{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 4px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.9);
  margin: 0 auto;
  animation: spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.legal-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 6px 12px;
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 12px;
  background: linear-gradient(180deg, rgba(11,16,32,.92), rgba(11,16,32,.70));
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.08);
  z-index: 100;
}

.legal-footer a {
  color: #666;
  text-decoration: none;
}

.legal-footer a:hover {
  color: rgba(79,255,28,.10) !important;
  text-decoration: underline;
}

.legal-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  line-height: 1.6;
}

.legal-page h1 {
  margin:0;
      font-size:24px;
      letter-spacing:.2px;
      color: rgba(12, 17, 34, 1);
      display:flex;
      align-items:center;
      gap:10px;
}

.legal-page h2 {
  margin-top: 32px;
}

#contactForm label{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* top/left aligned */
  gap: 6px;
}

#contactForm input,
#contactForm textarea{
  width: 100%;
  box-sizing: border-box;
  font: inherit;
}

#contactForm button {
  margin-top: 12px;
  padding: 10px 16px;

  background: rgba(79, 255, 28, 1) !important; /* Festool green */
  color: #fff;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;

  border: none;
  border-radius: 6px;
  cursor: pointer;

  transition: background-color 0.15s ease, transform 0.05s ease;
}

#contactForm button:hover {
  background: rgba(79, 255, 28, 1) !important; /* Festool green */
}

#contactForm button:active {
  transform: translateY(1px);
}

#contactForm button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}