/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].rules[0].oneOf[0].use[2]!./src/styles.css ***!
  \********************************************************************************************************************************************************************************************************/
/* ============================================================
   KINETIC BRUTALISM — Design System
   ============================================================ */

:root {
  /* Surface hierarchy */
  --surface:                    #0e0e0e;
  --surface-dim:                #0e0e0e;
  --surface-bright:             #2c2c2c;
  --surface-container-lowest:   #000000;
  --surface-container-low:      #131313;
  --surface-container:          #1a1919;
  --surface-container-high:     #201f1f;
  --surface-container-highest:  #262626;
  --surface-variant:            #262626;

  /* Primary (neon pink) */
  --primary:                    #ff8c98;
  --primary-dim:                #ff6e81;
  --primary-fixed:              #ff7385;
  --primary-fixed-dim:          #fb5b74;
  --primary-container:          #ff7385;
  --on-primary:                 #64001c;
  --on-primary-container:       #4e0014;
  --on-primary-fixed:           #000000;
  --on-primary-fixed-variant:   #5f001a;
  --inverse-primary:            #b42543;

  /* Secondary */
  --secondary:                  #f8747f;
  --secondary-dim:              #f8747f;
  --secondary-fixed:            #ffc2c4;
  --secondary-fixed-dim:        #ffaeb2;
  --secondary-container:        #861f2e;
  --on-secondary:               #49000f;
  --on-secondary-container:     #ffc1c3;
  --on-secondary-fixed:         #6c081d;
  --on-secondary-fixed-variant: #942937;

  /* Tertiary */
  --tertiary:                   #ff6d8c;
  --tertiary-dim:               #e6005c;
  --tertiary-fixed:             #ff8fa3;
  --tertiary-fixed-dim:         #ff7793;
  --tertiary-container:         #f30b63;
  --on-tertiary:                #480018;
  --on-tertiary-container:      #000000;
  --on-tertiary-fixed:          #390011;
  --on-tertiary-fixed-variant:  #77002c;

  /* Error */
  --error:                      #ff7351;
  --error-dim:                  #d53d18;
  --error-container:            #b92902;
  --on-error:                   #450900;
  --on-error-container:         #ffd2c8;

  /* On-surface / text */
  --on-surface:                 #ffffff;
  --on-surface-variant:         #adaaaa;
  --on-background:              #ffffff;
  --inverse-surface:            #fcf9f8;
  --inverse-on-surface:         #565555;
  --outline:                    #767575;
  --outline-variant:            #484847;
  --surface-tint:               #ff8c98;
  --background:                 #0e0e0e;
}

/* ============================================================
   Base
   ============================================================ */

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

body {
  margin: 0;
  padding: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--background);
  color: var(--on-background);
  min-height: 100vh;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

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

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.1);
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid rgba(231, 76, 60, 0.1);
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 600;
}

.btn-primary {
  background: linear-gradient(135deg, #E74C3C, #C0392B);
  color: white;
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #C0392B, #A93226);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

.btn-google {
  background: linear-gradient(135deg, #E74C3C, #C0392B);
  color: white;
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.btn-google:hover {
  background: linear-gradient(135deg, #C0392B, #A93226);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
}

.form-group {
  margin-bottom: 20px;
}

.form-control {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.text-center {
  text-align: center;
}

.mt-3 {
  margin-top: 1rem;
}

.mb-3 {
  margin-bottom: 1rem;
}