#glassnext-app{
  --navy:#0b1e2d;--navy2:#14334d;--blue:#042c53;--blue2:#4db6e8;
  --bg:#eef3f7;--card:#fff;--text:#112433;--muted:#64748b;--line:#dce6ee;
  --ok:#087f5b;--warn:#b45309;--danger:#b42318;--soft:#f7fafc;
  all:initial;
  box-sizing:border-box;
  font-family:Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  display:block;
}
#glassnext-app *{box-sizing:border-box}
#glassnext-app button,#glassnext-app input,#glassnext-app select,#glassnext-app textarea{font:inherit}
#glassnext-app .topbar{background:linear-gradient(100deg,var(--navy),var(--navy2));color:white;padding:16px 22px;display:flex;gap:18px;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;box-shadow:0 3px 12px #0002}
#glassnext-app .brand{font-weight:800;font-size:21px;letter-spacing:.2px}
#glassnext-app .tagline{font-size:12px;opacity:.8;margin-top:3px}
#glassnext-app .brand-zone{display:flex;align-items:center;gap:13px;min-width:0}
#glassnext-app .top-logo{height:54px;width:auto;max-width:118px;object-fit:contain;background:#fff;border-radius:8px;padding:4px;box-shadow:0 2px 8px #0002}
#glassnext-app .other-costs{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
#glassnext-app .other-cost-row{display:grid;grid-template-columns:minmax(180px,1fr) 150px auto;gap:8px;align-items:end}
#glassnext-app .mount-rate-line{display:grid;grid-template-columns:minmax(180px,1fr) minmax(160px,220px);gap:12px}

