body {
    overflow: hidden;
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100vw;
    font-family: 'Arial', sans-serif;
}

input, button {
    font-family: 'Arial', sans-serif;
}

#map {
    height: 100vh;
    width: 100vw;
    background-color: var(--mapBg);
}

#mousePos {
    position: absolute;
    bottom: 0.5vh;
    right: 0.5vh;
    font-size: 14pt;
    min-width: 4em;
    font-family: 'Fire Code', monospace;
    text-align: center;
}

/* CLAUDE: ?????? ???????? ????? (??????? ????????????, "???-?????? ???
   ????????????") — ??? ?? ?????? ????, ??? ? ? #mousePos, ?? ? ????????
   ????? ? ??????? (36px ???? ?????? 0.5vh ?????????), ????? ??????????????
   ????????? ??? ??????? ????????? ??? ????? ?????? ????, ? ?? ????? ???????
   ?????? "??????????" ?????? #mousePos. */
#feedbackBtn {
    position: absolute;
    bottom: calc(0.5vh + 36px);
    right: 0.5vh;
    font-size: 16pt;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
}

/* CLAUDE: "?????? ??? ????? ???????????? ?????? (??????? ?? ???????: 4)"
   (??????? ????????????) — ??????? ?????? ? ?????? ?????? ???? ???
   ???????? ??????, ?? ????????? ??????? ???????????? ("????? ? ???????
   ????? ????, ?????... ?? ?????, ?????? ??? ??????????") ?????????? ?
   ????? ??????? ????, ??? ??????? ????? (#layers ????? ????, top: max(5vh,
   38pt) — ???? ?????? ?????????? ????? ??? ??? ??? top: 0.5vh), ? ????????
   ?? ????? ????? ????? .c (????? ???? classicblue.css), ? ?????? ??????? —
   ?????-?????????? ???/?????, ??? ? ???????? ????????? (parchment-????).
   !important ?? ????? — ??????? ???? ?????????? (#id ?????? .class), ??
   ???? ?????????? background-color/border/color, ??????? .c ?????? ??? ??
   ?????????? ?? ?????????????. */
/* CLAUDE: "?????? ?????? ???? ??????, ???? ?? ?????? ???? ??? ?????? ??????
   ???????" (??????? ????????????) — #titleBar ul li ?????? ?????? ??????
   ????? 40px (??. ??????? #titleBar ul li ????), ????????? ?? ?? ??? ?????
   box-sizing:border-box (????? ?? 40px + ?????/??????? ?????? ????? ????
   ???????????) + flex-????????????? ?????? ?? ?????????. */
/* CLAUDE: "??????? ??????? ?????? ?? ?????? ?????? ???????" (???????
   ????????????) — ???????? ?? ?????????? #onlinePlayersBtn ? ?????
   flex-??????? #topLeftButtons + ????? .topLeftBtn ?? ??? ??????, ?????
   #onlineHistoryBtn ??????? ????? ?????? ??? ??????????? ?? ??????????
   ?????? ?????? "??????? ?? ???????: N" (??. onlineHistory.js). */
/* CLAUDE: "??????? ??????? ??????? ??? ?????? ??????? ?? ???????" (???????
   ???????????? — ???????? ????? ?????? ??????? "?????? ?? ?????? ??????
   ???????", ??. ??????????? ????) — flex-direction: column ?????? row,
   #onlineHistoryBtn ?????? ?????????? ?????? ??????? ??? #onlinePlayersBtn
   (??? ?? ??????? ????? ? index.html, ??? ? ??????). */
#topLeftButtons {
    position: absolute;
    top: 0.5vh;
    left: 0.5vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
.topLeftBtn {
    box-sizing: border-box;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12pt;
    padding: 0 14px;
    cursor: pointer;
    white-space: nowrap;
    background-color: #2b1d10;
    border: 3px solid #6b4a2a;
    border-radius: 8px;
    color: #e8d9bd;
}
.topLeftBtn:hover {
    background-color: #3a2717;
}

/* ?????? ? popup_onlinePlayers (??. onlinePlayers.js). */
.onlinePlayersRow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-radius: 4px;
}
.onlinePlayersRow.onlinePlayersRowClickable {
    cursor: pointer;
}
.onlinePlayersRow.onlinePlayersRowClickable:hover {
    background: rgba(255, 255, 255, 0.08);
}
.onlinePlayersDot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #2ecc71;
    box-sizing: border-box;
}
/* ???????, ?? ??????? ????? — ??????????? ??????. */
.onlinePlayersDot.onlinePlayersDotFilled {
    background: #2ecc71;
}
/* CLAUDE: "???? ????? ???? ????? ?????? ???? ??????? ?????? ?? ??????
   ??????, ?????????? ??????" (??????? ????????????, ????????) — ??? ??
   ??????/???? ???????, ?????? ??? ???????. */
.onlinePlayersDot.onlinePlayersDotHollow {
    background: transparent;
}
.onlinePlayersNick {
    flex: 1 1 auto;
}
.onlinePlayersHiddenNote {
    opacity: 0.7;
    font-size: 90%;
}

/* ---- ????? "??????? ???????" (onlineHistory.js) ---- */
.onlineHistoryPopup {
    min-width: 420px;
    max-width: 92vw;
    z-index: 1950;
}
.onlineHistoryTabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.onlineHistoryTabBtn {
    flex: 1 1 auto;
    background-color: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    color: #e8d9bd;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 100%;
}
.onlineHistoryTabBtn:hover {
    background-color: rgba(255, 255, 255, 0.12);
}
.onlineHistoryTabBtn.onlineHistoryActive {
    background-color: #2b1d10;
    border-color: #6b4a2a;
    color: #ffffff;
}
.onlineHistoryPeriods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
/* CLAUDE: "???? ??????????? ??????????? ?????? ?? ?????? ???????" (???????
   ????????????) — ?????? ? "?:"/"??:" ??? ???????? (??. onlineHistory.js). */
.onlineHistoryFilterBar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 90%;
}
.onlineHistoryFilterBar label {
    display: inline;
    margin: 0;
    color: #ffffff;
    opacity: 0.8;
}
.onlineHistoryFilterBar input[type="date"] {
    width: auto;
    box-sizing: border-box;
    color: var(--popupInputText);
    background-color: var(--popupInputBg);
    border: 2px solid var(--popupBorder);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 100%;
}
.onlineHistoryFilterBtn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    color: #ffffff;
    opacity: 0.8;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 90%;
}
.onlineHistoryFilterBtn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}
.onlineHistoryPeriodBtn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    color: #ffffff;
    opacity: 0.75;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 90%;
}
.onlineHistoryPeriodBtn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}
.onlineHistoryPeriodBtn.onlineHistoryActive {
    opacity: 1;
    background: rgba(46, 204, 113, 0.18);
    border-color: #2ecc71;
    color: #2ecc71;
}
/* CLAUDE: "?????? ????? ?????? ???????... ????? ???? ???" (???????
   ????????????) — ?????? ??? ????? ????????? ? ???? ????????????? ??????
   ??????. ?????? ? ??????? ????????????? ?????? ?? ????? (??. onlineHistory.js,
   currentPxPerPoint), ? ???? ??????? ?????? ?????????? ?? ???????????, ????
   ??????? ???? ???? — ??????? overflow-x, ??? ?????????? drag/zoom. */
