:root {
  color: #172033;
  background: #eef3f8;
  font-family: "Times New Roman", Times, serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(135deg, #eef3f8, #dfe9e5); font-family: "Times New Roman", Times, serif; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.4rem 2rem; min-height: 46px; background: linear-gradient(90deg, #ffffff, #7bb4d9); color: #172033; position: relative; animation: navbar-slide-down .4s ease-out; }
.topbar a { color: inherit; text-decoration: none; }
.brand-logo { display: inline-flex; align-items: center; padding: 0; margin: 0; line-height: 0; border: 0; }
.brand-logo img { display: block; height: 54px; width: auto; max-width: 220px; object-fit: contain; margin: 0; padding: 0; }
.nav-links { display: flex; align-items: center; gap: 1rem; position: relative; min-height: 36px; }
.nav-label { display: inline; }
main { max-width: 1080px; margin: 3rem auto; padding: 0 1rem; animation: page-fade .35s ease-out; }
.site-footer { max-width: 1080px; margin: 2rem auto 3rem; padding: 1rem 1rem 0; text-align: center; }
.site-footer a { color: #0d6b68; text-decoration: none; font-weight: 700; }
.auth-card, .profile-card { padding: 2rem; background: #fff; border: 1px solid #c8d5d5; border-radius: 8px; box-shadow: 0 12px 30px #17203318; }
form { display: flex; flex-direction: column; gap: .65rem; }
input, textarea, button { padding: .75rem; font: inherit; border: 1px solid #aebfc2; border-radius: 4px; }
button { color: #fff; background: #0d6b68; border: 0; cursor: pointer; }
button:hover, .guest-actions a:hover { background: #095451; }
#navLogout { background: transparent; color: inherit; border: 0; padding: .25rem .38rem; }
#navLogout:hover { background: transparent; }
.otp-status { min-height: 1.4rem; color: #53636b; }
.device-conflict { margin-top: 1rem; padding: 1rem; background: #fff4dd; border: 1px solid #e4bb6a; border-radius: 6px; }
dl { display: grid; grid-template-columns: 1fr 2fr; gap: .5rem; margin-bottom: 1.5rem; }
dt { font-weight: 700; }
dd { margin: 0; }
.guest-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0; padding: 1.25rem 1.5rem; color: #fff; background: #0d6b68; border-radius: 8px; box-shadow: 0 10px 24px #0d6b6833; }
.guest-banner h2, .guest-banner p { margin: .2rem 0; }
.guest-actions { display: flex; gap: .6rem; }
.guest-actions a { padding: .65rem 1rem; color: #172033; background: #f4d06f; border-radius: 4px; text-decoration: none; font-weight: 700; }
.match-toast { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 5; padding: 1rem 1.25rem; color: #fff; background: #0d6b68; border-radius: 6px; box-shadow: 0 8px 24px #17203344; animation: toast-in .2s ease-out; }
.market-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.market-column { padding: 1.25rem; background: linear-gradient(180deg, #f4f9ff, #e3f0fb); border: 1px solid #bfdaf3; border-radius: 8px; box-shadow: 0 8px 20px rgba(123, 180, 217, 0.25); animation: card-slide-in .5s ease-out; }
.market-column:nth-child(1) { animation-delay: 0s; }
.market-column:nth-child(2) { animation-delay: .15s; }
.rate-box { display: flex; align-items: center; gap: .5rem; padding-bottom: 1rem; border-bottom: 1px solid #cfe1f5; }
.rate-input-group { display: flex; align-items: center; gap: .3rem; }
.rate-step { padding: .4rem .6rem; line-height: 1; }
.rate-box input { width: 90px; flex: 0 0 auto; }
.rate-list { display: flex; flex-direction: column; gap: .35rem; margin-top: 1rem; }
.rate-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem; border-radius: 4px; transition: background .15s ease; }
.rate-user-wrap { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.rate-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rate-language-tag { display: inline-flex; align-items: center; padding: .1rem .35rem; font-size: .68rem; line-height: 1.2; color: #0d6b68; background: #dfeff2; border: 1px solid #b9d9de; border-radius: 999px; }
.rate-row:nth-child(even) { background: #f4f8f8; }
.rate-row:hover { background: #e2efed; }
.rate-row.clickable { cursor: pointer; }
.rate-row.clickable:hover { background: #d7e8e6; }
.rate-row.empty, .login-prompt { color: #718087; }
.login-prompt { padding: .5rem; font-size: .9rem; }
.chat-wrapper { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 560px; overflow: hidden; background: #fff; border: 1px solid #c8d5d5; border-radius: 8px; box-shadow: 0 12px 30px #17203318; }
.conversation-list { overflow-y: auto; padding: 1rem; background: #f4f8f8; border-right: 1px solid #d8e2e2; }
.conversation-list ul { padding: 0; margin: 0; list-style: none; }
.conversation-item { display: flex; align-items: center; gap: .55rem; padding: .8rem .65rem; border-bottom: 1px solid #dce6e6; cursor: pointer; }
.conversation-item:hover { background: #e2efed; }
.conversation-item.active { background: #cce5e1; box-shadow: inset 3px 0 #0d6b68; font-weight: 700; }
.conversation-name { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: .6rem; height: .6rem; flex: 0 0 .6rem; border-radius: 50%; background: #9aa7ab; }
.status-dot.online { background: #20a464; box-shadow: 0 0 0 3px #20a46422; }
.status-dot.offline { background: #9aa7ab; }
.unread-badge { min-width: 1.35rem; padding: .15rem .35rem; color: #fff; background: #0d6b68; border-radius: 999px; font-size: .75rem; text-align: center; }
.chat-panel { display: flex; flex-direction: column; min-width: 0; padding: 1.25rem; }
.chat-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.chat-panel-header h2 { margin: 0; }
.close-chat { flex: 0 0 auto; padding: .5rem .8rem; }
.messages { display: flex; flex: 1; flex-direction: column; gap: .5rem; overflow-y: auto; min-height: 300px; padding: 1rem; margin-bottom: 1rem; background: #edf3f3; border-radius: 6px; }
.message-bubble { max-width: 75%; padding: .65rem .8rem; border-radius: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.message-bubble.own { align-self: flex-end; color: #fff; background: #0d6b68; border-bottom-right-radius: 3px; }
.message-bubble.other { align-self: flex-start; background: #fff; border: 1px solid #d5e0e0; border-bottom-left-radius: 3px; }
.message-ticks { margin-left: .55rem; font-size: .8rem; }
.message-bubble[data-status="sent"] .message-ticks, .message-bubble[data-status="delivered"] .message-ticks { color: #b6c6c8; }
.message-bubble[data-status="seen"] .message-ticks { color: #69b8ef; }
#notificationButton { position: relative; padding: .35rem .5rem; background: transparent; }
#notificationBadge { position: absolute; top: -.35rem; right: -.35rem; min-width: 1.2rem; padding: .15rem .3rem; color: #fff; background: #d84b4b; border-radius: 50%; font-size: .7rem; text-align: center; }
.notification-dropdown { position: absolute; top: 2.5rem; right: 0; z-index: 10; width: min(320px, 90vw); overflow: hidden; color: #172033; background: #fff; border: 1px solid #c8d5d5; border-radius: 6px; box-shadow: 0 10px 24px #17203333; }
.notification-item { padding: .75rem; border-bottom: 1px solid #e4ecec; }
.notification-item:hover { background: #f0f6f5; }
.notification-item:last-child { border-bottom: 0; }
#navLogout { padding: .35rem .65rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes page-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes navbar-slide-down { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes card-slide-in { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 700px) { .topbar { padding: .45rem .75rem; flex-direction: row; justify-content: space-between; align-items: center; } .brand-logo { flex-shrink: 0; margin-right: .5rem; } .brand-logo img { height: 38px; max-width: 160px; } .nav-links { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: .25rem; margin-left: auto; font-size: .86rem; white-space: nowrap; } .nav-links a, .nav-links button { font-size: .86rem; padding: .2rem .28rem; line-height: 1.2; } .nav-label { display: none; } #notificationButton { padding: .2rem .28rem; } main { margin-top: 1.5rem; } .market-board, .chat-wrapper { grid-template-columns: 1fr; } .conversation-list { max-height: 220px; border-right: 0; border-bottom: 1px solid #d8e2e2; } .rate-box { align-items: center; flex-direction: row; gap: .5rem; } .guest-banner { align-items: stretch; flex-direction: column; } .rate-input-group { display: flex; align-items: center; gap: .3rem; } .rate-box input { width: 70px; flex: 0 0 auto; } .rate-box button { flex: 1; min-width: 0; } h1 { font-size: 1.4rem; margin: 0.8rem 0; } h2 { font-size: 1.1rem; margin: 0.6rem 0; } .market-column { padding: 0.8rem; margin: 0.3rem 0; } .guest-actions { flex-wrap: wrap; } }