:root{ --green:#0ea35a; --bg:#f5f7f6; --text:#0f172a; --muted:#64748b; --card:#fff; }
*{ box-sizing:border-box }
html,body{ height:100% }
body.bg{ margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); }
.container{ max-width:980px; margin:24px auto; padding:0 16px }
.logo{ display:flex; align-items:center; gap:12px; margin-bottom:12px }
.logo.small img{ width:40px; height:40px }
.logo img{ width:56px; height:56px; border-radius:12px }
.subtitle{ color:var(--muted) }
.card{ background:var(--card); padding:20px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.06) }
.grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; margin-top:16px }
.col-span-2{ grid-column: span 2 }
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.brand{ display:flex; gap:10px; align-items:center }
.brand img{ width:40px; height:40px; border-radius:10px }
.menu{ display:flex; gap:10px; align-items:center }
label{ display:block; font-weight:600; margin:10px 0 6px }
input{ width:100%; padding:12px; border:1px solid #e2e8f0; border-radius:12px; outline:none }
input:focus{ border-color:var(--green) }
.btn{ appearance:none; border:1px solid transparent; border-radius:999px; padding:10px 16px; cursor:pointer }
.btn-primary{ background:var(--green); color:#fff }
.btn-ghost{ background:#eef2f6; color:#0f172a }
.link{ color:var(--green); text-decoration:none }
.link:hover{ text-decoration:underline }
.muted{ color:var(--muted) }
.mt-1{ margin-top:8px }
.mt-2{ margin-top:16px }
.footer{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:20px }
.rotator{ position:relative; min-height:54px }
.slide{ position:absolute; inset:0; opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s }
.slide.active{ opacity:1; transform:translateY(0) }
.link-card{ display:block; text-decoration:none; color:inherit }
.toast{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:#111827; color:#fff; padding:10px 14px; border-radius:12px; opacity:0; pointer-events:none }
.toast.show{ opacity:1 }
.toast.error{ background:#b91c1c }
@media (max-width:720px){ .grid{ grid-template-columns:1fr } .col-span-2{ grid-column: span 1 } }