.onlineHistoryChartWrap {
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 6px;
    overflow-x: auto;
    overflow-y: hidden;
}
.onlineHistoryChartInner {
    position: relative;
    display: inline-block;
    vertical-align: top;
}
.onlineHistoryChartWrap canvas {
    display: block;
    height: 220px;
}
.onlineHistoryScrollHint {
    text-align: center;
    color: #ffffff;
    opacity: 0.5;
    font-size: 80%;
    margin-top: 4px;
    visibility: hidden;
}
/* CLAUDE: "????????? ? ???????, ?????? ?? ??????????????" (???????
   ????????????) — ??????? ???? ? ???? ????????: ?? position:absolute
   ?????? .onlineHistoryChartInner, ? ?????? ???????? ????? visibility:hidden.
   visibility:hidden ??? ????? ????????? ?? ????????? ????? ? ????????? —
   ? left/top ? ???? ???????????? JS-?? ?????? ??? ????????? ???? (onHover) ?
   ?? ???????????? ??? ???????????? ???????/???????. ???? ???? ??? ???????
   ???? ?? ??????? ?????? (???????? "??? ?????"), ? ????? ????????????? ??
   ????? ?????, ????????? ????????? ??? ? ?????????? ?????? ???, ??? ?? ?
   ????????? ??? ??????????????? — ? ?????????? scrollWidth ???????
   (.onlineHistoryChartWrap, overflow-x:auto) ?????? ????????? ????? ???????,
   ???????? ?? ????? "??????" ?????????. display:none ????????? ???????
   ??????? ?? ?????????, ? ?? ?????? ?????? — ??? ??? ?????????? ???????
   ?????? ?? ?? ??? ?? ??????. */
.onlineHistoryTooltip {
    position: absolute;
    pointer-events: none;
    background: #1a120a;
    border: 1px solid #6b4a2a;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 85%;
    color: #ffffff;
    white-space: nowrap;
    display: none;
    transform: translate(-50%, -100%);
    z-index: 1;
}
.onlineHistoryEmpty {
    color: #ffffff;
    opacity: 0.7;
    text-align: center;
    padding: 24px 0;
}

#contributors {
    position: absolute;
    bottom: 0.5vh;
    left: 0.5vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 12pt;
}

#contributors div.left {
    min-width: 34.5em;
}

#contributors div.right {
    writing-mode: vertical-rl;
    color: var(--credsBtnText);
    min-width: 1em;
    border-radius: 5px;
    padding: 4px;
    margin: -4px 0;
    font-size: 12pt;
    position: relative;
}

#contributors div.right:hover {
    color: var(--credsBtnText);
    background-color: var(--credsBtnHoverBg);
}

#contributors p {
    margin: 0 2pt;
    padding: 0
}

#contributors a {
    color: var(--credsURLColor);
}

@supports (-moz-appearance:none) {
    #contributors div.right {
        margin-right: -8px;
    }
}

#layers {
    position: absolute;
    left: 0.5vh;
    /* CLAUDE: "??????? ??????? ??????? ??? ?????? ??????? ?? ???????"
       (??????? ????????????) — #topLeftButtons ?????? ??? ????? ???????
       (?????? ~38pt), ??? ????? ???? ?????? ??? ??. ?????? ??? ??? ??????
       (~86px = 40px ?????? + 6px ????? + 40px ??????), ? ??? ????? ??
       ????????? — ??-?? ????? "????"/"??????? ???????" ???????? ???? ??
       ????? (??. ???????? ????????????). ??????? ????? calc ?? ????????
       ?????? ?????? ?????? ?????????? ??????????????? ?????.
    */
    top: calc(max(5vh, 38pt) + 40px + 6px);
    /* Keep the legend at least as wide as its fully-expanded state so that
       folding sections in does not shrink it (and the docked tool panels that
       follow its width) to an unusably narrow size. */
    min-width: 15em;
}

#layers .layerSwitcherTitle {
    margin: 4pt 0;
    padding: 0 0 2pt 0;
    border-bottom: 1px solid var(--layerSwitcherTitleSeparator);
    font-weight: bold;
}

#layerSwitcher {
    margin: 4pt 0 0 0;
    padding: 2pt 0 2pt 2pt;
}

#layerSwitcher .layerSwitcherTitle {
    margin: 4pt 0 8px 0;
    padding: 0;
    border-bottom: 1px solid var(--layerSwitcherLayerSeparator);
    font-weight: bold;
}

#layerSwitcher .layerSwitcherTitle button {
    font-size: 8pt;
    padding: 0 2pt 1pt 2pt;
    margin: 1pt 0 0 1pt;
    border-width: 1px;
    border-radius: 4px;
    position: relative;
    top: -2pt;
    float: right;
    height: 14pt;
    text-align: center;
    width: 2em;
    font-weight: bold;
    font-family: sans-serif;
}

#layerSwitcher .layerSwitcherTitle button:hover {
    background-color: var(--layerSwitcherBtnHoverBg);
}

#layerSwitcher .layerSwitcherTitle button:active {
    background-color: var(--layerSwitcherBtnActiveBg);
}

/* Legend-style buttons for the route / trader panels. */
.panelBtn {
    font-size: 8pt;
    padding: 1pt 5pt 2pt 5pt;
    border: 1px solid var(--boxBorder);
    border-radius: 4px;
    background-color: transparent;
    color: inherit;
    font-weight: bold;
    font-family: sans-serif;
    cursor: pointer;
}

.panelBtn:hover {
    background-color: var(--layerSwitcherBtnHoverBg);
}

.panelBtn:active,
.panelBtn.selected {
    background-color: var(--layerSwitcherBtnActiveBg);
}

/* Highlight a nearest-trader row on hover so it's clear it's clickable. */
.traderRow {
    border-radius: 3px;
}

.traderRow:hover {
    background-color: var(--layerSwitcherBtnHoverBg);
}

#layerSwitcher .layerBlock {
    margin: 0;
    padding: 0;
}

/* CLAUDE: "????????" ???? ? ????????????? (?????? — Traders ??? ???, ??? ??
   admin ? ?? ???????, ??. updateTradersLockUi ? automap.js) — ???????? ?
   ?????? (????? ???? ?????, ??? ???? ?????? ??????????), ?? ????????
   ?????????? ? ?? ????????? ?? ????? ??????? (?????? ?????????, ???????,
   ????????? — ??? ?????? ?????). */
#layerSwitcher .layerBlock.layerLocked {
    opacity: 0.45;
    filter: grayscale(70%);
    pointer-events: none;
}

.layerLockBadge {
    opacity: 1;
    filter: none;
}

/* CLAUDE: "??????? ??? ?????? ???-??, '???-?? ?????????'" (???????
   ????????????) — ??????? ???????-?????? ? ????? ???? ?????? ?????, ??
   ???????? ?? ? ?????? ??????????? ol.layer (??. #lsCommentCounts ?
   automap.js). */
