:root{ --green:#1aa76d; --green-700:#118a59; --bg:#f7fbf8; --text:#102a1a; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui, -apple-system,'Segoe UI',Roboto,Arial,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:16px}
header.site-header{background:linear-gradient(180deg,#e9f7f0 0%,#f7fbf8 100%);border-bottom:3px solid var(--green);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:56px;width:auto;border-radius:8px}
.brand .title{font-size:clamp(18px,3vw,26px);font-weight:700}
nav.menu{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.button{background:var(--green);border:none;color:white;padding:10px 14px;border-radius:12px;font-size:16px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:transform .05s ease-in-out, background .2s}
.button:hover{transform:translateY(-1px); background:var(--green-700)}
.button.secondary{background:white;color:var(--green);border:2px solid var(--green)}
.card{background:white;border-radius:16px;padding:16px;box-shadow:0 6px 24px rgba(0,0,0,.08); margin:12px 0}
h1{font-size:clamp(22px,4vw,34px); margin:.3em 0}
h2{font-size:clamp(18px,3vw,24px); margin:.3em 0}
footer.site-footer{margin-top:24px;border-top:3px solid var(--green);background:#ffffff}
.footer-inner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:2px dashed var(--green);border-radius:10px;background:#f2fbf7}
label{font-weight:600;margin-top:8px;display:block}
input[type="file"], input[type="search"], select,textarea,input[type="text"],input[type="number"],input[type="date"]{width:100%;padding:10px;font-size:16px;border-radius:10px;border:2px solid #cfe8dc;background:#fbfffd}
.controls{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.small{font-size:12px;color:#355548}
.grid{display:grid;gap:12px}
.grid.cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4, minmax(0,1fr))}
@media (max-width:1100px){ .grid.cols-4{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:720px){ .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr} }
.progress{height:16px;background:#e9f6ef;border-radius:12px;overflow:hidden}
.progress > div{height:100%;background:var(--green);width:0%}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th{text-align:left;font-size:14px;color:#35614d}
.table td,.table th{padding:8px 10px;background:white;vertical-align:top}
.kwd{display:flex;gap:6px;flex-wrap:wrap}
.kwd .hit{background:#effbf4;border:1px solid #b6f0cf;color:#0c5c3a;padding:4px 8px;border-radius:10px}
.kwd .miss{background:#ffecec;border:1px solid #ffb5b5;color:#7a1a1a;padding:4px 8px;border-radius:10px}
.badge-pill{display:inline-block; padding:4px 8px; border-radius:999px; background:#eaf8f0; border:1px solid #bfead3; font-size:12px}
.list{display:flex;flex-direction:column;gap:8px}
.list .item{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #e6f3ec;border-radius:10px;padding:8px 10px}
.dropzone{border:2px dashed var(--green); border-radius:12px; padding:16px; text-align:center; background:#f6fff9}
.dropzone.drag{background:#e5fbef}
audio{width:100%;max-width:420px;display:block}
.tag{display:inline-block;padding:3px 8px;border-radius:999px;background:#eefaf3;border:1px solid #bde7d1;font-size:12px;margin:2px}
.star{cursor:pointer;font-size:18px;user-select:none}
.star.active{color:#f4b400}