/* W3.CSS Modernized Edition (2026)
   Optimized from original 4.10 (2018)
   Updated for flexbox, accessibility, dark mode, and mobile responsiveness
   Theme: White background / black text
*/

/* Base Reset */
html,body {
    margin:0;
    padding:0;
    font-family:Verdana, sans-serif;
    font-size:15px;
    line-height:1.5;
    background:#fff;
    color:#000;
    box-sizing:border-box;
}
*, *::before, *::after { box-sizing:inherit }

/* Typography */
h1,h2,h3,h4,h5,h6 {
    font-family:"Segoe UI", Arial, sans-serif;
    font-weight:400;
    margin:10px 0;
}
h1{font-size:36px} h2{font-size:30px} h3{font-size:24px}
h4{font-size:20px} h5{font-size:18px} h6{font-size:16px}

/* Images */
img { max-width:100%; height:auto; vertical-align:middle }

/* Utility Classes */
.w3-center{text-align:center!important}
.w3-left{text-align:left!important}
.w3-right{text-align:right!important}
.w3-padding{padding:8px 16px!important}
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}
.w3-margin{margin:16px!important}
.w3-hide{display:none!important}
.w3-show{display:block!important}

/* Cards */
.w3-card {
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
    border-radius:4px;
    padding:16px;
    background:#fff;
}

/* Buttons */
.w3-button {
    display:inline-block;
    padding:8px 16px;
    cursor:pointer;
    border:none;
    border-radius:4px;
    background:#eee;
    color:#000;
    transition:background .2s;
}
.w3-button:hover { background:#ccc }

/* Flexbox Grid System */
.w3-row {
    display:flex;
    flex-wrap:wrap;
    margin:0 -8px;
}
.w3-col {
    padding:0 8px;
    flex:1 0 100%;
}
@media (min-width:600px){
    .w3-col.s6{flex:0 0 50%}
    .w3-col.s4{flex:0 0 33.33%}
    .w3-col.s3{flex:0 0 25%}
}
@media (min-width:992px){
    .w3-col.l6{flex:0 0 50%}
    .w3-col.l4{flex:0 0 33.33%}
    .w3-col.l3{flex:0 0 25%}
}

/* Tables */
.w3-table {
    width:100%;
    border-collapse:collapse;
}
.w3-table th, .w3-table td {
    padding:8px;
    border-bottom:1px solid #ddd;
}

/* Inputs */
.w3-input, .w3-select {
    width:100%;
    padding:8px;
    border:1px solid #ccc;
    border-radius:4px;
}

/* Modal */
.w3-modal {
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.5);
    z-index:1000;
}
.w3-modal-content {
    background:#fff;
    margin:10% auto;
    padding:16px;
    max-width:600px;
    border-radius:6px;
}

/* Dark Mode */
@media (prefers-color-scheme:dark){
    body { background:#111; color:#eee }
    .w3-card { background:#222; color:#eee }
    .w3-button { background:#333; color:#eee }
    .w3-button:hover { background:#555 }
    .w3-modal-content { background:#222; color:#eee }
}

/* Colors */
.w3-red{background:#f44336!important;color:#fff!important}
.w3-blue{background:#2196F3!important;color:#fff!important}
.w3-green{background:#4CAF50!important;color:#fff!important}
.w3-yellow{background:#ffeb3b!important;color:#000!important