:root{    --dungs-blue:#0057b8;    --dungs-blue-dark:#003f87;    --dungs-light:#f4f8fc;    --success:#16a34a;    --text:#1f2937;    --text-light:#6b7280;    --border:#dbe4ef;    --shadow:        0 8px 24px rgba(15,23,42,.08);    --radius:12px;}*{    margin:0;    padding:0;    box-sizing:border-box;}body{    font-family:'Inter',sans-serif;    background:var(--dungs-light);    color:var(--text);    height:100vh;    overflow: hidden;}/* =======================================   HEADER======================================= */.topbar{    height:72px;    background:white;    border-bottom:1px solid var(--border);    display:flex;    align-items:center;    padding:0 24px;    box-shadow:        0 2px 8px rgba(0,0,0,.04);}.brand{    display:flex;    align-items:center;    gap:16px;}.logo{    height:48px;    width:auto;}.brand h1 {    font-size: 22px;    color: var(--dungs-blue);    text-decoration: underline;    text-decoration-color: #f16c3f;    text-decoration-thickness: 1px;    text-underline-offset: 6px;}.brand span{    font-size:12px;    color:var(--text-light);}.config-header{    display:flex;    justify-content:space-between;    align-items:flex-start;    margin-bottom:8px;}.config-header h2{    margin:0;    color:var(--dungs-blue);}.config-id-wrap{    text-align:right;	margin-top:2px;}.config-id-label{    display:block;    font-size:18px;    color:#94a3b8;}#configId{    font-size:18px;    font-weight:700;    color:var(--text-light);}/* =======================================   MAIN LAYOUT======================================= */.main-layout{    display:flex;    height:calc(100vh - 72px);}/* =======================================   LEFT PANEL======================================= */.config-panel{    width:30%;    min-width:340px;    background:#f8fbff;    border-right:1px solid var(--border);    padding:24px;    overflow: hidden;}/* =======================================   HERO CARD======================================= */.hero-card{    background:linear-gradient(        135deg,        #0057b8,        #0a6ad8    );    color:white;    padding:20px;    border-radius:14px;    margin-bottom:20px;    box-shadow:var(--shadow);}.hero-card h3{    margin-bottom:8px;    font-size:18px;}.hero-card p{    font-size:13px;    line-height:1.6;}/* =======================================   CONFIG CARD======================================= */.card{    background:white;    border-radius:14px;    padding:24px;    box-shadow:var(--shadow);}.card h2{    color:var(--dungs-blue);    margin-bottom:20px;    font-size:22px;}.field{    margin-bottom:18px;}.field label{    display:block;    margin-bottom:5px;    font-size:15px;    font-weight:600;}.field{    position:relative;}.field select{    width:100%;    height:46px;    border:1px solid var(#494d52);    border-radius:10px;    padding:0 40px 0 14px;    appearance:none;	font-size:15px;    -webkit-appearance:none;    -moz-appearance:none;}.field::after{    content:"▼";    position:absolute;    right:14px; /* move left/right by changing this value */    top:62%;    transform:translateY(-50%);    pointer-events:none;    font-size:14px;    color:#666;}.field select:hover{    border-color:var(--dungs-blue);}.field select:focus{    outline:none;    border-color:var(--dungs-blue);    box-shadow:        0 0 0 4px rgba(0,87,184,.12);}/* =======================================   GENERATE BUTTON======================================= */.generate-btn{    width:100%;    height:54px;    margin-top:10px;    border:none;    border-radius:12px;    	background:var(--dungs-blue-dark);    /* background:#d76529; */    color:white;    font-size:16px;    font-weight:700;    cursor:pointer;    transition:.25s;}.generate-btn:hover{    background:var(--dungs-blue);    /* background:#ea8d32; */}/* =======================================   DOWNLOAD BUTTONS======================================= */.download-section-left{    margin-top:25px;    display:flex;    flex-direction:column;    gap:14px;}.download-section-left button{    height:50px;    border:none;    border-radius:12px;    font-size:15px;    font-weight:600;    padding:0 20px;    background:#eef2f7;    color:  #94a3b8;     transition:.25s;    box-shadow:/*     inset 0 0 0 1px #dbe4ef,    0 4px 10px rgba(0,0,0,0.1); */}.download-section-left button.enabled{    background:var(--dungs-blue);    color:#fff; /* var(--dungs-blue); */    cursor:pointer;    box-shadow:0 4px 14px rgba(0,87,184,.12);}.download-section-left button.enabled:hover{    transform:translateY(-0.5px);	background:var(--dungs-blue-dark);}/* Dropdown */.download-actions{    display:flex;    gap:10px;    width:100%;}.download-combo{    display:flex;    position:relative;    flex:1.2;}#btnDownloadMain{    flex:1;    text-align:center;    padding:0 10px;    border-radius:12px 0 0 12px;	border:1px solid var(#494d52);}#btnDownloadArrow{    width:50px;    min-width:50px;    padding:0;    border-radius:0 12px 12px 0;	border:1px solid var(#494d52);}#btnViewDrawing{    flex:1;}.download-menu{    position:absolute;    bottom:calc(100% + 8px);   /* Opens above the button */    left:0;    right:0;    display:none;    grid-template-columns:repeat(1, 1fr);    gap:6px;    padding:8px;    background:#fff;    border-radius:12px;	border:1px solid #dbe4ef;    box-shadow:0 10px 25px rgba(0,0,0,.12);    z-index:9999;}.download-menu.show{    display:grid;}.download-menu a{    display:flex;    align-items:center;    justify-content:center;    padding:10px 12px;    background:#fff;    border:1px solid #dbe4ef;    border-radius:8px;    text-decoration:none;    color:#334155;}.download-menu a:hover{    background:#f5f9ff;    border-color:#3b82f6;}.download-menu a:active{    background:#eaf3ff;}/* BOM Buttons */.bom-actions{    display:flex;    gap:10px;}.bom-actions button{    flex:1;}/* =======================================   RIGHT PANEL======================================= */.viewer-panel{    width:70%;    padding:24px;    display:flex;    flex-direction:column;    gap:18px;}/* =======================================   STATUS BAR======================================= */.status-bar{    display:flex;    align-items:center;    gap:40px;    background:#fff;    border-radius:16px;    padding:18px 24px;    margin-bottom:5px;}.status-step{    font-size:15px;    font-weight:600;    color:#94a3b8;    white-space:nowrap;}.status-step.active{    color:#16a34a;}.generation-time{    margin-left:auto;    font-size:15px;    color:#64748b;}.generation-time span{    color:var(--dungs-blue);    font-weight:700;    font-size:15px;    margin-left:8px;}/* =======================================   VIEWER======================================= */.viewer-card{    flex:1;    background:white;    border-radius:16px;    overflow: visible;    position:relative;    box-shadow:var(--shadow);}#viewerFrame{    width:100%;    height:100%;    border:none;    display:none;}.viewer-loader{    position:absolute;    inset:0;    display:flex;    flex-direction:column;    justify-content:center;    align-items:center;    background:white;}.viewer-loader h2{    margin-top:18px;    color:var(--dungs-blue);}.viewer-loader p{    margin-top:10px;    color:#6b7280;}/* =======================================   SPINNER======================================= */.spinner{    width:60px;    height:60px;    border:5px solid #dbeafe;    border-top:5px solid var(--dungs-blue);    border-radius:50%;    animation:spin 1s linear infinite;}@keyframes spin{    to{        transform:rotate(360deg);    }}/* =======================================   PROGRESS BAR======================================= */.progress{    width:320px;    height:12px;    background:#e5e7eb;    border-radius:20px;    overflow: visible;    margin-top:20px;}.progress-fill{    width:0%;    height:100%;    background:var(--dungs-blue);    transition:.4s;}#progressText{    margin-top:10px;    color:#6b7280;    font-size:13px;}/* =======================================   BOM MODAL======================================= */.modal{    display:none;    position:fixed;    inset:0;    background:rgba(0,0,0,.45);    z-index:9999;		overflow-y: auto;}.modal-content {    width: 1000px;    max-width: 90%;    background: white;    /* Move modal a little higher */    margin: 30px auto;    border-radius: 14px;    overflow: hidden;    box-shadow: 0 10px 40px rgba(0,0,0,.25);    /* Limit height */    max-height: calc(100vh - 60px);    /* Enable vertical scrolling inside modal */    overflow-y: auto;}.modal-header {    position: sticky;    top: 0;    z-index: 10;    background: var(--dungs-blue);    color: white;    padding: 18px 24px;    display: flex;    justify-content: space-between;    align-items: center;}.close-modal{    font-size:30px;    cursor:pointer;}.modal table{    width:100%;    border-collapse:collapse;}.modal th{    background:#f4f8fc;    text-align:center;    padding:14px;}.modal td{    padding:14px;    border-top:1px solid #e5e7eb;}/* =======================================   SCROLLBAR======================================= */::-webkit-scrollbar{    width:8px;}::-webkit-scrollbar-track{    background:#edf2f7;}::-webkit-scrollbar-thumb{    background:#b7c7da;    border-radius:20px;}/* =======================================   RESPONSIVE======================================= */@media(max-width:1200px){    .main-layout{        flex-direction:column;    }    .config-panel{        width:100%;        min-width:100%;    }    .viewer-panel{        width:100%;    }    .info-row{        flex-direction:column;    }.status-bar{    background:white;    border-radius:14px;    padding:16px 20px;    display:flex;    justify-content:space-between;    align-items:center;    box-shadow:var(--shadow);}.status-left{    display:flex;    gap:22px;    align-items:center;    flex-wrap:wrap;}.status-right{    display:flex;    gap:20px;    align-items:center;    font-size:13px;    color:#64748b;}.status-right strong{    color:var(--dungs-blue);    margin-left:4px;}}