:root {
    --primary: #2563eb;
    --secondary: #64748b;
    --accent: #dc2626;
    --success: #16a34a;
    --bg: #f1f5f9;
    --panel: #ffffff;
    --border: #cbd5e1;
    --text: #1e293b;
    --text-light: #64748b;
}
* { box-sizing: border-box; margin:0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height:1.6; }
.wrap { max-width:1200px; margin:0 auto; padding:16px 20px; }
.btn { border:none; border-radius:8px; padding:10px 18px; cursor:pointer; color:#fff; background:var(--primary); transition:filter .15s; display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-weight:500; }
.btn:hover { filter:brightness(1.08); }
.btn-sm { padding:6px 12px; font-size:0.85rem; }
.btn-secondary { background:var(--secondary); }
.btn-success { background:var(--success); }
.btn-accent { background:var(--accent); }
.btn-outline { background:transparent; color:var(--primary); border:2px solid var(--primary); }
.btn-block { width:100%; justify-content:center; }
.flex { display:flex; }
.flex-between { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.flex-center { display:flex; align-items:center; gap:12px; }
.gap-8 { gap:8px; }
.hidden { display:none!important; }
.text-muted { color:var(--text-light); }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-weight:600; font-size:0.9rem; color:var(--text-light); margin-bottom:4px; }
.form-group input { width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:8px; font-size:1rem; }
.form-group input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,0.15); }
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#e0e7ff,#f1f5f9); padding:20px; }
.login-box { background:#fff; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,0.08); padding:40px 36px; width:100%; max-width:400px; }
.login-box h1 { font-size:1.8rem; display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.login-box .subtitle { color:var(--text-light); margin-bottom:24px; font-size:0.95rem; }
.register-link { margin-top:16px; font-size:0.9rem; color:var(--text-light); }
.register-link a { color:var(--primary); text-decoration:none; font-weight:600; }
.footer-email { margin-top:20px; font-size:0.85rem; color:var(--text-light); border-top:1px solid #e2e8f0; padding-top:16px; text-align:center; }
.tool-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px; margin-top:20px; }
.tool-card { background:#fff; border-radius:12px; padding:28px 20px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,0.08); cursor:pointer; transition:transform .2s; border:2px solid transparent; text-decoration:none; color:var(--text); display:block; }
.tool-card:hover { transform:translateY(-4px); border-color:var(--primary); }
.tool-card .icon { font-size:3rem; margin-bottom:12px; display:block; color:var(--primary); }
.tool-card .name { font-size:1.15rem; font-weight:600; }
.doc-item { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #e2e8f0; }
.doc-item:hover { background:#f8fafc; }
.doc-item .info .title { font-weight:600; font-size:1.05rem; }
.doc-item .info .meta { font-size:0.8rem; color:var(--text-light); }
.doc-item .actions { display:flex; gap:6px; }
.cloud-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px; margin-top:12px; }
.cloud-item { background:#fff; border-radius:8px; padding:16px 12px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,0.08); border:1px solid #e2e8f0; }
.cloud-item .icon { font-size:2.8rem; display:block; margin-bottom:6px; color:var(--secondary); }
.cloud-item.folder .icon { color:#f59e0b; }
.cloud-item .name { font-size:0.85rem; font-weight:500; word-break:break-all; }
.empty-state { text-align:center; padding:40px 20px; color:var(--text-light); }
.empty-state .icon { font-size:3.5rem; opacity:0.5; display:block; margin-bottom:12px; }
.footer { text-align:center; padding:20px 0 12px; color:var(--text-light); font-size:0.85rem; border-top:1px solid #e2e8f0; margin-top:30px; }
.footer a { color:var(--primary); text-decoration:none; }
.loading { text-align:center; padding:30px; color:var(--text-light); }
.alert-error { background:#fee2e2; color:#b91c1c; padding:10px 14px; border-radius:8px; margin-bottom:16px; }
.toast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(80px); background:#0f172a; color:#fff; padding:12px 28px; border-radius:30px; opacity:0; transition:opacity .3s,transform .3s; z-index:9999; white-space:nowrap; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }