/* ═══════════ پایه ═══════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
    background: #e9e9e9;
    color: #666666;
    font-family: "Roboto", "Segoe UI", Tahoma, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══════════ عنوان صفحه ═══════════ */
.pen-title { padding: 50px 0 30px; text-align: center; letter-spacing: 2px; }
.pen-title h1 { margin: 0 0 12px; font-size: 44px; font-weight: 300; color: #444; }
.pen-title span { font-size: 13px; color: #9a9a9a; }

/* ═══════════ کانتینر احراز هویت ═══════════ */
.auth-container { position: relative; max-width: 460px; width: 100%; margin: 0 auto 100px; }

.auth-container.active .card:first-child { background: #f2f2f2; margin: 0 15px; }
.auth-container.active .card:nth-child(2) { background: #fafafa; margin: 0 10px; }

.auth-container.active .card.alt {
    top: 20px; right: 0; width: 100%; min-width: 100%; height: auto;
    border-radius: 5px; padding: 60px 0 40px; overflow: hidden;
}
.auth-container.active .card.alt .toggle {
    position: absolute; top: 40px; left: -70px;
    box-shadow: none; transform: scale(10); transition: transform 0.3s ease;
}
.auth-container.active .card.alt .toggle svg { display: none; }
.auth-container.active .card.alt .title,
.auth-container.active .card.alt .input-container,
.auth-container.active .card.alt .button-container,
.auth-container.active .card.alt .msg {
    right: 0; opacity: 1; visibility: visible; transition: 0.3s ease;
}
.auth-container.active .card.alt .title { transition-delay: 0.25s; }
.auth-container.active .card.alt form .input-container:nth-of-type(1) { transition-delay: 0.35s; }
.auth-container.active .card.alt form .input-container:nth-of-type(2) { transition-delay: 0.45s; }
.auth-container.active .card.alt form .input-container:nth-of-type(3) { transition-delay: 0.55s; }
.auth-container.active .card.alt form .input-container:nth-of-type(4) { transition-delay: 0.65s; }
.auth-container.active .card.alt .button-container { transition-delay: 0.75s; }

/* ═══════════ کارت ═══════════ */
.auth-container .card {
    position: relative;
    background: #ffffff;
    border-radius: 5px;
    padding: 60px 0 40px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: 0.3s ease;
}
.auth-container .card:first-child {
    background: #fafafa; height: 10px;
    border-radius: 5px 5px 0 0; margin: 0 10px; padding: 0;
}

.auth-container .card .title {
    position: relative; z-index: 1;
    border-right: 5px solid #ed2553;
    margin: 0 0 35px; padding: 10px 50px 10px 0;
    color: #ed2553; font-size: 30px; font-weight: 600;
}

/* ═══════════ ورودی‌های شناور ═══════════ */
.auth-container .input-container { position: relative; margin: 0 60px 50px; }

.auth-container .input-container input {
    outline: none; z-index: 1; position: relative; background: none;
    width: 100%; height: 60px; border: 0; color: #212121;
    font-size: 22px; font-weight: 400; font-family: inherit;
}
.auth-container .input-container input:focus ~ label,
.auth-container .input-container input:valid ~ label {
    color: #9d9d9d;
    transform: translate(12%, -50%) scale(0.75);
}
.auth-container .input-container input:focus ~ .bar:before,
.auth-container .input-container input:focus ~ .bar:after { width: 50%; }

.auth-container .input-container label {
    position: absolute; top: 0; right: 0; color: #757575;
    font-size: 22px; font-weight: 300; line-height: 60px;
    transition: 0.2s ease; pointer-events: none;
}
.auth-container .input-container .bar {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: #757575; width: 100%; height: 1px;
}
.auth-container .input-container .bar:before,
.auth-container .input-container .bar:after {
    content: " "; position: absolute; background: #ed2553;
    width: 0; height: 2px; transition: 0.2s ease;
}
.auth-container .input-container .bar:before { right: 50%; }
.auth-container .input-container .bar:after  { left: 50%; }

/* ═══════════ دکمه ═══════════ */
.auth-container .button-container { margin: 0 60px; text-align: center; }
.auth-container .button-container button {
    outline: 0; cursor: pointer; position: relative; display: inline-block;
    background: 0; width: 240px; border: 2px solid #e3e3e3; padding: 18px 0;
    font-size: 22px; font-weight: 600; line-height: 1; font-family: inherit;
    overflow: hidden; transition: 0.3s ease;
}
.auth-container .button-container button span {
    position: relative; z-index: 1; color: #ddd; transition: 0.3s ease;
}
.auth-container .button-container button:before {
    content: " "; position: absolute; top: 50%; left: 50%;
    display: block; background: #ed2553; width: 30px; height: 30px;
    border-radius: 100%; margin: -15px 0 0 -15px;
    opacity: 0; transition: 0.3s ease;
}
.auth-container .button-container button:hover,
.auth-container .button-container button:active,
.auth-container .button-container button:focus { border-color: #ed2553; }
.auth-container .button-container button:hover span,
.auth-container .button-container button:active span,
.auth-container .button-container button:focus span { color: #ed2553; }
.auth-container .button-container button:active span,
.auth-container .button-container button:focus span { color: #ffffff; }
.auth-container .button-container button:active:before,
.auth-container .button-container button:focus:before { opacity: 1; transform: scale(10); }

/* ═══════════ فوتر کارت ورود ═══════════ */
.auth-container .card .footer {
    margin: 40px 0 0; color: #d3d3d3;
    font-size: 20px; font-weight: 300; text-align: center;
}
.auth-container .card .footer a { color: inherit; text-decoration: none; transition: 0.3s ease; }
.auth-container .card .footer a:hover { color: #bababa; }

/* ═══════════ پیام‌ها ═══════════ */
.auth-container .msg {
    position: relative; z-index: 2;
    margin: -10px 60px 35px; padding: 12px 16px;
    border-radius: 4px; font-size: 15px; line-height: 1.9;
}
.auth-container .msg-error   { background: rgba(237, 37, 83, 0.07); color: #d81b4a; border: 1px solid rgba(237, 37, 83, 0.35); }
.auth-container .msg-success { background: rgba(46, 125, 50, 0.08); color: #2e7d32; border: 1px solid rgba(46, 125, 50, 0.35); }

/* ═══════════ کارت ثبت‌نام (دایره‌ای) ═══════════ */
.auth-container .card.alt {
    position: absolute; top: 40px; left: -70px; z-index: 10;
    width: 140px; height: 140px; background: none;
    border-radius: 100%; box-shadow: none; padding: 0; transition: 0.3s ease;
}
.auth-container .card.alt .toggle {
    position: relative; background: #ed2553;
    width: 140px; height: 140px; border-radius: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    color: #ffffff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.auth-container .card.alt .toggle svg { width: 52px; height: 52px; fill: #ffffff; }

.auth-container .card.alt .title,
.auth-container .card.alt .input-container,
.auth-container .card.alt .button-container,
.auth-container .card.alt .msg {
    right: 100px; opacity: 0; visibility: hidden;
}
.auth-container .card.alt .title { border-color: #ffffff; color: #ffffff; }
.auth-container .card.alt .title .close {
    cursor: pointer; position: absolute; top: 0; left: 60px;
    color: #ffffff; font-size: 50px; font-weight: 400; line-height: 1;
}
.auth-container .card.alt .title .close:before { content: "×"; }

.auth-container .card.alt .msg { margin: 0 60px 30px; }
.auth-container .card.alt .msg-error { background: rgba(255, 255, 255, 0.16); color: #ffffff; border-color: rgba(255, 255, 255, 0.5); }

.auth-container .card.alt .input-container input { color: #ffffff; }
.auth-container .card.alt .input-container input:focus ~ label { color: #ffffff; }
.auth-container .card.alt .input-container input:focus ~ .bar:before,
.auth-container .card.alt .input-container input:focus ~ .bar:after { background: #ffffff; }
.auth-container .card.alt .input-container input:valid ~ label { color: #ffffff; }
.auth-container .card.alt .input-container label { color: rgba(255, 255, 255, 0.8); }
.auth-container .card.alt .input-container .bar { background: rgba(255, 255, 255, 0.8); }

.auth-container .card.alt .button-container button {
    width: 100%; background: #ffffff; border-color: #ffffff;
}
.auth-container .card.alt .button-container button span { color: #ed2553; }
.auth-container .card.alt .button-container button:hover { background: rgba(255, 255, 255, 0.9); }
.auth-container .card.alt .button-container button:active:before,
.auth-container .card.alt .button-container button:focus:before { display: none; }

/* ═══════════ کامپوننت‌های داشبورد، پروفایل و ویرایش ═══════════ */
.navbar-material {
    background: #ffffff; padding: 14px 0; margin-bottom: 30px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.navbar-material .brand { font-size: 20px; font-weight: 600; color: #ed2553; }

.panel-card {
    background: #ffffff; border-radius: 5px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.panel-card .panel-header {
    padding: 18px 24px; background: #ffffff;
    border-right: 5px solid #ed2553;
    font-size: 18px; font-weight: 600; color: #333;
}

.btn-material {
    display: inline-block; background: #ed2553; color: #ffffff;
    border: none; border-radius: 3px; padding: 8px 20px;
    text-decoration: none; text-align: center; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: 0.3s ease;
}
.btn-material:hover { background: #d11d47; color: #ffffff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
.btn-material.outline { background: transparent; color: #ed2553; border: 1px solid #ed2553; box-shadow: none; }
.btn-material.outline:hover { background: #ed2553; color: #ffffff; }

.badge-admin { background: #ed2553; color: #ffffff; }
.badge-user  { background: #3f51b5; color: #ffffff; }

.avatar {
    width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.avatar-lg {
    width: 90px; height: 90px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.form-material label { color: #757575; font-weight: 300; }