.layerSwitcherCheckboxRow {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    color: var(--layerSwitcherTitleColor, #fff);
    font-size: 90%;
}

.layerSwitcherCheckboxRow label {
    cursor: pointer;
}

#layerSwitcher ul {
    margin: 0;
    padding: 0;
}

#layerSwitcher ul li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#tools {
    position: absolute;
    top: max(5vh, 38pt);
    right: 0.5vh;
    width: 1.8em;
    min-height: 1em;
    padding: 2px;
    text-align: center;
}

#tools button {
    border: none;
    background: transparent;
    margin: 1px 0;
    padding: 3px;
    border-radius: 3px;
    font-size: 120%;
    color: var(--toolsBtnText);
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    vertical-align: middle;
    font-family: sans-serif;
}

#tools button:hover {
    background-color: var(--toolsBtnHoverBg);
    text-shadow: -0.5px 1px 0 #000, 1px 1px 0 #000, -0.5px -0.5px 0 #000;
}

#tools button.selected {
    background-color: var(--toolsBtnHoverBg);
    text-shadow: -0.5px 1px 0 #000, 1px 1px 0 #000, -0.5px -0.5px 0 #000;
}

#status {
    position: absolute;
    bottom: 0.5vh;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 90vw;
    /* CLAUDE: ???? width:10.5em ? ??? z-index — ??????? ???????????? "??????
       ?????????, ??? ?????? ??????????, ? ?? ?? ??????? ??????????? ??? ???".
       ??????????? (markerNotice/#status) ?????????? ??? ???????????? ???
       ?????????????? ??? ??, ??? ??? ?????/?????????, ?? ?????
       ????????????? ?????? ?????? ??????? ??????, ? ??? z-index ???????
       ????? ??????????? ??????? ?????????? ?????????? ?????? ????? — ??-??
       ????? ??????????? ????? ???? ?? ????????. ?????? ?????? ?? ????????
       (? ??????? ?? 90vw) ? ????? z-index ?????? ?????/???????.
       Cf. .popup z-index: 1950 ? ???? ?? ?????. */
    z-index: 2000;
    text-align: center;
}

.c {
    background-color: var(--boxBg);
    border: 3px solid var(--boxBorder);
    color: var(--boxText);
    border-radius: 8px;
    padding: 6px;
}

/* CLAUDE: ?????? text-shadow ??? ????? ? .c — ? .c ????? ?? ?????? ??
   ???????, ?? ? ?? ????? ?????? (??. popupsRef[...]['css']:['c','gps'] ?
   automap.js), ? text-shadow — ??????????? CSS-????????, ??????? ????
   ???????????? ?? ???? ????? ?????? ??????: ??????? ?????????, ???????????
   ? ?.?. (?????? ???????????? "???? ?? ??????... ?? ???? ???? ?? ????? ?
   ???????????? ? ???????"). ?????? ???? ????????? ?????? ???, ??? ??? ????
   ? ?????? ???????? — ?? ????? ????????? ?????????? (??????/?????????????),
   ? ?? ?? ??????-??????????, ??? ??? ?????? ?? ????? ??? ?????? ?? ?????. */
.c > button, button.c {
    text-shadow: -0.5px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -0.5px -0.5px 0 #000;
}

.title {
    margin: 4pt 0 8pt 0;
    padding: 0 0 2pt 0;
    border-bottom: 2px solid var(--popupTitleBorder);
    font-weight: bold;
    font-size: 120%;
}

.popup {
    visibility: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 64px;
    transform: translate(-50%, -50%);
}

.popup p {
    margin: 0 0 6px 0;
}

/* CLAUDE: ????? ??????????/?????????????? (?????, ?????????, ??????????????,
   ?????????) ????? ?????? errorEl.className='error' ?? ???????? ? ???????,
   ?? ?????? .error-??????? ?? ?????? ?????? ?? ???? (??????
   .loginPopup .error, ??. ???? ?? ?????) — ????? ?????? ?????? ?????????
   ????????????. ???? ??? ????? ??? ??? ???? ???? ?????, ? ?? ?????? ???
   ????? ????? ?????????. */
.popup p.error {
    color: #ff6666;
}

.popup label {
    display: block;
    margin-top: 12px;
    margin-bottom: 2px;
}

.popup input, .popup select, .popup textarea {
    width: 100%;
    box-sizing: border-box;
    color: var(--popupInputText);
    background-color: var(--popupInputBg);
    border: 3px solid var(--popupBorder);
    border-radius: 4px;
    padding: 4px;
    font-size: 110%;
}

/* CLAUDE: textarea ???????????? ? ????? ?????????? ????? (????????) */
.popup textarea {
    font-family: inherit;
    resize: vertical;
}

/* CLAUDE: ???????????? ????? ?????? ?????/?????? ????? — ?????? <select>,
   ??? ?? ??????, ??? ? ? ????? ???? (??. buildMarkerColorGrid/
   buildMarkerIconGrid ? automap.js). */
.markerColorGrid, .markerIconGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.markerColorOption {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid var(--popupBorder);
    cursor: pointer;
    box-sizing: border-box;
}

