/* Mobile-first design + accessibility + responsive tables (v4) */
:root{--color-bg:#006442;--color-surface:#0e4f3a;--color-surface-2:#0a3f2e;--color-border:#1d6b50;--color-text:#e8fff6;--color-muted:#bfe9d8;--color-primary:#31c48d;--color-primary-hover:#22a37a;--radius:10px;--shadow-1:0 4px 12px rgba(0,0,0,.22)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:ui-sans-serif,system-ui,"Segoe UI",Arial;line-height:1.5}
.container{width:min(1100px,100% - 2rem);margin:0 auto;padding:0 1rem}
@media (min-width:1200px){.container{width:min(1100px,100% - 4rem);padding:0 2rem}}

a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline;color:var(--color-primary-hover)}

.app-header{position:sticky;top:0;background:linear-gradient(0deg,var(--color-surface),var(--color-surface-2));border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-1);z-index:10}
.header-inner{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;padding:.6rem 0}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:.75rem}
.nav-link{color:var(--color-text);padding:.5rem .7rem;border-radius:8px}
.nav-link:hover{background:rgba(255,255,255,.06);text-decoration:none}
.nav-toggle{display:none}
@media (max-width: 720px){
  .header-inner{grid-template-columns:auto auto 1fr;gap:.5rem}
  .nav-toggle{display:inline-block;background:transparent;border:1px solid var(--color-border);color:var(--color-text);border-radius:8px;padding:.45rem .7rem}
  .nav-list{display:none;flex-direction:column;background:var(--color-surface-2);position:absolute;left:0;right:0;top:100%;padding:.5rem 1rem;border-bottom:1px solid var(--color-border)}
  .nav-list.open{display:flex}
}

.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.1rem;box-shadow:var(--shadow-1);margin-top:1rem}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 900px){.grid-2{grid-template-columns:1fr}}

.input,select,textarea{width:100%;padding:.68rem .85rem;background:rgba(0,0,0,.15);color:var(--color-text);border:1px solid var(--color-border);border-radius:8px}
.input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#ff6b6b;box-shadow:0 0 0 2px rgba(255,107,107,.2)}
label{display:block;margin:.35rem 0 .3rem}
.form-help{font-size:.9rem;color:#ffd0d0;margin-top:.25rem}
.small-muted{font-size:.9rem;color:var(--color-muted)}

.btn{display:inline-block;background:var(--color-primary);color:#072019;padding:.68rem 1rem;border-radius:8px;border:1px solid transparent;cursor:pointer}
.btn:focus{outline:2px solid rgba(49,196,141,.6);outline-offset:2px}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn-outline{background:transparent;color:var(--color-text);border-color:var(--color-border)}

.app-main{padding:1.2rem 0}
.text-muted{color:var(--color-muted)}

/* Responsive tables */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.65rem 1rem;border-bottom:1px solid var(--color-border);vertical-align:top}
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-responsive .table{min-width:700px}

/* Utility spacing */
.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}
.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}

.app-footer{border-top:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-muted)}