:root{--font:Arial, Helvetica, sans-serif;--base-size:16px}body{min-height:100vh;font-family:var(--font);font-size:var(--base-size);background-color:#709296;justify-content:center;margin:0 auto;display:flex}#app-container{box-sizing:border-box;background:#fff;border-radius:10px;width:100%;max-width:960px;min-height:100vh;margin:0 auto;box-shadow:0 8px 24px #12361f2e}header{color:#fff;background:linear-gradient(90deg,#2e6f40 30%,#afa);padding:24px 20px 18px;font-style:italic}header h1{text-transform:lowercase;margin:0;font-size:clamp(28px,5vw,40px)}header .tag-line{margin:0}.nav-bar{box-sizing:border-box;background:#2e6f40;width:100%;margin:10px 0;padding:10px;box-shadow:0 3px 8px #173d241f}.nav-list{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:10px;margin:0;padding:0;list-style:none;display:flex}.nav-link,.nav-action{box-sizing:border-box;color:#173d24;min-height:42px;font:inherit;cursor:pointer;background:#afa;border:2px solid #0000;border-radius:4px;justify-content:center;align-items:center;padding:8px 16px;font-weight:700;line-height:1.2;text-decoration:none;transition:background-color .14s,color .14s,border-color .14s;display:inline-flex}.nav-link:hover,.nav-action:hover,.nav-link[aria-current=page]{color:#2e6f40;background:#fff}.nav-action--logout{color:#fff;background:#c62828}.nav-action--logout:hover,.nav-action--logout:active{color:#fff;background:#8e0000}.nav-link:focus-visible,.nav-action:focus-visible{outline-offset:2px;outline:3px solid #fff}main{box-sizing:border-box;width:100%;max-width:920px;margin:24px auto;padding:12px 32px 32px;line-height:1.55}main h2{color:#245b34;margin:28px 0 10px;font-size:1.35rem;font-weight:700}main table{border-collapse:collapse;background:#fff;border:1px solid #d4e1d7;border-radius:6px;width:100%;margin:16px auto 24px;overflow:hidden}main th,main td{text-align:left;border:1px solid #d4e1d7;padding:10px 12px}main th{color:#245b34;background-color:#e8f2eb}main tbody tr:nth-child(2n){background:#f8fbf8}main a{color:#24653a;text-underline-offset:3px;font-weight:700;text-decoration-thickness:1px}main a:hover{color:#153e23}main a:focus-visible{outline-offset:2px;outline:3px solid #80a9e8}footer{text-align:center;color:#507276;padding:18px 12px;font-size:.875rem}:is(input,select,button,textarea){font-family:var(--font);font-size:var(--base-size)}button{color:#fff;cursor:pointer;background:#2e6f40;border:1px solid #2e6f40;border-radius:5px;min-height:40px;padding:8px 14px;font-weight:700;line-height:1.2;transition:background-color .14s,box-shadow .14s,transform .14s}button:hover:not(:disabled){background:#1d4d2b}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.6}button:focus-visible,:is(input,select,textarea):focus-visible{outline-offset:2px;outline:3px solid #80a9e8}:is(input:not([type=checkbox]):not([type=radio]),select,textarea){box-sizing:border-box;color:#173d24;background:#fff;border:1px solid #a9c0ae;border-radius:5px;min-height:40px;padding:8px 10px}select[multiple]{min-height:132px}input[type=checkbox],input[type=radio]{accent-color:#2e6f40}form.two-column{background:#f3f8f4;border:1px solid #d4e1d7;border-radius:8px;grid-template-columns:minmax(130px,190px) minmax(0,1fr);align-items:center;gap:12px 16px;max-width:720px;margin:24px auto;padding:28px;display:grid;box-shadow:0 3px 12px #12361f14}form label{color:#244a30;align-items:center;gap:.5rem;font-weight:600;display:inline-flex}form .span-two{grid-column:1/-1}form :user-invalid{border:2px solid #b22222}form :is(input:not([type=checkbox]),select,textarea){width:100%}@media (width<=600px){form.two-column{grid-template-columns:minmax(0,1fr);padding:20px}form.two-column .span-two{grid-column-end:auto}main{margin:16px auto;padding:8px 18px 24px}}.error-message{color:#b22222;background:#fff4f4;border:1px solid #e2aaaa;border-radius:5px;padding:10px 12px;font-weight:700}.success-message{color:#1d5e2b;background:#f0f8f1;border:1px solid #b7d6bd;border-radius:5px;padding:10px 12px;font-weight:700}.admin-dashboard details{background:#fbfdfb;border:1px solid #c8d8cc;border-radius:6px;margin:16px 0;padding:12px}.admin-dashboard summary{color:#245b34;cursor:pointer;font-weight:700}.admin-table-scroll{max-width:100%;overflow-x:auto}.admin-table-scroll table{width:100%}.admin-dashboard :is(button,input,select){min-height:38px}.admin-dashboard button{margin:2px}.admin-activity-form{background:#f3f8f4;border:1px solid #d4e1d7;border-radius:6px;grid-template-columns:minmax(120px,180px) minmax(180px,1fr);align-items:center;gap:10px;max-width:620px;margin:12px 0;padding:16px;display:grid}.admin-activity-form h3,.admin-form-actions{grid-column:1/-1}.admin-activity-form :is(input:not([type=checkbox]),select){box-sizing:border-box;width:100%}.admin-activity-form .admin-checkbox{grid-column:1/-1}.admin-form-actions{gap:8px;display:flex}.admin-story{background:#f3f7f7;border-left:4px solid #709296;margin:12px 0;padding:12px}.admin-story-status{color:#245b34;font-weight:700}.admin-pagination{justify-content:center;align-items:center;gap:12px;margin:20px 0;display:flex}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}#stories{flex-wrap:wrap;align-items:baseline;gap:20px;display:flex}#stories article{color:#fff;background-color:#709296;border-radius:10px;flex-direction:column;row-gap:5px;max-width:12em;padding:10px;display:flex}#stories article .author{text-align:right;font-style:italic}.login-page,.join-page,.register-page{max-width:920px;margin-left:auto;margin-right:auto}.home-page>p{max-width:760px}.home-page>h2:not(:first-child){border-top:1px solid #e1ebe3;padding-top:8px}.login-page>p,.join-page>p{color:#405c47}.join-page select[multiple]{padding:6px}.join-page form.two-column>p{margin:0}.login-page form.two-column>p{grid-column:1/-1;margin:4px 0 0}#stories article{flex:220px;max-width:320px;box-shadow:0 4px 12px #12361f1f}@media (width<=600px){main{padding-left:16px;padding-right:16px}form.two-column{padding:18px}.admin-activity-form{grid-template-columns:minmax(0,1fr)}.admin-activity-form h3,.admin-activity-form .admin-checkbox,.admin-form-actions{grid-column:auto}.admin-pagination{flex-wrap:wrap}#stories{gap:12px}#stories article{max-width:none}}