.markerColorOption:hover {
    border-color: var(--popupInputText, #fff);
}

.markerColorOption.selected {
    border-color: #fff;
    box-shadow: 0 0 0 2px #000;
}

.markerIconOption {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    /* CLAUDE: ????????????? ??????????? ?????, ? ?? var(--popupInputBg) —
       ? ?????? ????? ???? ?????? ?????? (??? ?????) ????, ? ???? ??????
       ??????? ??????????; ?? ??????? ????? ????? ????? ???? ??????, ????
       ?????? ? ????? ?????? ???? ?????? ??????? (??. getColoredMarkerIcon
       ? automap.js), ??? ??? ????? ???? ?????? ??????? ?? ????? ????. */
    background-color: #777;
    border: 2px solid var(--popupBorder);
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.markerIconOption img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.markerIconOption:hover {
    border-color: var(--popupInputText, #fff);
}

.markerIconOption.selected {
    border-color: #fff;
    box-shadow: 0 0 0 2px #000;
}

/* CLAUDE: ????????-????????????? ? ?????? ?? ???????? — ? ?????? ??????
   ?????????? ????? (????? ??????????/??????????????), ? ??? ???????????
   ???????? (????? ??????????????), ? ??? ???????? ? ?????? ?????????
   ???????? ?? ?????. ????? ?????? ??????/??????, ????? ??????? ???????? ??
   ???????? ????? ?? ???? ????? — ??? ???? ??? ???? ????? ?? ????????? ??
   ???????, ??????????? ????? ?????????? (????? ???? ??????? ????????????
   MAX_SCREENSHOT_BYTES ?? ???????). */
.fileExistingPreview, .fileNewPreview, .traderPopupScreenshot {
    display: block;
    max-width: 100%;
    max-height: 220px;
    border-radius: 6px;
    border: 2px solid var(--popupBorder);
    margin: 4px 0 8px 0;
    object-fit: contain;
}

.fileExistingNote {
    opacity: .75;
    font-size: 90%;
    margin: 4px 0 2px 0;
}

/* CLAUDE: X/Z/?????? ????? ????? ????????????? ? ???? ?????? ?????? ????
   ????????? label+input ?????? (??. buildTlCoordRow ? automap.js) — ?????
   ?????????? ????????????? ????? ??????? ?? ???? (6 ???????????? ????? ??
   ???? ?????), ??? ????????????, ??? ??????? ?? ???????????. */
.tlCoordRow {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.tlCoordField {
    flex: 1 1 0;
    min-width: 0;
}

.tlCoordField label {
    display: block;
    margin: 0 0 2px 0;
    font-size: 90%;
    opacity: .8;
}

.tlCoordField input {
    width: 100%;
}

.tlCoordField input:disabled {
    opacity: .55;
}

.popup div.controls {
    border-top: 1px solid var(--popupControlsBorder);
    margin-top: 12px;
    padding-top: 6px;
    direction: rtl;
}

.popup div.controls button {
    margin-left: 6px;
    font-size: 110%;
}

.popup div.controls button:hover {
    background-color: var(--popupButtonHover);
}

.popup div.controls button:active {
    background-color: var(--popupButtonActive);
}

.popup div.controls button.default {
    background-color: var(--popupButtonDefaultBg);
}

.popup div.controls button.default:hover {
    background-color: var(--popupButtonDefaultBgHover);
}

.popup div.controls button.default:active {
    background-color: var(--popupButtonDefaultBgActive);
}

.gps {
    min-width: 320px;
    /* CLAUDE: ????? ??????? (?????????? ?????/????????/?????????????) ??????
       ?? ???????? ??? ??????????? — ?? ????? ???????/??? ??????? ?????
       (???????? ? ?????????????, ??? ????? ?????? ?????) ??? ??????
       ???????? ?? ??????? ???? ???????? (popup ??????????????? ?? ??????
       ????? translate(-50%,-50%), ????/??? ??????????). ?????? ???????
       ????? ?????? ?????????? ?????? ????, ? ?? ??????????. */
    max-height: 90vh;
    overflow-y: auto;
}

.guide > div {
    min-width: 320px;
    max-width: 70vw;
    overflow: auto;
    max-height: 70vh;
    padding: 4px 8px 4px 4px;
}

.guide > div.title {
    margin-bottom: 0;
}

.guide > div.controls {
    margin-top: 0;
}

.guide > div a {
    color: var(--url);
}

.guide > div pre {
    border: 1px solid var(--boxBorder);
    padding: 8pt;
    width: 8em;
    background-color: var(--sign);
}

#popupBG {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: repeating-linear-gradient(45deg, var(--popupSplashBgOdd), var(--popupSplashBgOdd) 16px, var(--popupSplashBgEven) 16px, var(--popupSplashBgEven) 32px);
}

.vis {
    visibility: visible;
}

.sd {
    display: inline-block;
    margin-bottom: 6px;
}

.ol-zoom {
    top: max(5vh, 38pt);
    right: 0.5vh;
    left: unset;
    background-color: var(--olZoomBg);
    border: 3px solid var(--olZoomBorder);
    color: var(--olZoomText);
    text-shadow: -0.5px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -0.5px -0.5px 0 #000;
    padding: 0
}

#titleBar {
    position: absolute;
    /* CLAUDE: ???? ???? ???????? ???? — ??????? ???????? ????, ????? ??????
       ??? ??????? ????? ????????? ??? ? ?????? "?????????". */
    top: 1vh;
    right: 0;
    left: 0;
    margin: 0 auto;
    background-color: var(--titleBarBg);
    width: fit-content;
    font-size: 14pt;
    text-align: center;
    padding: 0;
    border-bottom: 1px solid var(--titleBarBorder);
    border-radius: 0 0 8px 8px;
}

#titleBar ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* justify-content: space-around; */
    align-items: center;
}

#titleBar ul li {
    display: inline-block;
    min-width: fit-content;
    height: 40px;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    flex-grow: 1;
}

#titleBar ul li a, #titleBar ul li h1 {
    min-width: 6em;
    font-size: 100%;
    display: inline-block;
    color: var(--titleBarItemText);
    text-decoration: none;
    height: 32px;
    width: 100%;
    height: 32px;
    vertical-align: middle;
    padding-top: 8px;
    margin-right: 8px;
    border: 1px solid var(--titleBarItemBorder);
    border-color: #8c8273;
}

#titleBar ul li:first-child h1 {
    margin-left: 0;
    border-bottom-left-radius: 8px;
    color: var(--titleBarItemTitle);
}

#titleBar ul li:last-child a {
    margin-left: 0;
    border-bottom-right-radius: 8px;
}

#titleBar ul li a:hover {
    color: var(--titleBarItemHoverText);
    background-color: var(--titleBarItemHoverBg);
}

#titleBar ul li a img {
    vertical-align: text-top;
    position: relative;
    top: -3px;
}

/* CLAUDE: "??? ?? ??????" (??????? ????????????) — ????? ?????? ? 2 ??????.
   min-width ????? ?? ??????? — ?? ?? ???????? ? ???? ???????, ???????
   ????????? ??????? #titleBar ul li a { min-width: 6em } (??? ??, ??? ? ?
   "??? ??"/"??? ???"), ? #titleBar ul li { flex-grow: 1 } ??????????? ???
   ?????? ????? ??????? — ??? ?????? ?????????? ????? ?? ??????, ???
   ????????, ? ?? ??? ???. ?????? height:auto ????? ?????? ???? ????????
   (???????), ? ??????? ?????? ????? (65%) — ??????????; ?????? ??????
   ????? ??? ? ????????? (32px), ??? ?????? ???????????? ?????? ????? flex
   (? ?? ????? padding-top ??? ???? ??????), ????? ??????? ? ??-????????
   ??????????. ???????? ? #titleBar ul li a. — ?? ?? ?????????????, ??? ? ?
   ???????? ???????, ???? ?????, ??? ??? !important ?? ?????. */
#titleBar ul li a.topByMarkersBtn {
    font-size: 78%;
    line-height: 1.1;
    /* CLAUDE: ? ???????? ?????? (??? box-sizing, ?.?. ?? ?????????
       content-box) ???????? ???????? ?????? — ?? 32px, ?
       height(32) + padding-top(8) + border(1+1) = 42px. ?????? ????? ????
       height:32px ??? box-sizing:border-box — ?? ???? ?????? ??????? ????
       ???? ??????? ?? 10px ? ????????? ?????? ????? ? ????. ?????? ?? ??
       ???????? ?????? (42px), ?? ????? border-box, ? ?????????? 2 ??????
       ?????? ?????? ??????? — ??? ???????? ?????????? ?????? ?????????
       ? "??? ??"/"??? ???" ????-?-????. */
    height: 42px;
    padding-top: 0;
    padding-bottom: 0;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ---- ???? "??? ?? ??????" (leaderboard.js) ---- */
.leaderboardRow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.leaderboardRow:last-child {
    border-bottom: none;
}

.leaderboardPlace {
    opacity: .7;
    min-width: 2em;
}

.leaderboardCount {
    margin-left: auto;
    font-weight: bold;
}

input[type="number"] {
    padding-left: 0.5em;
}