#glassnext-app .shell{max-width:1480px;margin:auto;padding:18px}
#glassnext-app .tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
#glassnext-app .tab{border:1px solid #c9d8e4;background:#fff;color:var(--navy);padding:10px 13px;border-radius:9px;font-weight:700;cursor:default}
#glassnext-app .tab.active{background:var(--blue);color:white;border-color:var(--blue)}
#glassnext-app .page{display:none}
#glassnext-app .page.active{display:block}
#glassnext-app .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:15px}
#glassnext-app .span-12{grid-column:span 12}
#glassnext-app .span-8{grid-column:span 8}
#glassnext-app .span-7{grid-column:span 7}
#glassnext-app .span-6{grid-column:span 6}
#glassnext-app .span-5{grid-column:span 5}
#glassnext-app .span-4{grid-column:span 4}
#glassnext-app .card{background:var(--card);border:1px solid #e3ebf1;border-radius:13px;box-shadow:0 6px 18px rgba(15,36,52,.06);overflow:hidden}
#glassnext-app .card:hover{transform:none;box-shadow:0 6px 18px rgba(15,36,52,.06);border-color:#e3ebf1}
#glassnext-app .card-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
#glassnext-app .card-head h2,#glassnext-app .card-head h3{margin:0;font-size:16px}
#glassnext-app .card-body{padding:15px 16px}
#glassnext-app .fields{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:12px}
#glassnext-app .fields.three{grid-template-columns:repeat(3,minmax(140px,1fr))}
#glassnext-app label{display:block;font-size:12px;color:#3e5668;font-weight:650;margin-bottom:5px}
#glassnext-app input,#glassnext-app select,#glassnext-app textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:#fff;color:var(--text)}
#glassnext-app input[readonly],#glassnext-app select[disabled]{background:#f0f4f8;color:#506777;cursor:default}
#glassnext-app textarea{min-height:82px;resize:vertical}
#glassnext-app .btn{border:0!important;background:var(--blue)!important;color:#fff!important;border-radius:8px!important;padding:10px 13px!important;font-weight:750!important;cursor:pointer!important;box-shadow:none!important}
#glassnext-app .btn:hover{filter:brightness(1.15)!important}
#glassnext-app .btn.secondary{background:#fff!important;color:var(--blue)!important;border:1.5px solid var(--blue)!important}
#glassnext-app .btn.ghost{background:var(--blue)!important;color:#fff!important;border:1.5px solid var(--blue)!important}
#glassnext-app .btn.danger{background:var(--danger)!important;color:#fff!important}
#glassnext-app .btn.small{padding:7px 9px!important;font-size:12px!important}
#glassnext-app .toolbar{display:flex;gap:8px;flex-wrap:wrap}
#glassnext-app .page-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
#glassnext-app .page-nav .btn{min-width:140px;justify-content:center}
#glassnext-app .page-nav .btn:disabled{opacity:.5;cursor:not-allowed!important}
#glassnext-app .note{font-size:12px;color:var(--muted);line-height:1.45}
#glassnext-app .status{font-size:13px;margin:8px 0}
#glassnext-app .ok{color:var(--ok)}
#glassnext-app .warn{color:var(--warn)}
#glassnext-app .danger-text{color:var(--danger)}
#glassnext-app .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
#glassnext-app .metric{border:1px solid var(--line);border-radius:10px;padding:11px;background:var(--soft);font-size:12px;color:#506777}
#glassnext-app .metric strong{display:block;color:var(--text);font-size:19px;margin-top:4px}
#glassnext-app table{width:100%;border-collapse:collapse}
#glassnext-app th,#glassnext-app td{padding:8px;border-bottom:1px solid #edf2f6;font-size:13px;text-align:left;vertical-align:middle}
#glassnext-app th{background:#f6f9fb;color:#40586a;position:sticky;top:0}
#glassnext-app .table-wrap{overflow:auto;max-height:550px;-webkit-overflow-scrolling:touch}
#glassnext-app .table-wrap table{min-width:500px}
#glassnext-app .table-wrap.scroll-hint{position:relative}
#glassnext-app .table-wrap.scroll-hint::after{content:"";position:absolute;top:0;right:0;width:14px;height:100%;background:linear-gradient(90deg,transparent,rgba(220,230,238,.6));pointer-events:none}
#glassnext-app .pane-header-grid,#glassnext-app .pane-row-grid{display:grid;grid-template-columns:1.1fr 0.9fr 1fr 1fr 0.9fr 1.4fr minmax(90px,auto);gap:8px;align-items:end}
#glassnext-app .pane-header-grid{font-size:13px;color:#40586a;padding:0 0 6px}
#glassnext-app .pane-header-cell{padding:0 4px}
#glassnext-app .pane-row-grid .pane-label{display:none;font-size:11px;color:#3e5668;font-weight:650;margin-bottom:4px}
#glassnext-app .pane-row-grid .pane-cell{display:flex;flex-direction:column}
#glassnext-app .pane-row-grid input,#glassnext-app .pane-row-grid select{width:100%}
#glassnext-app .pane-add-row{margin-top:12px;display:block;text-align:right}
#glassnext-app .pane-add-row .btn{padding:10px 22px!important;font-size:15px}
#glassnext-app .progress{height:9px;background:#e2e8f0;border-radius:999px;overflow:hidden}
#glassnext-app .progress>div{height:100%;width:0;background:linear-gradient(90deg,var(--blue2),var(--blue))}
#glassnext-app .canvas-wrap{overflow:auto;max-height:680px;border:1px solid var(--line);border-radius:9px;background:#fff;-webkit-overflow-scrolling:touch}
#glassnext-app canvas{display:block;background:#fff;max-width:100%;height:auto}
#glassnext-app .choice-btn.selected{cursor:default}
#glassnext-app .choice-btn:focus{outline:2px solid var(--blue2);outline-offset:2px}
#glassnext-app .install-choice-btn.selected{outline:3px solid var(--blue2);outline-offset:2px}
#glassnext-app .legend{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;margin:9px 0}
#glassnext-app .sw{width:15px;height:10px;border-radius:3px;border:1px solid #8aa0b1;display:inline-block}
#glassnext-app .summary-box{border-left:4px solid var(--blue);background:#f2f8fd;padding:12px;border-radius:8px;line-height:1.5}
#glassnext-app .money-table td:last-child,#glassnext-app .money-table th:last-child{text-align:right}
#glassnext-app .total-row{font-weight:800;font-size:15px}
#glassnext-app .grand-row{font-weight:900;font-size:17px;background:#eef8ff}
#glassnext-app .doc{background:white;border:1px solid var(--line);border-radius:10px;padding:26px;min-height:600px;line-height:1.5}
#glassnext-app .doc-head{display:flex;justify-content:space-between;gap:20px;border-bottom:3px solid var(--navy);padding-bottom:14px;margin-bottom:22px}
#glassnext-app .doc-brand{font-size:24px;font-weight:850;color:var(--navy)}
#glassnext-app .doc h1{font-size:22px;margin:0 0 16px}
#glassnext-app .doc h3{margin:20px 0 7px;color:var(--navy)}
#glassnext-app .doc table th{position:static}
#glassnext-app .signature-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:40px}
#glassnext-app .signature{border-top:1px solid #8da0ad;padding-top:7px;min-height:70px}
#glassnext-app .pill{display:inline-block;padding:4px 9px;border-radius:999px;background:#e8f4fc;color:#176999;font-size:12px;font-weight:750}
#glassnext-app .hidden{display:none!important}
#glassnext-app .tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--blue2);color:#fff;font-size:11px;font-weight:700;cursor:pointer;margin-left:5px;vertical-align:middle;transition:background .15s}
#glassnext-app .tooltip-icon:hover{background:var(--blue)}
#glassnext-app .tooltip-popover{position:fixed;background:#fff;border:1px solid #d0dae4;border-radius:12px;box-shadow:0 6px 20px rgba(15,36,52,.18);padding:16px;max-width:300px;width:max-content;font-family:inherit;font-size:14px;line-height:1.55;color:#2c3e50;z-index:99999;box-sizing:border-box}
#glassnext-app .tooltip-popover p{margin:0;padding:0}
#glassnext-app .tooltip-popover img{max-width:100%;width:100%;border-radius:8px;margin:0 0 10px 0;display:block;border:1px solid #e8edf2}
#glassnext-app .tooltip-popover img:last-child{margin-bottom:0}
#glassnext-app .choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
#glassnext-app .choice-intro{font-size:15px;line-height:1.6;margin-bottom:20px}
#glassnext-app .choice-subtitle{margin:24px 0 10px;font-size:16px}
#glassnext-app .measure-only{display:none}
#glassnext-app .measure-only:not(.hidden){display:block}
#glassnext-app .choice-btn{background:#fff!important;color:var(--blue)!important;border:1.5px solid var(--blue)!important;transition:background .15s,color .15s,border-color .15s!important;padding:24px!important;text-align:left!important;line-height:1.6;white-space:normal;word-break:break-word}
#glassnext-app .choice-btn:hover{filter:none!important;background:#eef4fb!important}
#glassnext-app .choice-btn.selected{background:var(--blue)!important;color:#fff!important;border-color:var(--blue)!important}
#glassnext-app .choice-btn.selected:hover{filter:brightness(1.1)!important;background:var(--blue)!important}
#glassnext-app .choice-title{font-size:18px;font-weight:800;margin-bottom:8px}
#glassnext-app .choice-desc{font-size:14px;opacity:.9}
#glassnext-app .choice-price{font-size:20px;font-weight:800;margin-top:12px}
#glassnext-app .install-choice-btn{padding:20px!important}
#glassnext-app .install-choice-btn .choice-title{font-size:16px}
#glassnext-app .install-choice-btn .choice-desc{font-size:13px}
#glassnext-app .install-choice-btn.selected{outline:3px solid var(--blue2);outline-offset:2px}
#glassnext-app .install-choice-btn{transition:outline .15s}
#glassnext-app #choiceContinue{margin-top:24px;text-align:right}
#glassnext-app #choiceContinueBtn{min-width:180px}
@media(max-width:950px){
  #glassnext-app .span-8,#glassnext-app .span-7,#glassnext-app .span-6,#glassnext-app .span-5,#glassnext-app .span-4{grid-column:span 12}
  #glassnext-app .fields.three{grid-template-columns:1fr 1fr}
  #glassnext-app .doc h1{font-size:20px}
  #glassnext-app .doc h3{font-size:16px}
}
@media(max-width:650px){
  #glassnext-app .shell{padding:10px}
  #glassnext-app .fields,#glassnext-app .fields.three{grid-template-columns:1fr}
  #glassnext-app .topbar{position:static;padding:10px 12px;gap:10px}
  #glassnext-app .brand{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #glassnext-app .tagline{display:none}
  #glassnext-app .doc{padding:15px}
  #glassnext-app .signature-grid{grid-template-columns:1fr}
  #glassnext-app .top-logo{height:40px;max-width:80px;padding:2px}
  #glassnext-app .other-cost-row,#glassnext-app .mount-rate-line{grid-template-columns:1fr}

  /* Tab navigation: horizontal scroll strip */
  #glassnext-app .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:10px;gap:5px}
  #glassnext-app .tabs::-webkit-scrollbar{display:none}
  #glassnext-app .tab{white-space:nowrap;flex-shrink:0;padding:9px 12px;font-size:13px}

  /* Touch-friendly inputs: 16px prevents iOS auto-zoom */
  #glassnext-app input,#glassnext-app select,#glassnext-app textarea{font-size:16px;padding:11px 12px;min-height:44px}
  #glassnext-app textarea{min-height:82px}
  #glassnext-app label{font-size:13px}

  /* Touch-friendly buttons */
  #glassnext-app .btn{padding:12px 16px!important;min-height:44px;font-size:15px}
  #glassnext-app .btn.small{padding:10px 12px!important;min-height:38px;font-size:13px}

  /* Toolbar: full-width stack */
  #glassnext-app .toolbar{flex-direction:column;gap:8px;width:100%}
  #glassnext-app .toolbar .btn{width:100%;text-align:center}

  /* Page navigation: full-width stack */
  #glassnext-app .page-nav{flex-direction:column;gap:10px;margin-top:16px;padding-top:14px}
  #glassnext-app .page-nav .btn{width:100%;min-width:auto}

  /* Card headers: stack title + toolbar vertically */
  #glassnext-app .card-head{flex-direction:column;align-items:flex-start;gap:10px}

  /* Metrics grid: tighter for small screens */
  #glassnext-app .metrics{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  #glassnext-app .metric{padding:10px}
  #glassnext-app .metric strong{font-size:17px}

  /* Data tables: tighter padding */
  #glassnext-app th,#glassnext-app td{padding:6px 5px;font-size:12px}
  #glassnext-app .table-wrap table{min-width:420px}
  #glassnext-app .table-wrap{max-height:420px}

  /* Pane table: mobile-friendly grid, no horizontal scroll */
  #glassnext-app .pane-table-wrap{overflow:visible;max-height:none}
  #glassnext-app .pane-table-wrap.scroll-hint::after{display:none}
  #glassnext-app .pane-table-wrap table{display:block;width:100%;min-width:0!important}
  #glassnext-app #paneTable thead{display:none}
  #glassnext-app #paneTable tbody{display:block;width:100%}
  #glassnext-app #paneTable tbody tr{display:block;width:100%;border-bottom:1px solid var(--line);margin-bottom:12px;padding-bottom:12px}
  #glassnext-app #paneTable tbody tr:last-child{border-bottom:0;margin-bottom:0}
  #glassnext-app #paneTable td{display:block;width:100%;padding:0;border:0}
  #glassnext-app .pane-header-grid{display:none}
  #glassnext-app .pane-row-grid{grid-template-columns:1fr 1fr;gap:8px}
  #glassnext-app .pane-row-grid .pane-label{display:block}
  #glassnext-app .pane-row-grid .pane-kenmerk{grid-column:1;grid-row:1}
  #glassnext-app .pane-row-grid .pane-aantal{grid-column:2;grid-row:1}
  #glassnext-app .pane-row-grid .pane-breedte{grid-column:1;grid-row:2}
  #glassnext-app .pane-row-grid .pane-hoogte{grid-column:2;grid-row:2}
  #glassnext-app .pane-row-grid .pane-rotatie{grid-column:1;grid-row:3}
  #glassnext-app .pane-row-grid .pane-ruimte{grid-column:2;grid-row:3}
  #glassnext-app .pane-row-grid .pane-delete{grid-column:1 / -1;grid-row:4;text-align:center}
  #glassnext-app .pane-row-grid .pane-delete .btn{width:100%;padding:12px 16px!important;font-size:15px}
  #glassnext-app .pane-row-grid input,#glassnext-app .pane-row-grid select{font-size:16px;padding:11px 12px;min-height:44px}
  #glassnext-app .pane-add-row{display:block}
  #glassnext-app .pane-add-row .btn{width:100%;padding:14px 16px!important;font-size:16px}

  /* Choice page: single column, compact */
  #glassnext-app .choice-grid{grid-template-columns:1fr;gap:12px}
  #glassnext-app .choice-btn{padding:14px 16px!important;text-align:left!important;min-height:44px}
  #glassnext-app .choice-btn div{font-size:15px!important}
  #glassnext-app .choice-btn div:nth-child(2){font-size:13px!important;opacity:.9}
  #glassnext-app .choice-btn div:nth-child(3){font-size:18px!important;margin-top:8px!important}
  #glassnext-app .install-choice-btn{padding:12px 14px!important}
  #glassnext-app #choiceContinue{text-align:center!important}
  #glassnext-app #choiceContinueBtn{width:100%;max-width:none;min-width:auto}

  /* Photo upload */
  #glassnext-app #photoUploadArea{gap:8px;justify-content:center}
  #glassnext-app .photo-slot .btn.secondary{width:90px!important;height:90px!important}
  #glassnext-app .photo-preview{width:90px!important;height:90px!important}
  #glassnext-app .photo-slot .btn.secondary span:first-child{font-size:24px!important}
  #glassnext-app .photo-slot .btn.secondary span:last-child{font-size:10px!important}

  /* Offer document: scrollable tables */
  #glassnext-app .doc table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  #glassnext-app .doc-head{flex-direction:column;gap:8px}
  #glassnext-app .doc h1{font-size:18px}
  #glassnext-app .doc h3{font-size:15px}
  #glassnext-app .doc-brand{font-size:20px}

  /* Tooltip popover mobile: fit to viewport */
  #glassnext-app .tooltip-popover{max-width:92vw;width:auto;left:4vw!important;right:4vw!important;padding:12px;font-size:13px}

  /* Consent label */
  #glassnext-app #offerConsent + span{font-size:13px}
}
@media(max-width:400px){
  #glassnext-app .shell{padding:8px}
  #glassnext-app .metrics{grid-template-columns:1fr}
  #glassnext-app .card-body{padding:10px 12px}
  #glassnext-app .tab{padding:8px 10px;font-size:12px}
  #glassnext-app .doc{padding:10px}
  #glassnext-app .toolbar .btn{font-size:14px;padding:10px 12px!important}
  #glassnext-app .btn{font-size:14px;padding:10px 12px!important;min-height:40px}
  #glassnext-app .choice-btn{padding:12px 14px!important}
  #glassnext-app .choice-btn div{font-size:14px!important}
  #glassnext-app .choice-btn div:nth-child(3){font-size:16px!important}
  #glassnext-app .page-nav .btn{font-size:14px}
  #glassnext-app .table-wrap table{min-width:360px}
}
@media print{
  #glassnext-app .topbar,#glassnext-app .tabs,#glassnext-app .no-print{display:none!important}
  #glassnext-app .shell{padding:0}
  #glassnext-app .page{display:none!important}
  #glassnext-app .page.active{display:block!important}
  #glassnext-app .card{box-shadow:none;border:0}
  #glassnext-app .doc{border:0;padding:0}
}