:root { color-scheme: dark; --bayou-950:#07130e; --bayou-900:#0b1d15; --bayou-800:#10291f; --bayou-700:#174433; --moss:#70a878; --gold:#c99b3d; --gold-light:#f0cf77; --panel:rgba(13,31,23,.9); --line:rgba(213,180,94,.2); --muted:#9fb2a7; --text:#f7f4e9; --danger:#f18d82; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(100deg,rgba(7,19,14,.98),rgba(7,19,14,.91) 58%,rgba(11,29,21,.78)),url('/assets/aps-swamp-background.png') center/cover fixed,var(--bayou-950); color:var(--text); display:grid; grid-template-columns:260px 1fr; }
button,input { font:inherit; }
button { border:1px solid rgba(201,155,61,.45); background:linear-gradient(180deg,#235842,#173f30); color:var(--text); border-radius:9px; padding:.68rem .95rem; cursor:pointer; box-shadow:0 5px 15px rgba(0,0,0,.16); }
button:hover { border-color:var(--gold-light); transform:translateY(-1px); }
button:focus-visible,input:focus-visible,a:focus-visible { outline:3px solid var(--gold-light); outline-offset:2px; }
button:disabled { opacity:.4; cursor:not-allowed; transform:none; }
.sidebar { min-height:100vh; padding:1.6rem 1.15rem; border-right:1px solid var(--line); background:rgba(6,19,13,.93); backdrop-filter:blur(14px); display:flex; flex-direction:column; box-shadow:16px 0 50px rgba(0,0,0,.13); }
.brand { display:flex; gap:.8rem; align-items:center; margin:0 .35rem 2.6rem; padding-bottom:1.3rem; border-bottom:1px solid var(--line); }
.brand img { width:50px; height:50px; object-fit:contain; border-radius:12px; background:#f7f3e7; box-shadow:0 0 0 1px var(--gold),0 9px 25px rgba(0,0,0,.25); }
.brand div { display:grid; gap:.15rem; }
.brand strong { font-family:Georgia,'Times New Roman',serif; color:var(--gold-light); font-size:1.2rem; }
.brand span { color:var(--muted); font-size:.67rem; letter-spacing:.14em; text-transform:uppercase; }
nav { display:grid; gap:.42rem; }
.nav { position:relative; text-align:left; border-color:transparent; background:transparent; color:var(--muted); box-shadow:none; padding-left:1rem; }
.nav:hover { color:var(--text); background:rgba(112,168,120,.08); }
.nav.active { background:linear-gradient(90deg,rgba(201,155,61,.18),rgba(112,168,120,.07)); color:var(--gold-light); border-color:rgba(201,155,61,.22); }
.nav.active::before { content:''; position:absolute; left:0; top:.5rem; bottom:.5rem; width:3px; border-radius:3px; background:var(--gold); }
.configure { margin-top:auto; background:transparent; color:var(--muted); box-shadow:none; }
main { padding:2.6rem clamp(1.25rem,4vw,4rem); max-width:1540px; width:100%; }
header { display:flex; justify-content:space-between; align-items:center; }
h1,h2 { font-family:Georgia,'Times New Roman',serif; }
h1 { margin:.1rem 0 0; font-size:clamp(2.2rem,4vw,3.2rem); font-weight:600; }
h2 { margin:0; font-weight:600; }
.eyebrow { color:var(--gold-light); font-size:.7rem; letter-spacing:.2em; font-weight:850; }
.security { color:var(--muted); border:1px solid var(--line); background:rgba(7,19,14,.65); padding:.58rem .85rem; border-radius:99px; font-size:.78rem; }
.security span { display:inline-block; width:.48rem; height:.48rem; margin-right:.45rem; border-radius:50%; background:var(--moss); box-shadow:0 0 10px var(--moss); }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:2rem 0; }
.metrics article,.view { background:var(--panel); border:1px solid var(--line); box-shadow:0 18px 48px rgba(0,0,0,.18); backdrop-filter:blur(11px); }
.metrics article { position:relative; overflow:hidden; padding:1.15rem 1.25rem; border-radius:14px; }
.metrics article::after { content:''; position:absolute; right:-1rem; top:-1.5rem; width:5rem; height:5rem; border-radius:50%; background:radial-gradient(circle,rgba(201,155,61,.17),transparent 68%); }
.metrics span,small { display:block; color:var(--muted); font-size:.8rem; }
.metrics strong { display:block; color:var(--gold-light); font-size:1.9rem; margin-top:.35rem; }
.view { overflow:hidden; border-radius:15px; }
.panel-heading { padding:1.3rem 1.45rem; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); background:rgba(24,61,45,.27); }
.panel-heading p { margin:.4rem 0 0; color:var(--muted); }
.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; }
th,td { text-align:left; padding:1rem 1.25rem; border-bottom:1px solid rgba(213,180,94,.12); }
th { color:var(--gold-light); font-size:.69rem; text-transform:uppercase; letter-spacing:.1em; }
tbody tr:hover { background:rgba(112,168,120,.045); }
td strong { margin-bottom:.3rem; display:block; }
td code { color:#d7e4d8; }
.status { display:inline-flex; gap:.42rem; align-items:center; text-transform:capitalize; }
.status::before { content:''; width:.52rem; height:.52rem; border-radius:50%; background:var(--muted); }
.status.online::before { background:#7ac68a; box-shadow:0 0 12px #7ac68a; }
.cards,.timeline { padding:1rem 1.4rem; display:grid; gap:.7rem; }
.cards article { display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line); background:rgba(7,19,14,.26); padding:1rem; border-radius:10px; }
.cards small { margin-top:.3rem; }
#organization-form { padding:1.25rem 1.4rem; display:flex; gap:.8rem; align-items:end; border-bottom:1px solid var(--line); }
label { display:grid; gap:.4rem; color:var(--muted); font-size:.85rem; flex:1; }
input { color:var(--text); background:rgba(4,13,9,.7); border:1px solid var(--line); border-radius:8px; padding:.72rem; }
.timeline article { display:grid; grid-template-columns:12px 1fr; gap:.8rem; }
.timeline article>span { width:9px; height:9px; border-radius:50%; background:var(--gold); margin-top:.35rem; box-shadow:0 0 9px rgba(201,155,61,.5); }
.timeline p { color:var(--muted); margin:.3rem 0; }
.empty { color:var(--muted); text-align:center; padding:2rem; }
.notice { position:fixed; right:2rem; top:2rem; z-index:5; background:#174432; border:1px solid var(--moss); padding:.8rem 1rem; border-radius:9px; box-shadow:0 12px 35px rgba(0,0,0,.3); }
.notice.bad { background:#4a2423; border-color:var(--danger); }
.hidden { display:none!important; }
dialog { width:min(520px,calc(100% - 2rem)); color:var(--text); background:linear-gradient(145deg,#17392b,#0d2118); border:1px solid var(--gold); border-radius:16px; padding:1.6rem; box-shadow:0 28px 90px #000; }
dialog::backdrop { background:rgba(2,9,6,.84); backdrop-filter:blur(5px); }
dialog form { display:grid; gap:1rem; }
dialog p { color:var(--muted); }
dialog code { padding:1rem; background:rgba(3,12,8,.75); border:1px solid var(--line); border-radius:8px; overflow-wrap:anywhere; }
.dialog-actions { display:flex; justify-content:flex-end; gap:.7rem; }
.secondary { background:transparent; }
.google-signin { display:block; text-align:center; padding:.85rem 1rem; border:1px solid #ded8c7; border-radius:9px; background:#fffdf7; color:#17362a; text-decoration:none; font-weight:750; }
.google-signin:hover { border-color:var(--gold); background:#fff8df; }
@media(max-width:800px) { body{grid-template-columns:1fr;background-attachment:scroll}.sidebar{min-height:auto;padding:1rem;border-right:0;border-bottom:1px solid var(--line)}.brand{margin:0 0 1rem;padding-bottom:.9rem}nav{grid-template-columns:repeat(3,1fr)}.configure{margin-top:1rem}main{padding:1.25rem}.metrics{grid-template-columns:repeat(2,1fr)}header .security{display:none} }