/* ===== ?????? "?????" (???????????) ? ?????? ??????? ???? ????? ===== */
/* CLAUDE: #loginButtonsStack ??????????? #loginButton + #moderationLink +
   #myMarkersLink ? ???? flex-column ????????? (??. login.js) — ???
   ????????? ??????????????? ? ?????? ??????? ????, ? ??????? ? ???????
   ????? ???????? ?????? ??????? ??????? ??????? document flow. ??????
   ?????? ?? ???? ?????? ???? ??????????????? position:absolute ?????????
   ?? ????? ??????? ??????????????? ? JS 'top' — ??? ? ????????? ? ????, ???
   ?????? ???????? ???? ?? ????? (??. ???????? ????????????). */
#loginButtonsStack {
    position: absolute;
    top: 0.5vh;
    right: 0.5vh;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

#loginButton {
    padding: 6px 12px;
    font-size: 100%;
    font-weight: bold;
    cursor: pointer;
    box-sizing: border-box;
}

/* CLAUDE: ?????? ???????? ?? ???????? ????????? (moderate.html), ?????
   ?????? ??? admin/moderator (??. login.js, ensureModerationLink). */
#moderationLink {
    padding: 6px 12px;
    font-size: 100%;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    display: none;
    box-sizing: border-box;
    white-space: nowrap;
}

#moderationLink:hover {
    background-color: var(--toolsBtnHoverBg, rgba(255, 255, 255, 0.25));
}

/* CLAUDE: ?????? ? ?????? ??????, ????????? ?????????, ????? ? ???????
   ?????? "?? ?????????". ????? (display:none), ???? ?????? ??? — ??.
   updateModerationBadge() ? login.js. */
#moderationBadge {
    display: none;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 6px;
    border-radius: 999px;
    background-color: #e33;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}

/* CLAUDE: "?????? ??????? ??? ? ????????? ???? ??? ? ???????" (???????
   ????????????) — ??? ?? ???, ??? ? #moderationBadge ????, ?? ????? ?????
   ?? ?????? ??????? (#loginButton), ??. updateNotificationBadge() ?
   login.js. */
#notificationBadge {
    display: none;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 6px;
    border-radius: 999px;
    background-color: #e33;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}

/* ??? ?? ??????? ??????, ??? ? #notificationBadge (?????? ??????? ?
   login.js), ?????? ?? ?????? "?? ???????????" ?????? ??? ?????????
   ??????? (userProfile.js) — ??????? ???????????? "????? ???????
   ??????????? ???????? ?? ?????? ??????????? ???". */
.userProfileNotifBtnBadge {
    display: none;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 6px;
    border-radius: 999px;
    background-color: #e33;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}

/* CLAUDE: ?????? ?? my-markers.html — ????? ?????? ????????? ?????? (??
   ?????? admin/moderator). */
#myMarkersLink {
    padding: 6px 12px;
    font-size: 100%;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    display: none;
    box-sizing: border-box;
    white-space: nowrap;
}

#myMarkersLink:hover {
    background-color: var(--toolsBtnHoverBg, rgba(255, 255, 255, 0.25));
}


#loginButton:hover {
    background-color: var(--toolsBtnHoverBg, rgba(255, 255, 255, 0.25));
}

/* ???? (?????) ??????????? ?????????? ?? ?? ?????? .popup/.c ??? ? ?????????
   ?????? ?????, ??????? ?????????????? ?????? ?? ?????????. ?????????
   ??????, ????? ???? ?????????? ?????????. */
.loginPopup {
    min-width: 280px;
}

.loginPopup .error {
    color: #ff6666;
    font-size: 90%;
    margin: 4px 0 0 0;
}

/* CLAUDE: ????? ??? ????? ???????????????? ????? (????????????? ????? ????) */

/* ?????? "?????" ????? ????? ?????????? ??? ?????? ? ????????? ?????????,
   ????? ???? ?????, ??? ????????? ??????????. */
#loginButton.loggedIn {
    background-color: var(--popupButtonDefaultBg, rgba(0, 255, 255, 0.15));
}

/* ????????? ??? ?????? ? ?????? ????? */
.loginPopup .login-hint {
    font-size: 85%;
    opacity: 0.8;
    margin: 6px 0 0 0;
}

/* ???? ? ????????, ??????? ????? ?????? ? ???? ? ??????? ???????????? ?????,
   ????? ??? ???? ????? ???????????/????????? ??????? */
.loginPopup .login-code-box {
    font-family: 'Fire Code', monospace;
    font-size: 110%;
    text-align: center;
    background-color: var(--popupInputBg);
    border: 3px solid var(--popupBorder);
    border-radius: 4px;
    padding: 8px;
    margin: 8px 0;
    user-select: all;
}

/* ?????? ???????? ????????????? ???? ?? ???? */
.loginPopup .login-wait-status {
    font-size: 90%;
    text-align: center;
    margin: 6px 0 0 0;
}

.loginPopup .login-wait-status.success {
    color: #66ff66;
}

.loginPopup .login-wait-status.error {
    color: #ff6666;
}

/* ============================================================================
   ????????? (settlements.js) — ??????? ("??????") ?? ????? ? ??????????,
   ??????? ???????? ? ? ????, ? ? ??????? ???? ?? settlement.html (??.
   renderSettlementPanel/renderSettlementDetail ? settlements.js). ????? ????
   ????????? ?? "?????? ??????? ?? ?????" (.settlementOverlayBG/.settlementPanel,
   position:fixed) ? "?????????? ??????" (??? ????????? — ???????? ?????????
   ??? ? ???????, ??? ? ??????? ?????? ???????? settlement.html).

   CLAUDE: ????? ????????? — ?? ????? ???? ????? (classicblue.css), ? ????
   ????????? ?????/?????????-??????? (???????????? ??????????? ????????,
   ??. assets/textures/parchment.png) — ?????????? --settlementXxx ????
   ????????? ??? ??????? ???????? (?? ???????? ?? var(--boxBg) ? ?.?.),
   ????? ????? ???????? ???? ????? ?? ?????? ?? ???????? ?????????.
   ============================================================================ */
#settlementOverlayBG {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1900;
}

.settlementPanel {
    position: fixed;
    top: 5vh;
    left: 5vw;
    right: 5vw;
    bottom: 5vh;
    z-index: 1901;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 16px 20px;
    background-color: #f1e4c6;
    background-image: url('../assets/textures/parchment.png');
    background-repeat: repeat;
    background-size: 740px 493px;
    border: 3px solid #7a5230;
    color: #3b2712;
    font-family: Georgia, 'Times New Roman', serif;
}

.settlementPanelHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 2px solid #7a5230;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.settlementPanelTitleWrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.settlementPanelTitle {
    margin: 0;
    font-size: 130%;
    color: #3b2712;
}

.settlementStatusBadge {
    font-size: 80%;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(122, 82, 48, 0.18);
    border: 1px solid rgba(122, 82, 48, 0.6);
    color: #5b3a1e;
}

.settlementPageLink {
    font-size: 85%;
    opacity: .85;
    text-decoration: none;
    color: #5b3a1e;
}

.settlementPageLink:hover {
    text-decoration: underline;
}

