: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; }
button:disabled { opacity: .6; cursor: not-allowed; }
.danger-button { display: block; margin-top: .75rem; background: #c62828; }
.danger-button:hover { background: #a61f1f; }
#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; }
#publicChatOpen { margin: .25rem 0 1rem; padding: .45rem .7rem; font-size: .9rem; }
.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; }
.brand-market-teaser { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; 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); }
.brand-market-teaser h2 { margin: 0; }
.btn-go { display: inline-block; padding: .75rem 1rem; color: #fff; background: #0d6b68; border-radius: 4px; text-decoration: none; font-weight: 700; }
.btn-go:hover { background: #095451; }
.brand-market-page { 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); }
.brand-market-page h1 { margin-top: 0; }
.brand-context-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.brand-context-bar select { min-width: 180px; flex: 1 1 180px; }
.brand-market-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.brand-context-bar select, .brand-filter-bar select { appearance: none; padding: .75rem 2.25rem .75rem .75rem; color: #172033; background-color: #fff; background-image: linear-gradient(45deg, transparent 50%, #0d6b68 50%), linear-gradient(135deg, #0d6b68 50%, transparent 50%); background-position: calc(100% - 1rem) 1.05rem, calc(100% - .7rem) 1.05rem; background-size: .35rem .35rem, .35rem .35rem; background-repeat: no-repeat; border: 1px solid #bfdaf3; border-radius: 6px; box-shadow: 0 2px 6px #17203312; transition: border-color .15s ease, box-shadow .15s ease; }
.brand-context-bar select:hover, .brand-filter-bar select:hover, .brand-context-bar select:focus, .brand-filter-bar select:focus { border-color: #0d6b68; box-shadow: 0 0 0 3px #0d6b681c; outline: 0; }
.brand-rate-input-label { display: flex; flex: 1 1 180px; flex-direction: column; gap: .25rem; min-width: 180px; color: #53636b; font-size: .85rem; }
.brand-market-board .rate-box { flex-wrap: wrap; }
.brand-market-board .rate-box input { width: 110px; flex: 0 0 auto; }
.brand-rate-box select[data-field="role"] { flex: 0 1 150px; }
.brand-filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.brand-filter-bar select { min-width: 180px; flex: 1 1 180px; }
.brand-rate-table { width: 100%; border-collapse: collapse; }
.brand-rate-table th, .brand-rate-table td { padding: .7rem; border-bottom: 1px solid #cfe1f5; text-align: left; }
.brand-rate-table th { background: #e2efed; font-weight: 700; }
.brand-rate-table tbody tr:nth-child(even) { background: #f4f8f8; }
.brand-rate-table tbody tr:hover { background: #e2efed; }
.brand-rate-table .empty { color: #718087; text-align: center; }
.brand-rate-table .own-rate { background: #d7e8e6; }
.brand-role-tag { display: inline-flex; padding: .2rem .45rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.brand-role-tag.buyer { color: #155e75; background: #d8eff8; border: 1px solid #a9d9e9; }
.brand-role-tag.seller { color: #7c3f00; background: #fff0cf; border: 1px solid #e9c77b; }
.inline-cancel-rate { padding: .25rem .45rem; color: #7c2d12; background: #fff0e6; border: 1px solid #e5b49b; font-size: .78rem; }
.inline-cancel-rate:hover { background: #fbd8c7; }
.brand-district-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.brand-district-card { padding: 1rem; background: linear-gradient(180deg, #f4f9ff, #e3f0fb); border: 1px solid #bfdaf3; border-radius: 8px; box-shadow: 0 8px 20px rgba(123, 180, 217, 0.2); }
.brand-district-card h3 { margin: 0 0 .75rem; }
.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; flex-wrap: wrap; }
.chat-panel-header h2 { margin: 0; }
.chat-panel-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.close-chat { flex: 0 0 auto; padding: .5rem .8rem; }
.notify-whatsapp { flex: 0 0 auto; padding: .5rem .8rem; background: #20a464; }
.notify-whatsapp:hover { background: #18844f; }
.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; }
.public-chat-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background: #17203388; }
.public-chat-overlay[hidden] { display: none; }
.public-chat-modal { display: flex; flex-direction: column; width: min(520px, 94vw); max-height: 90vh; padding: 1rem; overflow: hidden; color: #172033; background: #fff; border-radius: 8px; box-shadow: 0 16px 44px #17203355; }
.public-chat-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.public-chat-header h2 { margin: 0; font-size: 1.2rem; }
.public-chat-close { flex: 0 0 auto; padding: .35rem .6rem; color: #8b2d2d; background: #fff0f0; border: 1px solid #f0caca; }
.public-chat-close:hover { background: #ffe0e0; }
.public-chat-messages { display: flex; flex-direction: column; gap: .6rem; max-height: 55vh; min-height: 180px; padding: .85rem; overflow-y: auto; background: #edf3f3; border-radius: 6px; }
.public-chat-message { max-width: 82%; padding: .6rem .75rem; overflow-wrap: anywhere; border-radius: 12px; line-height: 1.35; }
.public-chat-message.own { align-self: flex-end; color: #fff; background: #0d6b68; border-bottom-right-radius: 3px; }
.public-chat-message.other { align-self: flex-start; background: #fff; border: 1px solid #d5e0e0; border-bottom-left-radius: 3px; cursor: pointer; user-select: none; touch-action: manipulation; }
.public-chat-author { margin-bottom: .25rem; font-size: .82rem; font-weight: 700; }
.public-chat-content { white-space: pre-wrap; }
.public-chat-time { display: block; margin-top: .25rem; color: #718087; font-size: .7rem; text-align: right; }
.public-chat-message.own .public-chat-time { color: #c3dcda; }
.public-chat-status { min-height: 1.4rem; padding-top: .4rem; color: #53636b; font-size: .82rem; }
.public-chat-form { display: flex; flex-direction: row; gap: .5rem; }
.public-chat-form input { min-width: 0; flex: 1; }
.public-chat-form button { flex: 0 0 auto; }
.public-chat-modal .login-prompt { padding: .5rem 0 0; }
.public-chat-modal .login-prompt a { color: #0d6b68; font-weight: 700; }
#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) { .brand-filter-bar { align-items: stretch; flex-direction: column; } .brand-filter-bar select { width: 100%; } }
@media (max-width: 700px) { .public-chat-overlay { padding: .5rem; } .public-chat-modal { width: 96vw; max-height: 94vh; padding: .75rem; } .public-chat-messages { max-height: 55vh; } .public-chat-message { max-width: 90%; } }
@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-links .nav-label { display: none; } #notificationButton { padding: .2rem .28rem; } main { margin-top: 1.5rem; } .market-board, .brand-market-board, .chat-wrapper { grid-template-columns: 1fr; } .conversation-list { max-height: 220px; border-right: 0; border-bottom: 1px solid #d8e2e2; } .chat-panel-header { align-items: flex-start; flex-direction: column; } .chat-panel-actions { width: 100%; margin-left: 0; } .chat-panel-actions button { flex: 1 1 auto; min-width: 0; } .rate-box { align-items: center; flex-direction: row; gap: .5rem; } .brand-market-teaser { align-items: stretch; flex-direction: column; } .brand-context-bar { align-items: stretch; flex-direction: column; } .brand-context-bar select, .brand-context-bar .login-prompt, .brand-market-board .rate-box input, .brand-market-board .rate-box button, .brand-rate-input-label { width: 100%; min-width: 0; flex: 1 1 auto; } .brand-district-cards { grid-template-columns: 1fr; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .brand-rate-table { min-width: 480px; } .brand-rate-table th, .brand-rate-table td { padding: .5rem .4rem; } .inline-cancel-rate { white-space: nowrap; padding: .3rem .5rem; font-size: .72rem; } .brand-role-tag { white-space: nowrap; } .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; } }
@media (max-width: 700px) { .brand-market-page, .brand-market-board, .brand-district-cards, .brand-district-card { min-width: 0; max-width: 100%; } .brand-context-bar select, .brand-filter-bar select { width: 100%; min-width: 0; height: 2.75rem; min-height: 2.75rem; flex: 0 0 auto; overflow: hidden; } .brand-filter-bar { width: 100%; min-width: 0; } .table-scroll { width: 100%; max-width: 100%; min-width: 0; } }
.pricelist-search-panel { margin: 0 0 1.25rem; }
.pricelist-page .pricelist-search-panel { margin-bottom: 1rem; }
.pricelist-search-wrap { position: relative; }
.pricelist-search { display: block; width: 100%; margin: 0 0 .75rem; border: 1px solid #bfdaf3; border-radius: 6px; box-shadow: 0 2px 6px #17203312; transition: border-color .15s ease, box-shadow .15s ease; }
.pricelist-search:focus { border-color: #0d6b68; box-shadow: 0 0 0 3px #0d6b681c; outline: 0; }
.pricelist-status { min-height: 1.5rem; margin: .25rem 0 .75rem; color: #53636b; }
.pricelist-meta { display: block; margin-top: .2rem; color: #718087; font-size: .8rem; }
.pricelist-suggestions { position: absolute; top: calc(100% - .75rem); left: 0; z-index: 20; width: 100%; max-height: 18rem; margin: 0; padding: .25rem 0; overflow-y: auto; list-style: none; background: #fff; border: 1px solid #bfdaf3; border-radius: 6px; box-shadow: 0 10px 24px #17203326; }
.pricelist-suggestions, .pricelist-suggestions *, .pricelist-suggestion, .pricelist-details, .pricelist-details * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pricelist-suggestions[hidden], .pricelist-details[hidden] { display: none; }
.pricelist-suggestion { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .8rem; cursor: pointer; }
.pricelist-suggestion:hover, .pricelist-suggestion.active { color: #0d6b68; background: #edf7f6; }
.pricelist-suggestion-name { font-weight: 700; overflow-wrap: anywhere; }
.pricelist-suggestion .pricelist-meta { flex: 0 0 auto; margin: 0; }
.pricelist-detail-card { padding: 1rem; color: #172033; background: #fff; border: 1px solid #d5e0e0; border-radius: 8px; box-shadow: 0 4px 14px #17203312; }
.pricelist-detail-card h2 { margin: 0; color: #0d6b68; font-size: 1.25rem; }
.pricelist-detail-card > .pricelist-meta { margin: .2rem 0 .85rem; }
.pricelist-detail-table { width: 100%; border-collapse: collapse; }
.pricelist-detail-table th, .pricelist-detail-table td { padding: .55rem .45rem; border-bottom: 1px solid #e4ecec; text-align: left; }
.pricelist-detail-table th { color: #53636b; background: #f0f6f5; font-size: .82rem; }
.pricelist-detail-table td.num { text-align: right; white-space: nowrap; }
.pricelist-detail-table tbody tr:last-child td { border-bottom: 0; }
.home-page { margin-top: .65rem; }
@media (max-width: 700px) {
  .home-page { margin-top: .4rem; }
  .pricelist-detail-card { padding: .75rem; }
  .pricelist-detail-table thead { display: none; }
  .pricelist-detail-table, .pricelist-detail-table tbody, .pricelist-detail-table tr { display: block; width: 100%; }
  .pricelist-detail-table tr { padding: .45rem 0; border-bottom: 1px solid #d5e0e0; }
  .pricelist-detail-table tbody tr:last-child { border-bottom: 0; }
  .pricelist-detail-table td, .pricelist-detail-table td.num { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .35rem 0; text-align: right; white-space: normal; overflow-wrap: anywhere; }
  .pricelist-detail-table td::before { content: attr(data-label); flex: 0 0 42%; color: #53636b; font-weight: 700; text-align: left; }
}