:root {
    --gold: #f2c200;
    --ink: #050505;
    --font: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: #050505;
    color: #fff;
    font-family: var(--font);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 16px 48px;
}

.reg-logo {
    align-self: flex-start;
    color: #fff;
    text-decoration: none;
    font-size: 28px;
    font-weight: 800;
}

.reg-logo span { color: var(--gold); }

.reg-box {
    width: min(460px, 100%);
    margin-top: 48px;
    background: #0e0e0e;
    border: 1px solid rgba(242,194,0,0.28);
    border-radius: 18px;
    padding: 32px 26px;
}

.reg-box h1 { margin: 0 0 8px; font-size: 28px; }
.reg-sub { margin: 0 0 22px; color: #aaa; }

.reg-box label {
    display: block;
    margin-bottom: 14px;
    color: #cfcfcf;
    font-size: 14px;
}

.reg-box input {
    width: 100%;
    margin-top: 6px;
    height: 46px;
    border: 1px solid #333;
    border-radius: 10px;
    background: #111;
    color: #fff;
    padding: 0 14px;
    font-size: 15px;
    font-family: var(--font);
}

.reg-pass { position: relative; }

.reg-pass input { padding-right: 44px; }

.reg-eye {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: #aaa;
    cursor: pointer;
    width: 36px;
    height: 36px;
}

.reg-btn,
.reg-google {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 10px;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    font-family: var(--font);
}

.reg-btn {
    background: var(--gold);
    color: #111;
    margin-top: 6px;
}

.reg-google {
    background: transparent;
    color: #fff;
    border: 1px solid #f2c200;
}

.reg-or {
    text-align: center;
    color: #777;
    margin: 16px 0;
}

.reg-error {
    min-height: 20px;
    color: #ff6b6b;
    font-size: 14px;
}

.reg-login {
    text-align: center;
    margin: 18px 0 0;
    color: #aaa;
}

.reg-login a { color: var(--gold); text-decoration: none; }
body {
    margin: 0;
    min-height: 100vh;
    color: #fff;
    font-family: var(--font);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 16px 48px;
    background-color: #050505;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.62) 100%),
        url("../images/yardhub-background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.reg-box {
    background: rgba(10, 10, 10, 0.88);
}
.reg-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.reg-google-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}