.settlementCloseBtn {
    flex-shrink: 0;
    padding: 4px 10px;
    cursor: pointer;
}

.settlementNotice {
    background: rgba(122, 82, 48, 0.12);
    border: 1px solid rgba(122, 82, 48, 0.4);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 0 0 10px 0;
    color: #3b2712;
}

.settlementPendingEditBox {
    border: 1px dashed #e0a030;
    background: rgba(224, 160, 48, 0.1);
}

/* ---- ?????????????? ????? (??? ???????): ????? ??????????, ?????? ??????
   ????????, ????? ??????????? — ??????? ????????????. ---- */
.settlementColumns {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.4fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 720px) {
    .settlementColumns {
        grid-template-columns: 1fr;
    }
}

.settlementColumnLeft,
.settlementColumnRight {
    min-width: 0;
}

.settlementInfoSection {
    margin-bottom: 16px;
}

.settlementMeta {
    opacity: .8;
    font-size: 90%;
    color: #4a3016;
}

/* "?????????????" ? "????????? ?????" — ? ????? ?????? (??????? ????????????). */
.settlementActionsRow {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.settlementActionsRow button {
    cursor: pointer;
    padding: 6px 12px;
}

.settlementLeaderBox {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #7a5230;
}

.settlementLeaderBox button {
    cursor: pointer;
    margin: 4px 6px 4px 0;
}

.settlementClaimBtn {
    padding: 6px 12px;
}

.settlementAssignBox {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.settlementAssignBox input {
    width: auto;
    padding: 4px 8px;
}

.settlementLeaderRow {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.settlementBossCheck {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.settlementBossCheck input {
    width: auto;
}

.settlementBossCheck label {
    display: inline;
    margin: 0;
}

/* CLAUDE: ????? "??? ?????????" — ??????????? ?????? ?? ??????? ?????
   ????? ??? ??????? "????????..." ??? "??? ?????" (??. openAddChooser ?
   settlements.js), ??????? ???????????? "??? ????? ??????????" ??????
   ?????? ?????? ?????? ? ???????. 4 ??????? ??????-?????? ?????? ???????
   ????? controls-?????? ????? ?????? — ??? ??? ??? ?????, ? ?? ????????
   ?????? ??????? ?????. */
.addChooserList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
}

.addChooserOption {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px !important;
    font-size: 105%;
    text-align: left;
    justify-content: flex-start !important;
}

.addChooserIcon {
    font-size: 130%;
    width: 1.3em;
    text-align: center;
    flex: none;
}

/* ---- ?????????? ---- */
.settlementPhotosSection {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(122, 82, 48, 0.4);
    border-radius: 8px;
    padding: 10px;
}

.settlementPhotoGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.settlementPhotoCell {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    border: 2px solid #7a5230;
}

.settlementPhotoCell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
}

/* CLAUDE: ??? ???????????? — "???? ??? ???? ?????????? ?? ????????, ??
   ????? ?? ???? ?????? ???????/?????????". ???????: ???????? ???? ??
   ???????? ???????????????? .settlementPhotoCell (????. ???????
   aspect-ratio:1/1 + overflow:hidden), ? ?????? "????????"/"?????????" (?
   ??? ??????) ???????? ???????? ??????? ??? ????????? — ???????? ???? ???
   ???????? ??? ?????? ????????, ??? ??? ?????? ?????? ???????????? ??
   ??????? ?????????????? ???????? ?... ?????????? overflow:hidden.
   ?????????? ??? ???? ? DOM ? ???? ??????????? ??? ?????? ?????????, ??
   visually ????????. ????????? ???????? ??? ???????? "?? ????????" —
   overflow/??????? ?????? ? ??????? ????????, ? ?? ? ???? ????????, ?
   ??????? ?????? ?????? ?? ???????? (auto), ??? ??? ??? ?????? ? ??????
   ??? ????????? ?? ??????????. */
.settlementPendingPhotoCell {
    border-radius: 6px;
    border: 2px solid #7a5230;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.25);
}

.settlementPendingPhotoImgWrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.settlementPendingPhotoImgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
}

.settlementPendingPhotoMeta {
    padding: 3px 6px 0 6px;
}

.settlementPendingPhotoActions {
    padding: 4px 6px 6px 6px;
}

.settlementPhotoDelete {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}

.settlementUploadBtn {
    display: inline-block;
    cursor: pointer;
    padding: 6px 12px;
}

.settlementLightboxBG {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.settlementLightboxImg {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
}

/* CLAUDE: "?????? ??????????? ???????????? ?? 10 ????? ? ?????" (???????
   ????????????) — ????? ???????? ? ?????? ????? (??. markerPhotosWrap ?
   automap.js), ??? ?? ?????, ??? ? .settlementPhotoGrid/-Cell ????, ??????
   ? ?????? ?????-???? ?????, ? ?? ???????????? ???? ?????????. */
.markerPhotoGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 6px;
    margin: 6px 0;
}
.markerPhotoThumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 5px;
    border: 2px solid #555;
    cursor: pointer;
    display: block;
}

/* CLAUDE: "??????? ??????????... ????? ????? ?????????????" (???????
   ????????????) — ????????????? ???????? ???? ? ???????????????, ??????
   ????? ? ????????????? (window.openPhotoLightbox ? comments.js). */
/* CLAUDE: ??? ???????????? — "??????? ??????? ?? ????" — ??-??
   .settlementLightboxImg (max-height:92vh) ???? ????? ????????? ???? ?????,
   ? ??????????? (?????? ????? ???? ? ??????) ???????????? ?? ???????
   ??????? ??????? 94vh ??? ????????? — ????????? ????????? ??? ?????????
   ?? ????. ?????? ???????? ?????????? ??????? ??????? (photoLightboxImg,
   ? ?? settlementLightboxImg — ?? ???????? ??? ???? ??? ???????? ?????????
   ??? ????????????, ??. pendingPhotos-????? ? settlements.js), ? ???
   ???????? — ?? ????? ?????????? (overflow-y:auto), ??? ??? ???????????
   ?????? ???????? ?????? ??? ????, ? ?? ?????? ????. */
.photoLightboxBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 94vw;
    max-height: 94vh;
    overflow-y: auto;
    cursor: default;
}
.photoLightboxImg {
    display: block;
    max-width: 88vw;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 6px;
}
.photoLightboxImgWrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.photoLightboxArrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
}
.photoLightboxArrow:hover {
    background: rgba(0, 0, 0, 0.8);
}
.photoLightboxArrowLeft { left: 8px; }
.photoLightboxArrowRight { right: 8px; }
.photoLightboxMeta {
    color: #eee;
    font-size: 13px;
    opacity: .85;
    margin-top: 6px;
    display: flex;
    gap: 12px;
    align-items: baseline;
    max-width: 92vw;
}
.photoLightboxMeta span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70vw;
}
.photoLightboxComments {
    background: #fff;
    color: #222;
    border-radius: 8px;
    padding: 8px 12px;
    margin-top: 10px;
    max-width: 92vw;
    width: 480px;
    max-height: 30vh;
    overflow-y: auto;
}

