:root { --cream: #f5e4c8; --wine: #5a201c; --line: #b88a61; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; color: #2b1b12; font: 14px/1.45 Tahoma, Arial, sans-serif; background: #0b1118 url("assets/original-loco-site/body.jpg") repeat; }
a { color: #6d241d; text-decoration: none; }
a:hover { color: #a34231; text-decoration: underline; }
.hero { position: relative; min-height: 330px; overflow: hidden; border-bottom: 2px solid #4e2018; background: #08090b; }
.hero-media { position: absolute; top: 0; width: 1050px; height: 432px; background-repeat: no-repeat; pointer-events: none; }
.hero-media--red { right: 50%; background-image: url("assets/original-loco-site/header_left.jpg"); background-position: right top; }
.hero-media--blue { left: 50%; background-image: url("assets/original-loco-site/header_right.jpg"); background-position: left top; }
.hero-content { position: relative; z-index: 1; width: min(100% - 32px, 1000px); margin: 0 auto; text-align: center; }
.brand { display: inline-block; margin: 28px 0 48px; }
.brand img { display: block; width: 250px; height: auto; filter: drop-shadow(0 5px 10px #000); }
.main-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 32px; padding: 13px 20px; border-top: 1px solid rgba(232, 196, 151, .45); border-bottom: 1px solid rgba(0, 0, 0, .7); background: rgba(16, 11, 10, .75); }
.main-nav a { color: #f0d3b2; font: 17px "Times New Roman", serif; letter-spacing: .04em; text-transform: uppercase; }
.main-nav .is-active { color: #fff3d8; text-shadow: 0 0 10px #d8874e; }
.main-nav .language-switch { padding: 1px 7px; border: 1px solid #b88a61; border-radius: 2px; font-size: 13px; }
main { width: min(100% - 28px, 720px); margin: 28px auto 42px; position: relative; z-index: 2; }
.account-card { padding: 34px; border: 1px solid var(--line); box-shadow: 0 13px 28px rgba(0, 0, 0, .45); background: var(--cream); }
.eyebrow { margin: 0 0 4px; color: #97583b; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: "Times New Roman", serif; font-weight: normal; }
h1 { color: var(--wine); font-size: 35px; }
h2 { color: var(--wine); font-size: 24px; }
.lead { margin: 9px 0 25px; color: #725946; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 5px; color: #583d29; font-size: 12px; }
input { width: 100%; padding: 10px; color: #302015; border: 1px solid #ac7c57; border-radius: 2px; background: #fffaf0; font: 14px Tahoma, Arial, sans-serif; }
input:disabled { color: #745e4b; background: #ead7b7; }
.note { margin: 0; color: #7a604c; font-size: 12px; }
button { padding: 10px 16px; color: #fff1d8; border: 1px solid #d6aa78; border-radius: 2px; background: linear-gradient(#963e2e, #5e1e1a); box-shadow: inset 0 1px rgba(255, 255, 255, .2); cursor: pointer; font: 15px "Times New Roman", serif; text-transform: uppercase; }
button:hover { background: linear-gradient(#ad5038, #6b221c); }
.links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; font-size: 12px; }
.profile-row { display: grid; grid-template-columns: 180px 1fr; gap: 10px; padding: 16px 0; border-bottom: 1px solid #d2b38f; }
.profile-row:last-of-type { border-bottom: 0; }
.profile-row strong { color: #5b3223; }
.rating-head, .rating-empty { padding: 18px; border: 1px solid #c5a17c; }
.rating-head { color: #f5dfbe; background: linear-gradient(#70412c, #4d291e); font: 17px "Times New Roman", serif; text-transform: uppercase; }
.rating-empty { color: #725946; background: #fffaf0; }
footer { padding: 22px; color: #b99d81; border-top: 1px solid #493126; font-size: 11px; text-align: center; background: rgba(0, 0, 0, .35); }
footer p { margin: 0; }
.footer-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 10px; }
.footer-social a { color: #f3d2a0; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) { .hero { min-height: 220px; } .hero-media { opacity: .55; } .main-nav { gap: 8px 18px; } .main-nav a { font-size: 14px; } .account-card { padding: 24px; } .profile-row { grid-template-columns: 1fr; } }
.form-message { min-height: 17px; margin: -9px 0 0; color: #7a604c; font-size: 12px; }
.form-message[data-state="error"] { color: #9b251d; }
.form-message[data-state="success"] { color: #3d6b31; }
input.is-invalid { border-color: #9b251d; }
input.is-valid { border-color: #5d813d; }
button:disabled { cursor: not-allowed; opacity: .55; }