/* Shared by every /performance and /calculator page — reset, design tokens,
   and the top-bar/breadcrumb/container chrome common to both. Page-specific
   rules live in performance.css / calculator.css so neither page ships CSS
   it doesn't use. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-deep: #060a13;
    --bg-card: #0f1523;
    --bg-elevated: #1a2236;
    --border: #1e293b;
    --border-light: #2a3a52;
    --primary: #39b2f5;
    --gradient: linear-gradient(135deg, #39b2f5, #6366f1);
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --text-dim: #64748b;
    --white: #ffffff;
    --success: #22c55e;
    --font-display: 'Outfit', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); background: var(--bg-deep); color: var(--text); line-height: 1.6; }
a { text-decoration: none; color: inherit; }

.top-bar { background: rgba(10,14,23,0.9); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 16px 0; position: sticky; top: 0; z-index: 100; }
.top-bar-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--text-muted); transition: color 0.3s; }
.back-link:hover { color: var(--primary); }
.back-link svg { width: 18px; height: 18px; }
.top-bar-logo { height: 26px; width: auto; }
.register-link { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--primary); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 24px 0 0; }
.breadcrumb a, .breadcrumb span { font-size: 13px; color: var(--text-dim); font-family: var(--font-display); font-weight: 500; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--border-light); }
.breadcrumb .current { color: var(--text); }

.btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; font-size: 16px; font-weight: 600; color: var(--white); background: var(--gradient); border: none; border-radius: 12px; font-family: var(--font-display); transition: all 0.3s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(57,178,245,0.3); }