/* ---- ??????????? (????? ?????? comments.js) — ?? ????? ????, ??????????
   ??????????????? ? ??????????? ????????? ???????? (??????? ????????????). ---- */
.settlementCommentsSection {
    margin-top: 8px;
}

.commentsWidget {
    background: #ffffff;
    color: #222222;
    border: 1px solid rgba(122, 82, 48, 0.4);
    border-radius: 8px;
    padding: 12px;
}

.commentsComposeWrap {
    margin-bottom: 10px;
}

.commentsComposeRow {
    display: flex;
    gap: 8px;
    align-items: center;
}

.commentsComposeRow input {
    flex: 1 1 auto;
    box-sizing: border-box;
    padding: 6px 8px;
    color: #222222;
    background-color: #ffffff;
    border: 2px solid #b8a37f;
    border-radius: 4px;
}

.commentsComposeRow button {
    flex: 0 0 auto;
    cursor: pointer;
    padding: 6px 14px;
}

/* ????-??????? ?????? — ?????? "?????????" ?? ??? ?? ?????? (???????
   ????????????), ?????????/?????? .commentsSearch ????. */
.commentsSearchToggle {
    padding: 6px 10px;
    font-size: 100%;
    line-height: 1;
}

.commentsSearch {
    margin: 8px 0;
}

/* CLAUDE: "??????? ???????? ? ????????????" (??????? ????????????) —
   ??????? "????? NICK ?" ??? ??????? ?????, ????? ?????? ???? ???? ?????
   ?? ?????????? ??????????? (??. setReplyTo ? comments.js). */
.commentsReplyIndicator {
    font-size: 90%;
    opacity: .85;
    margin: 0 0 6px 0;
}

.commentsReplyIndicatorCancel {
    cursor: pointer;
    margin-left: 4px;
    opacity: .7;
}

.commentsReplyIndicatorCancel:hover {
    opacity: 1;
}

/* "? ????? NICK" ??? ??????? ???????????-??????. */
.commentRowReplyTo {
    font-size: 85%;
    opacity: .7;
    margin: 2px 0;
}

.commentsSearch input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    color: #222222;
    background-color: #ffffff;
    border: 2px solid #b8a37f;
    border-radius: 4px;
}

.commentsList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.commentRow {
    border: 1px solid #d8cbb0;
    border-radius: 6px;
    padding: 6px 10px;
    background: #fffdf7;
    /* CLAUDE: ???????-???????? (??. renderReactionBadges ? comments.js)
       ??????????????? absolute ???????????? ???? ???????? — ???
       position:relative ????? ??? ?? ???????? ?? ???? ?????? ????????????
       (????????? ????????????????? ??????). ?????? ??? ????????? ??????
       padding ??? ????? ?????? ??????? ? ???? — ?????? ??????? ??????????
       ?? ???? ???????? (??????? ???????????? "???-?? ?????????? ?????
       ????????? ?????? ????????????", ? ?? ?????? ? ????), ??? ???
       ????????? ??????-?????? ?????? ?? ?????. */
    position: relative;
}

.commentRowHead {
    font-size: 85%;
    opacity: .7;
    margin-bottom: 2px;
}

.commentRowText {
    white-space: pre-wrap;
    word-break: break-word;
}

.commentRowTextClickable {
    cursor: pointer;
}

.commentRowTextClickable:hover {
    text-decoration: underline dotted;
}

/* ---- ???????-???????? ?? ??????????? (??????? ????????????) ---- */
.commentReactionBadge {
    position: absolute;
    /* CLAUDE: ???? 24px ("????? ?????? ???????????") — ????????????
       ??????? ????????-??????? ????????? (?????) ? ???????? ????????? ?
       1.5 ????, ????? ????? ???????????????? ???????? ???? ??????????.
       ????????? (top/left) ???? JS ????? REACTION_SLOTS (??. comments.js) —
       ?? ?? ?????, ??? ? ? pickReactionSlot ?? ??????? (server.js), ?????
       ????????? ?????? ??????? ?? ????????? 25% (??????? ????????????). */
    width: 36px;
    height: 36px;
    object-fit: contain;
    pointer-events: auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.commentReactionPicker {
    position: fixed;
    z-index: 3000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 210px;
    padding: 8px;
    background: #ffffff;
    color: #222222;
    border: 1px solid #7a5230;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.commentReactionPickerOpt {
    width: 28px;
    height: 28px;
    object-fit: contain;
    cursor: pointer;
    border-radius: 5px;
    padding: 2px;
    box-sizing: border-box;
}

.commentReactionPickerOpt:hover {
    background: rgba(122, 82, 48, 0.15);
}

.commentReactionPickerOpt.active {
    background: rgba(122, 82, 48, 0.25);
    outline: 2px solid #7a5230;
}

.commentReactionPickerClear {
    width: 28px;
    height: 28px;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

/* ---- ??????-????? ??????? ? ?????? ????????, ?????? ?? ?????/????????
   (??????? ????????????) — ??????????? ?????? (?? ??????-???????), ??? ??
   ????? ?????, ??? ? ? ?????/???????? (.commentReactBtn). ---- */
.commentReactionPickerBtn {
    font-size: 110%;
    font-weight: bold;
    line-height: 1;
    width: 26px;
    text-align: center;
}

/* ---- ??????? ??? ???????????? ??????? (??????? ???????????? — ?? ???? ??
   ?????? ?????? ???????? + ?????, ????? ?? ??????-??????, ????????????? ??
   ??????????). ---- */
.commentReactionStrip {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.commentReactionChip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 1px solid #d8cbb0;
    border-radius: 10px;
    padding: 1px 6px 1px 3px;
    font-size: 85%;
    background: #fff;
    cursor: default;
}

.commentReactionChip.mine {
    border-color: #7a5230;
    background: rgba(122, 82, 48, 0.12);
}

/* CLAUDE: ???? ??? — ???? ??????? ???????, ????? — ?????? ????? ?? ????
   (??????? ????????????) — ??????-?????????, ????? ???? ?????, ??? ???
   ?????????? (?????? ??? ??????? ???? ?????? cursor:default). */
.commentReactionChip.clickable {
    cursor: pointer;
}

.commentReactionChip.clickable:hover {
    background: rgba(122, 82, 48, 0.2);
}

.commentReactionChip img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.commentReactionMore {
    cursor: pointer;
    padding: 1px 6px;
    font-size: 90%;
    opacity: .8;
}

.commentReactionMore:hover {
    opacity: 1;
    text-decoration: underline;
}

.commentRowActions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.commentReactBtn {
    cursor: pointer;
    background: none;
    border: 1px solid #d8cbb0;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 90%;
}

.commentReactBtn.active {
    background: rgba(122, 82, 48, 0.15);
    border-color: #7a5230;
    font-weight: bold;
}

.commentReportBtn {
    margin-left: auto;
    font-size: 85%;
    opacity: .8;
    cursor: pointer;
}

.commentReportBtn.active {
    opacity: 1;
    color: #a33;
}

.commentDeleteBtn {
    font-size: 85%;
    opacity: .8;
    cursor: pointer;
}

.settlementPager {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    margin-top: 8px;
}

.settlementPager button {
    cursor: pointer;
    padding: 4px 10px;
}

/* ?????? ???? ????????? — ??? ? .loginPopup .error ????, ?? ?? ???????? ??
   ?????????? ???????????? ????? (???????????? ? ? ??????? ?? ?????, ? ?
   ??????? ?????? settlement.html — ??. #settlementPageBody ? settlement.html). */
.settlementPanel .error,
#settlementPageBody .error {
    color: #a33;
    font-size: 90%;
    margin: 4px 0;
}

/* ---- ???? ?? ???? -> ???? ??????? (userProfile.js) — ??????? ????????????
   "????? ??? ?? ????? ??????????? ???? ???". ???????????? ? ? ??????
   ??????? ?????, ? ?? ????? ???? ????????????/???????????, ??????? ????
   ????????? currentColor (????????? ???? ??????????? ??????), ? ??
   ?????????????. ---- */
.nickLink {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nickLink:hover {
    text-decoration-style: solid;
}

.nickLinkAvatar {
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

/* ---- ???? ??????? ?????? (userProfile.js) ---- */
.userProfilePopup {
    min-width: 320px;
    max-width: 90vw;
    /* CLAUDE: ?????? ??????????? ?????? ???? ????????? (.settlementPanel,
       z-index 1901), ???? ??? ???????? ??????? ???? — ??????? ????????????.
       ??????? ?????? ????? (.popup) ?????? z-index ?? ??????, ????????? ??
       ??????? ? DOM, ???? ???????????? ?????? ???? ????????????? z-index ?
       .settlementPanel — ??????? ??? ????? ???????? ???? ????, ?? ????
       ????????? ? ???? ????????? (2000), ??????? ???????? ????? ???????. */
    z-index: 1950;
}

.userProfilePopupBG {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1949;
}

/* ????? "? ???????" (aboutServer.js) — ??????? ??????????, ???? ??????
   ???????? (ABOUT_SERVER_SCREENSHOTS), ???????? ????? ???????????? ???????
   ????????. */
.aboutServerGallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.aboutServerScreenshot {
    max-width: 100%;
    max-height: 220px;
    border-radius: 6px;
    border: 2px solid #6b4a2a;
    cursor: pointer;
}

.userProfileAvatarWrap {
    text-align: center;
    margin-bottom: 8px;
}

.userProfileAvatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--popupBorder);
}

.userProfileAvatarPlaceholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    font-size: 220%;
    font-weight: bold;
}

