:root{
  --brand:#118A3B; --brand-600:#0f7b35;
  --ink:#0b1321; --muted:#64748b; --line:#e5e7eb; --bg:#f6f8fb;
}
.as-wrap{max-width:1100px;margin:0 auto;padding:0 16px;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
.as-hero{position:relative;border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,#fff,#f7fbf9);
  box-shadow:0 20px 50px rgba(16,24,40,.08);padding:22px;margin:16px 0 26px}
.as-hero h1{font-size:clamp(22px,6vw,38px);line-height:1.12;margin:0 0 8px;color:var(--ink);letter-spacing:-.01em}
.as-hero p{margin:0;color:#1f2937;font-size:clamp(13px,3.5vw,16px)}
.as-hero .cta{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.as-btn{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:14px;padding:12px 14px;font-weight:800;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.as-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 12px 24px rgba(17,138,59,.22)}
.as-btn.primary:hover{background:var(--brand-600)}

.as-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:960px){ .as-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .as-grid{grid-template-columns:1fr} }

.as-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 12px 28px rgba(16,24,40,.07);transition:transform .12s, box-shadow .2s}
.as-card:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(16,24,40,.12)}
.as-thumb{position:relative;aspect-ratio:16/9;background:#f1f5f9}
.as-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.as-body{padding:14px}
.as-badge{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.as-badge span{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:999px;padding:6px 10px;font-weight:800;font-size:12px;color:#0f172a}
.as-title{margin:6px 0 6px;font-size:18px;color:var(--ink);font-weight:800;line-height:1.25}
.as-meta{display:flex;gap:10px;flex-wrap:wrap;color:#475569;font-size:13px;margin-bottom:8px}
.as-meta .dot::before{content:'•';margin:0 6px;color:#94a3b8}

.as-single{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
@media (max-width:960px){ .as-single{grid-template-columns:1fr} }
.as-pane{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 10px 22px rgba(16,24,40,.08)}
.as-pane h2{margin:0 0 8px;font-size:clamp(18px,4.8vw,24px);color:var(--ink)}

.as-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#111827;color:#fff;border-radius:12px;padding:12px 14px;z-index:9999;box-shadow:0 10px 20px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s, transform .2s}
.as-toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

.as-modal{position:fixed;inset:0;background:rgba(15,23,42,.48);display:none;align-items:center;justify-content:center;padding:16px;z-index:9998}
.as-modal.open{display:flex}
.as-dialog{background:#fff;border-radius:16px;max-width:520px;width:100%;border:1px solid var(--line);box-shadow:0 30px 70px rgba(2,6,23,.35);padding:16px}
.as-dialog h3{margin:0 0 8px;font-size:20px}
.as-dialog .row{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.as-input, .as-textarea{border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;font:inherit}
.as-textarea{min-height:120px;resize:vertical}
.as-actions{display:flex;gap:10px;justify-content:flex-end}
.as-btn.ghost{background:#fff}