/* Shared styles for the front-end auth pages (login + register), which are standalone documents rendered directly via render_template — not part of the front/admin shell, so this file is linked explicitly in their rather than via module_css. */ body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f0f7f4; margin: 0; font-family: 'Poppins', sans-serif; } .auth-card { background: #fff; border: 1px solid #c2ddd0; border-top: 3px solid #059669; border-radius: 14px; padding: 2.2rem 2.4rem; width: 100%; min-width: 320px; max-width: 440px; box-sizing: border-box; box-shadow: 0 8px 32px rgba(5, 150, 105, .08); } .auth-card .brand { margin-bottom: 1.6rem; } .auth-card .brand img { height: 34px; filter: invert(1) sepia(1) saturate(3) hue-rotate(100deg) brightness(.85); } .auth-card h1 { font-size: 1.1rem; font-weight: 600; margin: 0 0 1.4rem; color: #0d1a15; } .auth-error { background: #fff0f0; border: 1px solid #f5c6c6; color: #c0392b; border-radius: 8px; padding: .6rem .9rem; font-size: .83rem; margin-bottom: 1rem; } .auth-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; padding: .6rem .9rem; font-size: .83rem; margin-bottom: 1rem; } .auth-card label { display: block; margin-bottom: .9rem; font-size: .85rem; font-weight: 600; color: #1a2e26; } .auth-card input[type=text], .auth-card input[type=password], .auth-card input[type=email], .auth-card input[type=tel] { display: block; width: 100%; box-sizing: border-box; margin-top: .3rem; padding: .58rem .8rem; border: 1.5px solid #d4ddd8; border-radius: 8px; font-size: .9rem; font-family: inherit; color: #0d1a15; transition: border-color .15s, box-shadow .15s; } .auth-card input:focus { outline: none; border-color: #059669; box-shadow: 0 0 0 3px rgba(5, 150, 105, .13); } .name-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .pw-wrap { position: relative; } .pw-eye { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 0; color: #7a9e8e; display: flex; align-items: center; } .pw-eye:hover { color: #059669; } .auth-submit { width: 100%; margin-top: 1.2rem; padding: .7rem; background: linear-gradient(135deg, #059669, #047857); color: #fff; border: none; border-radius: 8px; font-size: .92rem; font-family: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 4px 14px -4px rgba(5, 150, 105, .45); transition: box-shadow .15s, transform .1s; } .auth-submit:hover { box-shadow: 0 6px 20px -4px rgba(5, 150, 105, .6); transform: translateY(-1px); } .auth-switch { margin-top: 1rem; font-size: .82rem; text-align: center; color: #4b6358; } .auth-switch a { color: #059669; font-weight: 600; text-decoration: none; } .auth-switch a:hover { text-decoration: underline; } .avatar-pick-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.4rem; gap: .4rem; } .avatar-pick { width: 84px; height: 84px; border-radius: 50%; background: #f0f7f4; border: 2px dashed #a8d4c0; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; position: relative; transition: border-color .2s; } .avatar-pick:hover { border-color: #059669; } .avatar-pick img { width: 100%; height: 100%; object-fit: cover; display: none; border-radius: 50%; } .avatar-pick .av-icon { color: #7a9e8e; } .avatar-pick .av-initials { display: none; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.7rem; font-weight: 700; color: #fff; letter-spacing: .02em; } .avatar-pick-hint { font-size: .74rem; color: #7a9e8e; } .avatar-error { font-size: .75rem; color: #c0392b; min-height: .9rem; } .file-input-hidden { display: none; }