:root {
      --bg-color: #1A1A19;
      --card-bg: #2C2C2C;
      --input-bg: #1A1A19;
      --text-primary: #F8F8F7;
      --text-secondary: #B9B9B7;
      --border-color: #5E5E5B;
      --action-blue: #4A90E2;
      --action-blue-hover: #4080d0;
      --action-green: #28a745;
      --action-green-hover: #218838;
      --danger-color: #ff4d4d;
    }

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

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: var(--bg-color);
        min-height: 100vh;
        padding: 20px;
        color: var(--text-primary);
    }

    .container { max-width: 600px; margin: 0 auto; }

    .card {
        background: var(--card-bg);
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
        margin-bottom: 20px;
        border: 1px solid var(--border-color);
    }

    h1 { color: var(--text-primary); margin-bottom: 10px; }
    .subtitle { color: var(--text-secondary); margin-bottom: 30px; }

    .step { display: none; }
    .step.active { display: block; }
    .card-footer { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-color); text-align: center; font-size: 12px; color: var(--text-secondary); }
    .card-footer a { color: #FFFFFF; text-decoration: none; margin: 0 5px; }
    .card-footer a:hover { text-decoration: underline; color: var(--text-primary); }