*{margin:0;padding:0;box-sizing:border-box}
:root{--ds-bg:#f0f4f8;--ds-white:#fff;--ds-primary:#0ea5e9;--ds-primary-dark:#0284c7;--ds-text:#0f172a;--ds-text2:#64748b;--ds-muted:#94a3b8;--ds-border:#e2e8f0}
body.ds{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--ds-bg);color:var(--ds-text);min-height:100vh}
.ds-nav{display:flex;justify-content:space-between;align-items:center;padding:0 2rem;height:52px;background:var(--ds-white);border-bottom:1px solid var(--ds-border)}
.ds-brand{font-size:1.1rem;font-weight:700;color:var(--ds-primary)}.ds-nav-r{display:flex;align-items:center;gap:1rem}
.ds-link{color:var(--ds-text2);text-decoration:none;font-size:.85rem}.ds-link:hover,.ds-link.active{color:var(--ds-primary)}
.ds-user{color:var(--ds-muted);font-size:.85rem}
.ds-btn{display:inline-block;padding:.4rem 1rem;background:var(--ds-primary);color:#fff;border:none;border-radius:6px;font-size:.85rem;font-weight:600;cursor:pointer;text-decoration:none;font-family:inherit}.ds-btn:hover{background:var(--ds-primary-dark)}
.ds-btn.outline{background:none;color:var(--ds-text2);border:1px solid var(--ds-border)}.ds-btn.lg{padding:.65rem 2rem;font-size:1rem}.ds-btn.sm{padding:.25rem .6rem;font-size:.8rem}.ds-btn.block{width:100%;text-align:center}
.ds-hero{text-align:center;padding:6rem 2rem;max-width:600px;margin:0 auto}.ds-hero h1{font-size:2.2rem;margin-bottom:1rem;color:var(--ds-primary)}.ds-hero p{color:var(--ds-text2);margin-bottom:2rem}
.ds-login-bg{background:var(--ds-bg);display:flex}.ds-login-center{display:flex;justify-content:center;align-items:center;width:100%;min-height:100vh;padding:2rem}
.ds-login-card{width:100%;max-width:380px;background:var(--ds-white);border:1px solid var(--ds-border);border-radius:10px;padding:2.5rem;text-align:center}
.ds-login-card h1{font-size:1.3rem;color:var(--ds-primary);margin-bottom:.3rem}.ds-login-card>p{color:var(--ds-text2);font-size:.9rem;margin-bottom:1.5rem}
.ds-form{display:flex;flex-direction:column;gap:.6rem}.ds-form input{padding:.55rem .8rem;border:1px solid var(--ds-border);border-radius:6px;font-size:.9rem}.ds-form input:focus{outline:none;border-color:var(--ds-primary)}
.ds-alert{background:#fef2f2;border:1px solid#fecaca;color:#dc2626;padding:.5rem;border-radius:6px;font-size:.85rem;margin-bottom:.5rem}
.ds-demo{margin-top:1rem;font-size:.8rem;color:var(--ds-muted)}code{background:var(--ds-bg);padding:.1rem .3rem;border-radius:3px}
.ds-content{max-width:900px;margin:0 auto;padding:2rem}.ds-content h1{font-size:1.4rem;margin-bottom:1.5rem}.ds-content h2{font-size:1.1rem;margin-bottom:.5rem}
.ds-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem}
.ds-stat{background:var(--ds-white);border:1px solid var(--ds-border);border-radius:8px;padding:1.2rem;text-align:center}
.ds-stat-val{font-size:1.8rem;font-weight:700;color:var(--ds-primary)}.ds-stat-label{font-size:.8rem;color:var(--ds-muted)}
.ds-info{background:var(--ds-white);border:1px solid var(--ds-border);border-radius:8px;padding:1.5rem}.ds-info p{font-size:.9rem;color:var(--ds-text2);margin-bottom:.5rem}
.ds-footer{text-align:center;padding:2rem;color:var(--ds-muted);font-size:.8rem}