/* about.css — matches main app theme, mobile-first */

:root{
  --bg:#06070a; --text:#e6eef6; --card:#0f1115; --muted:#9aa4b2; --accent:#4cc9f0; --accent-2:#7ef2a9; --radius:14px; --shadow:0 12px 40px rgba(0,0,0,0.6);
}
:root.light{ --bg:#f5f8fb; --text:#05122c; --card:#ffffff; --muted:#475a6b; --accent:#0072ff; --accent-2:#7ef2a9; }

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}

.about-card{width:100%;max-width:520px;background:var(--card);border-radius:14px;padding:26px;box-shadow:var(--shadow);text-align:center;border:1px solid rgba(255,255,255,0.03)}
.about-logo{width:92px;height:92px;border-radius:18px;object-fit:cover;margin:0 auto 10px;box-shadow:0 8px 30px rgba(0,0,0,0.5)}
h1{font-size:22px;margin-bottom:6px}
.subtitle{color:var(--muted);margin-bottom:12px}
.dev-info{color:var(--muted);line-height:1.5;margin-bottom:18px}
.actions{display:flex;flex-direction:column;gap:10px;align-items:center}
.btn{padding:12px 14px;border-radius:12px;border:none;font-weight:700;cursor:pointer;width:100%;max-width:320px}
.back-btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#031219}
.telegram-btn{background:linear-gradient(90deg,#37aee2,#1e96c8);color:#fff}
.linkedin-btn{background:linear-gradient(90deg,#0077b5,#00a0dc);color:#fff}
.back-btn:hover,.telegram-btn:hover,.linkedin-btn:hover{transform:translateY(-3px)}
.footer{margin-top:12px;color:var(--muted);font-size:13px}

.theme-toggle{position:fixed;top:14px;right:14px;width:46px;height:46px;border-radius:12px;border:none;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,0.2)}