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

body {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;

    background: #f1f5f9;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    padding: 20px 16px;

    color: #1e293b;

}

.container { max-width: 520px; width: 100%; }

.card {

    background: #ffffff;

    border-radius: 24px;

    box-shadow: 0 20px 60px rgba(0,0,0,0.06);

    padding: 32px 24px;

}

.header {

    text-align: center;

    margin-bottom: 24px;

}

.header .material-icons { font-size: 48px; color: #2d7aff; }

.header h1 { font-size: 24px; font-weight: 700; margin: 4px 0 2px; color: #0f172a; }

.header p { color: #64748b; font-size: 15px; }

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

.form-group label {

    display: block;

    font-weight: 600;

    font-size: 14px;

    margin-bottom: 5px;

    color: #0f172a;

}

.form-group label .material-icons {

    vertical-align: middle;

    margin-right: 4px;

    color: #2d7aff;

    font-size: 18px;

}

.form-group input,

.form-group textarea,

.form-group select {

    width: 100%;

    padding: 12px 16px;

    font-size: 15px;

    border: 1.5px solid #d1d9e6;

    border-radius: 12px;

    background: #fafcff;

    transition: 0.2s;

    font-family: inherit;

    color: #1e293b;

}

.form-group textarea { resize: vertical; min-height: 100px; }

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus {

    border-color: #2d7aff;

    outline: none;

    box-shadow: 0 0 0 3px rgba(45,122,255,0.12);

    background: #fff;

}

.btn {

    width: 100%;

    padding: 14px;

    font-size: 16px;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    transition: 0.2s;

    touch-action: manipulation;

    text-decoration: none;

    color: #fff;

}

.btn-primary { background: #2d7aff; color: #fff; }

.btn-primary:hover { background: #1a5fd9; }

.btn-success { background: #22c55e; color: #fff; }

.btn-success:hover { background: #16a34a; }

.btn-danger { background: #ef4444; color: #fff; }

.btn-danger:hover { background: #dc2626; }

.btn .material-icons { font-size: 22px; }

.alert {

    padding: 12px 16px;

    border-radius: 10px;

    font-size: 14px;

    margin-bottom: 16px;

}

.alert.error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

.alert.success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }

.link {

    text-align: center;

    margin-top: 16px;

    font-size: 14px;

    color: #64748b;

}

.link a { color: #2d7aff; text-decoration: none; font-weight: 600; }

.link a:hover { text-decoration: underline; }

@media (max-width: 480px) {

    .card { padding: 24px 16px; }

}