/* CLAUDE: ??????? ???????????? — "??? ?????????? ? ??????? ?????? ????
   ?????, ????? ???????? ?? ???????? ????? ??????? ?????? ???? ????????" —
   ?? ???? ????/???? ???????????/???-?? ????? ? ???? ???????? ?????? ?????
   (??????), ??????????? ?????? ???????? ??????, ??? ??????? ? ?????/
   ????????????. */
.userProfileMeta {
    color: #ffffff;
    font-size: 100%;
    margin: 6px 0;
}

.userProfileDescriptionWrap {
    margin: 6px 0;
}

/* CLAUDE: ???? ??????????? ? ?????? (??. renderNotificationsSection ?
   userProfile.js) — ???????????? ????????, ????? "???? ??? ???
   ?????????" (jumpToNotification ? login.js). */
.userProfileNotificationItem {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 6px;
    cursor: pointer;
}

.userProfileNotificationItem:hover {
    background-color: rgba(255, 255, 255, 0.16);
}

.userProfileNotificationItem .userProfileMeta {
    font-size: 85%;
    opacity: .8;
    margin: 2px 0;
}

.userProfileDescriptionRow {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.userProfileDescription {
    color: #ffffff;
    font-size: 90%;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    flex: 1 1 auto;
}

/* ????????? ?????? "????????" ????? ? ????????? (??????? ???????????? —
   ?????? ?????????????? ?????? ???? ? ?????? ????????, ? ?? ???????? ?????,
   ? ????? ?????????????? ?? ?????? ?????? ???????? ?????? ???). */
.userProfileEditLink {
    color: #ffffff;
    font-size: 85%;
    opacity: .7;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
}

.userProfileEditLink:hover {
    opacity: 1;
}

.userProfileDescriptionWrap textarea {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
}

.userProfileOwnRow {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 10px 0;
    flex-wrap: wrap;
}

/* CLAUDE: "??????? ??????" (LABEL) ? "??????? ??????" (BUTTON) — ?????? ?
   ????? ?????????? ????? "c settlementUploadBtn" (??. userProfile.js), ???
   ??? ????? settlementUploadBtn ??? ??? ???????? ???? ? ??? ?? padding.
   ???????? ?????? ?????? ??, ??? settlementUploadBtn ?? ? ????? ?????? ???:
   appearance — ? ????????? ????????? BUTTON ?????? ??????????? "??????"
   ?????/??? ?????? ????????? ??????, ???? ???? ?? ?????????. ??????? ????
   ?????? ?? ?????? ?????? ????? ??? .userProfileOwnRow — ?? ????????, ????
   ???? ? ??????? ????? ???????? ?????? ? ?????? ???????. */
.userProfileOwnRow {
    /* CLAUDE: ??????? ???????????? — ?????? ? ???? ??? ??? "?????????"
       ?????????? ???? ???????????? ?????. align-items:center ???? ?? ????
       ?? ???????, ???? ? BUTTON/LABEL ???????? ?????? UA-??????? ??
       ????????? (margin) — ??????????? ?? ????? ??????? ????? ?????? ????
       (baseline), ??? ???????? center ??? ???????????? inline-block
       ????????? ? ?????????? line-height. */
    align-items: baseline;
}

.userProfileOwnRow > .c {
    font: inherit;
    font-size: 100%;
    box-sizing: border-box;
    line-height: 1.2;
    margin: 0;
    vertical-align: baseline;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/* ---- "?????????? ?????????? ? ????????" (descriptionSuggestions.js) — ??
   ?? ??????? ????????, ??? ? ? ???????????? (??????? ???????????? ???????
   ?? ?????????????? ? ????????? ?????????), ??? ?? ????? ? currentColor,
   ??? ? ? .nickLink ????, ????? ?????? ?? ??? ?? ?????????? ??????. ---- */
.descSuggestionsWidget {
    background: #ffffff;
    color: #222222;
    border: 1px solid rgba(122, 82, 48, 0.4);
    border-radius: 8px;
    padding: 12px;
    margin-top: 8px;
}

.descSuggestionsWidget textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0;
    color: #222222;
    background-color: #ffffff;
    border: 2px solid #b8a37f;
    border-radius: 4px;
    padding: 6px 8px;
}

.descSuggestionsWidget button {
    cursor: pointer;
    margin: 4px 6px 0 0;
    padding: 4px 10px;
}

.descSuggestionRow {
    border: 1px solid #d8cbb0;
    border-radius: 6px;
    padding: 6px 10px;
    background: #fffdf7;
    margin-bottom: 8px;
}

.markerCommentsWrap,
.markerDescSuggestionsWrap {
    margin-top: 10px;
}

.settlementDescSuggestionsSection {
    margin-top: 8px;
}