html,
body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:Arial, Helvetica, sans-serif;
    background:#FAFCFF;
}

#appHeader{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    padding:10px 20px;
    background:rgb(44, 44, 44);
    border-bottom:1px solid #333;
    position:relative;
}

#homeLink{
    position:absolute;
    left:20px;
    color:white;
    text-decoration:none;
    font-size:16px;
    font-weight:500;
    padding:5px 10px;
    border-radius:4px;
    transition:background 0.3s;
}

#homeLink:hover{
    background:rgba(255,255,255,0.1);
}


#appTitle{
    font-size:19px;
    font-weight:bold;
    color:white;
    line-height:1.5;
    margin:0;
}

#appSubtitle{
    font-size:13px;
    color:#DDE6F0;
    line-height:1.0;
    margin:1px 0 0 0;
}


/* ===========================
   Toolbar
=========================== */

#toolbar{
    background:#F8F9FA;
    border-bottom:1px solid #B8C7D1;
    min-height:36px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:2px 12px;
}

#toolbar select{
    min-width:220px;
    height:30px;
    font-size:15px;
    padding:2px 6px;
}

#toolbar label{
    font-size:16px;
    font-weight:500;
    white-space:nowrap;
}

/* ===========================
   Main Content
=========================== */

#contentArea{
    display:flex;
    width:100%;
    height:calc(100vh - 110px);
}

/* ===========================
   LEFT COLUMN
=========================== */

#leftPanel{
    width:35%;
   
    display:flex;
    flex-direction:column;
    border-right:1px solid #999;
    background:#F2F7FC;
     align-self:stretch;
     flex:0 0 35%;

}

/* ===========================
   Symmetry
=========================== */

#axialPanel{
    flex:0 0 23%;
    position:relative;
    border-bottom:1px solid #999;
    overflow:hidden;
    min-height:0;
}

#axialCanvas{
    width:100%;
    height:calc(100% - 24px);
    display:block;
}

#symmetryPanel{
    flex:0 0 40%;
    position:relative;
    border-bottom:1px solid #999;
    overflow:hidden;
    min-height:0;
}

#symmetryCanvas{
    width:100%;
    height:calc(100% - 24px);
    display:block;
}



/* ===========================
   Stereonet
=========================== */

#stereonetPanel{
    flex:0 0 30%;
    position:relative;
    overflow:hidden;
    min-height:0;
}

#stereonetCanvas{
     width:100%;

    height:calc(100% - 24px);

    display:block;
}

/* ===========================
   RIGHT COLUMN
=========================== */

#rightPanel{

width:65%;

display:flex;

flex-direction:column;
 align-self:stretch;


}


/* ===========================
   Titles
=========================== */

.panelTitle{
    
   height:24px;
   line-height:24px;
   font-size:14px;
   background:#E8F1FA;
   color:#003366;
   border-bottom:1px solid #B8C7D1;
   font-weight:bold;
   text-align:center;
}

/* ===========================
   Bottom Info Panel
=========================== */

#infoPanel{

    height:140px;

    border-top:2px solid #1F4E79;

    background:white;

    padding:8px 12px;

    box-sizing:border-box;

    overflow:auto;

}

#formName{
    font-size:16px;
    margin:0;
}



table{
    border-collapse:collapse;
}

td{
    padding:2px 10px 2px 0;
}

/* ===========================
   Responsive
=========================== */

@media (max-width:900px){

    #contentArea{
        flex-direction:column;
    }

    #leftPanel{
        width:100%;
        height:40%;
        border-right:none;
        border-bottom:1px solid #999;
    }

    #rightPanel{
        width:100%;
        height:60%;
    }
}


#hoverLabel{
    color:#C62828;
    font-weight:bold;
    text-shadow:
    0 0 3px #FFE082;
}

#controlPanel{
    display:flex;
    flex-direction:column;
    gap:8px;
}

#controlPanel select,
#controlPanel button{
    width:100%;
    box-sizing:border-box;
    padding:6px;
    font-size:14px;
}

#controlPanel label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
}

#resetView{
    height:26px;
    font-size:13px;
}


#infoTop{
    display:flex;
    justify-content:space-between;
}

#staticInfo{
    width:48%;
    font-size:13px;
    line-height:1.3;
    padding-left:8px;
}

#dynamicInfo{
    width:48%;
    font-size:13px;
    color:#C62828;
   font-weight:bold;
   padding-left:8px;
}

#mineralInfo{
    flex-shrink:0;
    padding:9px 8px;
    min-height:52px;
    border-top:1px solid #CCCCCC;
    font-size:12px;
    color:#003366;
    white-space:normal;
    line-height:1.2;
    font-weight:bold;
    background:#F2F7FC;
}

#viewerContainer{
    position:relative;
    flex:1;
    width:100%;
   overflow:hidden;

}

#viewer{
    width:100%;
    height:100%;
}