/*Vars*/
:root{
--debug-outline:  none; /*1px dashed #666;*/
--site-width:     100rem;
--font:           system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/*Global*/
*,*::before,*::after{box-sizing:border-box;outline:var(--debug-outline)}
html{font-size:16px;scroll-behavior:smooth;scrollbar-gutter:stable both-edges}
body{margin:0;font:normal clamp(1.2rem,0.95rem + 0.3vw,1.6rem)/1.6 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word;background:#000;color:#fff}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
section{padding-block:clamp(5px,1.5vh,1.5rem)}
header{background:#1A211D}
h1,h2,h3{color:#aaa;font-weight:700}

/*Struct*/
.ct-center{max-width:var(--site-width);margin-inline:auto;padding-inline:clamp(0.2rem,3vw,2rem)}
.ct-center--narrow{max-width:70rem}
.gr-2,.gr-3,.gr-4,.gr-5{display:grid;gap:clamp(2rem,2vw,4rem);contain:layout}
.gr-2{grid-template-columns:repeat(2,1fr)}
.gr-3{grid-template-columns:repeat(3,1fr)}
.gr-4{grid-template-columns:repeat(4,1fr)}
.gr-5{grid-template-columns:repeat(5,1fr)}
.full{grid-column:1/-1}

/*Logo*/
#logo svg{width:auto;height:clamp(80px,10vw,120px)}

/*Table*/
table{width:100%;border-collapse:collapse;background:#0f0f0f;border:1px solid #222;border-radius:8px;contain:content}
thead{background:#8A2E0D;color:#fff}
th{text-align:left;padding:0.6rem clamp(5px,2vw,1.2rem);font-weight:bold;font-size:1rem}
td{padding:0.6rem clamp(5px,2vw,1.2rem);border-bottom:1px solid #1e1e1e;color:#e6e6e6;font-size:1rem}
tbody tr:nth-child(even){background:#121212}
tbody tr:hover{background:#1a211d}
.value{font-weight:bold;text-align:right}
.value.high{color:#2e8b57}
.value.mid{color:#cfcfcf}

/*Forms*/
label {display:block;margin-bottom:0.5rem;color:#ccc;font-size:0.9rem}
input,textarea{width:100%;padding:0.75rem 1rem;background:#0f0f0f;border:1px solid #222;border-radius:8px;color:#e6e6e6;outline:none;transition:border-color 0.2s ease,box-shadow 0.2s ease}
input:focus,textarea:focus{border-color:#2E8B57;box-shadow:0 0 0 2px rgba(46,139,87,0.2)}
button{background:#2e8b57;color:white;border:none;padding:0.9rem 1.5rem;border-radius:8px;cursor:pointer;transition:0.2s ease}
button:hover{background:#246f45}
input::placeholder,textarea::placeholder{color:#666;opacity:1}
input:focus::placeholder,textarea:focus::placeholder{color:#444}

/*Nav*/
#menu{background:#8A2E0D;border-top:1px solid #791d0c}
#menu ul{list-style:none;margin-block:0;display:flex;flex-wrap:nowrap}
#menu li{position:relative}
#menu li ul{display:none;position:absolute;top:100%;left:0;min-width:200px;background:#222;z-index:1000;padding-left:0}
#menu li li ul{top:0;left:100%}
#menu li:hover>ul,#menu li:focus-within>ul{display:block}
#menu a{display:block;padding:0.7rem clamp(5px,2vw,1.25rem);color:#fff;white-space:nowrap;font-weight:bold;transition:background .2s ease}
#menu a:hover{background:#B3471F}
#menu a:focus-visible{outline:2px solid #fff;outline-offset:-2px}

@media (max-width:960px){
#menu ul,#menu li{display:block;width:100%}
#menu li ul{position:static;padding-left:1rem;background:none}
#menu a{padding-inline:0;border-bottom:1px solid #6b170c}
.gr-2,.gr-3,.gr-4,.gr-5,form{grid-template-columns:1fr}
}
