/*==================================================
    MESSAGES
==================================================*/

body:has(.messages-page) .header{
    position:relative;
    top:auto;
}

body:has(.messages-page) .site-footer{
    display:none;
}

.messages-page{
    --msg-line:rgba(160, 185, 190, .14);
    --msg-text:#d7e2e0;
    --msg-muted:#8e9998;
    --msg-accent:#7bc5b4;
    --msg-gold:#c4b48a;
    height:calc(100vh - 65.5px);
    height:calc(100dvh - 65.5px);
    padding:14px clamp(10px, 1.6vw, 22px);
    box-sizing:border-box;
}

.messages-sr{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
}

.messages-shell{
    display:grid;
    grid-template-columns:minmax(280px, 348px) 1px minmax(0, 1fr);
    height:100%;
    min-height:0;
    overflow:hidden;
    border:1px solid rgba(150, 185, 190, .16);
    border-radius:3px;
    background:
        linear-gradient(180deg, rgba(8, 22, 26, .96), rgba(6, 16, 20, .98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 18px 46px rgba(0, 0, 0, .28);
}

.messages-list-pane,
.messages-thread{
    min-width:0;
    min-height:0;
}

.messages-list-pane{
    display:flex;
    flex-direction:column;
}

.messages-split{
    background:var(--msg-line);
}

.messages-search-row{
    display:flex;
    gap:8px;
    padding:16px 14px 12px;
}

.messages-search{
    flex:1;
    display:flex;
    align-items:center;
    min-width:0;
    height:42px;
    padding:0 12px;
    box-sizing:border-box;
}

.messages-search,
.messages-compose-input,
.messages-draft-title input{
    color:var(--msg-text);
    border:1px solid rgba(150, 185, 190, .22);
    border-radius:6px;
    outline:none;
    background:rgb(6 19 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0, 0, 0, .28);
    transition:border-color .2s ease, background .2s ease, box-shadow .45s ease;
}

.messages-search:hover,
.messages-search:focus-within,
.messages-compose-input:hover,
.messages-compose-input:focus,
.messages-compose-input:focus-visible,
.messages-draft-title input:hover,
.messages-draft-title input:focus,
.messages-draft-title input:focus-visible{
    border-color:var(--field-focus-border);
    background:linear-gradient(180deg, var(--field-hover-bg), transparent),
               rgb(6 21 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0, 0, 0, .28),
               0 0 0 1px rgba(123, 197, 180, .08),
               0 0 18px rgba(80, 180, 153, .08);
}

.messages-search input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:var(--msg-text);
    font:15px/1.3 "Lora", serif;
    -webkit-appearance:none;
    appearance:none;
}

.messages-search input::placeholder{
    color:rgba(142, 153, 152, .82);
}

.messages-search input::-webkit-search-cancel-button,
.messages-search input::-webkit-search-decoration{
    display:none;
}

.messages-attach,
.messages-emoji,
.messages-menu,
.messages-back,
.messages-older,
.msg-image,
.msg-receipt,
.messages-emoji-item,
.messages-chip,
.messages-menu-pop button,
.messages-lightbox-close{
    border:0;
    background:transparent;
    color:inherit;
    font:inherit;
    cursor:pointer;
}

.messages-new{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:42px;
    min-width:42px;
    max-width:42px;
    height:42px;
    min-height:42px;
    max-height:42px;
    padding:0;
    align-self:flex-start;
    border-radius:6px;
    box-sizing:border-box;
    color:rgb(181 207 202 / .82);
    line-height:0;
}

.messages-new .glossary-action-icon-plus{
    background:currentColor;
    width:28px;
    height:28px;
    -webkit-mask-image:url("/static/icons/star.png");
    mask-image:url("/static/icons/star.png");
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-size:contain;
    mask-size:contain;
}

.messages-new svg,
.messages-attach svg,
.messages-emoji svg,
.messages-send svg,
.messages-menu svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.messages-new[aria-pressed="true"]{
    color:#f0fffb;
    border-color:rgba(123, 197, 180, .34);
    background:rgba(12, 28, 29, .62);
}

.messages-people,
.messages-conversations{
    overflow:auto;
}

.messages-people{
    flex:0 0 auto;
    max-height:34%;
    border-bottom:1px solid var(--msg-line);
}

.messages-conversations{
    flex:1;
}

.messages-section-label,
.messages-list-empty{
    margin:0;
    padding:10px 16px 6px;
    color:var(--msg-muted);
    font-size:13px;
}

.messages-person,
.messages-row{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 14px;
    border:0;
    border-bottom:1px solid rgba(160, 185, 190, .08);
    background:transparent;
    color:var(--msg-text);
    text-align:left;
    cursor:pointer;
}

.messages-row{
    position:relative;
    align-items:flex-start;
    padding-top:13px;
    padding-bottom:13px;
}

.messages-person:hover,
.messages-row:hover{
    background:rgba(123, 197, 180, .045);
}

.messages-person.is-selected,
.messages-row.is-active{
    background:rgba(123, 197, 180, .07);
}

.messages-row.is-active::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:2px;
    border-radius:2px;
    background:var(--msg-gold);
}

.messages-avatar,
.msg-avatar{
    flex:0 0 auto;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:2px solid rgba(123, 197, 180, .3);
    border-radius:50%;
    background:rgba(10, 28, 32, .8);
    color:#d5e4e1;
    font-family:"Cormorant Garamond", serif;
    font-size:20px;
}

.messages-avatar img,
.msg-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.messages-avatar.is-group{
    border-color:rgba(196, 180, 138, .5);
}

.messages-person-text,
.messages-row-body,
.messages-head-text{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.messages-person-text strong,
.messages-row-top strong,
.messages-head h2{
    font-family:"Cormorant Garamond", serif;
    font-weight:600;
    letter-spacing:.01em;
}

.messages-person-text strong{
    font-size:18px;
    line-height:1.1;
}

.messages-person-text em,
.messages-row-preview,
.messages-head p{
    color:var(--msg-muted);
    font-style:normal;
    font-size:13px;
}

.messages-row-body{
    flex:1;
    gap:3px;
    padding-top:1px;
}

.messages-row-top{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:8px;
}

.messages-row-top strong{
    overflow:hidden;
    font-size:20px;
    line-height:1.05;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.messages-row.is-unread .messages-row-top strong{
    color:#f3f7f6;
}

.messages-row-top time{
    flex:0 0 auto;
    color:rgba(142, 153, 152, .9);
    font-size:12px;
}

.messages-row-preview{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.messages-badge{
    position:absolute;
    right:14px;
    bottom:12px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:#7bc5b4;
    color:#10211f;
    font-size:11px;
    line-height:18px;
    text-align:center;
}

.messages-thread{
    display:flex;
    flex-direction:column;
}

.messages-empty,
.messages-draft{
    margin:auto;
    max-width:420px;
    padding:28px;
    color:var(--msg-muted);
    text-align:center;
}

.messages-head{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:74px;
    padding:12px 16px;
    border-bottom:1px solid var(--msg-line);
}

.messages-head h2{
    margin:0;
    color:#e7f1ef;
    font-size:28px;
    line-height:1;
}

.messages-head p{
    margin:3px 0 0;
}

.messages-head-text{
    flex:1;
}

.messages-profile-link{
    display:flex;
    flex:1;
    align-items:center;
    gap:12px;
    min-width:0;
    color:inherit;
    text-decoration:none;
}

.messages-profile-link:hover h2,
.messages-profile-link:focus-visible h2{
    color:#bfe1d8;
}

.messages-profile-link:focus-visible,
.msg-profile-link:focus-visible{
    outline:2px solid rgba(123, 197, 180, .5);
    outline-offset:3px;
    border-radius:8px;
}

.messages-members-toggle{
    align-self:flex-start;
    margin:3px 0 0;
    padding:0;
    color:var(--msg-muted);
    border:0;
    background:transparent;
    font-size:13px;
    cursor:pointer;
}

.messages-members-toggle:hover,
.messages-members-toggle:focus-visible{
    color:var(--msg-accent);
    outline:none;
}

.messages-back{
    display:none;
    width:36px;
    height:36px;
    place-items:center;
    flex:0 0 auto;
    color:var(--msg-accent);
    font:26px/1 Arial, sans-serif;
}

.messages-menu{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#c5d4d1;
}

.messages-menu:hover,
.messages-new:hover,
.messages-attach:hover,
.messages-emoji:hover{
    background:rgba(255, 255, 255, .04);
}

.messages-log{
    flex:1;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    padding:18px 18px 8px;
}

.messages-older{
    display:block;
    margin:0 auto 14px;
    color:var(--msg-accent);
    font-size:13px;
}

.messages-older[hidden]{
    display:none;
}

.msg{
    display:flex;
    align-items:flex-end;
    gap:8px;
    margin:0 0 12px;
}

.msg.is-mine{
    justify-content:flex-end;
}

.msg-stack{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    max-width:min(72%, 560px);
}

.msg.is-mine .msg-stack{
    align-items:flex-end;
}

.msg.is-system{
    justify-content:center;
    margin:14px 0;
}

.msg.is-system p{
    margin:0;
    color:var(--msg-muted);
    font-size:13px;
    text-align:center;
}

.msg-avatar{
    width:32px;
    height:32px;
    font-size:16px;
}

.msg-profile-link{
    display:block;
    flex:0 0 auto;
    color:inherit;
    text-decoration:none;
}

.msg-profile-link:hover .msg-avatar{
    border-color:rgba(123, 197, 180, .72);
}

.msg-bubble{
    max-width:100%;
    padding:9px 12px 7px;
    border:1px solid rgba(160, 185, 190, .12);
    border-radius:14px 14px 14px 5px;
    background:rgba(12, 28, 32, .88);
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, .025);
}

.animated-emoji{
    position:relative;
    display:inline-grid;
    place-items:center;
    width:32px;
    height:32px;
    flex:0 0 auto;
    overflow:visible;
    vertical-align:middle;
}

.animated-emoji svg{
    display:block;
    width:100% !important;
    height:100% !important;
    overflow:visible;
}

.animated-emoji-parking{
    position:fixed;
    top:-10000px;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden;
    visibility:hidden;
    pointer-events:none;
}

.animated-emoji-fallback{
    color:#d8c58e;
    font:20px/1 sans-serif;
}

.animated-emoji.is-ready .animated-emoji-fallback{
    display:none;
}

.msg-reactions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px;
    margin-top:7px;
}

.msg-reaction{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-width:42px;
    height:34px;
    padding:2px 8px;
    border:1.5px solid rgba(160, 185, 190, .16);
    border-radius:999px;
    background:rgba(8, 23, 27, .78);
    color:#c6d4d1;
    cursor:pointer;
}

.msg-reaction:hover,
.msg-reaction:focus-visible{
    border-color:rgba(123, 197, 180, .38);
    background:rgba(39, 96, 90, .22);
}

.msg-reaction.is-mine{
    border-color:rgba(123, 197, 180, .58);
    background:rgba(39, 96, 90, .42);
    color:#e3f3ef;
}

.msg-reaction .animated-emoji{
    width:24px;
    height:24px;
}

.msg-reaction .standard-reaction-emoji{
    width:19px;
    height:19px;
}

.msg-reaction-count{
    min-width:9px;
    font:12px/1 Arial, sans-serif;
}

.msg-reaction-avatars{
    display:inline-flex;
    align-items:center;
    padding-left:1px;
}

.msg-reaction-avatar{
    display:grid;
    width:17px;
    height:17px;
    margin-left:-4px;
    overflow:hidden;
    place-items:center;
    border:1px solid #102428;
    border-radius:50%;
    background:#183338;
    color:#d9e5e2;
    font:9px/1 Arial, sans-serif;
}

.msg-reaction-avatar:first-child{
    margin-left:0;
}

.msg-reaction-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.msg.is-highlighted .msg-bubble{
    box-shadow:0 0 0 1px rgba(123, 197, 180, .38), 0 0 24px rgba(80, 180, 153, .16);
}

.msg-forwarded{
    margin-bottom:5px !important;
    color:var(--msg-accent) !important;
    font-size:12px !important;
    font-weight:600;
}

.msg-reply{
    display:grid;
    gap:2px;
    width:100%;
    margin:0 0 7px;
    padding:5px 8px;
    color:var(--msg-text);
    text-align:left;
    border:0;
    border-left:2px solid var(--msg-accent);
    border-radius:3px;
    background:rgba(4, 14, 18, .26);
    cursor:pointer;
}

.msg-reply strong{
    color:var(--msg-accent);
    font-size:12px;
}

.msg-reply span{
    overflow:hidden;
    color:rgba(215, 226, 224, .72);
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.msg.is-mine .msg-bubble{
    border-color:rgba(123, 197, 180, .28);
    border-radius:14px 14px 5px 14px;
    background:rgba(39, 96, 90, .48);
}

.msg .msg-bubble.has-emoji-only{
    padding:2px 4px 4px;
    border-color:transparent;
    background:transparent;
    box-shadow:none;
}

.msg-bubble p{
    margin:0;
    color:var(--msg-text);
    font-size:15px;
    line-height:1.45;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.msg-inline-emoji{
    width:25px;
    height:25px;
    margin:0 1px;
    vertical-align:-7px;
}

.msg-inline-standard-emoji{
    display:inline-block;
    width:21px;
    height:21px;
    margin:0 1px;
    object-fit:contain;
    vertical-align:-5px;
}

.msg-body.is-emoji-only{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:2px;
    max-width:240px;
    line-height:1;
}

.msg-body.is-emoji-only .msg-inline-emoji{
    margin:0;
    vertical-align:middle;
}

.msg-body.is-emoji-only .msg-inline-standard-emoji{
    margin:0;
    vertical-align:middle;
}

.msg-body.emoji-count-1 .msg-inline-emoji{width:96px;height:96px}
.msg-body.emoji-count-2 .msg-inline-emoji{width:78px;height:78px}
.msg-body.emoji-count-3 .msg-inline-emoji{width:64px;height:64px}
.msg-body.emoji-count-4 .msg-inline-emoji{width:52px;height:52px}
.msg-body.emoji-count-5 .msg-inline-emoji{width:44px;height:44px}
.msg-body.emoji-count-6 .msg-inline-emoji{width:38px;height:38px}
.msg-body.emoji-count-1 .msg-inline-standard-emoji{width:68px;height:68px}
.msg-body.emoji-count-2 .msg-inline-standard-emoji{width:56px;height:56px}
.msg-body.emoji-count-3 .msg-inline-standard-emoji{width:46px;height:46px}
.msg-body.emoji-count-4 .msg-inline-standard-emoji{width:38px;height:38px}
.msg-body.emoji-count-5 .msg-inline-standard-emoji{width:33px;height:33px}
.msg-body.emoji-count-6 .msg-inline-standard-emoji{width:29px;height:29px}

.msg-image{
    display:block;
    margin-top:8px;
    padding:0;
    border-radius:10px;
    overflow:hidden;
}

.msg-image img{
    display:block;
    max-width:min(260px, 64vw);
    max-height:220px;
    object-fit:cover;
}

.msg-gone{
    color:var(--msg-muted) !important;
    font-size:13px !important;
}

.msg-meta{
    display:flex;
    justify-content:flex-end;
    margin-top:4px;
}

.msg-receipt,
.msg-meta time{
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:rgba(206, 220, 218, .62);
    font-size:11px;
}

.msg-edited{
    color:rgba(206, 220, 218, .48);
    font-size:10px;
}

.msg-checks{
    width:16px;
    height:11px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.msg-checks.is-sent{
    color:rgba(206, 216, 215, .55);
}

.msg-checks.is-read{
    color:#9ed8cb;
}

.messages-compose{
    padding:10px 14px 14px;
    border-top:1px solid var(--msg-line);
}

.messages-compose-context{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
    padding:7px 10px;
    border-left:2px solid var(--msg-accent);
    border-radius:4px;
    background:rgba(7, 24, 26, .58);
}

.messages-compose-context[hidden]{
    display:none;
}

.messages-compose-context > span{
    display:grid;
    min-width:0;
}

.messages-compose-context strong{
    color:var(--msg-accent);
    font-size:12px;
}

.messages-compose-context small{
    overflow:hidden;
    color:var(--msg-muted);
    text-overflow:ellipsis;
    white-space:nowrap;
}

.messages-compose-context button{
    border:0;
    background:transparent;
    color:var(--msg-muted);
    font-size:20px;
    cursor:pointer;
}

.messages-compose.is-sending{
    opacity:.72;
}

.messages-pending{
    display:flex;
    gap:8px;
    margin-bottom:8px;
}

.messages-pending[hidden]{
    display:none;
}

.messages-file-chip{
    position:relative;
    width:58px;
    height:58px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid rgba(160, 185, 190, .18);
}

.messages-file-chip img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.messages-file-chip button{
    position:absolute;
    top:2px;
    right:2px;
    width:18px;
    height:18px;
    border:0;
    border-radius:50%;
    background:rgba(6, 16, 18, .78);
    color:#fff;
    cursor:pointer;
}

.messages-compose-row{
    display:flex;
    align-items:flex-end;
    gap:8px;
}

.messages-emoji-control{
    position:relative;
    flex:0 0 44px;
}

.messages-attach,
.messages-emoji{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid rgba(160, 185, 190, .16);
    border-radius:6px;
    color:#c5d4d1;
}

.messages-compose-input{
    flex:1;
    min-height:44px;
    max-height:128px;
    padding:11px 12px;
    overflow-y:hidden;
    font:15px/1.4 "Lora", serif;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.messages-compose-input:empty::before{
    content:attr(data-placeholder);
    color:rgba(142, 153, 152, .8);
    pointer-events:none;
}

.messages-compose-emoji{
    width:27px;
    height:27px;
    margin:-4px 1px -7px;
}

.messages-compose-standard-emoji{
    display:inline-block;
    width:22px;
    height:22px;
    margin:-2px 1px -5px;
    object-fit:contain;
    vertical-align:middle;
}

.messages-send{
    --messages-send-icon-color:#83c1bd;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:1.8px solid rgba(156, 205, 203, 0.229);
    border-radius:50%;
    background:transparent;
    color:#83c1bd;
    cursor:pointer;
}

.messages-send-crow{
    display:block;
    width:29px;
    height:29px;
    background-color:var(--messages-send-icon-color, currentColor);
    -webkit-mask:url("/static/icons/crow.png") center / contain no-repeat;
    mask:url("/static/icons/crow.png") center / contain no-repeat;
    transition:background-color .18s ease, transform .18s ease;
}

.messages-send:hover{
    --messages-send-icon-color:#b5ddd7;
    background:rgba(138, 196, 191, 0.08);
}

.messages-send:hover .messages-send-crow,
.messages-send:focus-visible .messages-send-crow{
    transform:scale(1.06);
}

.messages-emoji-panel{
    position:absolute;
    z-index:12;
    left:-52px;
    bottom:calc(100% + 8px);
    display:block;
    width:min(340px, calc(100vw - 32px));
    margin:0;
    padding:8px;
    border:1px solid var(--msg-line);
    border-radius:12px;
    background:rgba(7, 18, 22, .96);
    box-shadow:0 14px 38px rgba(0, 0, 0, .38);
}

.messages-emoji-panel-head{
    display:flex;
    align-items:baseline;
    padding:3px 5px 8px;
}

.messages-emoji-panel-head strong{
    color:#dce8e5;
    font-size:13px;
    font-weight:500;
}

.messages-emoji-panel-body{
    max-height:min(286px, calc(100dvh - 190px));
    padding-right:3px;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-gutter:stable;
}

.messages-emoji-section{
    min-width:0;
}

.messages-emoji-section + .messages-emoji-section{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid rgba(160, 185, 190, .12);
}

.messages-emoji-section h3{
    margin:0 0 6px;
    padding:0 4px;
    color:rgba(190, 208, 204, .7);
    font:500 11px/1.3 "Lora", serif;
}

.messages-emoji-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, 42px);
    gap:4px;
    min-width:0;
}

.messages-emoji-panel .messages-emoji-grid{
    grid-template-columns:repeat(7, minmax(0, 1fr));
}

.messages-emoji-panel[hidden]{
    display:none;
}

.messages-emoji-item{
    display:grid;
    height:42px;
    place-items:center;
    border-radius:8px;
}

.messages-emoji-item .animated-emoji{
    width:38px;
    height:38px;
}

.messages-emoji-item:hover{
    background:rgba(255, 255, 255, .05);
}

.messages-draft{
    width:min(520px, 100%);
    max-width:520px;
    padding:clamp(22px, 4vw, 38px);
    text-align:left;
}

.messages-draft-title{
    display:grid;
    gap:8px;
    color:var(--msg-muted);
    font-size:13px;
}

.messages-draft-title > span{
    color:#b9c7c4;
    font-size:13px;
}

.messages-draft-picker{
    position:relative;
    margin-top:18px;
}

.messages-draft-results{
    position:absolute;
    z-index:4;
    top:100%;
    right:0;
    left:0;
    max-height:190px;
    margin-top:6px;
    overflow:auto;
    border:1px solid rgba(150, 185, 190, .2);
    border-radius:6px;
    background:rgba(7, 19, 23, .99);
    box-shadow:0 16px 34px rgba(0, 0, 0, .34);
}

.messages-draft-results[hidden]{
    display:none;
}

.messages-draft-person{
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    min-height:46px;
    padding:6px 9px;
    color:var(--msg-text);
    text-align:left;
    border:0;
    background:transparent;
    cursor:pointer;
}

.messages-draft-person:hover{
    background:rgba(123, 197, 180, .08);
}

.messages-draft-person .messages-avatar{
    width:32px;
    height:32px;
}

.messages-draft-results .messages-draft-hint{
    padding:10px;
}

.messages-draft-title input{
    width:100%;
    border-radius:6px;
    color:var(--msg-text);
    font:15px/1.3 "Lora", serif;
    caret-color:var(--msg-accent);
    -webkit-appearance:none;
    appearance:none;
}

.messages-draft-title input{
    height:42px;
    padding:0 12px;
}

.messages-draft-title input::placeholder{
    color:rgba(142, 153, 152, .82);
    font:15px/1.3 "Lora", serif;
    opacity:1;
}

.messages-draft-title input::-webkit-search-cancel-button,
.messages-draft-title input::-webkit-search-decoration{
    display:none;
}

.messages-draft-avatar-row{
    position:relative;
    display:flex;
    align-items:center;
    margin-top:18px;
}

.messages-draft-avatar-picker{
    position:relative;
    display:flex;
    flex:1;
    align-items:center;
    gap:12px;
    min-width:0;
    padding:8px;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:8px;
    background:rgba(6, 19, 22, .44);
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.messages-draft-avatar-picker.has-remove{
    padding-right:46px;
}

.messages-draft-avatar-picker:hover,
.messages-draft-avatar-picker:focus-within{
    border-color:var(--field-focus-border);
    background:rgba(11, 31, 34, .68);
    box-shadow:0 0 0 1px rgba(123, 197, 180, .08), 0 0 18px rgba(80, 180, 153, .08);
}

.messages-draft-avatar-picker input{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
}

.messages-draft-avatar-preview{
    display:grid;
    flex:0 0 auto;
    width:52px;
    height:52px;
    overflow:hidden;
    place-items:center;
    border:2px solid rgba(196, 180, 138, .5);
    border-radius:50%;
    background:rgba(10, 28, 32, .8);
    color:#d5e4e1;
    font:24px/1 "Cormorant Garamond", serif;
}

.messages-draft-avatar-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.messages-draft-avatar-copy{
    display:grid;
    min-width:0;
    gap:3px;
}

.messages-draft-avatar-copy strong{
    color:#cbd7d5;
    font-size:13px;
    font-weight:500;
}

.messages-draft-avatar-copy span{
    color:var(--msg-muted);
    font-size:11px;
}

.messages-draft-avatar-remove{
    position:absolute;
    z-index:2;
    top:50%;
    right:10px;
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    padding:0;
    color:#9fb4b0;
    border:1px solid transparent;
    border-radius:5px;
    background:transparent;
    cursor:pointer;
    transform:translateY(-50%);
    transition:color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.messages-draft-avatar-remove:hover,
.messages-draft-avatar-remove:focus-visible{
    color:#e8b9ae;
    border-color:rgba(185, 130, 120, .4);
    background:rgba(58, 25, 22, .5);
    outline:none;
    transform:translateY(-50%);
}

.messages-draft-avatar-remove .admin-db-icon-close{
    width:12px;
    height:12px;
}

.messages-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    min-height:34px;
    margin-top:10px;
}

.messages-chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:32px;
    padding:5px 8px 5px 10px;
    border:1px solid rgba(123, 197, 180, .28);
    border-radius:999px;
    color:var(--msg-text);
    background:rgba(123, 197, 180, .045);
}

.messages-chip:hover{
    border-color:rgba(123, 197, 180, .42);
    background:rgba(123, 197, 180, .08);
}

.messages-chip-remove{
    color:var(--msg-muted);
    font-size:17px;
    line-height:1;
}

.messages-draft-hint{
    margin:0;
    color:var(--msg-muted);
    font-size:13px;
    line-height:1.5;
}

.messages-draft-selection{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--msg-line);
}

.messages-draft-selection-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.messages-draft-selection-head strong{
    color:#cbd7d5;
    font-size:13px;
    font-weight:500;
}

.messages-draft-selection-head span{
    min-width:22px;
    height:22px;
    padding:0 6px;
    border:1px solid rgba(123, 197, 180, .2);
    border-radius:999px;
    color:var(--msg-accent);
    font-size:11px;
    line-height:20px;
    text-align:center;
}

.messages-draft-footer{
    display:flex;
    justify-content:flex-end;
    margin-top:20px;
}

.messages-draft-submit{
    min-width:152px;
    height:42px;
    padding:0 18px;
    border:1px solid rgba(123, 197, 180, .34);
    border-radius:6px;
    background:rgba(39, 96, 90, .36);
    color:#d8ebe6;
    font:15px/1 "Lora", serif;
    cursor:pointer;
}

.messages-draft-submit:hover:not(:disabled){
    border-color:rgba(123, 197, 180, .52);
    background:rgba(39, 96, 90, .5);
}

.messages-draft-submit:disabled{
    opacity:.45;
    cursor:default;
}

.messages-menu-pop,
.messages-members-pop,
.messages-message-menu,
.messages-receipt{
    position:fixed;
    z-index:12000;
    min-width:180px;
    max-width:280px;
    padding:8px;
    border:1px solid rgba(160, 185, 190, .16);
    border-radius:12px;
    background:rgba(8, 20, 24, .98);
    box-shadow:0 16px 36px rgba(0, 0, 0, .35);
    color:var(--msg-text);
}

.messages-message-menu{
    max-width:300px;
}

.messages-receipt:focus{
    outline:none;
    border-color:rgba(123, 197, 180, .24);
    box-shadow:0 16px 36px rgba(0, 0, 0, .35), 0 0 18px rgba(80, 180, 153, .08);
}

.messages-menu-pop button{
    display:block;
    width:100%;
    padding:8px 10px;
    border-radius:8px;
    text-align:left;
}

.messages-members-pop{
    display:grid;
    gap:3px;
    width:min(280px, calc(100vw - 16px));
    max-height:min(420px, calc(100vh - 16px));
    overflow-y:auto;
}

.messages-members-title{
    padding:7px 9px 9px;
    color:#8fa5a0;
    font-size:12px;
    font-weight:500;
    border-bottom:1px solid rgba(160, 185, 190, .12);
}

.messages-member-link{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    padding:8px 9px;
    color:var(--msg-text);
    border-radius:8px;
    text-decoration:none;
}

.messages-member-link:hover,
.messages-member-link:focus-visible{
    background:rgba(123, 197, 180, .08);
    outline:none;
}

.messages-member-link .messages-person-text{
    flex:1;
}

.messages-member-self{
    flex:0 0 auto;
    color:#7f9691;
    font-size:11px;
}

.messages-message-menu button{
    display:block;
    width:100%;
    padding:8px 10px;
    color:var(--msg-text);
    text-align:left;
    border:0;
    border-radius:7px;
    background:transparent;
    cursor:pointer;
}

.messages-message-menu button:hover{
    background:rgba(123, 197, 180, .08);
}

.messages-reaction-picker{
    display:grid;
    grid-template-columns:repeat(8, 32px);
    gap:2px;
    max-width:100%;
    min-width:0;
    margin:-2px 0 7px;
    padding:2px 4px 7px;
    overflow-x:hidden;
    border-bottom:1px solid rgba(160, 185, 190, .12);
    box-sizing:border-box;
}

.messages-reaction-picker.is-expanded{
    display:block;
    width:268px;
    max-height:222px;
    padding-right:8px;
    overflow-x:hidden;
    overflow-y:auto;
    scrollbar-gutter:stable;
}

.messages-reaction-picker.is-expanded .messages-emoji-grid{
    grid-template-columns:repeat(7, 32px);
    justify-content:start;
    gap:3px;
}

.messages-reaction-picker.is-expanded .messages-emoji-section h3{
    padding-left:2px;
}

.messages-message-menu .messages-reaction-choice,
.messages-message-menu .messages-reaction-more{
    display:grid;
    width:32px;
    height:32px;
    padding:0;
    place-items:center;
    border-radius:50%;
}

.messages-reaction-choice .animated-emoji{
    width:30px;
    height:30px;
}

.messages-reaction-choice .standard-reaction-emoji{
    width:24px;
    height:24px;
}

.standard-reaction-emoji{
    display:block;
    flex:0 0 auto;
    object-fit:contain;
    font:24px/1 "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
}

.messages-message-menu .messages-reaction-more{
    color:#b9c9c6;
    font:22px/1 Arial, sans-serif;
    transform:rotate(90deg);
}

.messages-message-menu button.is-danger{
    color:#e5aaa2;
}

.messages-message-menu-receipt{
    position:relative;
    display:flex;
    align-items:center;
    gap:9px;
    min-height:42px;
    margin:6px -8px -8px;
    padding:8px 16px;
    border-top:1px solid rgba(160, 185, 190, .12);
    border-radius:0 0 12px 12px;
    background:rgba(4, 14, 18, .38);
    color:#bed0cd;
}

.messages-message-menu-receipt .msg-checks{
    flex:0 0 auto;
}

.messages-message-menu-receipt > span{
    display:grid;
    min-width:0;
}

.messages-message-menu-receipt-copy{
    flex:1;
}

.messages-message-menu-receipt strong{
    color:#dbe7e4;
    font-size:12px;
    font-weight:500;
}

.messages-message-menu-receipt small{
    overflow:hidden;
    margin-top:2px;
    color:var(--msg-muted);
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.messages-message-menu-receipt.is-loading,
.messages-message-menu-receipt.is-muted{
    color:var(--msg-muted);
    font-size:12px;
}

.messages-message-menu-receipt.is-group:focus{
    outline:none;
    background:rgba(123, 197, 180, .055);
}

.messages-message-menu-avatars{
    display:flex !important;
    flex:0 0 auto;
    flex-direction:row !important;
    align-items:center;
    padding-left:6px;
}

.messages-message-menu-avatar,
.messages-message-menu-reader-avatar{
    display:grid;
    place-items:center;
    overflow:hidden;
    border:2px solid rgba(184, 215, 209, .54);
    border-radius:50%;
    background:#10262a;
    color:#dce9e6;
    font-family:"Cormorant Garamond", serif;
    text-align:center;
}

.messages-message-menu-avatar{
    width:24px;
    height:24px;
    margin-left:-7px;
    box-shadow:0 0 0 2px rgba(4, 14, 18, .96);
    font-size:12px;
}

.messages-message-menu-avatar:first-child{
    margin-left:0;
}

.messages-message-menu-avatar img,
.messages-message-menu-reader-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.messages-message-menu-readers{
    position:absolute;
    z-index:2;
    left:calc(100% + 10px);
    bottom:0;
    display:grid;
    gap:4px;
    width:236px;
    max-height:min(420px, calc(100vh - 16px));
    padding:8px;
    overflow:auto;
    visibility:hidden;
    border:1px solid rgba(160, 185, 190, .18);
    border-radius:10px;
    background:rgba(8, 20, 24, .99);
    box-shadow:0 16px 36px rgba(0, 0, 0, .4);
    opacity:0;
    pointer-events:none;
    transform:translateX(-4px);
    transition:opacity .14s ease, transform .14s ease, visibility .14s ease;
}

@media (prefers-reduced-motion:reduce){
    .messages-message-menu-readers{
        transition:none;
    }
}

.messages-message-menu-receipt.is-tooltip-left .messages-message-menu-readers{
    right:calc(100% + 10px);
    left:auto;
    transform:translateX(4px);
}

.messages-message-menu-receipt.is-tooltip-down .messages-message-menu-readers{
    top:0;
    bottom:auto;
}

.messages-message-menu-receipt:hover .messages-message-menu-readers,
.messages-message-menu-receipt:focus .messages-message-menu-readers,
.messages-message-menu-receipt:focus-within .messages-message-menu-readers{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:translateX(0);
}

.messages-message-menu-reader{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    padding:5px 6px;
    border-radius:6px;
}

.messages-message-menu-reader-avatar{
    flex:0 0 auto;
    width:34px;
    height:34px;
    font-size:15px;
}

.messages-message-menu-reader > span{
    display:grid;
    min-width:0;
}

.messages-message-menu-reader strong{
    overflow:hidden;
    color:#e1ebe8;
    font-size:13px;
    font-weight:500;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.messages-message-menu-reader small{
    margin-top:2px;
    color:var(--msg-muted);
    font-size:11px;
}

.messages-forward{
    position:fixed;
    inset:0;
    z-index:12500;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(2, 8, 10, .62);
}

.messages-forward-card{
    width:min(420px, 100%);
    max-height:min(600px, calc(100vh - 40px));
    overflow:hidden;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:12px;
    background:rgba(8, 20, 24, .99);
    box-shadow:0 20px 48px rgba(0, 0, 0, .42);
}

.messages-forward-card header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    border-bottom:1px solid var(--msg-line);
}

.messages-forward-card header button{
    border:0;
    background:transparent;
    color:var(--msg-muted);
    font-size:22px;
    cursor:pointer;
}

.messages-forward-card > input{
    width:calc(100% - 24px);
    height:40px;
    margin:12px;
    padding:0 11px;
    color:var(--msg-text);
    border:1px solid rgba(150, 185, 190, .22);
    border-radius:6px;
    outline:none;
    background:rgb(6 19 22 / .68);
}

.messages-forward-list{
    max-height:430px;
    overflow:auto;
    padding:0 8px 10px;
}

.messages-forward-list > button{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:8px;
    color:var(--msg-text);
    text-align:left;
    border:0;
    border-radius:8px;
    background:transparent;
    cursor:pointer;
}

.messages-forward-list > button:hover{
    background:rgba(123, 197, 180, .08);
}

.messages-forward-list > p{
    padding:12px;
    color:var(--msg-muted);
    text-align:center;
}

.messages-menu-pop button:hover{
    background:rgba(123, 197, 180, .08);
}

.messages-menu-pop button.is-danger{
    color:#e8aaa6;
}

.messages-menu-pop button.is-danger:hover{
    background:rgba(190, 82, 75, .12);
}

.messages-receipt strong{
    display:block;
    margin:6px 8px 4px;
    color:#e7f1ef;
    font-size:13px;
}

.messages-receipt p{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin:0;
    padding:4px 8px;
    font-size:13px;
}

.messages-receipt time{
    color:var(--msg-muted);
}

.messages-lightbox{
    position:fixed;
    inset:0;
    z-index:13000;
    display:grid;
    place-items:center;
    padding:0;
    background:rgba(3, 8, 10, .78);
}

.messages-lightbox img{
    display:block;
    width:100vw;
    height:100dvh;
    object-fit:contain;
    border-radius:0;
}

.messages-lightbox-close{
    position:absolute;
    top:16px;
    right:18px;
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(8, 20, 24, .8);
    color:#fff;
    font-size:28px;
}

.messages-page button:focus-visible{
    outline:1px solid rgba(123, 197, 180, .75);
    outline-offset:2px;
}

@media (max-width:800px){
    .messages-page{
        height:calc(100dvh - 92px);
        padding:8px;
    }

    .messages-shell{
        grid-template-columns:1fr;
        border-radius:12px;
    }

    .messages-split{
        display:none;
    }

    .messages-page:not(.is-open) .messages-thread,
    .messages-page.is-open .messages-list-pane{
        display:none;
    }

    .messages-back{
        display:grid;
    }

    .messages-head h2{
        font-size:24px;
    }

    .msg-stack{
        max-width:86%;
    }

    .msg-bubble{
        max-width:100%;
    }

    .messages-emoji-grid{
        grid-template-columns:repeat(7, minmax(36px, 1fr));
    }

}

/*==================================================
    BASE
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scrollbar-width:thin;
    scrollbar-color:rgba(123, 197, 180, .52) #041014;
}

:root{
    --bg:#061015;
    --text:#ced8d7;
    --muted:#8e9998;
    --border:rgba(160,185,190,.08);
    --field-focus-border:rgb(123 183 197 / 0.22);
    --field-focus-glow:rgb(80 180 162 / 0.1);
    --field-hover-bg:rgb(115 163 152 / 0.0);
    --glass:rgb(8 21 23 / 0.6);
}

html{
    scroll-behavior:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(123, 197, 180, .52) #041014;
    color-scheme:dark;
}

body{
    font-family:"Lora", serif;
    font-size:16px;
    color:var(--text);
    background:radial-gradient(circle at top, #185f80 0%, #133533 45%, #102927 100%);
    overflow-x:hidden;
    scrollbar-color:rgba(123, 197, 180, .52) #041014;
}

::-webkit-scrollbar{
    width:8px;
    height:8px;
    background:#041014;
}

::-webkit-scrollbar-track,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece{
    background:#041014 !important;
    box-shadow:inset 0 0 0 1px rgba(123, 197, 180, .055),
            inset 0 0 14px rgba(0, 0, 0, .48) !important;
}

::-webkit-scrollbar-thumb{
    border:2px solid #041014;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(156, 218, 204, .62), rgba(83, 151, 139, .44));
    box-shadow:0 0 10px rgba(80, 180, 153, .12);
}

::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg, rgba(190, 235, 224, .78), rgba(101, 177, 162, .58));
}

::-webkit-scrollbar-corner{
    background:#041014 !important;
}

input,
textarea,
select,
button{
    font:inherit;
}

::placeholder{
    font-family:inherit;
}

::selection{
    background:rgba(111, 200, 179, .28);
}

.glossary-word{
    color:inherit;
    text-decoration:underline dashed;
    text-decoration-color:rgba(123, 197, 180, .72);
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    cursor:help;
}

.glossary-word:hover{
    text-decoration-color:rgba(168, 216, 201, .95);
}

#glossary-tooltip{
    position:fixed;
    z-index:9999;
    display:none;
    max-width:350px;
    padding:10px 14px;
    border:1px solid #305754;
    border-radius:8px;
    background:#091b1b;
    color:#dcebe5;
    box-shadow:0 4px 16px rgba(0, 0, 0, .5);
    font-size:14px;
    line-height:1.5;
    pointer-events:none;
}

.site-toast-stack{
    position:fixed;
    left:18px;
    top:18px;
    z-index:12000;
    display:flex;
    flex-direction:column;
    gap:10px;
    width:min(380px, calc(100vw - 28px));
    pointer-events:none;
}

.site-toast{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px 12px 12px 14px;
    color:var(--text);
    border:1px solid rgba(150, 185, 190, .2);
    border-left-color:rgba(123, 197, 180, .6);
    border-radius:8px;
    background:linear-gradient(180deg, rgba(13, 32, 34, .96), rgba(6, 18, 21, .96));
    box-shadow:0 14px 34px rgba(0, 0, 0, .34),
            inset 0 1px 0 rgba(255, 255, 255, .04);
    opacity:0;
    transform:translateX(16px);
    transition:opacity .18s ease, transform .18s ease;
    pointer-events:auto;
}

.site-toast::before{
    content:"";
    flex:0 0 auto;
    width:8px;
    height:8px;
    margin-top:7px;
    border-radius:50%;
    background:rgba(123, 197, 180, .9);
    box-shadow:0 0 12px rgba(123, 197, 180, .35);
}

.site-toast.is-visible{
    opacity:1;
    transform:translateX(0);
}

.site-toast.is-leaving{
    opacity:0;
    transform:translateX(16px);
}

.site-toast-success{
    border-left-color:rgba(123, 197, 180, .72);
}

.site-toast-success::before{
    background:#7bc5b4;
}

.site-toast-error{
    border-left-color:rgba(194, 112, 103, .76);
}

.site-toast-error::before{
    background:#c27067;
    box-shadow:0 0 12px rgba(194, 112, 103, .34);
}

.site-toast-warning{
    border-left-color:rgba(205, 170, 106, .76);
}

.site-toast-warning::before{
    background:#cdaa6a;
    box-shadow:0 0 12px rgba(205, 170, 106, .3);
}

.site-toast-body{
    display:grid;
    gap:3px;
    min-width:0;
    flex:1;
}

.site-toast-title{
    color:#e3efeb;
    font-size:14px;
    font-weight:600;
}

.site-toast-message{
    color:#b8cbc8;
    font-size:14px;
    line-height:1.45;
    overflow-wrap:anywhere;
}

.site-toast-close{
    flex:0 0 auto;
    width:24px;
    height:24px;
    color:#93aaa7;
    border:0;
    border-radius:6px;
    background:transparent;
    box-shadow:none;
    cursor:pointer;
    line-height:20px;
    transition:color .16s ease, border-color .16s ease, background .16s ease;
}

.site-toast-close:hover{
    color:#e4efeb;
    border-color:transparent;
    background:rgba(12, 35, 36, .42);
}

.site-dialog-root{
    position:fixed;
    inset:0;
    z-index:12100;
    display:grid;
    place-items:center;
    padding:20px;
}

.site-dialog-root[hidden]{
    display:none;
}

.site-dialog-backdrop{
    position:absolute;
    inset:0;
    background:rgba(2, 8, 10, .62);
    opacity:0;
    transition:opacity .14s ease;
}

.site-dialog{
    position:relative;
    z-index:1;
    width:min(430px, 100%);
    padding:18px;
    color:var(--text);
    border:1px solid rgba(150, 185, 190, .2);
    border-radius:8px;
    background:linear-gradient(180deg, rgba(13, 32, 34, .98), rgba(6, 18, 21, .98));
    box-shadow:0 22px 60px rgba(0, 0, 0, .48),
            inset 0 1px 0 rgba(255, 255, 255, .045);
    opacity:0;
    transform:translateY(10px) scale(.985);
    transition:opacity .14s ease, transform .14s ease;
}

.site-dialog-root.is-visible .site-dialog-backdrop{
    opacity:1;
}

.site-dialog-root.is-visible .site-dialog{
    opacity:1;
    transform:translateY(0) scale(1);
}

.site-dialog-title{
    margin:0 0 8px;
    color:#e2efeb;
    font-family:"Cormorant Garamond", serif;
    font-size:24px;
    font-weight:600;
    line-height:1.1;
}

.site-dialog-message{
    margin:0;
    color:#b8cbc8;
    font-size:14px;
    line-height:1.55;
}

.site-dialog-input{
    width:100%;
    height:40px;
    margin-top:14px;
    padding:0 11px;
    color:#cdd8d6;
    font:500 14px "Lora", serif;
    border:1px solid rgba(150, 185, 190, .22);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
    outline:none;
    transition:border-color .24s ease, background .24s ease, box-shadow .35s ease, color .18s ease;
}

.site-dialog-input:hover,
.site-dialog-input:focus{
    border-color:var(--field-focus-border);
    background:linear-gradient(180deg, var(--field-hover-bg), transparent),
            rgba(6, 21, 22, .72);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .07),
            0 0 18px rgba(80, 180, 153, .08);
}

.site-dialog-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px;
}

.site-dialog-btn{
    min-width:104px;
    height:36px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:6px;
    font:500 15px "Lora", sans-serif;
    cursor:pointer;
    transition:transform .08s ease,
            border-color .18s ease,
            background .18s ease,
            box-shadow .18s ease,
            color .18s ease,
            opacity .18s ease;
}

.site-dialog-btn:active{
    transform:translateY(1px);
}

.site-dialog-btn-secondary{
    color:#b9cbc7;
    background:rgba(4, 15, 18, .42);
}

.site-dialog-btn-primary{
    color:#b8cbc8;
    text-shadow:none;
    border-color:rgba(138, 166, 170, .22);
    background:linear-gradient(180deg, rgba(12, 28, 29, .76), rgba(8, 17, 20, .86));
    box-shadow:inset 0 1px 0 rgba(180, 235, 225, .035), 0 8px 20px rgba(0, 0, 0, .14);
}

.site-dialog-btn-danger{
    border-color:rgba(194, 112, 103, .4);
    background:rgba(105, 45, 43, .44);
}

.site-dialog-btn:hover{
    color:#e7f4f0;
    border-color:rgba(155, 227, 210, .32);
    background:rgba(111, 200, 179, .08);
}

@media (max-width:640px){
    .site-toast-stack{
        left:14px;
        top:14px;
        width:calc(100vw - 28px);
    }

    .site-dialog-actions{
        flex-direction:column-reverse;
    }

    .site-dialog-btn{
        width:100%;
    }
}

.glossary-tooltip-term{
    margin-bottom:2px;
    font-size:12px;
}

.glossary-tooltip-term-zh{
    color:#a8d8c9;
}

.glossary-tooltip-term-en{
    color:#90bbae;
}

.glossary-tooltip-translation{
    color:#dcebe5;
    font-weight:500;
}

.glossary-tooltip-section{
    display:inline-block;
    margin-top:6px;
    padding:2px 8px;
    color:#9fc3bd;
    font-size:11px;
    line-height:1.4;
    border:1px solid rgba(150, 185, 190, .2);
    border-radius:10px;
    background:rgba(5, 16, 19, .58);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}

.glossary-word[data-russian]:not([data-russian=""]) {
    cursor:pointer;
}

.glossary-word.glossary-word-copied{
    background:rgba(123, 197, 180, .22);
    border-radius:3px;
}

/*==================================================
    LINKS
==================================================*/

a{
    color:inherit;
    text-decoration:none;
}

.closed-padlock-mask{
    width:13px;
    height:13px;
    display:block;
    background-color:currentColor;
    -webkit-mask:url("/static/icons/closed-padlock.png") center / contain no-repeat;
    mask:url("/static/icons/closed-padlock.png") center / contain no-repeat;
}

.subtle-external-link{
    color:inherit;
    text-decoration-line:underline;
    text-decoration-style:dashed;
    text-decoration-thickness:1px;
    text-decoration-color:rgba(178, 185, 184, .28);
    text-decoration-color:color-mix(in srgb, currentColor 28%, transparent);
    text-underline-offset:4px;
    transition:text-decoration-color .18s ease;
}

.subtle-external-link:hover{
    text-decoration-color:rgba(178, 185, 184, .55);
    text-decoration-color:color-mix(in srgb, currentColor 55%, transparent);
}

.subtle-external-link:focus-visible{
    border-radius:2px;
    outline:1px solid rgba(123, 197, 180, .72);
    outline-offset:3px;
    text-decoration-color:currentColor;
}

img{
    display:block;
    max-width:100%;
}

/*==================================================
    BACKGROUND
==================================================*/

.page-bg{
    position:fixed;
    inset:0;
    z-index:-5;
    background:linear-gradient(
                rgba(7,20,27,.70),
                rgba(6,16,22,.82)
            ),
            url("/static/images/main-darkforest2.webp");
    background-size:cover;
    background-position:center;
    opacity:.95;
    filter:brightness(.48)
            contrast(1.08)
            saturate(.72);
}

.page-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(
                ellipse at center,
                rgba(255,255,255,.03),
                rgba(0,0,0,.12) 45%,
                rgba(0,0,0,.65) 100%

            );
}

/*==================================================
    HEADER
==================================================*/

.header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:10000;
}

body:has(.translate-page) .header,
body:has(.edit-page) .header,
body:has(.stats-page) .header,
body:has(.glossary-page) .header{
    position:relative;
    top:auto;
}

.header-inner{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:65.5px;
    padding:0 28px;
    background:transparent;
    isolation:isolate;
}

.header-inner::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:var(--glass);
    backdrop-filter:blur(26px);
    pointer-events:none;
}

.header-inner > *{
    position:relative;
    z-index:1;
}

.header-inner::after{
    content:"";
    position:absolute;
    z-index:2;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:195%;
    max-width:100vw;
    height:1.0px;
    background:linear-gradient(
            to right,
            transparent 0%,
            rgb(141 186 188 / 0.02) 15%,
            rgb(97 227 206 / 0.14) 50%,
            rgba(255,255,255,.02) 85%,
            transparent 100%
        );
}

/*==================================================
    LOGO
==================================================*/

.logo{
    display:flex;
    align-items:center;
    gap:8px;
    color:#cad6d3;
    font-size:21px;
    font-weight:500;
}

.logo-icon-he{
    width:73px;
    height:73px;
    background:linear-gradient(
            145deg,
            #9abfb1 0%,
            #70b8b8 18%,
            #76a399 40%,
            #7ba398 60%,
            #6d9f9f 80%,
            #96aa98 100%
        );
    -webkit-mask:url("/static/icons/schwarzwald-logo-mask.png")
                      center / contain no-repeat;
    mask:url("/static/icons/schwarzwald-logo-mask.png")
              center / contain no-repeat;
}

/*==================================================
    NAVIGATION
==================================================*/

.nav{
    display:flex;
    gap:32px;
}

body:not(:has(.nav a + a)) .nav{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}

body:not(:has(.nav a + a)) .header-actions{
    position:relative;
}


.nav a{
    position:relative;
    padding:8px 2px;
}

.nav a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:3px;
    width:0;
    height:0.6px;
    transform:translateX(-50%);
    background:linear-gradient(
            to right,
            transparent,
            rgb(123 197 180 / 0.6),
            transparent
        );
    transition:width .18s ease,
            opacity .18s ease;
    opacity:.6;
}

.nav a:hover::after,
.nav a.active::after,
.nav a.active{
    width:100%;
}

/*==================================================
    ACTIONS
==================================================*/

.header-actions{
    display:flex;
    gap:8px;
}

.header-icon{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#bcc3c2;
    border:0 !important;
    background:transparent !important;
    border-radius:50%;
    transition:.2s;
}

.header-icon:hover{
    background:rgba(255,255,255,.04);
    color:white;
}

/*==================================================
    MAIN CONTAINER
==================================================*/

main{
    width:100%;
}

/*==================================================
    HERO
==================================================*/

.hero{
    position:relative;
    height:690px;
    overflow:hidden;
    background:url("/static/images/main-darkforest2.webp") center / cover no-repeat;
}

.hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
                rgba(5,14,19,.18),
                rgba(5,14,19,.52)
            ),
            linear-gradient(
                to bottom,
                rgba(0,0,0,.15),
                rgba(0,0,0,.28) 20%,
                rgba(7,18,24,.7) 95%,
                rgba(8,17,23,.66) 100%
            ),
            radial-gradient(
                circle at center,
                rgba(185,205,205,.07),
                transparent 45%
            );
    z-index:1;
}

.hero-content{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:390px;
}

.hero h1{
    font-family:"Cormorant Garamond", serif;
    font-size:82px;
    transform:scale(1.1, 1.35);
    font-weight:600;
    letter-spacing:5px;
    color:#ddd8ce;
    text-transform:uppercase;
    margin-bottom:10px;
    text-shadow:0 5px 10px rgba(0,0,0,.35);
    background:url("/static/images/Concrete_Wall_006_AmbientOcclusion.jpg"),
            linear-gradient(
                to bottom,
                #a8b3b0 0%,
                #70afa3 35%,
                #5b696a 90%
            );
    background-size:60px 60px,
            100% 100%;
    background-blend-mode:screen,
        multiply;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.first{
    font-size:1.4em;
}

.hero p{
    max-width:620px;
    margin:0 auto;
    color:#b2b9b8;
    font-size:17px;
    line-height:1.9;
}

.hero-buttons{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-top:38px;
}

a.btn{
    width:140px;
    height:50px;
}

a.btn.primary{
    width:180px;
    height:50px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:rgba(40, 55, 50, 0.18);
    border:1px solid rgb(89 115 109 / 0.25);
    border-radius:4px;
    transition:all 0.25s ease;
}

.btn:hover{
    background:rgba(50, 70, 60, 0.20);
    box-shadow:0 0 4px rgb(80 180 153 / 0.1),
            0 0 10px rgba(80, 120, 100, 0.08);
}

.ornament-divider{
    position:relative;
    z-index:5;
    height:106px;
    margin-top:-114px;
    margin-bottom:-16px;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

.ornament-divider::before{
    content:"";
    width:clamp(210px, 34vw, 500px);
    height:146px;
    background:#9abfb5;
    opacity:.3;
    -webkit-mask:url("/static/icons/divider_transparent.svg") center / contain no-repeat;
    mask:url("/static/icons/divider_transparent.svg") center / contain no-repeat;
    filter:drop-shadow(0 0 10px rgba(118, 176, 164, .18))
            drop-shadow(0 12px 20px rgba(0, 0, 0, .45));
}

/*==================================================
    TOOLS
==================================================*/

.tools{
    padding:42px 34px 46px;
    border-top:1px solid rgba(255,255,255,.025);
}

.section-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px;
}

.section-header h2{
    font-family:"Lora", serif;
    font-size:30px;
    font-weight:400;
    color:#ddd8ce;
}

.section-header a{
    color:#96a2a4;
    font-size:13px;
    transition:.2s;
}

.section-header a:hover{
    color:#d8d8d4;
}

/*==================================================
    TOOL GRID
==================================================*/

.tool-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.tool-card{
    overflow:hidden;
    background:linear-gradient(
                rgb(12 25 29 / 0.96),
                rgb(8 17 19 / 0.98)
            );
    border:1px solid rgba(150,175,180,.08);
    border-radius:6px;
    transform:translate3d(0, 0, 0);
    backface-visibility:hidden;
    will-change:transform;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.tool-card:hover{
    border-color:rgba(190,210,215,.18);
    transform:translate3d(0, -2px, 0);
    box-shadow:0 12px 35px rgba(0,0,0,.22);
}

/*==================================================
    COVER
==================================================*/

.tool-cover{
    position:relative;
    height:210px;
    overflow:hidden;
    background:
        linear-gradient(
            rgba(9, 31, 36, 0.1),
            rgba(13, 78, 78, 0.22)
        ),
        var(--tool-cover-image);
    background-size:cover;
    background-position:center;
}

.tool-cover::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
                transparent,
                rgba(6,14,18,.65)
            );
}

/*==================================================
    INFO
==================================================*/

.tool-info{
    padding:18px;
}

.tool-info h3{
    font-family:"Lora", serif;
    font-size:25px;
    font-weight:400;
    color:#ceddda;
    margin-bottom:6px;
}

.tool-info p{
    color:#98a2a3;
    font-size:14px;
    line-height:1.7;
    margin-bottom:18px;
}

/*==================================================
    ABOUT
==================================================*/

.about{
    display:grid;
    grid-template-columns:360px 1fr;
    gap:28px;
    padding:60px 34px;
    border-top:1px solid rgba(255,255,255,.025);
    background:linear-gradient(
                to right,
                rgba(5,12,17,.95) 40%,
                rgb(11 39 34 / 0.65) 60%,
                rgb(5 16 17 / 0.8) 80%,
                rgba(5,12,17,.9) 100%
            ),
            url("/static/images/main-deer2.webp");
    background-size:cover;
    background-position:center;
}

.about-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.about-text h2{
    font-family:"Lora", serif;
    font-size:34px;
    font-weight:400;
    margin-bottom:10px;
    color:#ceddda;
}

.about-text p{
    color:#97a0a0;
    line-height:1.5;
    margin-bottom:28px;
}

/*==================================================
    FOOT FEATURES
==================================================*/

.advantages{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid rgba(255,255,255,.025);
}

.advantage{
    padding:34px 18px;
    text-align:center;
    border-right:1px solid rgba(255,255,255,.025);
    transition:.2s;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.advantage:last-child{
    border-right:none;
}

.advantage:hover{
    background:rgba(255,255,255,.015);
}

.advantage i{
    font-size:24px;
    color:#b8c3c2;
    margin-bottom:14px;
}

.advantage span{
    display:block;
    color:#a6b6b6;
    font-size:15px;
}

.adv-icon{
    width:58px;
    height:58px;
    margin-bottom:14px;
    background:radial-gradient(
            circle at 50% 30%,
            rgb(40 80 74 / 0.18) 0%,
            rgb(61 90 85 / 0.55) 45%,
            rgb(44 87 94 / 0.95) 100%
        ),
        linear-gradient(
            to bottom,
            rgb(180 255 241 / 0.7),
            rgb(149 198 198 / 0.95)
        );
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
}

/*==================================================
 ICONS
 ==================================================*/

.book{
    -webkit-mask-image:url("/static/icons/spell-book.png");
    mask-image:url("/static/icons/spell-book.png");
}

.feather{
    -webkit-mask-image:url("/static/icons/ice.png");
    mask-image:url("/static/icons/ice.png");
}

.users{
    -webkit-mask-image:url("/static/icons/cerberus-mini.png");
    mask-image:url("/static/icons/cerberus-mini.png");
}

.shield{
    -webkit-mask-image:url("/static/icons/game.png");
    mask-image:url("/static/icons/game.png");
}

.profile,
.bell,
.letter{
    background:#bec5c5;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
}

.profile{
    width:28px;
    height:28px;
    -webkit-mask-image:url("/static/icons/herne-the-hunter.png");
    mask-image:url("/static/icons/herne-the-hunter.png");
}

.bell{
    width:26px;
    height:26px;
    -webkit-mask-image:url("/static/icons/notification.png");
    mask-image:url("/static/icons/notification.png");
}

.letter{
    width:33px;
    height:33px;
    -webkit-mask-image:url("/static/icons/script.png");
    mask-image:url("/static/icons/script.png");
}

/*==================================================
    FOOTER
==================================================*/

.site-footer{
    width:100%;
    box-sizing:border-box;
    margin-top:0px;
    padding:18px 0;
    background:rgb(0 0 0/0);
    border-top:1px solid rgba(255, 255, 255, 0.05);
    color:rgba(255, 255, 255, 0.72);
    text-align:center;
    opacity:1;
    font-size:14px;
}

.footer-content{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

/*==================================================
    MOBILE
==================================================*/

@media (max-width:1200px){
    .tool-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .about{
        grid-template-columns:1fr;
    }
}

@media (max-width:820px){
    .header{
        position:relative;
        top:auto;
    }

    .header-inner{
        display:grid;
        grid-template-columns:minmax(0, 1fr) auto;
        height:auto;
        min-height:64px;
        padding:8px 12px 10px;
        gap:6px 10px;
    }

    .logo{
        min-width:0;
        font-size:18px;
    }

    .logo-icon-he{
        width:48px;
        height:48px;
    }

    .nav{
        grid-column:1 / -1;
        width:100%;
        max-width:100%;
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:5px;
        overflow:visible;
        padding:0;
    }

    body:not(:has(.nav a + a)) .nav{
        position:static;
        grid-column:1 / -1;
        grid-template-columns:1fr;
        left:auto;
        top:auto;
        transform:none;
    }

    .nav a{
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:30px;
        padding:6px 4px;
        overflow:hidden;
        font-size:13px;
        line-height:1.1;
        text-align:center;
        white-space:normal;
        overflow-wrap:anywhere;
        border:1px solid rgba(150, 185, 190, .08);
        border-radius:5px;
        background:rgba(6, 19, 22, .24);
    }

    .header-actions{
        justify-self:end;
        gap:2px;
    }

    .header-icon{
        width:38px;
        height:38px;
    }

    .hero{
        height:560px;
    }

    .hero-content{
        padding:20px 18px 120px;
    }

    .hero h1{
        max-width:100%;
        font-size:clamp(34px, 11vw, 54px);
        letter-spacing:clamp(1px, .9vw, 3px);
        transform:scale(1.02, 1.22);
    }

    .hero-buttons{
        flex-direction:column;
        width:100%;
        gap:12px;
        margin-top:24px;
    }

    .hero-buttons a.btn,
    .hero-buttons a.btn.primary{
        width:min(220px, 100%);
    }

    .tool-grid{
        grid-template-columns:1fr;
    }

    .advantages{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:560px){
    .nav{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .advantages{
        grid-template-columns:1fr;
    }

    .advantage{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.03);
    }

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

/*==================================================
    TRANSLATE PAGE
==================================================*/

.translate-page{
    --translate-workspace-image:url("/static/images/main-darkforest2.webp");
    position:relative;
    min-height:100vh;
    padding:46px clamp(12px, 2.5vw, 48px) 48px;
}

.translate-page::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(
                to bottom,
                rgba(4, 12, 16, .68) 0,
                rgba(4, 12, 16, .76) 76px,
                rgba(4, 12, 16, .82) 168px,
                rgb(4 16 16 / 0.98) 100%
            ),
            radial-gradient(
                ellipse at 20% 0%,
                rgba(123, 197, 180, .14),
                transparent 42%
            ),
            var(--translate-workspace-image);
    background-size:cover;
    background-position:center;
}

.translate-controls{
    position:sticky;
    top:12px;
    z-index:30;
    display:grid;
    grid-template-columns:320px minmax(320px, 1fr) 150px 200px 126px;
    grid-auto-rows:minmax(48px, auto);
    gap:10px;
    align-items:start;
    min-height:72px;
    max-height:none;
    overflow:visible;
    margin-bottom:0px;
    padding:12px;
    border:1px solid rgba(150, 185, 190, .12);
    border-radius:8px;
    background:linear-gradient(180deg, rgba(12, 25, 32, .88), rgba(7, 16, 22, .88)),
            radial-gradient(ellipse at 18% 0%, rgba(123, 197, 180, .11), transparent 40%);
    box-shadow:0 18px 42px rgba(0,0,0,.24),
            inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter:blur(22px);
}

.translate-field{
    position:relative;
    height:48px;
    min-height:48px;
    max-height:48px;
    align-self:start;
    min-width:0;
}

.advanced-settings-toggle{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.advanced-settings-label{
    position:absolute;
    top:10px;
    right:12px;
    z-index:1600;
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:auto;
    min-height:34px;
    padding:0 11px;
    color:#93a6a2;
    font-size:13px;
    line-height:1;
    white-space:nowrap;
    cursor:pointer;
    background:rgba(6, 19, 22, .3);
    transition:border-color .28s ease, background .28s ease, box-shadow .65s ease, color .2s ease;
}

.advanced-settings-mark{
    position:relative;
    flex:0 0 14px;
    width:14px;
    height:14px;
    border:1px solid rgba(123, 197, 180, .24);
    border-radius:3px;
    background:rgba(16, 43, 43, .58);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
}

.advanced-settings-mark::after{
    content:"";
    position:absolute;
    left:4px;
    top:1px;
    width:4px;
    height:7px;
    opacity:0;
    border-right:2px solid #d8ece4;
    border-bottom:2px solid #d8ece4;
    transform:rotate(42deg);
    transition:opacity .16s ease;
}

.advanced-settings-toggle:checked + .advanced-settings-label .advanced-settings-mark{
    background:rgba(101, 169, 137, .82);
    border-color:rgba(159, 197, 169, .72);
    box-shadow:0 0 8px rgba(117, 186, 150, .18);
}

.advanced-settings-toggle:checked + .advanced-settings-label .advanced-settings-mark::after{
    opacity:1;
}

.advanced-settings-panel{
    align-self:stretch;
    width:100%;
    max-height:0;
    overflow:hidden;
    opacity:0;
    display:none;
    grid-template-columns:320px minmax(320px, 1fr) 150px 200px 126px;
    gap:10px;
    align-items:start;
    transition:max-height .22s ease, opacity .18s ease, margin-top .18s ease;
}

.translate-workspace.advanced-settings-open .advanced-settings-panel{
    display:grid;
    max-height:220px;
    overflow:visible;
    opacity:1;
}

.advanced-settings-panel .translate-status-box{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:7px;
    height:auto;
    min-height:0;
    max-height:none;
    justify-self:start;
    grid-column:1;
    grid-row:1;
    width:min(140px, 100%);
}

.translate-second-text-field{
    grid-column:2;
    grid-row:1;
}

.translate-second-lang-dropdown{
    grid-column:3;
    grid-row:1;
}

.translate-controls input:not([type=checkbox]),
.translate-controls .dropdown-btn{
    width:100%;
    min-height:48px;
    padding:0px 16px 0px;
    color:#cdd8d6;
    border:1px solid rgba(150, 185, 190, .22);
    border-radius:6px;
    background:rgb(6 19 22 / 0.68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
    transition:border-color .28s ease, background .28s ease, box-shadow .65s ease;
}

.translate-controls input:not([type=checkbox]):hover,
.translate-controls .dropdown-btn:hover{
    border-color:var(--field-focus-border);
    background:linear-gradient(180deg, var(--field-hover-bg), transparent),
            rgb(6 19 22 / 0.68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .06),
            0 0 14px var(--field-focus-glow);
}

.translate-controls input::placeholder{
    color:rgba(182, 195, 193, .45);
}

.translate-controls input:focus,
.translate-controls input:focus-visible,
.translate-controls .custom-dropdown.open .dropdown-btn{
    border-color:var(--field-focus-border);
    outline:none;
    background:linear-gradient(180deg, var(--field-hover-bg), transparent),
            rgb(6 21 22 / 0.68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .08),
            0 0 18px rgba(80, 180, 153, .08);
}

.translate-controls input:-webkit-autofill,
.translate-controls input:-webkit-autofill:hover,
.translate-controls input:-webkit-autofill:focus{
    -webkit-text-fill-color:#cdd8d6;
    -webkit-background-clip:text;
    caret-color:#cdd8d6;
    border-color:rgba(150, 185, 190, .22);
    box-shadow:0 0 0 1000px #061316 inset,
            inset 0 1px 2px rgba(0,0,0,.28);
    transition:background-color 9999s ease-out, color 9999s ease-out;
}

.translate-controls input:-webkit-autofill:hover,
.translate-controls input:-webkit-autofill:focus{
    border-color:var(--field-focus-border);
    box-shadow:0 0 0 1000px #061516 inset,
            inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .08),
            0 0 18px rgba(80, 180, 153, .08);
    transition:background-color 9999s ease-out, color 9999s ease-out;
}

.translate-status-box{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:7px;
    height:48px;
    min-height:48px;
    max-height:48px;
    align-self:start;
    padding:8px 10px;
    border:0 !important;
    border-radius:6px;
    background:transparent !important;
    box-shadow:none !important;
}

.mini-filter input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.translate-status-box .dot{
    width:8px;
    height:8px;
    border-color:rgba(123, 197, 180, .34);
    background:#264640;
    box-shadow:0 0 8px rgba(123, 197, 180, .08);
}

.translate-status-box input:checked + .dot{
    background:#65a989;
    border-color:#9fc5a9;
    box-shadow:0 0 12px rgba(117, 186, 150, .36);
}

.translate-dropdown{
    height:48px;
    min-height:48px;
    max-height:48px;
    align-self:start;
    min-width:0;
}

.translate-dropdown .custom-dropdown{
    position:relative;
    height:48px;
    min-height:48px;
    max-height:48px;
    align-self:start;
}

.translate-dropdown .dropdown-btn{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 36px 0 13px;
    position:relative;
}

.translate-dropdown .dropdown-btn::after{
    content:"";
    position:absolute;
    top:50%;
    right:14px;
    width:8px;
    height:8px;
    border-right:1.5px solid rgb(123 197 191 / 0.66);
    border-bottom:1.5px solid rgba(123 197 191 / 0.66);
    transform:translateY(-65%) rotate(45deg);
    transform-origin:center;
    filter:drop-shadow(0 0 5px rgba(80, 180, 153, .3));
    transition:transform .22s ease, border-color .28s ease, filter .45s ease;
}

.translate-dropdown .dropdown-btn:hover::after{
    border-color:rgba(156, 218, 204, .9);
    filter:drop-shadow(0 0 6px rgba(80, 180, 153, .34));
}

.translate-dropdown .custom-dropdown.open .dropdown-btn::after{
    border-color:rgba(156, 218, 204, .9);
    filter:drop-shadow(0 0 6px rgba(80, 180, 153, .34));
    transform:translateY(-35%) rotate(225deg);
}

.translate-dropdown .dropdown-menu{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    z-index:2000;
    width:100%;
    margin:0;
    list-style:none;
    overflow:visible;
    visibility:hidden;
    padding:5px;
    border:1px solid rgba(150, 185, 190, .14);
    background:#09181b;
    box-shadow:0 18px 34px rgba(0,0,0,.36);
}

#filterDropdownContainer .dropdown-menu{
    max-height:min(320px, calc(100vh - 180px));
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:4px;
    scrollbar-width:thin;
    scrollbar-color:rgba(123, 197, 180, .38) rgba(5, 16, 19, .58);
}

#filterDropdownContainer .dropdown-menu::-webkit-scrollbar{
    width:8px;
}

#filterDropdownContainer .dropdown-menu::-webkit-scrollbar-track{
    margin:6px 0;
    border-radius:999px;
    background:rgba(5, 16, 19, .58);
    box-shadow:inset 0 0 0 1px rgba(150, 185, 190, .06);
}

#filterDropdownContainer .dropdown-menu::-webkit-scrollbar-thumb{
    border:2px solid rgba(5, 16, 19, .72);
    border-radius:999px;
    background:linear-gradient(180deg, rgba(156, 218, 204, .62), rgba(83, 151, 139, .44));
    box-shadow:0 0 10px rgba(80, 180, 153, .12);
}

#filterDropdownContainer .dropdown-menu::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg, rgba(190, 235, 224, .78), rgba(101, 177, 162, .58));
}

.translate-dropdown .custom-dropdown.open .dropdown-menu{
    visibility:visible;
}

.translate-dropdown .custom-dropdown.drop-up .dropdown-menu{
    top:auto;
    bottom:calc(100% + 6px);
    z-index:2000;
}

.translate-dropdown .dropdown-menu li{
    padding:10px 11px;
    color:#c5cfcd;
    border-radius:4px;
    border-bottom:0;
}

.translate-dropdown .dropdown-menu li:hover,
.translate-dropdown .dropdown-menu li.selected{
    background:rgba(123, 197, 180, .08);
    color:#e2e4dc;
}

.translate-search-history-field .dropdown-menu{
    max-height:min(320px, calc(100vh - 200px));
    overflow-y:auto;
    overflow-x:hidden;
}

.translate-search-history-field .dropdown-menu li{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

.translate-search-history-value{
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.translate-search-history-remove{
    display:grid;
    place-items:center;
    flex:0 0 24px;
    width:24px;
    height:24px;
    padding:0;
    border:0;
    border-radius:4px;
    color:rgba(197, 207, 205, .58);
    background:transparent;
    font:400 20px/1 Arial, sans-serif;
    cursor:pointer;
    transition:color .16s ease, background .16s ease;
}

.translate-search-history-remove:hover,
.translate-search-history-remove:focus-visible{
    color:#e2e4dc;
    background:rgba(184, 105, 94, .18);
    outline:none;
}

@media (max-width:820px){
    .translate-dropdown .dropdown-menu,
    .custom-dropdown .dropdown-menu{
        max-height:min(320px, calc(100vh - 200px));
        overflow-y:auto;
        overflow-x:hidden;
    }
}

.translate-results{
    min-height:260px;
}

.translate-results .table-wrap{
    overflow:visible;
    border:0;
    background:transparent;
}

.translate-results table{
    display:block;
    width:100%;
}

.translate-results thead{
    display:block;
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
}

.translate-results tbody{
    display:grid;
    width:100%;
    gap:8px;
}

.translate-results tr{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr)) minmax(190px, 235px);
    grid-template-areas:"rowid rowid rowid actions"
            "zh en ru actions";
    min-height:128px;
    border:1px solid rgba(150, 185, 190, .12);
    border-radius:8px;
    background:linear-gradient(to right,
                transparent 0,
                transparent calc(25% - .5px),
                rgba(150, 185, 190, .11) calc(25% - .5px),
                rgba(150, 185, 190, .11) calc(25% + .5px),
                transparent calc(25% + .5px),
                transparent calc(50% - .5px),
                rgba(150, 185, 190, .11) calc(50% - .5px),
                rgba(150, 185, 190, .11) calc(50% + .5px),
                transparent calc(50% + .5px),
                transparent calc(75% - .5px),
                rgba(150, 185, 190, .11) calc(75% - .5px),
                rgba(150, 185, 190, .11) calc(75% + .5px),
                transparent calc(75% + .5px)
            ),
            linear-gradient(90deg, rgba(8, 22, 26, .88), rgba(6, 15, 20, .92)),
            radial-gradient(ellipse at 8% 0%, rgba(123, 197, 180, .08), transparent 42%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025),
            0 10px 24px rgba(0,0,0,.14);
    transition:border-color .18s ease, background .18s ease, transform .18s ease;
}

.translate-results tr:hover{
    border-color:rgba(177, 202, 200, .22);
}

.translate-results tr::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    border-radius:8px 0 0 8px;
    background:transparent;
}

.translate-results td{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding:18px 22px;
    color:#cfd8d7;
    line-height:1.55;
    border:0;
    overflow-wrap:anywhere;
    word-break:normal;
}

.translate-results td:last-child{
    align-items:stretch;
    gap:12px;
}

.translate-results td::before{
    margin-bottom:8px;
    color:#75ad91;
    font-size:14px;
    line-height:1;
}

.translate-results td:nth-child(1){
    grid-area:rowid;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    min-height:38px;
    padding:14px 26px 6px;
    color:#edf2f0;
    font-size:16px;
    white-space:nowrap;
}

.translate-results td:nth-child(2){
    grid-area:zh;
}

.translate-results td:nth-child(3){
    grid-area:en;
}

.translate-results td:nth-child(4){
    grid-area:ru;
}

.translate-results td:nth-child(5){
    grid-area:actions;
    border-left:0;
}

.translate-results td:nth-child(2),
.translate-results td:nth-child(3),
.translate-results td:nth-child(4){
    padding-top:10px;
}

.translate-results .action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:44px;
    color:#7df1dc;
    font-size:15px;
    text-decoration:none;
    cursor:pointer;
    border:1px solid rgb(88 209 195 / 0.52);
    border-radius:5px;
    background:rgb(10 22 21 / 0.54);
}

.translate-results .action:hover,
.edit-back-link:hover{
    border-color:rgb(112 232 196 / 0.74);
    background:rgb(23 37 35 / 0.62);
}

.translate-results .table-wrap tbody tr:has(td[colspan]){
    display:block;
}

.translate-results .translate-empty-wrap{
    display:grid;
    min-height:inherit;
    place-items:center;
}

.translate-results .translate-empty-state{
    color:var(--muted);
    text-align:center;
}

.pagination-goto{
    display:flex;
    gap:8px;
    margin-left:10px;
}

.pagination-goto input{
    width:68px;
    min-height:38px;
    padding:7px;
    text-align:center;
    color:#cbd8d6;
    border:1px solid rgba(150, 185, 190, .14);
    border-radius:6px;
    background:rgba(7, 20, 24, .62);
}

@media (max-width:1180px){
    .translate-controls{
        grid-template-columns:1fr 1fr 1fr;
        grid-auto-rows:minmax(48px, auto);
        max-height:none;
    }

    .advanced-settings-panel{
        grid-template-columns:1fr 1fr 1fr;
    }

    .translate-second-text-field{
        grid-column:2;
    }

    .translate-second-lang-dropdown{
        grid-column:3;
    }

    .advanced-settings-panel .translate-status-box{
        grid-column:1;
        grid-row:1;
    }

    .translate-text-field,
    .translate-search-action{
        grid-column:auto;
    }

    .translate-results tr{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        grid-template-areas:"rowid rowid rowid"
                    "zh en ru"
                    "actions actions actions";
        background-image:linear-gradient(to right,
                        transparent 0,
                        transparent calc(33.333% - .5px),
                        rgba(150, 185, 190, .11) calc(33.333% - .5px),
                        rgba(150, 185, 190, .11) calc(33.333% + .5px),
                        transparent calc(33.333% + .5px),
                        transparent calc(66.666% - .5px),
                        rgba(150, 185, 190, .11) calc(66.666% - .5px),
                        rgba(150, 185, 190, .11) calc(66.666% + .5px),
                        transparent calc(66.666% + .5px)
                    ),
                    linear-gradient(90deg, rgba(8, 22, 26, .88), rgba(6, 15, 20, .92)),
                    radial-gradient(ellipse at 8% 0%, rgba(123, 197, 180, .08), transparent 42%);
    }

    .translate-results tr::before{
        z-index:2;
    }

    .translate-results td:nth-child(5){
        border-left:0;
        border-top:1px solid rgba(150, 185, 190, .11);
    }
}

.translate-search-action,
.translate-results .action,
.translate-workspace .translate-results .action,
.edit-back-link,
.edit-buttons .accept,
.edit-buttons .cancel{
    transition:transform .08s ease,
            border-color .18s ease,
            background .18s ease,
            box-shadow .18s ease,
            color .18s ease;
    will-change:transform;
}

.translate-search-action:active,
.edit-buttons .accept:active,
.edit-buttons .cancel:active{
    transform:translateY(1px) scale(.985);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.28),
            0 4px 10px rgba(0,0,0,.12);
}

.translate-results .action:active,
.translate-workspace .translate-results .action:active,
.edit-back-link:active{
    transform:translateY(3px) scale(.985);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.28),
            0 4px 10px rgba(0,0,0,.12);
}

@media (max-width:820px){
    .translate-page{
        padding:14px 10px 32px;
    }

    .translate-controls{
        position:relative;
        top:auto;
        grid-template-columns:1fr;
        grid-auto-rows:minmax(48px, auto);
        max-height:none;
    }

    .advanced-settings-label{
        left:0;
        right:0;
        justify-content:center;
        width:100%;
    }

    .advanced-settings-panel{
        grid-template-columns:1fr;
    }

    .translate-workspace.advanced-settings-open .advanced-settings-panel{
        max-height:none;
    }

    .translate-second-text-field,
    .translate-second-lang-dropdown,
    .advanced-settings-panel .translate-status-box{
        grid-column:1;
    }

    .translate-text-field{
        grid-column:auto;
    }

    .translate-results tr{
        grid-template-columns:1fr;
        grid-template-areas:"rowid"
                    "zh"
                    "en"
                    "ru"
                    "actions";
        min-height:0;
    }

    .translate-results td,
    .translate-results td:nth-child(4),
    .translate-results td:nth-child(5){
        grid-column:auto;
        padding:15px 17px;
        border-bottom:1px solid rgba(150, 185, 190, .1);
    }

    .translate-results td:last-child{
        border-bottom:0;
    }
}

.results-counter{
    padding:10px 0px 10px !important;
    text-align:center;
    color:#b2c3c2;
    font-size:15px;
}

.translate-results .pagination{
    align-items:center;
}

.translate-results .pagination .home-hero-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-width:40px;
    height:38px;
    padding:0 13px !important;
    color:#b8c9c6 !important;
    font-family:"Lora", serif;
    font-size:14px;
    line-height:1;
    border:1px solid rgba(150, 185, 190, .14) !important;
    border-radius:5px !important;
    background:rgba(7, 20, 24, .62) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),
            0 6px 16px rgba(0,0,0,.12) !important;
    transform:none !important;
}

.translate-results .pagination .home-hero-btn:hover{
    color:#e2e4dc !important;
    border-color:rgb(104 198 184 / 0.36) !important;
    background:rgb(88 209 187 / 0.08) !important;
}

.translate-results .pagination .home-hero-btn[style*="background"]{
    color:#b2cfca !important;
    border-color:rgb(104 198 184 / 0.26) !important;
    background:rgb(88 209 187 / 0.05) !important;
}

.translate-results .pagination > span:not(.pagination-goto){
    display:inline-flex;
    align-items:center;
    height:38px;
    padding:0 4px !important;
    color:#748683;
}

.translate-results .pagination .pagination-goto{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.translate-results .pagination .pagination-goto input{
    width:64px !important;
    height:38px;
    padding:0 8px !important;
    text-align:center;
    color:#cbd8d6 !important;
    border:1px solid rgba(150, 185, 190, .14) !important;
    border-radius:5px !important;
    background:rgba(7, 20, 24, .62) !important;
    outline:none;
}

.translate-results .pagination .pagination-goto input:focus{
    border-color:rgba(123, 197, 180, .38) !important;
    box-shadow:0 0 0 1px rgba(123, 197, 180, .08);
}

.search-field,
.replace-input,
.pagination-goto input{
    outline:none;
    transition:border-color .2s ease, background .2s ease, box-shadow .45s ease;
}

.search-field:hover,
.replace-input:hover,
.pagination-goto input:hover{
    border-color:var(--field-focus-border) !important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.2),
            0 0 0 1px rgba(123, 197, 180, .06),
            0 0 14px var(--field-focus-glow) !important;
}

.search-field:focus,
.search-field:focus-visible,
.replace-input:focus,
.replace-input:focus-visible,
.pagination-goto input:focus,
.pagination-goto input:focus-visible{
    border-color:var(--field-focus-border) !important;
    outline:none;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.2),
            0 0 0 1px rgba(123, 197, 180, .08),
            0 0 18px rgba(80, 180, 153, .08) !important;
}

.search-field:-webkit-autofill,
.search-field:-webkit-autofill:hover,
.search-field:-webkit-autofill:focus,
.replace-input:-webkit-autofill,
.replace-input:-webkit-autofill:hover,
.replace-input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--text);
    caret-color:var(--text);
    border-color:var(--field-focus-border) !important;
    box-shadow:0 0 0 1000px #07151b inset,
            inset 0 1px 2px rgba(0,0,0,.2),
            0 0 0 1px rgba(123, 197, 180, .08),
            0 0 18px rgba(80, 180, 153, .08) !important;
    transition:background-color 9999s ease-out, color 9999s ease-out;
}

select.replace-input{
    appearance:none;
    -webkit-appearance:none;
    padding-right:38px !important;
    cursor:pointer;
    background:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%237bc5b4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px 8px no-repeat,
            linear-gradient(180deg, rgba(18, 34, 37, .92), rgba(7, 17, 20, .96)) !important;
}

select.replace-input:hover,
select.replace-input:focus{
    background:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%239cdacc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px 8px no-repeat,
            linear-gradient(180deg, rgba(28, 42, 39, .94), rgba(7, 17, 20, .96)) !important;
}

.translate-workspace,
.edit-shell{
    position:relative;
    width:100%;
    max-width:none;
    margin:0 auto;
    padding:clamp(12px, 1.5vw, 24px);
    border:1px solid rgba(150, 185, 190, .13);
    border-radius:3px;
    background:linear-gradient(180deg, rgb(10 23 24 / 0.96), rgb(9 22 24 / 0.98));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),
            0 18px 46px rgba(0,0,0,.22);
}

.translate-workspace .translate-controls{
    position:relative;
    z-index:1500;
    top:auto;
    margin:0 0 14px;
    padding:36px 0 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
}

.translate-workspace .advanced-settings-panel{
    grid-column:1 / -1;
    grid-template-columns:320px minmax(320px, 1fr) 150px 200px 126px;
}

.translate-workspace .translate-status-box{
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
}

.translate-workspace .translate-results{
    min-height:max(320px, calc(92vh - 300px));
}

.translate-workspace .translate-results .translate-empty-wrap{
    min-height:inherit;
}

.translate-workspace .translate-results tr{
    --translate-action-column:224px;
    grid-template-columns:repeat(3, minmax(0, 1fr)) var(--translate-action-column);
    grid-template-areas:"rowid rowid rowid ."
            "zh en ru actions";
    min-height:112px;
    row-gap:4px;
    border-color:rgba(138, 166, 170, .22);
    border-radius:7px;
    background:linear-gradient(180deg, rgb(7 20 25 / 0.95), rgba(6, 17, 21, .88)),
            radial-gradient(ellipse at 14% 0%, rgba(117, 173, 145, .08), transparent 44%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),
            0 10px 22px rgba(0,0,0,.18);
}

.translate-workspace .translate-results tr:nth-child(even){
    background:linear-gradient(180deg, rgb(8 20 26 / 0.4), rgba(7, 17, 22, .35)),
            radial-gradient(ellipse at 14% 0%, rgba(117, 173, 145, .08), transparent 44%);
}

.translate-workspace .translate-results tr::after{
    content:"";
    position:absolute;
    top:45px;
    bottom:12px;
    left:0;
    right:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(to right,
                transparent 0,
                transparent calc((100% - var(--translate-action-column)) / 3 - .5px),
                rgba(138, 166, 170, .26) calc((100% - var(--translate-action-column)) / 3 - .5px),
                rgba(138, 166, 170, .26) calc((100% - var(--translate-action-column)) / 3 + .5px),
                transparent calc((100% - var(--translate-action-column)) / 3 + .5px),
                transparent calc((100% - var(--translate-action-column)) * 2 / 3 - .5px),
                rgba(138, 166, 170, .26) calc((100% - var(--translate-action-column)) * 2 / 3 - .5px),
                rgba(138, 166, 170, .26) calc((100% - var(--translate-action-column)) * 2 / 3 + .5px),
                transparent calc((100% - var(--translate-action-column)) * 2 / 3 + .5px)
            );
}

.translate-workspace .translate-results td:nth-child(2)::before,
.translate-workspace .translate-results td:nth-child(3)::before,
.translate-workspace .translate-results td:nth-child(4)::before{
    content:none;
}

.translate-workspace .translate-results td:nth-child(1){
    display:inline-flex;
    width:auto;
    max-width:none;
    min-height:0;
    margin:0;
    padding:15px 20px 4px;
    align-self:start;
    color:#a2a8a8;
    font-family:inherit;
    font-size:15px;
    line-height:1.25;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
}

.translate-workspace .translate-results td:nth-child(1)::before{
    content:none;
}

.translate-workspace .translate-results .table-wrap{
    padding:0;
}

.translate-workspace .translate-results tbody{
    gap:12px;
}

.translate-workspace .translate-results tr:hover{
    border-color:rgb(61 159 163 / 0.34);
    background:linear-gradient(180deg, rgba(13, 34, 35, .1), rgba(8, 20, 21, .94)),
            radial-gradient(ellipse at 14% 0%, rgba(112, 188, 174, .1), transparent 44%);
}

.translate-workspace .translate-results tr::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    z-index:3;
    width:3px;
    border-radius:7px 0 0 7px;
    background:transparent;
    pointer-events:none;
}

.translate-workspace .translate-results td{
    position:relative;
    z-index:2;
    padding:22px 24px 18px;
    color:#d9e1e0;
    font-size:16px;
    line-height:1.45;
}

.translate-workspace .translate-results td:nth-child(1)::after{
    content:"";
    display:block;
    position:static;
    order:-1;
    width:7px;
    height:7px;
    margin-right:6px;
    border:1px solid rgba(202, 167, 90, .72);
    transform:rotate(45deg);
}

.translate-workspace .translate-results td:nth-child(2),
.translate-workspace .translate-results td:nth-child(3),
.translate-workspace .translate-results td:nth-child(4){
    padding-top:10px;
    padding-bottom:22px;
    align-self:stretch;
    justify-content:center;
}

.translate-workspace .translate-results td.game-text,
.translate-workspace .translate-results td.game-text.code-highlighted-v2,
.translate-workspace .translate-results td.game-text[data-game-text-rendered="1"]{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:stretch !important;
    white-space:pre-wrap;
}

.translate-workspace .translate-results td.game-text > .game-text-cell-content,
.translate-workspace .translate-results td.game-text > .code-highlight-content,
.translate-workspace .translate-results td.game-text > .glossary-cell-content{
    display:block !important;
    width:100%;
    line-height:inherit;
    white-space:inherit;
}

.dialog-speaker-line{
    display:block;
    width:100%;
    white-space:inherit;
}

.dialog-speaker-line > .game-text-cell-content,
.dialog-speaker-line > .code-highlight-content{
    display:inline !important;
    width:auto !important;
}

.dialog-speaker-prefix{
    display:inline-flex;
    align-items:center;
    gap:5px;

    margin-right:4px;
    padding:2px 6px;

    color:#a8c5bf;
    font-family:ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 14px;
    line-height:1.35;
    letter-spacing:.025em;

    white-space:nowrap;
    vertical-align:.12em;

    border:1px solid rgba(123, 197, 180, .18);
    border-radius:4px;
    background:rgba(6, 19, 22, .6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);

    user-select:none;
}

.dialog-speaker-prefix::before{
    content:"";
    flex:0 0 auto;
    width:5px;
    height:5px;

    border-radius:50%;
    background: #65a991;
    box-shadow:0 0 7px rgba(101, 169, 137, .28);
}

.translate-workspace .translate-results td.quick-edit-cell{
    justify-content:center !important;
    align-items:stretch !important;
    min-width:0;
    max-width:100%;
    white-space:pre-wrap !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    overflow:visible;
}

.translate-results.quick-edit-enabled .translate-ru-cell{
    cursor:text;
}

.translate-results.quick-edit-enabled tbody tr:has(.quick-edit-cell){
    cursor:default;
    position:relative;
    z-index:3000;
}

.quick-edit-editor{
    position:relative;
    z-index:4;
    display:block;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-width:0;
    color:#d9e1e0;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:normal;
    pointer-events:auto;
    overflow:visible;
}

.quick-edit-overlay-host{
    position:relative;
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    line-height:inherit;
    white-space:inherit;
}

.quick-edit-placeholder{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    line-height:inherit;
    white-space:inherit;
    overflow-wrap:inherit;
    word-break:inherit;
    visibility:hidden;
    pointer-events:none;
}

.quick-edit-editor::before{
    content:"";
    position:absolute;
    inset:-6px -10px;
    z-index:-1;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:5px;
    background:rgba(5, 16, 19, .72);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
    pointer-events:none;
}

.quick-edit-line{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:1.45em;
    line-height:inherit;
    white-space:inherit;
}

.quick-edit-speaker-prefix{
    cursor:default;
    pointer-events:auto;
}

.quick-edit-textarea{
    position:relative;
    z-index:1;
    display:inline;
    box-sizing:border-box;
    width:auto;
    max-width:none;
    min-width:0;
    height:auto;
    min-height:0;
    max-height:none;
    margin:0;
    padding:0;
    color:#d9e1e0;
    font-family:"Lora", serif;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
    line-height:inherit;
    letter-spacing:inherit;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:normal;
    border:0;
    border-radius:0;
    outline:none;
    background:transparent;
    box-shadow:none;
    -webkit-appearance:none;
    appearance:none;
    caret-color:#d9e1e0;
    cursor:text;
    user-select:text;
    pointer-events:auto;
    overflow:visible;
}

.quick-edit-editor:hover::before,
.quick-edit-editor:focus-within::before{
    border-color:var(--field-focus-border);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .08),
            0 0 14px var(--field-focus-glow);
}

.quick-edit-actions{
    position:absolute;
    top:-34px;
    left:-10px;
    right:-16px;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:6px;
    margin-top:-7px;
    margin-right:0;
    min-width:0;
    width:auto;
    pointer-events:auto;
}

.quick-edit-save,
.quick-edit-cancel,
.quick-edit-tag-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:0 9px;
    color:#b8cbc8;
    font-size:12px;
    line-height:1;
    border:1px solid rgba(138, 166, 170, .22);
    border-radius:5px;
    background:rgba(12, 28, 29, .56);
    cursor:pointer;
}

.quick-edit-save:not(:disabled):hover,
.quick-edit-cancel:hover,
.quick-edit-tag-toggle:hover,
.quick-edit-tag-toggle.is-active{
    border-color:rgb(107 228 210 / .28);
    background:rgba(13, 34, 35, .68);
}

.quick-edit-tag-toggle{
    width:28px;
    padding:0;
    color:#9fc5bd;
    font-size:18px;
    margin-right:auto;
}

.quick-edit-save:disabled{
    cursor:not-allowed;
    opacity:.45;
}

.quick-edit-status{
    min-height:0;
    max-width:160px;
    color:#8fa29f;
    font-size:11px;
    line-height:1.25;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.quick-edit-status[data-state="success"]{
    color:#8fc7a8;
}

@media (max-width:820px){
    .quick-edit-actions{
        position:static;
        left:auto;
        right:auto;
        top:auto;
        margin:8px 0 0;
        justify-content:flex-start;
    }

    .quick-edit-tag-toggle{
        margin-right:0;
    }

    .quick-edit-save{
        margin-left:auto;
    }
}

.quick-edit-status[data-state="error"]{
    color:#c79086;
}

.quick-edit-status[data-state="saving"]{
    color:#caa75a;
}

.quick-edit-tag-panel{
    position:fixed;
    top:0;
    left:0;
    z-index:7000;
    width:min(270px, calc(100vw - 34px));
    max-height:min(360px, calc(100vh - 24px));
    padding:10px;
    overflow:auto;
    transform:none;
    border:1px solid rgba(150, 185, 190, .16);
    border-radius:6px;
    background:rgba(6, 19, 22, .96);
    box-shadow:0 16px 32px rgba(0,0,0,.34);
    pointer-events:auto;
}

.quick-edit-tag-panel.drop-down{
    transform:none;
}

.quick-edit-tag-panel[hidden]{
    display:none;
}

.quick-edit-tag-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
    color:#bfcdc9;
    font-size:12px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.translate-workspace .translate-results td:nth-child(5){
    align-self:stretch;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:10px 24px 22px;
}

.translate-search-action{
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:start;
    width:100%;
    height:48px;
    min-height:47px;
    max-height:48px;
    padding:0 16px;
    color:#b8cbc8;
    font-size:16px;
    text-shadow:none;
    border:1px solid rgba(138, 166, 170, .22);
    border-radius:5px;
    background:linear-gradient(180deg, rgba(12, 28, 29, .76), rgba(8, 17, 20, .86));
    box-shadow:inset 0 1px 0 rgba(180, 235, 225, .035),
            0 8px 20px rgba(0,0,0,.14);
}

.translate-workspace .translate-results .action,
.edit-back-link{
    width:min(132px, 100%);
    min-height:42px;
    padding:0 18px;
    color:#b8cbc8;
    font-size:14px;
    border-color:rgba(138, 166, 170, .22);
    border-radius:5px;
    background:rgba(12, 28, 29, .56);
}

.translate-search-action:hover{
    transform:none;
    border-color:rgb(107 228 210 / 0.28);
    background:linear-gradient(180deg, rgb(13 34 35 / 0.58), rgb(8 20 21 / 0.94));
}

.translate-search-action:active{
    transform:translateY(1px) scale(.985);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.28),
            0 4px 10px rgba(0,0,0,.12);
}

.translate-workspace .translate-results .action:hover{
    border-color:rgb(107 228 210 / 0.28);
    transition:all 0.35s ease;
}

@media (max-width:1180px){
    .translate-workspace .translate-results tr{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        grid-template-areas:"rowid rowid rowid"
                    "zh en ru"
                    "actions actions actions";
    }

    .translate-workspace .translate-results tr::after{
        top:58px;
        bottom:72px;
        background:linear-gradient(to right,
                        transparent 0,
                        transparent calc(33.333% - .5px),
                        rgba(138, 166, 170, .24) calc(33.333% - .5px),
                        rgba(138, 166, 170, .24) calc(33.333% + .5px),
                        transparent calc(33.333% + .5px),
                        transparent calc(66.666% - .5px),
                        rgba(138, 166, 170, .24) calc(66.666% - .5px),
                        rgba(138, 166, 170, .24) calc(66.666% + .5px),
                        transparent calc(66.666% + .5px)
                    );
    }

    .translate-workspace .translate-results td:nth-child(5){
        flex-direction:row;
        justify-content:flex-end;
    }

    .translate-workspace .translate-results .action{
        width:min(132px, 100%);
    }
}

@media (max-width:820px){
    .translate-workspace{
        padding:12px;
    }

    .translate-workspace .translate-results tr{
        grid-template-columns:1fr;
        grid-template-areas:"rowid"
                    "zh"
                    "en"
                    "ru"
                    "actions";
        min-height:0;
    }

    .translate-workspace .translate-results tr::after{
        content:none;
    }

    .translate-workspace .translate-results td{
        padding:14px 17px;
        border-bottom:1px solid rgba(138, 166, 170, .12);
    }

    .translate-workspace .translate-results td:nth-child(1){
        padding:14px 17px 0;
        white-space:normal;
        overflow-wrap:anywhere;
        word-break:break-all;
    }

    .translate-workspace .translate-results td:nth-child(5){
        flex-direction:row;
        justify-content:center;
        border-bottom:0;
    }

    .translate-workspace .translate-results .action{
        width:min(180px, 100%);
    }
}

.translate-results .action::before,
.translate-workspace .translate-results .action::before{
    content:"";
    flex:0 0 auto;
    width:18px;
    height:18px;
    margin:0;
    background-color:currentColor;
    -webkit-mask:url("/static/icons/feather.png") center / contain no-repeat;
    mask:url("/static/icons/feather.png") center / contain no-repeat;
}

/*==================================================
    TRANSLATE FILTERS WITHOUT PANELS + INFO BUTTONS
==================================================*/

.translate-workspace .advanced-settings-panel .translate-status-box{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    align-self:start;
    gap:10px 18px;
    width:auto;
    max-width:none;
    min-height:48px;
    height:auto;
    max-height:none;
    padding:0 0 6px !important;
    margin:0 !important;
    border-radius:0 !important;
}

.translate-workspace .advanced-settings-panel .translate-primary-status-box,
.advanced-settings-panel .translate-primary-status-box{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:start;
}

.translate-workspace .advanced-settings-panel .translate-second-text-field,
.advanced-settings-panel .translate-second-text-field{
    grid-column:2 !important;
    grid-row:1 !important;
    min-width:0;
}

.translate-workspace .advanced-settings-panel .translate-second-lang-dropdown,
.advanced-settings-panel .translate-second-lang-dropdown{
    grid-column:3 !important;
    grid-row:1 !important;
    min-width:0;
}

.translate-workspace .advanced-settings-panel .translate-code-status-box,
.advanced-settings-panel .translate-code-status-box{
    grid-column:4 / 6 !important;
    grid-row:1 !important;
    justify-self:start;
}

.translate-workspace .advanced-settings-panel .translate-primary-status-box,
.translate-workspace .advanced-settings-panel .translate-code-status-box{
    gap:10px 18px !important;
    width:auto !important;
    min-height:28px !important;
    height:auto !important;
    margin-left:2px !important;
}

.translate-workspace .advanced-settings-panel .translate-code-status-box{
    display:grid !important;
    grid-template-columns:max-content max-content;
    grid-auto-rows:auto;
    gap:0 20px !important;
    align-items:center;
    align-content:start;
    min-height:0 !important;
    width:auto !important;
}

.translate-workspace .advanced-settings-panel .translate-code-status-box .mini-filter:nth-child(1){
    grid-column:1;
    grid-row:1;
}

.translate-workspace .advanced-settings-panel .translate-code-status-box .mini-filter:nth-child(2){
    grid-column:1;
    grid-row:2;
}

.translate-workspace .advanced-settings-panel .translate-code-status-box .mini-filter:nth-child(3){
    grid-column:2;
    grid-row:1;
}

.translate-workspace .advanced-settings-panel .translate-code-status-box .mini-filter{
    min-height:24px !important;
}

.translate-workspace .advanced-settings-panel .translate-primary-status-box{
    display:grid;
    grid-template-columns:max-content max-content;
    grid-auto-rows:auto;
    gap:0 18px !important;
    align-items:center;
    align-content:start;
    min-height:0 !important;
}

.translate-workspace .advanced-settings-panel .translate-primary-status-box .mini-filter:nth-child(1){
    grid-column:1;
    grid-row:1;
}

.translate-workspace .advanced-settings-panel .translate-primary-status-box .mini-filter:nth-child(2){
    grid-column:2;
    grid-row:1;
}

.translate-workspace .advanced-settings-panel .translate-primary-status-box .mini-filter:nth-child(3){
    grid-column:1;
    grid-row:2;
}

.translate-workspace .advanced-settings-panel .translate-primary-status-box .mini-filter{
    min-height:24px !important;
}

.translate-status-box .mini-filter{
    position:relative;
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    gap:8px;
    min-height:24px;
    color:#a4b6b2;
    font-size:13px;
    line-height:1.1;
    padding:0 0 0 4px;
    white-space:nowrap;
    cursor:pointer;
}

.mini-filter-with-info{
    padding-right:0;
}

.filter-info-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:15px;
    height:15px;
    margin-left:-2px;
    padding:0;
    color:#8fb9b1;
    font-family:inherit;
    font-size:10px;
    font-weight:700;
    line-height:1;
    border:1px solid rgba(143, 185, 177, .5);
    border-radius:50%;
    background:transparent;
    box-shadow:none;
    cursor:pointer;
    opacity:.82;
    transition:opacity .18s ease, color .18s ease, border-color .18s ease;
}

.filter-info-btn:hover,
.filter-info-btn:focus-visible{
    color:#d8ece4;
    border-color:rgba(216, 236, 228, .72);
    outline:none;
    opacity:1;
}

.filter-info-popup{
    position:fixed;
    z-index:5000;
    width:max-content;
    max-width:min(280px, calc(100vw - 24px));
    padding:10px 12px;
    color:#d9e1e0;
    font-family:"Lora", serif;
    font-size:13px;
    line-height:1.45;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:6px;
    background:rgba(7, 18, 22, .96);
    box-shadow:0 14px 32px rgba(0,0,0,.34);
    backdrop-filter:blur(16px);
    pointer-events:none;
}

@media (max-width:1180px){
    .translate-workspace .advanced-settings-panel{
        grid-template-columns:1fr 1fr 1fr;
    }

    .translate-workspace .advanced-settings-panel .translate-primary-status-box,
    .advanced-settings-panel .translate-primary-status-box{
        grid-column:1 !important;
        grid-row:1 !important;
        flex-wrap:wrap;
    }

    .translate-workspace .advanced-settings-panel .translate-second-text-field,
    .advanced-settings-panel .translate-second-text-field{
        grid-column:2 !important;
        grid-row:1 !important;
    }

    .translate-workspace .advanced-settings-panel .translate-second-lang-dropdown,
    .advanced-settings-panel .translate-second-lang-dropdown{
        grid-column:3 !important;
        grid-row:1 !important;
    }

    .translate-workspace .advanced-settings-panel .translate-code-status-box,
    .advanced-settings-panel .translate-code-status-box{
        grid-column:2 / 4 !important;
        grid-row:2 !important;
        gap:10px 18px !important;
    }
}

@media (max-width:820px){
    .translate-workspace .advanced-settings-panel .translate-primary-status-box,
    .translate-workspace .advanced-settings-panel .translate-code-status-box,
    .translate-workspace .advanced-settings-panel .translate-second-text-field,
    .translate-workspace .advanced-settings-panel .translate-second-lang-dropdown,
    .advanced-settings-panel .translate-primary-status-box,
    .advanced-settings-panel .translate-code-status-box,
    .advanced-settings-panel .translate-second-text-field,
    .advanced-settings-panel .translate-second-lang-dropdown{
        grid-column:1 !important;
        grid-row:auto !important;
    }

    .translate-workspace .advanced-settings-panel .translate-primary-status-box,
    .advanced-settings-panel .translate-primary-status-box{
        order:1;
    }

    .translate-workspace .advanced-settings-panel .translate-code-status-box,
    .advanced-settings-panel .translate-code-status-box{
        order:2;
    }

    .translate-workspace .advanced-settings-panel .translate-second-text-field,
    .advanced-settings-panel .translate-second-text-field{
        order:3;
    }

    .translate-workspace .advanced-settings-panel .translate-second-lang-dropdown,
    .advanced-settings-panel .translate-second-lang-dropdown{
        order:4;
    }

    .translate-workspace .advanced-settings-panel .translate-primary-status-box,
    .translate-workspace .advanced-settings-panel .translate-code-status-box,
    .advanced-settings-panel .translate-primary-status-box,
    .advanced-settings-panel .translate-code-status-box{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(180px, 1fr));
        align-items:start;
        column-gap:16px !important;
        row-gap:8px !important;
        width:100% !important;
        padding:0 !important;
    }

    .translate-status-box .mini-filter{
        display:grid;
        grid-template-columns:10px minmax(0, 1fr) 16px;
        align-items:center;
        column-gap:8px;
        width:100%;
        min-width:0;
        min-height:28px;
        padding:4px 2px;
        white-space:normal;
    }

    .translate-status-box .mini-filter span:not(.dot){
        min-width:0;
        overflow-wrap:normal;
        word-break:normal;
        hyphens:none;
    }

    .translate-status-box .mini-filter .filter-info-btn{
        justify-self:end;
    }
}


.edit-page{
    --edit-workspace-image:url("/static/images/main-darkforest2.webp");
    position:relative;
    min-height:100vh;
    padding:46px clamp(12px, 2.5vw, 48px) 48px;
}

.edit-page::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(
                to bottom,
                rgba(4, 12, 16, .68) 0,
                rgba(4, 12, 16, .76) 76px,
                rgba(4, 12, 16, .82) 168px,
                rgb(4 16 16 / 0.98) 100%
            ),
            radial-gradient(
                ellipse at 20% 0%,
                rgba(123, 197, 180, .14),
                transparent 42%
            ),
            var(--edit-workspace-image);
    background-size:cover;
    background-position:center;
}

/*==================================================
    MAIN CONTAINER
==================================================*/

.edit-shell{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 360px;
    gap:60px;
    min-height:100vh;
    padding:26px 46px 46px 86px;
}

.edit-center,
.edit-right{
    min-width:0;
}

/*==================================================
    TOP LINE: BACK + ID
==================================================*/

.edit-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
}

.edit-back-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 13px;
    color:#9fb4b0;
    font-size:14px;
    line-height:1;
    border:1px solid rgba(150, 185, 190, .14);
    border-radius:5px;
    background:rgba(7, 20, 24, .48);
    box-shadow:none;
}

.edit-back-link:hover{
    border-color:rgb(107 228 210 / 0.28);
    background:rgba(7, 20, 24, .58);
}

.edit-back-link:active{
    transform:translateY(1px) scale(.985);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.28),
            0 4px 10px rgba(0,0,0,.12);
}

.edit-row-id{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:38px;
    padding:0 13px;
    color:#d9e1e0;
    border:1px solid rgba(150, 185, 190, .14);
    border-radius:5px;
    background:rgba(7, 20, 24, .48);
    box-shadow:none;
}

.edit-row-id::before{
    content:"";
    width:7px;
    height:7px;
    flex:0 0 7px;
    border:1px solid rgba(202, 167, 90, .72);
    transform:rotate(45deg);
}

.edit-row-id-label,
.edit-row-id-value{
    color:#7f9290;
    font-size:12px;
    letter-spacing:.06em;
    white-space:nowrap;
}

/*==================================================
    LEFT EDIT AREA
==================================================*/

.edit-preview{
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    box-shadow:none;
}

.preview-label{
    margin:12px 0 12px;
    color:#8fb9b1;
    font-size:13px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.preview-label-new{
    margin:36px 0 12px;
    color:#8fb9b1;
    font-size:13px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.preview-box{
    display:grid;
    gap:10px;
    margin:0 0 36px;
}

.preview-item{
    position:relative;
    min-width:0;
    margin:0 0 18px;
}

.preview-box .preview-item{
    margin-bottom:0;
}

.old-ru-item{
    margin-bottom:14px;
}

.preview-line{
    display:block;
    width:100%;
    max-width:100%;
    max-height:none;
    margin:0;
    padding:14px 38px 14px 16px;
    color:#d6dfdd;
    font-family:"Lora", serif;
    font-size:15px;
    line-height:1.55;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    overflow:hidden;
    border:1px solid rgba(150, 185, 190, .16);
    border-left:2px solid rgba(123, 197, 180, .34);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
    transition:none;
}

.preview-line.collapsed{
    max-height:calc((1.55em * 2) + 30px);
}

.edit-collapse-zh #preview-zh,
.edit-collapse-en #preview-en,
.edit-collapse-old-ru #preview-old-ru{
    max-height:calc((1.55em * 2) + 30px);
}

.edit-page .preview-line{
    padding-right:76px;
}

.preview-item .collapse-btn,
.collapse-btn{
    position:absolute;
    top:-3px;
    right:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    padding:0;
    color:#8e9998;
    font-size:0;
    line-height:1;
    border:0 !important;
    outline:0 !important;
    border-radius:2px;
    background:transparent !important;
    box-shadow:none !important;
    cursor:pointer;
    opacity:.34;
    transform:rotate(90deg);
    transition:opacity .2s ease,
            color .2s ease;
}

.preview-item .collapse-btn::before,
.collapse-btn::before{
    content:"❮";
    font-size:15px;
    line-height:1;
}

.edit-collapse-zh .preview-item .collapse-btn[data-target="zh"]::before,
.edit-collapse-en .preview-item .collapse-btn[data-target="en"]::before,
.edit-collapse-old-ru .preview-item .collapse-btn[data-target="old-ru"]::before,
.preview-item .collapse-btn.collapsed::before,
.collapse-btn.collapsed::before{
    content:"❯";
}

.preview-item .collapse-btn:hover,
.collapse-btn:hover{
    color:#d8ece4;
    background:transparent !important;
}

.preview-item .source-preview-btn{
    position:absolute;
    top:-3px;
    right:28px;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    padding:0;
    color:#8e9998;
    border:0 !important;
    outline:0 !important;
    border-radius:2px;
    background:transparent !important;
    box-shadow:none !important;
    cursor:pointer;
    opacity:.42;
    transition:opacity .2s ease,
            color .2s ease;
}

.preview-item .source-preview-btn .edit-icon-mask{
    width:15px;
    height:15px;
    color:currentColor !important;
}

.preview-item .source-preview-btn:hover .edit-icon-mask,
.preview-item .source-preview-btn:focus-visible .edit-icon-mask{
    color:#d8ece4 !important;
}

.preview-item .source-preview-btn:hover,
.preview-item .source-preview-btn:focus-visible,
.preview-item .source-preview-btn.is-active{
    color:#d8ece4;
    opacity:.44;
    background:transparent !important;
    outline:none;
}

/*==================================================
    TEXTAREAS
==================================================*/

.edit-center textarea,
#ru,
#editComment{
    width:100%;
    color:#d6dfdd;
    font-family:"Lora", serif;
    line-height:1.6;
    border:1px solid rgba(150, 185, 190, .16);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
    outline:none;
    resize:vertical;
    transition:border-color .28s ease,
            background .28s ease,
            box-shadow .45s ease;
}

.edit-center textarea::placeholder,
#ru::placeholder,
#editComment::placeholder,
.revisions-workspace textarea.glossary-suggestion-input::placeholder,
.revisions-workspace .search-field::placeholder,
.glossary-section-form input::placeholder,
.glossary-search-input.search-field::placeholder,
.glossary-dropdown.translate-dropdown .glossary-dropdown-search-input::placeholder,
.glossary-section-search.search-field::placeholder{
    color:rgba(182, 195, 193, .45);
    opacity:1;
}

#ru{
    min-height:220px;
    padding:16px 18px;
    font-size:16px;
}

#editComment,
.revisions-workspace textarea.glossary-suggestion-input{
    min-height:76px;
    padding:12px 48px 12px 14px;
    font-size:14px;
}

.revisions-workspace input.glossary-suggestion-input{
    height:38px;
    padding:0 10px;
}

.revisions-workspace input.glossary-suggestion-input,
.revisions-workspace textarea.glossary-suggestion-input{
    width:100%;
    min-width:0;
    color:#d6dfdd;
    caret-color:#d6dfdd;
    border:1px solid rgba(150, 185, 190, .16);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0, 0, 0, .28);
}

.edit-center textarea:hover,
#ru:hover,
#editComment:hover,
.revisions-workspace input.glossary-suggestion-input:not([readonly]):hover,
.revisions-workspace textarea.glossary-suggestion-input:not([readonly]):hover{
    border-color:var(--field-focus-border);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .06),
            0 0 14px var(--field-focus-glow);
}

.edit-center textarea:focus,
#ru:focus,
#editComment:focus,
.revisions-workspace input.glossary-suggestion-input:not([readonly]):focus,
.revisions-workspace textarea.glossary-suggestion-input:not([readonly]):focus{
    border-color:var(--field-focus-border);
    background:linear-gradient(180deg, var(--field-hover-bg), transparent),
            rgb(6 21 22 / .72);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .08),
            0 0 18px rgba(80, 180, 153, .08);
}

textarea::-webkit-resizer{
    display:none;
}

/*==================================================
    COMMENT
==================================================*/

.edit-comment-block{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:18px;
}

.comment-label{
    margin:16px 0 0px;
    color:#bfcdc9;
    font-size:13px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.comment-input-wrapper{
    position:relative;
    display:flex;
    align-items:flex-start;
}

.attach-btn-inside{
    position:absolute;
    right:8px;
    bottom:8px;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    padding:0;
    color:#8fb9b1;
    font-size:20px;
    line-height:1;
    border:0 !important;
    border-radius:6px;
    background:transparent !important;
    box-shadow:none !important;
    cursor:pointer;
    opacity:.78;
    user-select:none;
    transition:opacity .18s ease,
            color .18s ease,
            background .18s ease;
}

.attach-btn-inside:hover{
    color:#d8ece4;
    background:rgba(140, 180, 240, .04) !important;
    opacity:1;
}

.images-preview-container{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:4px;
}

.image-preview-item{
    position:relative;
    width:70px;
    height:70px;
    overflow:hidden;
    border:1px solid rgba(150, 185, 190, .16);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
}

.image-preview-item img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.remove-preview-btn{
    position:absolute;
    top:4px;
    right:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    padding:0;
    color:#d6dfdd;
    font-size:14px;
    line-height:1;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:4px;
    background:rgba(4, 12, 16, .82);
    cursor:pointer;
}

.remove-preview-btn:hover{
    color:#fff;
    border-color:rgba(166, 109, 98, .72);
    background:rgba(166, 109, 98, .52);
}

/*==================================================
    EDIT TAGS
==================================================*/

.edit-tag-block{
    margin-top:16px;
}

.edit-tag-head{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
}

.edit-tag-label{
    margin:0;
}

.edit-tag-info{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:22px;
    height:22px;
    padding:0;
    color:#8fb9b1;
    font-family:"Lora", serif;
    font-size:13px;
    line-height:1;
    border:1px solid rgba(138, 166, 170, .22);
    border-radius:50%;
    background:rgba(12, 28, 29, .56);
    cursor:help;
}

.edit-tag-info:hover,
.edit-tag-info:focus-visible{
    color:#d8ece4;
    border-color:rgb(107 228 210 / .28);
    background:rgba(13, 34, 35, .72);
    outline:none;
}

.edit-tag-tooltip{
    position:fixed;
    z-index:9000;
    width:min(330px, calc(100vw - 32px));
    max-height:calc(100vh - 24px);
    padding:10px 12px;
    overflow:auto;
    color:#d6dfdd;
    font-size:12px;
    line-height:1.45;
    font-family:"Lora", serif;
    text-transform:none;
    letter-spacing:0;
    text-align:left;
    white-space:pre-line;
    overflow-wrap:break-word;
    border:1px solid rgba(150, 185, 190, .16);
    border-radius:6px;
    background:rgba(6, 19, 22, .98);
    box-shadow:0 16px 32px rgba(0,0,0,.34);
    pointer-events:none;
}

.edit-tag-tooltip[hidden]{
    display:none;
}

.edit-tag-picker{
    display:flex;
    flex-wrap:wrap;
    gap:7px;

}

.edit-tag-chip{
    position:relative;
    display:inline-flex;
    align-items:center;
    max-width:100%;
    min-height:30px;
    cursor:pointer;
}

.edit-tag-chip input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.edit-tag-chip span,
.edit-tag-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    max-width:100%;
    padding:0 10px;
    color:#aabbb8;
    font-size:12.5px;
    line-height:1.1;
    overflow-wrap:anywhere;
    border:1px solid rgba(138, 166, 170, .18);
    border-radius:999px;
    background:rgba(6, 19, 22, .48);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
    transition:border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
}

.edit-tag-chip:hover span,
.edit-tag-chip input:focus-visible + span{
    color:#d8ece4;
    border-color:rgb(107 228 210 / .28);
    background:rgba(13, 34, 35, .62);
}

.edit-tag-chip input:checked + span,
.edit-tag-pill{
    color:#d8ece4;
    border-color:rgb(107 228 210 / .38);
    background:rgba(13, 34, 35, .72);
}

.history-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
}

/*==================================================
    BUTTONS
==================================================*/

.edit-buttons{
    display:flex;
    gap:10px;
    margin-top:30px;
}

.edit-buttons button,
.edit-buttons .accept,
.edit-buttons .cancel{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 18px;
    color:#cdd8d6;
    font-family:"Lora", serif;
    font-size:15px;
    line-height:1;
    border:1px solid rgba(150, 185, 190, .22);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
    cursor:pointer;
}

.edit-buttons button:hover,
.edit-buttons .accept:hover,
.edit-buttons .cancel:hover{
    color:#dfe8e4;
    border-color:rgba(123, 197, 180, .34);
    background:rgb(7 25 27 / .78);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),
            0 0 14px rgba(80, 180, 153, .06);
}

.edit-buttons .accept{
    color:#cfe6e0;
    border-color:rgba(123, 197, 180, .24);
}

.edit-buttons .cancel{
    color:#9aa9a7;
}

/*==================================================
    RIGHT PANEL / HISTORY
==================================================*/

.right-panel{
    min-height:520px;
    padding:22px 12px;
    border:1px solid rgba(150, 185, 190, .13);
    border-radius:8px;
    background:linear-gradient(180deg, rgb(10 25 27 / 0.92), rgb(7 21 22 / 0.94)),
            radial-gradient(ellipse at 18% 0%, rgba(123, 197, 180, .10), transparent 40%);
    box-shadow:0 12px 28px rgba(0,0,0,.25),
            inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter:blur(10px);
}

.right-title{
    display:block;
    margin:0 0 18px;
    color:#ceddda;
    font-size:1.2rem;
    font-weight:400;
    line-height:1.2;
    text-align:center;
}

.right-title::after{
    content:"";
    display:block;
    width:100%;
    height:1px;
    margin-top:12px;
    background:linear-gradient(
            90deg,
            transparent 0%,
            rgba(123, 197, 180, .05) 14%,
            rgba(123, 197, 180, .24) 36%,
            rgba(202, 167, 90, .18) 50%,
            rgba(123, 197, 180, .24) 64%,
            rgba(123, 197, 180, .05) 86%,
            transparent 100%
        );
    box-shadow:0 0 10px rgba(80, 180, 153, .08);
}

.history-list{
    display:block;
    max-height:440px;
    margin-top:18px;
    padding:0;
    overflow-y:auto;
    border:none;
    background:none;
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.history-list::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
}

.history-item{
    margin:0;
    padding:14px 18px;
    border:0;
    border-bottom:1px solid rgba(150, 185, 190, .10);
    border-radius:0;
    background:none;
    box-shadow:none;
}

.history-item:last-child{
    border-bottom:none;
}

.history-item:hover{
    filter:brightness(1.04);
}

.history-meta{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
    font-size:.8rem;
}

.history-user{
    color:#94bdb8;
    font-size:13px;
}

.history-time{
    color:#7f9c98;
    font-family:monospace;
    font-size:11px;
    white-space:nowrap;
}

.history-text{
    margin-top:8px;
    padding-left:8px;
    color:#d6dfdd;
    font-size:14px;
    line-height:1.5;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    border-left:2px solid rgb(123 197 191 / 0.26);
}

.history-comment{
    margin-top:8px;
    padding-left:8px;
    color:#8e9998;
    font-size:12px;
    font-style:italic;
    line-height:1.45;
    border-left:2px solid rgba(150, 185, 190, .12);
    display:flex;
    align-items:flex-start;
    gap:6px;
}

.history-comment-icon{
    flex:0 0 auto;
    width:15px;
    height:15px;
    margin-top:2px;
    background:#8e9998;
    -webkit-mask:url("/static/icons/notes.png") center / contain no-repeat;
    mask:url("/static/icons/notes.png") center / contain no-repeat;
}

.history-status-line{
    margin-top:10px;
    font-size:12px;
    opacity:.78;
}

.history-item.pending .history-status-line{
    color:#caa75a;
}

.history-item.approved .history-status-line{
    color:#7fb39c;
}

.history-item.auto-approved .history-status-line{
    color:#8cb7e4;
}

.history-item.rejected .history-status-line{
    color:#b98278;
}

.empty-history{
    padding:20px;
    color:#8a9e9c;
    font-size:14px;
    text-align:center;
}

/*==================================================
    MOBILE
==================================================*/

@media (max-width:1180px){
    .edit-shell{
        grid-template-columns:1fr;
    }

    .right-panel{
        min-height:auto;
    }

    .history-list{
        max-height:360px;
    }
}

@media (max-width:820px){
    .edit-page{
        padding:14px 14px 36px;
    }

    .edit-shell{
        padding:12px;
    }

    .edit-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .edit-row-id{
        max-width:100%;
    }

    .edit-row-id-value{
        white-space:normal;
        overflow-wrap:anywhere;
    }

    .edit-buttons{
        flex-direction:column;
    }

    .edit-buttons button,
    .edit-buttons .accept,
    .edit-buttons .cancel{
        width:100%;
    }

    .history-meta{
        flex-direction:column;
        gap:4px;
    }
}

.preview-label,
.preview-label-new{
    display:flex;
    align-items:center;
    color:#bfcdc9;
    font-size:13px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.preview-label::before,
.preview-label-new::before{
    content:"〉";
    color:rgb(115 197 184 / 0.78);
    font-size:17px;
    line-height:1;
    opacity:.85;
    text-shadow:0 0 8px rgba(202, 167, 90, .14);
}


.translate-page.revisions-page{
    --translate-workspace-image:url("/static/images/main-darkforest2.webp");
}

.translate-page.revisions-page::before{
    background:linear-gradient(
                to bottom,
                rgba(4, 12, 16, .68) 0,
                rgba(4, 12, 16, .76) 76px,
                rgba(4, 12, 16, .82) 168px,
                rgb(4 16 16 / .98) 100%
            ),
            radial-gradient(
                ellipse at 20% 0%,
                rgba(123, 197, 180, .14),
                transparent 42%
            ),
            var(--translate-workspace-image);
    background-size:cover;
    background-position:center;
}

.translate-workspace.revisions-workspace{
    min-height:max(620px, calc(100vh - 160px));
}

.revisions-workspace .revisions-shell{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}

.revisions-workspace .replace-moderation-panel{
    display:block;
}

.revisions-workspace .replace-moderation-form{
    display:grid;
    grid-template-columns:minmax(80px, .60fr) minmax(260px, .75fr) minmax(280px, 1fr) minmax(280px, 1fr) minmax(150px, auto) minmax(130px, auto);
    gap:10px;
    align-items:start;
    margin-bottom:12px;
    font-family:"Lora", serif !important;
}

.revisions-workspace .replace-moderation-options{
    grid-column:1 / -1;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    gap:0 18px;
    width:100%;
    height:auto;
    max-height:none;
    min-height:24px;
    padding:0;
    margin:0;
    justify-self:start;
    align-self:start;
}

.revisions-workspace .replace-source-dropdown{
    grid-column:1;
    width:100%;
    min-width:0;
}

.revisions-workspace .replace-moderation-actions{
    grid-column:5 / 7;
    grid-row:1;
    display:grid;
    grid-template-columns:minmax(150px, auto) minmax(130px, auto);
    gap:10px;
    align-items:start;
}

.revisions-workspace .replace-moderation-actions .replace-action-btn{
    width:100%;
    white-space:nowrap;
    height:48px !important;
    min-height:48px !important;
    padding:0 16px !important;
    font-family:"Lora", serif !important;
    font-size:16px !important;
    font-weight:500 !important;
}

.revisions-workspace #replaceRowId{
    grid-column:2;
}

.revisions-workspace #replaceFrom{
    grid-column:3;
}

.revisions-workspace #replaceTo{
    grid-column:4;
}

.revisions-workspace .replace-source-dropdown .dropdown-menu{
    max-height:min(320px, calc(100vh - 180px));
    overflow-y:auto;
    overflow-x:hidden;
}

.revisions-workspace .replace-moderation-status{
    margin:4px 0 10px;
    padding:8px 12px;
    color:#8e9998;
    font-size:13px;
    border:1px solid rgba(150, 185, 190, .1);
    border-radius:6px;
    background:rgba(6, 19, 22, .38);
}

.revisions-workspace .replace-moderation-status[hidden]{
    display:none;
}

.revisions-workspace .replace-moderation-status[data-kind="success"]{
    color:#9fd8c0;
    border-color:rgba(123, 197, 180, .2);
}

.revisions-workspace .replace-moderation-status[data-kind="error"]{
    color:#e09b9b;
    border-color:rgba(185, 130, 120, .22);
}

.revisions-workspace .replace-preview-head{
    align-items:center;
    margin-top:14px;
}

.revisions-workspace .replace-preview-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:32px;
    min-height:32px;
    padding:0 12px;
    margin-left:auto;
    color:#9fb4b0;
    font-family:"Lora", serif;
    font-size:13px;
    font-weight:400;
    line-height:1;
    white-space:nowrap;
    border:1px solid rgba(138, 166, 170, .18);
    border-radius:5px;
    background:rgba(7, 20, 24, .42);
    box-shadow:none;
    text-shadow:none;
    cursor:pointer;
    transition:border-color .18s ease, background .18s ease, color .18s ease, transform .08s ease;
}

.revisions-workspace .replace-preview-toggle[hidden]{
    display:none !important;
}

.revisions-workspace .replace-preview-toggle:hover,
.revisions-workspace .replace-preview-toggle:focus-visible{
    color:#d8ece4;
    border-color:rgba(107, 228, 210, .28);
    background:rgba(9, 29, 31, .58);
    outline:none;
}

.revisions-workspace .replace-preview-toggle:active{
    transform:translateY(1px) scale(.985);
}

.revisions-workspace .replace-preview-bottom-action{
    display:flex;
    justify-content:flex-end;
    min-height:36px;
}

.revisions-workspace .replace-preview-bottom-action:empty{
    display:none;
}

.revisions-workspace .replace-preview-table{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.revisions-workspace .replace-preview-row{
    display:grid;
    grid-template-columns:minmax(120px, .42fr) minmax(0, 1fr) minmax(0, 1fr);
    gap:8px;
    align-items:stretch;
}

.revisions-workspace .replace-preview-header{
    color:#8e9998;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.revisions-workspace .replace-preview-id{
    min-width:0;
    padding:12px;
    overflow-wrap:anywhere;
    color:#8e9998;
    font-family:monospace;
    font-size:12px;
    line-height:1.45;
    border:1px solid rgba(150, 185, 190, .1);
    border-radius:6px;
    background:rgba(6, 19, 22, .5);
}

.revisions-workspace .replace-preview-cell{
    min-height:48px;
    max-height:260px;
    overflow:auto;
}

.revisions-workspace .replace-preview-old .diff-old{
    color:#f2b2aa;
    background:rgba(188, 73, 73, .28);
    box-shadow:inset 0 -1px 0 rgba(188, 73, 73, .42);
}

.revisions-workspace .replace-preview-new .diff-new{
    color:#b9efd0;
    background:rgba(55, 145, 89, .3);
    box-shadow:inset 0 -1px 0 rgba(55, 145, 89, .44);
}

.revisions-workspace .replace-empty{
    padding:22px;
    color:#8e9998;
    text-align:center;
    border:1px solid rgba(150, 185, 190, .1);
    border-radius:6px;
    background:rgba(6, 19, 22, .38);
}

.revisions-workspace .search-action{
    flex:0 0 auto;
    height:46px;
    padding:0 19px;
    color:#b8cbc8;
    font-family:"Lora", serif;
    font-size:14px;
    font-weight:500;
    white-space:nowrap;
    border:1px solid rgba(138, 166, 170, .22);
    border-radius:5px;
    background:linear-gradient(180deg, rgb(12 28 29 / .56), rgb(7 18 20 / .82));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),
            0 8px 18px rgba(0,0,0,.16);
    text-shadow:none;
    cursor:pointer;
    transition:transform .08s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.revisions-workspace .search-action:hover{
    color:#d8ece4;
    border-color:rgb(107 228 210 / .28);
    background:linear-gradient(180deg, rgb(13 34 35 / .58), rgb(8 20 21 / .94));
}

.revisions-workspace .search-action:active{
    transform:translateY(1px) scale(.985);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.28),
            0 4px 10px rgba(0,0,0,.12);
}

.revisions-workspace .revisions-code-status-box{
    grid-column:1 / -1;
    flex:0 0 auto;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    gap:10px 18px;
    height:auto;
    min-height:28px;
    max-height:none;
    padding:0 0 12px 4px;
}

.revisions-workspace .revision-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.revisions-workspace .revision-card{
    position:relative;
    padding:14px;
    border:1px solid rgba(138, 166, 170, .22);
    border-radius:7px;
    background:linear-gradient(180deg, rgb(7 23 25 / 0.95), rgb(6 21 21 / 0.88)),
            radial-gradient(ellipse at 14% 0%, rgba(117, 173, 145, .08), transparent 44%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),
            0 10px 22px rgba(0,0,0,.18);
}

.revisions-workspace .revision-card:nth-child(even){
    background:linear-gradient(180deg, rgb(8 20 26 / .56), rgba(7, 17, 22, .46)),
            radial-gradient(ellipse at 14% 0%, rgba(117, 173, 145, .07), transparent 44%);
}

.revisions-workspace .revision-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.revisions-workspace .revision-meta{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:12px;
    margin-top:3px;
    color:#8e9998;
    font-size:12px;
}

.revisions-workspace .revision-user{
    color:#94bdb8;
}

.revisions-workspace .revision-time{
    color:#7f9c98;
    font-family:monospace;
    white-space:nowrap;
}

.revisions-workspace .revision-history-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin:-2px 0 12px;
    color:#93a4a0;
    font-size:12px;
}

.revisions-workspace .revision-history-status{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 10px;
    border:1px solid rgba(154, 177, 171, .22);
    border-radius:5px;
    color:#eef7f3;
    font-weight:600;
    line-height:1;
}

.revisions-workspace .revision-history-status-approved{
    border-color:rgba(86, 190, 139, .38);
    background:rgba(64, 154, 112, .14);
    color:#bfead1;
}

.revisions-workspace .revision-history-status-auto-approved{
    border-color:rgba(140, 183, 228, .38);
    background:rgba(62, 113, 166, .15);
    color:#c5ddf5;
}

.revisions-workspace .revision-history-status-rejected{
    border-color:rgba(214, 99, 99, .38);
    background:rgba(153, 55, 55, .14);
    color:#f0b9b9;
}

.revisions-workspace .revision-history-detail{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 9px;
    border:1px solid rgba(138, 166, 170, .14);
    border-radius:5px;
    background:rgba(255,255,255,.025);
    color:#9fb1ad;
    line-height:1;
}

.revisions-workspace .revision-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.revisions-workspace .lang-block,
.revisions-workspace .attachments,
.revisions-workspace .moderator-note{
    min-width:0;
}

.revisions-workspace .full{
    grid-column:1 / -1;
}

.revisions-workspace .block-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
    margin-top:20px;
    color:#9ba9a7;
    font-size:14px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.revisions-workspace .block-head > span::before{
    content:"〉";
    margin-right:6px;
    color:rgb(123 197 191 / .66);
    font-size:17px;
    opacity:.8;
}

.revisions-workspace .preview-item{
    position:relative;
    margin:0;
}

.revisions-workspace .code-pre{
    display:block;
    width:100%;
    max-width:100%;
    margin:0;
    padding:14px 18px;
    overflow-x:auto;
    color:#d6dfdd;
    font-family:"Lora", serif;
    font-size:15px;
    line-height:1.55;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
    border:1px solid rgba(150, 185, 190, .12);
    border-left:2px solid rgb(91 143 137 / .72);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
}

.revisions-workspace .collapsible-block{
    position:relative;
}

.revisions-workspace .collapsible-block .preview-line{
    padding-right:42px !important;
    overflow:hidden;
    transition:max-height .25s ease-out;
}

.revisions-workspace .collapsible-block .preview-line.auto-collapse{
    max-height:calc((1.55em * 2) + 30px);
}

.revisions-workspace .collapsible-block .preview-line.collapsed,
.revisions-workspace .collapsible-block .preview-line.auto-collapse.collapsed{
    max-height:calc((1.55em * 2) + 30px) !important;
}

.revisions-workspace .preview-item .collapse-btn,
.revisions-workspace .collapse-btn{
    position:absolute;
    top:-3px;
    right:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    padding:0;
    color:#8e9998;
    font-size:15px;
    line-height:1;
    border:0 !important;
    outline:0 !important;
    border-radius:2px;
    background:transparent !important;
    box-shadow:none !important;
    cursor:pointer;
    opacity:.34;
    transform:rotate(90deg);
    transition:opacity .2s ease, color .2s ease;
}

.revisions-workspace .preview-item .collapse-btn:hover,
.revisions-workspace .collapse-btn:hover{
    color:#d8ece4;
    background:transparent !important;
}

.revisions-workspace .new-ru-item{
    position:relative;
    margin-bottom:0;
    z-index:1;
}

.revisions-workspace .new-ru-actions{
    position:absolute;
    top:-3px;
    right:2px;
    z-index:6;
    display:flex;
    gap:2px;
}

.revisions-workspace .new-ru-item:has(.new-ru-actions) > .collapse-btn{
    right:74px;
}

.revisions-workspace .new-ru-item .preview-line{
    padding-right:112px !important;
}

.revisions-workspace .rev-icon-btn,
.revisions-workspace .new-ru-actions .rev-icon-btn{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:34px !important;
    height:38px !important;
    padding:0 0 6px !important;
    color:#8e9998 !important;
    font-family:"Lora", serif !important;
    font-size:20px !important;
    font-weight:400 !important;
    line-height:1 !important;
    border:0 !important;
    outline:0 !important;
    border-radius:2px !important;
    background:transparent !important;
    box-shadow:none !important;
    text-shadow:none !important;
    cursor:pointer;
    opacity:.42;
    transform:none !important;
    transition:opacity .2s ease, color .2s ease !important;
}

.revisions-workspace .rev-icon-btn:hover,
.revisions-workspace .rev-icon-btn:focus-visible{
    color:#d8ece4 !important;
    opacity:.58;
    background:transparent !important;
    box-shadow:none !important;
}

.revisions-workspace .rev-icon-btn:disabled{
    cursor:wait;
    opacity:.24;
}

.revisions-workspace .new-ru-item .ru-slot .code-pre{
    padding-right:76px !important;
}

.revisions-workspace .ru-edit,
.revisions-workspace textarea.ru-edit,
.revisions-workspace .new-ru-item textarea,
.revisions-workspace .new-ru-item .ru-slot textarea{
    display:block;
    width:100%;
    min-height:120px;
    margin:0;
    padding:14px 76px 14px 18px !important;
    color:#d6dfdd !important;
    caret-color:#d6dfdd !important;
    font-family:"Lora", serif !important;
    font-size:15px !important;
    line-height:1.55 !important;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
    resize:vertical;
    outline:none !important;
    border:1px solid rgba(150, 185, 190, .16) !important;
    border-left:2px solid rgb(91 143 137 / .72) !important;
    border-radius:6px !important;
    background:rgb(6 19 22 / .68) !important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28) !important;
    transition:border-color .28s ease, background .28s ease, box-shadow .45s ease;
}

.revisions-workspace .ru-edit:hover,
.revisions-workspace textarea.ru-edit:hover,
.revisions-workspace .new-ru-item textarea:hover,
.revisions-workspace .ru-edit:focus,
.revisions-workspace textarea.ru-edit:focus,
.revisions-workspace .new-ru-item textarea:focus{
    border-color:var(--field-focus-border, rgb(123 183 197 / .22)) !important;
    border-left-color:rgb(123 197 180 / .42) !important;
    background:linear-gradient(180deg, var(--field-hover-bg, rgb(115 163 152 / 0)), transparent),
            rgb(6 21 22 / .72) !important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .06),
            0 0 14px var(--field-focus-glow, rgb(80 180 162 / .1)) !important;
}

.revisions-workspace .ru-edit::selection,
.revisions-workspace textarea.ru-edit::selection{
    color:#e7f1ee;
    background:rgba(123, 197, 180, .22);
}

.revisions-workspace .ru-edit-frame{
    display:none;
    width:100%;
    min-height:120px;
    margin:0;
    padding:14px 76px 14px 18px;
    color:#d6dfdd;
    caret-color:#d6dfdd;
    font-family:"Lora", serif;
    font-size:15px;
    line-height:1.55;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
    border:1px solid rgba(150, 185, 190, .16);
    border-left:2px solid rgb(91 143 137 / .72);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
    transition:border-color .28s ease, background .28s ease, box-shadow .45s ease;
}

.revisions-workspace .ru-edit-frame:hover,
.revisions-workspace .ru-edit-frame:focus-within{
    border-color:var(--field-focus-border, rgb(123 183 197 / .22));
    border-left-color:rgb(123 197 180 / .42);
    background:linear-gradient(180deg, var(--field-hover-bg, rgb(115 163 152 / 0)), transparent),
            rgb(6 21 22 / .72);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .06),
            0 0 14px var(--field-focus-glow, rgb(80 180 162 / .1));
}

.revisions-workspace .ru-edit-body{
    display:inline;
    min-width:1ch;
    margin:0;
    padding:0;
    color:inherit;
    font:inherit;
    line-height:inherit;
    letter-spacing:inherit;
    white-space:inherit;
    overflow-wrap:inherit;
    word-break:inherit;
    outline:none;
    background:transparent;
    caret-color:#d6dfdd;
    cursor:text;
}

.revisions-workspace .ru-edit-frame .dialog-speaker-prefix,
.revisions-workspace .compare-view .dialog-speaker-prefix{
    cursor:default;
    user-select:none;
}

.revisions-workspace .user-comment{
    margin-top:8px;
    padding:10px 12px;
    color:#d6dfdd;
    font-size:14.5px;
    line-height:1.5;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    border:1px solid rgba(150, 185, 190, .1);
    border-left:2px solid rgb(91 143 137 / .72);
    border-radius:6px;
    background:rgb(6 19 22 / .62);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.24);
}

.revisions-workspace .revision-tags .block-head{
    margin-top:18px;
    margin-bottom:9px;
}

.revisions-workspace .revision-tags .edit-tag-info{
    margin-left:auto;
}

.revisions-workspace .revision-tag-readonly-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.revisions-workspace .revision-tag-empty{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 11px;
    border:1px solid rgba(138, 166, 170, .16);
    border-radius:5px;
    color:#7f918d;
    background:rgba(255,255,255,.018);
    font-size:13px;
}

.revisions-workspace .moderator-note{
    margin-top:30px;
}

.revisions-workspace .moderator-note .mod-edit{
    width:100%;
    min-height:44px;
    max-height:96px;
    padding:8px 14px;
    color:#d6dfdd !important;
    caret-color:#d6dfdd !important;
    font-family:"Lora", serif;
    font-size:14px;
    line-height:1.5;
    resize:vertical;
    outline:none !important;
    border:1px solid rgba(150, 185, 190, .14) !important;
    border-radius:6px;
    background:rgb(6 19 22 / .68) !important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28) !important;
    transition:border-color .28s ease, background .28s ease, box-shadow .45s ease;
}

.revisions-workspace .moderator-note .mod-edit::placeholder{
    color:rgba(182, 195, 193, .45);
}

.revisions-workspace .moderator-note .mod-edit:hover,
.revisions-workspace .moderator-note .mod-edit:focus{
    border-color:var(--field-focus-border, rgb(123 183 197 / .22)) !important;
    background:linear-gradient(180deg, var(--field-hover-bg, rgb(115 163 152 / 0)), transparent),
            rgb(6 21 22 / .72) !important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .06),
            0 0 14px var(--field-focus-glow, rgb(80 180 162 / .1)) !important;
}

.revisions-workspace .thumb-grid{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
}

.revisions-workspace .thumb-card{
    width:100px;
    margin:0;
}

.revisions-workspace .thumb-card img{
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    border:1px solid rgba(150, 185, 190, .16);
    border-radius:8px;
    transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.revisions-workspace .thumb-card img:hover{
    border-color:rgb(107 228 210 / .32);
    box-shadow:0 0 8px rgba(80, 180, 153, .12);
    transform:scale(1.04);
}

.revisions-workspace .action-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
}

.revisions-workspace .rev-btn{
    height:36px;
    padding:0 12px;
    color:#b8cbc8;
    font-family:"Lora", serif;
    font-size:13px;
    font-weight:500;
    border:1px solid rgba(138, 166, 170, .22);
    border-radius:6px;
    background:rgba(6, 19, 22, .58);
    box-shadow:none;
    text-shadow:none;
    cursor:pointer;
    opacity:.86;
    transition:transform .08s ease, opacity .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.revisions-workspace .rev-btn:hover{
    color:#d8ece4;
    opacity:1;
    border-color:rgb(107 228 210 / .18);
    background:rgba(9, 29, 31, .64);
}

.revisions-workspace .rev-btn:active{
    transform:translateY(1px) scale(.985);
}

.revisions-workspace .rev-btn:disabled,
.revisions-workspace .rev-btn.is-busy{
    cursor:progress;
    opacity:.55;
    transform:none;
}

.revisions-workspace .rev-btn-accept{
    border-color:rgba(90, 160, 110, .26);
}

.revisions-workspace .rev-btn-reject{
    border-color:rgba(170, 90, 90, .25);
}

.revisions-workspace .rev-btn-accept:hover{
    border-color:rgba(127, 179, 156, .48);
}

.revisions-workspace .rev-btn-reject:hover{
    border-color:rgba(185, 130, 120, .48);
}

.revisions-workspace .diff-old,
.revisions-workspace .diff-new{
    color:inherit;
    border-radius:3px;
    padding:0 .1em;
}

.revisions-workspace .diff-old{
    background:rgba(185, 130, 120, .16);
    box-shadow:inset 0 -1px 0 rgba(185, 130, 120, .18);
}

.revisions-workspace .diff-new{
    background:rgba(123, 197, 180, .13);
    box-shadow:inset 0 -1px 0 rgba(123, 197, 180, .16);
}

.revisions-workspace .revision-compare-source-hidden{
    display:none !important;
}

.revisions-workspace .code-highlighted-v2 .diff-old,
.revisions-workspace .code-highlighted-v2 .diff-old span{
    background:rgba(185, 130, 120, .22) !important;
    box-shadow:inset 0 -1px 0 rgba(185, 130, 120, .28) !important;
}

.revisions-workspace .code-highlighted-v2 .diff-new,
.revisions-workspace .code-highlighted-v2 .diff-new span{
    background:rgba(123, 197, 180, .2) !important;
    box-shadow:inset 0 -1px 0 rgba(123, 197, 180, .26) !important;
}

.revisions-workspace .code-highlighted-v2 .diff-old .game-code-token,
.revisions-workspace .code-highlighted-v2 .diff-new .game-code-token{
    border-radius:3px;
}

.revisions-workspace .compare-view{
    border:1px solid rgba(150, 185, 190, .12);
    border-left:2px solid rgb(91 143 137 / .72);
    border-radius:6px;
    background:rgb(6 19 22 / .62);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.24);
}

.revisions-workspace .empty-revisions{
    padding:40px 12px;
    color:#8e9998;
    text-align:center;
}

.revisions-workspace .pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:20px;
}

.revisions-workspace .pagination-link,
.revisions-workspace .pagination-ellipsis{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    min-height:38px;
    padding:0 12px;
    color:#b8cbc8;
    border:1px solid rgba(138, 166, 170, .18);
    border-radius:5px;
    background:rgba(6, 19, 22, .42);
}

.revisions-workspace .pagination-ellipsis{
    min-width:28px;
    padding:0 4px;
    color:#7f918d;
    border-color:transparent;
    background:transparent;
}

.revisions-workspace .pagination-link:hover{
    color:#d8ece4;
    border-color:rgb(107 228 210 / .28);
    background:rgba(9, 29, 31, .58);
}

.revisions-workspace .pagination-link.active{
    color:#eef7f3;
    border-color:rgba(123, 197, 180, .42);
    background:rgba(53, 117, 102, .22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    pointer-events:none;
}

.revisions-workspace .revisions-pagination-goto{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-left:8px;
}

.revisions-workspace .revisions-pagination-goto input{
    width:62px;
    min-height:38px;
    padding:0 8px;
    color:#d6dfdd;
    text-align:center;
    border:1px solid rgba(138, 166, 170, .18);
    border-radius:5px;
    background:rgba(6, 19, 22, .52);
    outline:none;
}

.revisions-workspace .revisions-pagination-goto input:hover,
.revisions-workspace .revisions-pagination-goto input:focus{
    border-color:rgb(107 228 210 / .28);
    background:rgba(9, 29, 31, .62);
}

@media (max-width:900px){
    .revisions-workspace .revision-grid,
    .revisions-workspace .replace-moderation-form,
    .revisions-workspace .replace-preview-row{
        grid-template-columns:1fr;
    }

    .revisions-workspace .replace-source-dropdown,
    .revisions-workspace #replaceRowId,
    .revisions-workspace #replaceFrom,
    .revisions-workspace #replaceTo,
    .revisions-workspace .replace-moderation-actions,
    .revisions-workspace .replace-moderation-options{
        grid-column:1;
    }

    .revisions-workspace .replace-moderation-actions{
        grid-row:auto;
        grid-template-columns:1fr 1fr;
    }

    .revisions-workspace .replace-preview-header{
        display:none;
    }
}

@media (max-width:760px){
    .translate-workspace.revisions-workspace{
        padding:12px;
    }

    .revisions-workspace .revisions-search{
        flex-direction:column;
        align-items:stretch;
    }

    .revisions-workspace .search-field,
    .revisions-workspace .search-action{
        width:100%;
        flex:auto;
    }

    .revisions-workspace .revision-head{
        flex-direction:column;
        gap:6px;
    }

    .revisions-workspace .revision-card{
        padding:10px;
    }

    .revisions-workspace .action-row .rev-btn,
    .revisions-workspace .replace-moderation-actions .replace-action-btn{
        width:100%;
    }

    .revisions-workspace .replace-moderation-actions{
        grid-template-columns:1fr;
    }
}

.revision-card .revision-head .revision-row-id{
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    width:max-content !important;
    max-width:100%;
    min-height:36px;
    padding:0 13px !important;
    color:#d9e1e0;
    border:1px solid rgba(150, 185, 190, .14) !important;
    border-radius:5px;
    background:rgba(7, 20, 24, .48) !important;
    box-shadow:none !important;
    white-space:nowrap;
}

.revision-card .revision-head .revision-row-id::before{
    content:"";
    align-self:center;
    flex:0 0 6px;
    width:6px;
    height:6px;
    margin:0;
    border:1px solid rgba(202, 167, 90, .72);
    transform:rotate(45deg);
}

.revision-card .revision-head .revision-row-id-label,
.revision-card .revision-head .revision-row-id-value{
    color:#7f9290;
    font-size:12px;
    line-height:1;
    letter-spacing:.06em;
    white-space:nowrap;
}

.revision-card .revision-head .revision-row-id-value{
    min-width:0;
    max-width:100%;
}

.revisions-workspace .revisions-search,
.translate-workspace.revisions-workspace .revisions-search{
    position:relative !important;
    top:auto !important;
    z-index:1 !important;
    display:grid !important;
    flex-wrap:wrap;
    grid-template-columns:360px minmax(420px, 1fr) 260px 126px;
    gap:10px;
    align-items:start;
    margin:0 0 14px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

.revisions-workspace .search-field{
    flex:1 1 180px;
    width:100%;
    min-width:180px;
    height:48px;
    min-height:48px;
    padding:0 16px;
    color:#cdd8d6;
    font-family:"Lora", serif;
    font-size:15px;
    border:1px solid rgba(150, 185, 190, .22);
    border-radius:6px;
    outline:none;
    background:rgb(6 19 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
    transition:border-color .28s ease, background .28s ease, box-shadow .45s ease;
}

.revisions-workspace .revisions-search-id{
    grid-column:1;
}

.revisions-workspace .revisions-search-text{
    grid-column:2;
}

.revisions-workspace .revisions-search-author{
    grid-column:3;
}

.revisions-workspace .revisions-search-action{
    grid-column:4;
    width:100%;
    height:48px;
    font-size:16px;
    min-height:48px;
    padding:0 16px;
}

.revisions-workspace .search-field:hover,
.revisions-workspace .search-field:focus,
.revisions-workspace .search-field:focus-visible{
    border-color:var(--field-focus-border, rgb(123 183 197 / .22));
    background:linear-gradient(180deg, var(--field-hover-bg, rgb(115 163 152 / 0)), transparent),
            rgb(6 21 22 / .72);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .06),
            0 0 14px var(--field-focus-glow, rgb(80 180 162 / .1));
}

.revisions-workspace .replace-source-dropdown .dropdown-btn,
.revisions-workspace .replace-moderation-form .replace-input{
    width:100% !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 16px !important;
    color:#cdd8d6 !important;
    font-family:inherit !important;
    font-size:16px !important;
    font-weight:400 !important;
    line-height:48px !important;
    border:1px solid rgba(150, 185, 190, .22) !important;
    border-radius:6px !important;
    background:rgb(6 19 22 / 0.68) !important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28) !important;
    transition:border-color .28s ease, background .28s ease, box-shadow .65s ease !important;
}

.revisions-workspace .replace-source-dropdown .dropdown-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    padding:0 36px 0 13px !important;
    line-height:1 !important;
    position:relative !important;
}

.revisions-workspace .replace-moderation-form .replace-input::placeholder{
    color:rgba(182, 195, 193, .45) !important;
    opacity:1 !important;
}

.revisions-workspace .replace-source-dropdown .dropdown-btn:hover,
.revisions-workspace .replace-source-dropdown .custom-dropdown.open .dropdown-btn,
.revisions-workspace .replace-moderation-form .replace-input:hover,
.revisions-workspace .replace-moderation-form .replace-input:focus,
.revisions-workspace .replace-moderation-form .replace-input:focus-visible{
    border-color:var(--field-focus-border, rgb(123 183 197 / .22)) !important;
    background:linear-gradient(180deg, var(--field-hover-bg, rgb(115 163 152 / 0)), transparent),
            rgb(6 21 22 / 0.68) !important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .06),
            0 0 14px var(--field-focus-glow, rgb(80 180 162 / .1)) !important;
}

.revisions-workspace .replace-moderation-options.translate-status-box{
    grid-column:1 / -1 !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:18px !important;
    width:max-content !important;
    max-width:100% !important;
    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;
    margin:0 !important;
    padding:0 !important;
}

.revisions-workspace .replace-moderation-options .mini-filter{
    display:inline-flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    min-height:24px !important;
    margin:0 !important;
    color:#a4b6b2 !important;
    font-family:"Lora", serif !important;
    font-size:13px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
}

@media (max-width:1180px){
    .revisions-workspace .revisions-search,
    .translate-workspace.revisions-workspace .revisions-search{
        grid-template-columns:220px minmax(280px, 1fr) 220px 126px;
    }
}

@media (max-width:820px){
    .revisions-workspace .revisions-search,
    .translate-workspace.revisions-workspace .revisions-search{
        grid-template-columns:1fr;
    }

    .revisions-workspace .revisions-search-id,
    .revisions-workspace .revisions-search-text,
    .revisions-workspace .revisions-search-author,
    .revisions-workspace .revisions-search-action{
        grid-column:1;
    }
}

.rev-icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    color:#9fb4b0;
    border:1px solid rgba(138, 166, 170, .18);
    border-radius:5px;
    background:rgba(7, 20, 24, .42);
    box-shadow:none;
    cursor:pointer;
    transition:color .18s ease,
            border-color .18s ease,
            background .18s ease,
            transform .08s ease;
}

.rev-icon-btn:hover{
    color:#d8ece4;
    border-color:rgba(123, 197, 180, .34);
    background:rgba(12, 28, 29, .62);
}

.rev-icon-btn:active{
    transform:translateY(1px) scale(.96);
}

.rev-action-icon{
    margin-top: 8px;
    display:block;
    width:18px;
    height:18px;
    background:currentColor;
    -webkit-mask-position:center;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-size:contain;
    mask-position:center;
    mask-repeat:no-repeat;
    mask-size:contain;
}

.rev-action-icon-feather{
    -webkit-mask-image:url("/static/icons/feather.png");
    mask-image:url("/static/icons/feather.png");
}

.rev-action-icon-scales{
    -webkit-mask-image:url("/static/icons/compare.png");
    mask-image:url("/static/icons/compare.png");
}

/*==================================================
    STATS PAGE
==================================================*/

.stats-page{
    --stats-workspace-image:url("/static/images/main-darkforest2.webp");
    position:relative;
    min-height:100vh;
    padding:46px clamp(12px, 2.5vw, 48px) 48px;
}

.stats-page::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(
                to bottom,
                rgba(4, 12, 16, .68) 0,
                rgba(4, 12, 16, .76) 76px,
                rgba(4, 12, 16, .82) 168px,
                rgb(4 16 16 / .98) 100%
            ),
            radial-gradient(
                ellipse at 18% 0%,
                rgba(123, 197, 180, .14),
                transparent 42%
            ),
            radial-gradient(
                ellipse at 78% 12%,
                rgba(202, 167, 90, .085),
                transparent 34%
            ),
            var(--stats-workspace-image);
    background-size:cover;
    background-position:center;
}

.stats-workspace{
    overflow:visible;
}

.stats-hero{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(560px, 760px);
    align-items:end;
    justify-content:space-between;
    gap:18px;
    margin:22px 0 18px;
}

.stats-period-column{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.stats-hero-note{
    max-width:520px;
    margin:0 0 35px;
    color:#7e9895;
    font-size:15px;
    font-style:italic;
    line-height:1.55;
}

.stats-period-column .stats-periods{
    margin:0;
}

.stats-periods{
    display:flex;
    align-items:center;
    gap:8px;
    width:max-content;
    max-width:100%;
    margin:0;
    padding:4px;
    overflow-x:auto;
    overflow-y:hidden;
    border:1px solid rgba(150, 185, 190, .12);
    border-radius:7px;
    background:rgba(5, 16, 19, .42);
}

.stats-period-link{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:120px;
    min-height:38px;
    padding:0 16px;
    color:#91a09e;
    font-size:14px;
    white-space:nowrap;
    border:1px solid transparent;
    border-radius:5px;
    background:transparent;
    transition:color .18s ease,
            border-color .18s ease,
            background .18s ease,
            box-shadow .18s ease,
            transform .08s ease;
}

.stats-period-link:hover{
    color:#d8dfdc;
    border-color:rgba(123, 197, 180, .18);
    background:rgba(123, 197, 180, .055);
}

.stats-period-link.active{
    color:#dce8e3;
    border-color:rgb(123 197 191 / 0.28);
    background:linear-gradient(180deg, rgba(58, 105, 91, .12), rgb(13 39 39 / .42));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),
            0 0 18px rgba(80, 180, 153, .08);
}

.stats-period-link:active{
    transform:translateY(1px) scale(.985);
}

.stats-summary-grid{
    min-width:0;
    justify-self:end;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    width:100%;
    max-width:760px;
    margin:0;
}

.stats-summary-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
    min-height:98px;
    padding:16px 18px;
    border:1px solid rgba(150, 185, 190, .13);
    border-radius:7px;
    background:linear-gradient(180deg, rgb(9 25 25 / 0.82), rgb(6 18 19 / 0.88)),
            radial-gradient(ellipse at 20% 0%, rgba(123, 197, 180, .1), transparent 46%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),
            0 14px 30px rgba(0,0,0,.18);
}

.stats-summary-text{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    min-width:0;
}

.stats-summary-icon{
    flex:0 0 54px;
    width:50px;
    height:50px;
    margin:0;
    opacity:.78;
    background:radial-gradient(
                circle at 50% 30%,
                rgb(40 80 74 / .18) 0%,
                rgb(61 90 85 / .55) 45%,
                rgb(44 87 94 / .95) 100%
            ),
            linear-gradient(
                to bottom,
                rgb(180 255 241 / .7),
                rgb(149 198 198 / .95)
            );
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:contain;
}

.stats-summary-users-icon{
    width:54px;
    height:54px;
    -webkit-mask-image:url("/static/icons/cerberus-mini.png");
    mask-image:url("/static/icons/cerberus-mini.png");
}

.stats-summary-edits-icon{
    -webkit-mask-image:url("/static/icons/feather-pen.png");
    mask-image:url("/static/icons/feather-pen.png");
}

.stats-summary-approved-icon{
    -webkit-mask-image:url("/static/icons/game.png");
    mask-image:url("/static/icons/game.png");
}

.stats-summary-label{
    color:#94a29f;
    font-size:13px;
}

.stats-summary-text strong{
    margin-top:3px;
    color:#d8d9d2;
    font-family:"Cormorant Garamond", serif;
    font-size:32px;
    font-weight:400;
    line-height:1;
    letter-spacing:.04em;
    font-variant-numeric:lining-nums tabular-nums;
    font-feature-settings:"lnum" 1, "tnum" 1;
}

.stats-summary-note{
    margin-top:7px;
    color:#74ad91;
    font-size:12px;
    white-space:nowrap;
}

/*==================================================
    STATS PODIUM
==================================================*/

.stats-podium{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.18fr) minmax(0, 1fr);
    gap:0;
    align-items:end;
    overflow:visible;
    padding:38px 14px 26px;
    margin:0 0 12px;
}

.stats-podium-card{
    --laurel-image:url("/static/icons/Frame-Bronze.webp");
    --podium-bg-image:url("/static/images/Forest_Top.webp");
    --podium-corner-rgb:168, 115, 82;
    position:relative;
    isolation:isolate;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:232px;
    padding:48px 18px 24px;
    overflow:visible;
    border:1px solid rgba(138, 166, 170, .18);
    border-radius:7px;
    background:linear-gradient(180deg, rgba(7, 18, 20, .94), rgba(4, 12, 15, .98));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),
            0 16px 32px rgba(0,0,0,.22);
}

.stats-podium-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(3, 10, 12, .22), rgba(3, 10, 12, .64)),
            var(--podium-bg-image);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0.4;
}

.stats-podium-card::after{
    content:"";
    position:absolute;
    inset:10px;
    z-index:-1;
    pointer-events:none;
    opacity:.78;
    background:linear-gradient(to right, rgba(var(--podium-corner-rgb), .36), rgba(var(--podium-corner-rgb), .06) 72%, transparent) left top / 52px 1px no-repeat,
            linear-gradient(to bottom, rgba(var(--podium-corner-rgb), .36), rgba(var(--podium-corner-rgb), .06) 72%, transparent) left top / 1px 52px no-repeat,
            linear-gradient(to left, rgba(var(--podium-corner-rgb), .36), rgba(var(--podium-corner-rgb), .06) 72%, transparent) right top / 52px 1px no-repeat,
            linear-gradient(to bottom, rgba(var(--podium-corner-rgb), .36), rgba(var(--podium-corner-rgb), .06) 72%, transparent) right top / 1px 52px no-repeat,
            linear-gradient(to right, rgba(var(--podium-corner-rgb), .26), rgba(var(--podium-corner-rgb), .04) 72%, transparent) left bottom / 52px 1px no-repeat,
            linear-gradient(to top, rgba(var(--podium-corner-rgb), .26), rgba(var(--podium-corner-rgb), .04) 72%, transparent) left bottom / 1px 52px no-repeat,
            linear-gradient(to left, rgba(var(--podium-corner-rgb), .26), rgba(var(--podium-corner-rgb), .04) 72%, transparent) right bottom / 52px 1px no-repeat,
            linear-gradient(to top, rgba(var(--podium-corner-rgb), .26), rgba(var(--podium-corner-rgb), .04) 72%, transparent) right bottom / 1px 52px no-repeat;
}

.stats-podium-rank-1{
    --laurel-image:url("/static/icons/Frame-Gold.webp");
    --rank-image:url("/static/icons/Top-Gold.webp");
    --podium-corner-rgb:202, 167, 90;
    grid-column:2;
    order:2;
    z-index:5;
    min-height:280px;
    margin:0 -30px;
    padding-top:50px;
    border-color:rgba(202, 167, 90, .46);
    background:linear-gradient(180deg, rgba(16, 30, 27, .97), rgba(4, 12, 14, .99));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),
            0 22px 46px rgba(0,0,0,.32),
            0 0 0 1px rgba(202, 167, 90, .08),
            0 0 34px rgba(202, 167, 90, .11);
}

.stats-podium-rank-1::before{
    background:linear-gradient(180deg, rgba(22, 34, 28, .28), rgba(4, 12, 14, .78)),
            radial-gradient(ellipse at 50% 12%, rgba(202, 167, 90, .18), transparent 46%),
            radial-gradient(ellipse at 50% 55%, rgba(123, 197, 180, .075), transparent 48%),
            var(--podium-bg-image);
    background-size:cover;
    background-position:center;
    opacity:.42;
}

.stats-podium-rank-1::after{
    inset:9px;
    opacity:.95;
    background:linear-gradient(to right, rgba(var(--podium-corner-rgb), .64), rgba(var(--podium-corner-rgb), .13) 72%, transparent) left top / 64px 1px no-repeat,
            linear-gradient(to bottom, rgba(var(--podium-corner-rgb), .64), rgba(var(--podium-corner-rgb), .13) 72%, transparent) left top / 1px 64px no-repeat,
            linear-gradient(to left, rgba(var(--podium-corner-rgb), .64), rgba(var(--podium-corner-rgb), .13) 72%, transparent) right top / 64px 1px no-repeat,
            linear-gradient(to bottom, rgba(var(--podium-corner-rgb), .64), rgba(var(--podium-corner-rgb), .13) 72%, transparent) right top / 1px 64px no-repeat,
            linear-gradient(to right, rgba(var(--podium-corner-rgb), .48), rgba(var(--podium-corner-rgb), .08) 72%, transparent) left bottom / 64px 1px no-repeat,
            linear-gradient(to top, rgba(var(--podium-corner-rgb), .48), rgba(var(--podium-corner-rgb), .08) 72%, transparent) left bottom / 1px 64px no-repeat,
            linear-gradient(to left, rgba(var(--podium-corner-rgb), .48), rgba(var(--podium-corner-rgb), .08) 72%, transparent) right bottom / 64px 1px no-repeat,
            linear-gradient(to top, rgba(var(--podium-corner-rgb), .48), rgba(var(--podium-corner-rgb), .08) 72%, transparent) right bottom / 1px 64px no-repeat;
}

.stats-podium-rank-2{
    --laurel-image:url("/static/icons/Frame-Silver.webp");
    --rank-image:url("/static/icons/Top-Silver.webp");
    --podium-corner-rgb:172, 190, 190;
    grid-column:1;
    order:1;
    z-index:2;
    transform:translate(30px, 20px);
    border-color:rgba(172, 190, 190, .2);
}

.stats-podium-rank-3{
    --laurel-image:url("/static/icons/Frame-Bronze.webp");
    --rank-image:url("/static/icons/Top-Bronze2.webp");
    --podium-corner-rgb:168, 115, 82;
    grid-column:3;
    order:3;
    z-index:2;
    transform:translate(-30px, 20px);
    border-color:rgba(168, 115, 82, .24);
}

.stats-rank-diamond{
    position:absolute;
    top:-26px;
    left:50%;
    z-index:8;
    width:68px;
    height:68px;
    border:0;
    background:var(--rank-image) center / contain no-repeat;
    box-shadow:none;
    transform:translateX(-50%);
    pointer-events:none;
}

.stats-rank-diamond::before{
    content:none;
}

.stats-rank-diamond span{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

.stats-podium-content{
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    text-align:center;
}

.stats-podium-emblem{
    position:relative;
    display:grid;
    place-items:center;
    width:224px;
    max-width:100%;
    height:122px;
    margin:0 auto 8px;
}

.stats-podium-rank-1 .stats-podium-emblem{
    width:252px;
    height:142px;
}

.stats-laurel-placeholder{
    position:absolute;
    z-index:1;
    top:16px;
    left:18px;
    width:78px;
    height:103px;
    pointer-events:none;
    opacity:.92;
    border:0;
    border-radius:0;
    background:var(--laurel-image) center / contain no-repeat;
    filter:drop-shadow(0 0 8px rgba(202, 167, 90, .10));
}

.stats-laurel-placeholder.stats-laurel-right{
    left:auto;
    right:18px;
    transform:scaleX(-1);
}

.stats-podium-rank-1 .stats-laurel-placeholder{
    top:18px;
    left:16px;
    width:88px;
    height:126px;
    opacity:1;
}

.stats-podium-rank-1 .stats-laurel-placeholder.stats-laurel-right{
    left:auto;
    right:16px;
}

.stats-avatar{
    position:relative;
    z-index:3;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:50%;
    background:radial-gradient(circle at 50% 24%, rgba(123, 197, 180, .13), transparent 42%),
            rgba(4, 15, 18, .86);
}

.stats-podium-avatar{
    width:94px;
    height:94px;
    border:1.8px solid rgba(202, 167, 90, .32);
    box-shadow:inset 0 0 0 5px rgba(255,255,255,.025),
            0 0 0 1px rgba(123, 197, 180, .08),
            0 10px 28px rgba(0,0,0,.26);
}

.stats-podium-rank-1 .stats-podium-avatar{
    width:114px;
    height:114px;
    border-color:rgba(202, 167, 90, .54);
    box-shadow:inset 0 0 0 6px rgba(255,255,255,.03),
            0 0 0 1px rgba(202, 167, 90, .16),
            0 14px 34px rgba(0,0,0,.3);
}

.stats-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.stats-default-avatar{
    width:58%;
    height:58%;
    background:#9fb7b2;
    opacity:.82;
    -webkit-mask:url("/static/icons/herne-the-hunter.png") center / contain no-repeat;
    mask:url("/static/icons/herne-the-hunter.png") center / contain no-repeat;
}

.stats-podium-card h2{
    position:relative;
    z-index:3;
    margin-top:6px;
    max-width:100%;
    color:#d9d8cf;
    font-family:"Cormorant Garamond", serif;
    font-size:32px;
    font-weight:400;
    line-height:1.1;
    padding-bottom:.08em;
    margin-bottom:-.08em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-shadow:0 4px 12px rgba(0,0,0,.35);
}

.stats-podium-rank-1 h2{
    font-size:40px;
    color:#e0d9c9;
}

.stats-profile-avatar-link,
.stats-profile-name-link,
.stats-table-user-link{
    color:inherit;
    text-decoration:none;
}

.stats-profile-avatar-link{
    display:block;
}

.stats-profile-name-link:hover,
.stats-profile-name-link:focus-visible,
.stats-table-user-link:hover .stats-table-name,
.stats-table-user-link:focus-visible .stats-table-name{
    color:#bfe1d8;
}

.stats-profile-avatar-link:focus-visible,
.stats-profile-name-link:focus-visible,
.stats-table-user-link:focus-visible{
    outline:2px solid rgba(123, 197, 180, .48);
    outline-offset:4px;
    border-radius:8px;
}

.stats-user-title{
    position:relative;
    z-index:3;
    margin-top:8px;
    max-width:100%;
    color:#8ea09b;
    font-size:13px;
    letter-spacing:.02em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.stats-podium-rank-1 .stats-user-title{
    color:#9eaaa6;
}

.stats-accepted-count{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:12px;
    color:#c5a96d;
    font-size:20px;
    line-height:1;
}

.stats-podium-rank-1 .stats-accepted-count{
    margin-top:14px;
    color:#d0b471;
    font-size:22px;
}

.stats-accepted-count small{
    color:#7f918d;
    font-size:12px;
    line-height:1;
}

.stats-score-mark{
    display:inline-block;
    width:8px;
    height:8px;
    flex:0 0 8px;
    border:1px solid rgba(202, 167, 90, .78);
    transform:rotate(45deg);
    background:rgba(202, 167, 90, .12);
    box-shadow:0 0 10px rgba(202, 167, 90, .15);
}

/*==================================================
    STATS TABLE
==================================================*/

.stats-rating-section{
    margin-top:6px;
}

.stats-table-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:10px;
}

.stats-table-head h2{
    color:#d7dad4;
    font-family:"Cormorant Garamond", serif;
    font-size:32px;
    font-weight:400;
    line-height:1;
}

.stats-table-head p{
    margin-top:4px;
    color:#83918f;
    font-size:13px;
}

.stats-table-wrap{
    overflow:hidden;
    border:1px solid rgba(138, 166, 170, .22);
    border-radius:7px;
    background:linear-gradient(180deg, rgb(7 25 23 / 0.78), rgb(6 20 21 / 0.84)),
            radial-gradient(ellipse at 14% 0%, rgba(117, 173, 145, .075), transparent 44%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),
            0 12px 26px rgba(0,0,0,.18);
}

.stats-table{
    width:100%;
    border-collapse:collapse;
}

.stats-table th{
    padding:15px 18px;
    color:#8fa09d;
    font-size:13px;
    font-weight:400;
    text-align:left;
    border-bottom:1px solid rgba(138, 166, 170, .18);
    background:rgba(8, 22, 24, .56);
}

.stats-table td{
    padding:13px 18px;
    color:#cfd8d7;
    border-bottom:1px solid rgba(138, 166, 170, .12);
}

.stats-table tbody tr:last-child td{
    border-bottom:0;
}

.stats-table tbody tr{
    transition:background .18s ease, border-color .18s ease;
}

.stats-table tbody tr:hover{
    background:rgba(123, 197, 180, .045);
}

.stats-place-cell{
    width:110px;
}

.stats-place-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    color:#d6d2c6;
    border:1px solid rgba(150, 185, 190, .16);
    border-radius:50%;
    background:rgba(5, 16, 19, .54);
}

.stats-user-cell{
    min-width:220px;
    vertical-align:middle;
}

.stats-table-user-link{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.stats-table-avatar{
    flex:0 0 38px;
    width:38px;
    height:38px;
    border:1px solid rgba(150, 185, 190, .17);
}

.stats-table-name{
    color:#d7dedc;
    font-size:16px;
}

.stats-title-cell{
    color:#9eaaa7;
}

.stats-count-cell{
    color:#c8ad72;
    white-space:nowrap;
}

.stats-count-cell .stats-score-mark{
    margin-right:8px;
    vertical-align:middle;
}

.stats-count-cell span:last-child{
    vertical-align:middle;
}

.stats-empty-cell{
    padding:34px 18px !important;
    color:#8e9998;
    text-align:center;
}

/*==================================================
    STATS RESPONSIVE
==================================================*/

@media (max-width:1180px){
    .stats-hero{
        grid-template-columns:1fr;
        align-items:start;
    }

    .stats-summary-grid{
        justify-self:stretch;
        max-width:none;
    }
}

@media (max-width:900px){
    .stats-podium{
        grid-template-columns:1fr;
        gap:14px;
        padding:34px 0 18px;
    }

    .stats-podium-rank-1,
    .stats-podium-rank-2,
    .stats-podium-rank-3{
        grid-column:1;
        order:initial;
        z-index:1;
        min-height:232px;
        margin:0;
        transform:none;
    }

    .stats-podium-rank-1{
        order:1;
        min-height:252px;
    }

    .stats-podium-rank-2{
        order:2;
    }

    .stats-podium-rank-3{
        order:3;
    }

    .stats-table-wrap{
        overflow-x:auto;
    }

    .stats-table{
        min-width:720px;
    }
}

@media (max-width:820px){
    .stats-page{
        padding:176px 14px 36px;
    }

    .stats-summary-grid{
        grid-template-columns:1fr;
    }

    .stats-summary-card{
        min-height:88px;
    }
}

@media (max-width:560px){
    .stats-periods{
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
    }

    .stats-period-link{
        min-width:0;
        padding:0 10px;
    }

    .stats-podium-card{
        padding-left:14px;
        padding-right:14px;
    }

    .stats-podium-card h2{
        font-size:29px;
    }

    .stats-podium-rank-1 h2{
        font-size:35px;
    }

    .stats-podium-emblem{
        width:204px;
        height:108px;
    }

    .stats-podium-rank-1 .stats-podium-emblem{
        width:222px;
        height:124px;
    }

    .stats-laurel-placeholder{
        top:8px;
        left:20px;
        width:58px;
        height:92px;
        opacity:.86;
    }

    .stats-laurel-placeholder.stats-laurel-right{
        left:auto;
        right:20px;
    }

    .stats-podium-rank-1 .stats-laurel-placeholder{
        top:7px;
        left:18px;
        width:66px;
        height:108px;
    }

    .stats-podium-rank-1 .stats-laurel-placeholder.stats-laurel-right{
        left:auto;
        right:18px;
    }

    .stats-podium-avatar{
        width:86px;
        height:86px;
    }

    .stats-podium-rank-1 .stats-podium-avatar{
        width:102px;
        height:102px;
    }
}

.revisions-workspace .replace-preview{
    margin-top:44px;
}

/*==================================================
    MODERATION HEADER
==================================================*/

.revisions-workspace .moderation-clean-topbar{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    margin:0 0 22px !important;
    padding:0 0 14px !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

.revisions-workspace .moderation-clean-topbar::before{
    content:none !important;
    display:none !important;
}

.revisions-workspace .moderation-clean-tabs{
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:clamp(22px, 4vw, 64px);
    width:100%;
    min-width:0;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

.revisions-workspace .moderation-clean-tabs .moderation-tab{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    column-gap:7px;
    min-width:0 !important;
    width:auto !important;
    min-height:34px !important;
    height:auto !important;
    padding:0 2px 7px !important;
    color:#8e9998;
    font-family:"Lora", serif;
    font-size:16px;
    line-height:1.2;
    white-space:nowrap;
    text-decoration:none;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    opacity:.9;
    transform:none !important;
    transition:color .18s ease, opacity .18s ease;
}

.revisions-workspace .moderation-clean-tabs .moderation-tab::before,
.revisions-workspace .moderation-clean-tabs .moderation-tab::after{
    content:none !important;
    display:none !important;
}

.revisions-workspace .moderation-clean-tabs .moderation-tab-label{
    position:relative;
    display:inline-block;
}

.revisions-workspace .moderation-clean-tabs .moderation-tab-label::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-7px;
    width:calc(100% + 18px);
    height:1px;
    transform:translateX(-50%) scaleX(0);
    transform-origin:center;
    background:linear-gradient(
            90deg,
            transparent,
            rgba(123, 197, 180, .78),
            transparent
        );
    opacity:.88;
    transition:transform .16s ease, opacity .16s ease;
}

.revisions-workspace .moderation-clean-tabs .moderation-tab:hover{
    color:#dce9e5;
    opacity:1;
}

.revisions-workspace .moderation-clean-tabs .moderation-tab:hover .moderation-tab-label::after,
.revisions-workspace .moderation-clean-tabs .moderation-tab.active .moderation-tab-label::after{
    transform:translateX(-50%) scaleX(1);
}

.revisions-workspace .moderation-clean-tabs .moderation-tab.active{
    color:#c8d9d4;
    opacity:1;
}

.revisions-workspace .moderation-clean-tabs .moderation-tab:active{
    transform:none !important;
}

.revisions-workspace .moderation-clean-tabs .moderation-tab-arrow{
    display:inline-block;
    color:#7f9993;
    line-height:1;
}

.revisions-workspace .moderation-tab-panel.is-hidden{
    display:none !important;
}

.revisions-workspace .glossary-suggestion-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

.revisions-workspace .glossary-suggestion-grid label{
    display:grid;
    gap:6px;
    min-width:0;
    color:#91b6ae;
    font-family:"Lora", serif;
    font-size:12px;
    font-weight:600;
}

.revisions-workspace .glossary-suggestion-grid .full{
    grid-column:1 / -1;
}

.revisions-workspace input.glossary-suggestion-input,
.revisions-workspace textarea.glossary-suggestion-input{
    font:500 14px "Lora", serif;
    line-height:1.5;
    outline:none;
    resize:vertical;
}

.revisions-workspace .glossary-suggestion-grid .glossary-section-field{
    position:relative;
}

.revisions-workspace .glossary-suggestion-section-list[hidden]{
    display:none !important;
}

.revisions-workspace .glossary-suggestion-section-list{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 6px);
    z-index:30;
    max-height:230px;
    overflow:auto;
    padding:6px;
    border:1px solid rgba(123, 197, 180, .2);
    border-radius:7px;
    background:rgba(5, 18, 21, .98);
    box-shadow:0 18px 34px rgba(0, 0, 0, .44);
}

.revisions-workspace .glossary-suggestion-section-list button{
    display:grid;
    gap:3px;
    width:100%;
    padding:8px 9px;
    border:0;
    border-radius:5px;
    color:#dce9e5;
    background:transparent;
    text-align:left;
    cursor:pointer;
}

.revisions-workspace .glossary-suggestion-section-list button:hover{
    background:rgba(111, 200, 179, .12);
}

.revisions-workspace .glossary-suggestion-section-list strong{
    font-size:13px;
    font-weight:700;
}

.revisions-workspace .glossary-suggestion-section-list span{
    color:#87a79f;
    font-size:11px;
}

.revisions-workspace .glossary-similar-panel{
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid rgba(150, 185, 190, .11);
}

.revisions-workspace .glossary-similar-title{
    margin-bottom:9px;
    color:#9bc8bd;
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
}

.revisions-workspace .glossary-similar-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
}

.revisions-workspace .glossary-similar-loading{
    grid-column:1 / -1;
    min-height:42px;
    padding:11px 12px;
    color:#7f9993;
    border:1px dashed rgba(150, 185, 190, .14);
    border-radius:6px;
    background:rgba(4, 15, 18, .24);
    font-size:12px;
}

.revisions-workspace .glossary-similar-loading.is-error{
    color:#d1a19b;
}

.revisions-workspace .glossary-similar-loading button{
    margin-left:6px;
    padding:0;
    color:#9bc8bd;
    border:0;
    background:transparent;
    font:inherit;
    text-decoration:underline;
    cursor:pointer;
}

.revisions-workspace .glossary-similar-column{
    min-width:0;
}

.revisions-workspace .glossary-similar-lang{
    margin-bottom:6px;
    color:#7f9993;
    font-size:12px;
    font-weight:700;
}

.revisions-workspace .glossary-similar-list{
    display:grid;
    gap:6px;
}

.revisions-workspace .glossary-similar-item{
    display:grid;
    gap:5px;
    min-width:0;
    padding:8px 9px;
    border:1px solid rgba(150, 185, 190, .12);
    border-radius:6px;
    color:#dce9e5;
    background:rgba(4, 15, 18, .36);
    text-decoration:none;
}

.revisions-workspace .glossary-similar-item:hover{
    border-color:rgba(123, 197, 180, .26);
    background:rgba(8, 30, 31, .52);
}

.revisions-workspace .glossary-similar-item-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.revisions-workspace .glossary-similar-id{
    color:#8fb8b0;
    font-size:12px;
    font-weight:700;
}

.revisions-workspace .glossary-similar-kind{
    flex:0 0 auto;
    padding:2px 6px;
    border-radius:999px;
    color:#a8cfc6;
    background:rgba(123, 197, 180, .1);
    font-size:10px;
    font-weight:700;
}

.revisions-workspace .glossary-similar-kind[data-kind="exact"]{
    color:#ead18e;
    background:rgba(216, 172, 77, .13);
}

.revisions-workspace .glossary-similar-values{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    font-size:12px;
    line-height:1.35;
    white-space:nowrap;
}

.revisions-workspace .glossary-similar-values span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.revisions-workspace .glossary-similar-values span + span::before{
    content:"·";
    margin-right:6px;
    color:#65837d;
}

.revisions-workspace .glossary-similar-category,
.revisions-workspace .glossary-similar-empty,
.revisions-workspace .glossary-similar-more{
    color:#7f9993;
    font-size:11px;
    line-height:1.35;
}

.revisions-workspace .glossary-similar-empty{
    padding:9px;
    border:1px dashed rgba(150, 185, 190, .14);
    border-radius:6px;
    background:rgba(4, 15, 18, .24);
}

.glossary-suggestion-readonly-value{
    user-select:text;
    -webkit-user-select:text;
    min-height:40px;
    padding:10px 12px;
    color:#a9bab7;
    font-size:13px;
    border:1px solid rgba(150, 185, 190, .1);
    border-radius:6px;
    background:rgba(7, 18, 22, .48);
}

.revisions-workspace .history-field-label{
    display:inline-flex;
    align-items:center;
    color:#9ba9a7;
    font-size:14px;
    font-weight:500;
    line-height:1;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.revisions-workspace .history-field-label::before{
    content:"〉";
    margin-right:6px;
    color:rgb(123 197 191 / .66);
    font-size:17px;
    line-height:1;
    opacity:.8;
}

.glossary-suggestion-comment{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}

.revision-history-auto{
    color:#d8c184;
    border-color:rgba(202, 167, 90, .24);
    background:rgba(106, 78, 24, .12);
}

.revisions-workspace .glossary-suggestion-input[readonly]{
    user-select:text;
    -webkit-user-select:text;
    color:#a9bab7;
    border-color:rgba(150, 185, 190, .1);
    background:rgba(7, 18, 22, .48);
}


/* Term history keeps one structured term module instead of four separate blocks. */
.revisions-workspace .glossary-term-history-layout{
    overflow:hidden;
    border:1px solid rgba(150, 185, 190, .16);
    border-radius:6px;
    background:rgb(6 19 22 / .72);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
}

.revisions-workspace .glossary-term-history-languages{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.revisions-workspace .glossary-term-history-language{
    min-width:0;
    padding:15px 16px 16px;
}

.revisions-workspace .glossary-term-history-language + .glossary-term-history-language{
    border-left:1px solid rgba(150, 185, 190, .13);
}

.revisions-workspace .glossary-term-history-text{
    min-height:24px;
    color:#d6dfdd;
    font-family:"Lora", serif;
    font-size:15px;
    line-height:1.5;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
    user-select:text;
    -webkit-user-select:text;
}

.revisions-workspace .glossary-term-history-comments{
    margin-top:38px;
}

.revisions-workspace .glossary-term-history-comments > .attachments:first-child .block-head{
    margin-top:0;
}

.revisions-workspace .glossary-term-history-category{
    display:flex;
    align-items:baseline;
    gap:16px;
    min-width:0;
    padding:10px 16px 11px;
    border-bottom:1px solid rgba(150, 185, 190, .13);
    background:rgba(111, 200, 179, .035);
}

.revisions-workspace .glossary-term-history-category .block-head{
    flex:0 0 auto;
    margin:0;
}

.revisions-workspace .glossary-term-history-category-value{
    min-width:0;
    color:#bed0cc;
    font-family:"Lora", serif;
    font-size:13px;
    line-height:1.45;
    overflow-wrap:anywhere;
    user-select:text;
    -webkit-user-select:text;
}

@media (max-width:760px){
    .revisions-workspace .glossary-term-history-languages{
        grid-template-columns:1fr;
    }

    .revisions-workspace .glossary-term-history-language + .glossary-term-history-language{
        border-top:1px solid rgba(150, 185, 190, .13);
        border-left:0;
    }

    .revisions-workspace .glossary-term-history-category{
        align-items:flex-start;
        flex-direction:column;
        gap:7px;
    }
}


/* Term history card compact look */
.terms-history .glossary-similar-panel{
    display:none;
}

.revisions-workspace .glossary-term-history-value{
    display:block;
    width:100%;
    min-height:52px;
    padding:14px 18px;
    color:#d6dfdd;
    font-family:"Lora", serif;
    font-size:15px;
    line-height:1.55;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
    border:1px solid rgba(150, 185, 190, .12);
    border-left:2px solid rgb(91 143 137 / .72);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
    user-select:text;
    -webkit-user-select:text;
}

/* Replace history */
.replace-history-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.replace-history-card .revision-history-meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px 16px;
}

.replace-history-diff{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    padding:12px 0 4px;
}

.replace-history-column{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
}

.replace-history-label{
    color:#7f8f8c;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.replace-history-value{
    min-height:52px;
    padding:14px 18px;
    color:#d6dfdd;
    font-family:"Lora", serif;
    font-size:15px;
    line-height:1.55;
    word-break:break-word;
    border:1px solid rgba(150, 185, 190, .12);
    border-left:2px solid rgb(91 143 137 / .72);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
    user-select:text;
    -webkit-user-select:text;
}

.replace-history-details{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    margin-top:12px;
}

.replace-history-filter,
.replace-history-summary{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
    padding:0;
    border:0;
    background:none;
    box-shadow:none;
}

.replace-history-result{
    display:flex;
    align-items:center;
    flex:1 1 auto;
    min-height:52px;
    padding:14px 18px;
    color:#d6dfdd;
    font-family:"Lora", serif;
    font-size:15px;
    line-height:1.55;
    border:1px solid rgba(150, 185, 190, .12);
    border-left:2px solid rgb(91 143 137 / .72);
    border-radius:6px;
    background:rgb(6 19 22 / .62);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.24);
}

.replace-history-result strong{
    color:#eef7f3;
    font-weight:600;
}

.replace-history-filter-values{
    display:grid;
    flex:1 1 auto;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:1px;
    margin:0;
    overflow:hidden;
    border:1px solid rgba(150, 185, 190, .12);
    border-left:2px solid rgb(91 143 137 / .72);
    border-radius:6px;
    background:rgb(6 19 22 / .62);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.24);
}

.replace-history-filter-values > div{
    min-width:0;
    padding:13px 16px;
    background:transparent;
}

.replace-history-filter-values > div + div{
    border-left:1px solid rgba(150, 185, 190, .1);
}

.replace-history-filter-values dt{
    margin:0 0 4px;
    color:#718783;
    font-size:12px;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.replace-history-filter-values dd{
    margin:0;
    color:#c3d1ce;
    font-family:"Lora", serif;
    font-size:14.5px;
    line-height:1.45;
    overflow-wrap:anywhere;
}

@media (max-width:760px){
    .replace-history-diff,
    .replace-history-details{
        grid-template-columns:1fr;
    }

    .replace-history-filter-values{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .replace-history-filter-values > div:nth-child(3){
        border-left:0;
    }

    .replace-history-filter-values > div:nth-child(n + 3){
        border-top:1px solid rgba(150, 185, 190, .1);
    }
}

.revisions-workspace.admin-workspace .admin-topbar{
    justify-content:stretch;
    margin-bottom:18px !important;
}

.revisions-workspace.admin-workspace .admin-tabs{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items:center;
    gap:16px;
    width:100%;
    min-width:0;
}

.revisions-workspace.admin-workspace .admin-tabs .moderation-tab:first-child{
    justify-self:start;
}

.revisions-workspace.admin-workspace .admin-tabs .moderation-tab:last-child{
    justify-self:end;
}

@media (max-width:760px){
    .revisions-workspace .moderation-clean-topbar{
        justify-content:flex-start;
        margin-bottom:18px !important;
        overflow-x:auto;
        overflow-y:hidden;
        scrollbar-width:none;
    }

    .revisions-workspace .moderation-clean-topbar::-webkit-scrollbar{
        display:none;
    }

    .revisions-workspace .moderation-clean-tabs{
        justify-content:flex-start;
        gap:24px;
        min-width:max-content;
    }

    .revisions-workspace.admin-workspace .admin-topbar{
        overflow:visible;
    }

    .revisions-workspace.admin-workspace .admin-tabs{
        min-width:0;
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
        gap:10px;
    }

    .revisions-workspace.admin-workspace .admin-tabs .moderation-tab{
        font-size:15px;
    }

    .revisions-workspace .glossary-suggestion-grid{
        grid-template-columns:1fr;
    }

    .revisions-workspace .glossary-similar-grid{
        grid-template-columns:1fr;
    }
}

/*==================================================
    ADMINISTRATION
==================================================*/

.admin-page{
    --translate-workspace-image:url("/static/images/main-darkforest2.webp");
}

.translate-workspace.admin-workspace{
    min-height:max(520px, calc(100vh - 160px));
}

.admin-shell{
    width:100%;
}

.admin-topbar{
    margin-bottom:18px !important;
}

.admin-panel{
    overflow:visible;
    border:1px solid rgba(138, 166, 170, .22);
    border-radius:7px;
    background:linear-gradient(180deg, rgb(7 25 23 / .78), rgb(6 20 21 / .84)),
            radial-gradient(ellipse at 14% 0%, rgba(117, 173, 145, .075), transparent 44%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),
            0 12px 26px rgba(0,0,0,.18);
}

.admin-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:58px;
    padding:16px 18px 14px;
    border-bottom:1px solid rgba(138, 166, 170, .16);
    background:rgba(8, 22, 24, .42);
}

.admin-panel-head h1{
    color:#d7dad4;
    font-family:"Cormorant Garamond", serif;
    font-size:34px;
    font-weight:400;
    line-height:1;
}

.admin-user-search{
    position:relative;
    display:grid;
    grid-template-columns:minmax(220px, 340px) minmax(88px, auto);
    gap:8px;
    align-items:center;
    margin-left:auto;
}

.admin-user-search-input{
    width:100%;
    height:40px;
    min-width:0;
    padding:0 38px 0 13px;
    color:#cdd8d6;
    font:500 14px "Lora", serif;
    border:1px solid rgba(150, 185, 190, .22);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
    outline:none;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
    -webkit-appearance:none;
    appearance:none;
    transition:border-color .2s ease, background .2s ease, box-shadow .45s ease;
}

.admin-user-search-input::placeholder{
    color:rgba(182, 195, 193, .45);
}

.admin-user-search-input:hover,
.admin-user-search-input:focus,
.admin-user-search-input:focus-visible{
    border-color:var(--field-focus-border);
    background:linear-gradient(180deg, var(--field-hover-bg), transparent),
            rgb(6 21 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .08),
            0 0 18px rgba(80, 180, 153, .08);
}

.admin-user-search-input::-webkit-search-cancel-button,
.admin-user-search-input::-webkit-search-decoration{
    display:none;
}


.admin-user-search-submit{
    height:40px;
    padding:0 16px;
    color:#d8e2df;
    font-family:"Lora", serif;
    font-size:14px;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:6px;
    background:rgba(10, 31, 31, .72);
    cursor:pointer;
    transition:border-color .18s ease, background .18s ease, color .18s ease;
}

.admin-user-search-submit:hover{
    color:#eef4ef;
    border-color:rgba(123, 197, 180, .32);
    background:rgba(13, 42, 40, .84);
}

.admin-table-wrap{
    width:100%;
    overflow:visible;
}

.admin-table{
    width:100%;
    min-width:1040px;
    border-collapse:collapse;
}

.admin-table th{
    padding:15px 18px;
    color:#8fa09d;
    font-size:13px;
    font-weight:400;
    text-align:left;
    border-bottom:1px solid rgba(138, 166, 170, .18);
    background:rgba(8, 22, 24, .48);
}

.admin-sort-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:inherit;
    text-decoration:none;
    transition:color .18s ease;
}

.admin-sort-link:hover,
.admin-sort-link:focus-visible,
.admin-sort-link.is-active{
    color:#c8ddd7;
}

.admin-sort-link:focus-visible{
    border-radius:4px;
    outline:2px solid rgba(123, 197, 180, .34);
    outline-offset:3px;
}

.admin-sort-flags{
    display:inline-flex;
    flex:0 0 8px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    width:8px;
    height:16px;
    color:rgba(143, 160, 157, .42);
}

.admin-sort-flags > span{
    display:block;
    width:0;
    height:0;
    border-right:3.5px solid transparent;
    border-left:3.5px solid transparent;
}

.admin-sort-up{
    border-bottom:4px solid currentColor;
}

.admin-sort-down{
    border-top:4px solid currentColor;
}

.admin-sort-flags .is-active{
    color:#7bc5b4;
    filter:drop-shadow(0 0 4px rgba(123, 197, 180, .32));
}

.admin-table td{
    padding:13px 18px;
    color:#cfd8d7;
    border-bottom:1px solid rgba(138, 166, 170, .12);
    vertical-align:middle;
}

.admin-table tbody tr:last-child td{
    border-bottom:0;
}

.admin-table tbody tr{
    transition:background .18s ease;
}

.admin-table tbody tr:hover{
    background:rgba(123, 197, 180, .045);
}

.admin-table code{
    color:#aebfbc;
    font-family:inherit;
}

.admin-role{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    color:#c8d5d2;
    border:1px solid rgba(150, 185, 190, .16);
    border-radius:12px;
    background:rgba(5, 16, 19, .54);
}

.admin-account-status{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#8fc6b6;
    font-size:13px;
    white-space:nowrap;
}

.admin-account-status::before{
    width:7px;
    height:7px;
    content:"";
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 9px currentColor;
}

.admin-account-status.is-banned{
    color:#d88d88;
}

.admin-ban-btn{
    min-height:38px;
    padding:0 13px;
    color:#dda09b;
    font-family:"Lora", serif;
    font-size:13px;
    border:1px solid rgba(200, 100, 94, .28);
    border-radius:6px;
    background:rgba(74, 24, 24, .22);
    cursor:pointer;
    transition:border-color .18s ease, background .18s ease, color .18s ease;
}

.admin-ban-btn:hover{
    color:#efb5b0;
    border-color:rgba(218, 113, 106, .46);
    background:rgba(92, 31, 30, .32);
}

.admin-ban-btn.is-unban{
    color:#9bcfbe;
    border-color:rgba(123, 197, 180, .28);
    background:rgba(20, 70, 59, .2);
}

.admin-ban-btn.is-unban:hover{
    color:#b9e0d4;
    border-color:rgba(123, 197, 180, .45);
    background:rgba(27, 82, 70, .3);
}

.admin-role-select{
    min-width:150px;
    height:38px;
    padding:0 34px 0 12px;
    color:#d6dfdd;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:6px;
    background:rgba(7, 20, 24, .72);
    outline:none;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.admin-role-dropdown{
    width:150px;
    height:38px;
    min-height:38px;
    max-height:38px;
}

.admin-role-dropdown .custom-dropdown{
    position:relative;
    width:100%;
    height:38px;
}

.admin-role-dropdown .dropdown-btn{
    width:100%;
    height:38px;
    min-height:38px;
    padding:0 34px 0 12px;
    color:#d6dfdd;
    font-family:"Lora", serif;
    font-size:14px;
    text-align:left;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:6px;
    background:rgba(7, 20, 24, .72);
    cursor:pointer;
}

.admin-role-dropdown .dropdown-menu{
    max-height:220px;
    overflow-y:auto;
    overflow-x:hidden;
    border-radius:6px;
}

.admin-role-select:hover,
.admin-role-select:focus{
    border-color:rgba(123, 197, 180, .32);
    background:rgba(8, 25, 27, .78);
    box-shadow:0 0 0 1px rgba(123, 197, 180, .06),
            0 0 14px rgba(80, 180, 162, .1);
}

.admin-muted{
    color:#788986;
    font-size:14px;
}

.admin-empty-cell{
    padding:34px 18px !important;
    color:#8e9998 !important;
    text-align:center;
}

@media (max-width:820px){
    .admin-page{
        padding:176px 14px 36px;
    }

    .admin-panel-head{
        align-items:stretch;
        flex-direction:column;
    }

    .admin-user-search{
        grid-template-columns:minmax(0, 1fr) minmax(82px, auto);
        width:100%;
        margin-left:0;
    }

    .admin-table-wrap{
        overflow-x:auto;
        overflow-y:visible;
    }

    .admin-panel-head h1{
        font-size:30px;
    }
}

/*==================================================
    GLOSSARY PAGE V2
==================================================*/

.glossary-page{
    --glossary-line:rgba(150, 185, 190, .13);
    --glossary-line-soft:rgba(150, 185, 190, .08);
    --glossary-field:rgba(4, 15, 18, .62);
    min-height:100vh;
    padding:46px clamp(12px, 2.5vw, 48px) 48px;
}

.glossary-page::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(4, 13, 16, .72), rgba(4, 13, 16, .96) 72%, rgba(4, 13, 16, .99)),
            url("/static/images/main-darkforest2.webp") center / cover no-repeat;
}

.glossary-workspace{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:none;
    height:max(720px, calc(100dvh - 104px));
    min-height:720px;
    margin:0 auto;
    border:1px solid var(--glossary-line);
    border-radius:8px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(8, 22, 25, .84), rgba(5, 15, 18, .92));
    box-shadow:0 24px 70px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter:blur(18px);
}

.glossary-workspace::after{
    display:none;
}

.glossary-topbar{
    display:grid;
    grid-template-columns:minmax(320px, 1fr) minmax(220px, 300px) 126px;
    gap:10px;
    align-items:start;
    min-height:66px;
    padding:18px 12px 64px;
    border-bottom:1px solid var(--glossary-line-soft);
    background:rgba(5, 16, 19, .72);
}

.glossary-add-form input,
.glossary-add-form select,
.glossary-add-form textarea{
    width:100%;
    min-width:0;
    color:#d1dddb;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:6px;
    background:var(--glossary-field);
    outline:none;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.24);
    transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.glossary-add-form input:focus,
.glossary-add-form select:focus,
.glossary-add-form textarea:focus{
    border-color:rgba(111, 200, 179, .38);
    background:rgba(7, 24, 26, .78);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.24), 0 0 0 1px rgba(111, 200, 179, .08);
}

.glossary-shell{
    display:grid;
    grid-template-columns:minmax(226px, 286px) minmax(620px, 1fr);
    flex:1 1 auto;
    height:auto;
    min-height:0;
}

.glossary-sidebar,
.glossary-main{
    font-family:"Lora", sans-serif;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
}

.glossary-sidebar{
    position:relative;
    display:flex;
    flex-direction:column;
    top:auto;
    min-height:0;
    max-height:none;
    padding:12px;
    border-right:1px solid var(--glossary-line-soft);
    overflow:hidden;
}

.glossary-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:34px;
    margin-bottom:8px;
    color:#dbe7e3;
    font-size:14px;
}

.glossary-panel-head a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    color:#9fb5b1;
    border:1px solid rgba(150, 185, 190, .12);
    border-radius:5px;
    background:rgba(4, 15, 18, .42);
}

.glossary-sections{
    display:flex;
    flex-direction:column;
    padding-right:4px;
    overflow:auto;
    gap:0;
    flex:1 1 auto;
    max-height:none;
    min-height:0;
}

.glossary-section-link{
    font-size:14px;
    border:1px solid transparent;
    border-radius:5px;
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    gap:7px;
    align-items:center;
    min-width:0;
    min-height:26px;
    padding:3px 6px;
    color:inherit;
}

.glossary-section-link:hover,
.glossary-section-link.is-active{
    color:#e0ebe8;
    border-color:rgba(111, 200, 179, .18);
    background:rgba(111, 200, 179, .08);
}

.glossary-sidebar-footer{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--glossary-line-soft);
}

.glossary-sidebar-footer div{
    padding:8px;
    border:1px solid rgba(150, 185, 190, .1);
    border-radius:5px;
    background:rgba(4, 15, 18, .38);
}

.glossary-sidebar-footer span{
    display:block;
    margin-bottom:2px;
    color:#849995;
    font-size:10px;
}

.glossary-sidebar-footer strong{
    color:#dce9e5;
    font-size:15px;
    font-weight:500;
}

.glossary-rules-section .glossary-section-number{
    color:#d4c16c;
}

.glossary-rules-panel{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
    background:rgba(3, 12, 15, .34);
    overflow:auto;
}

.glossary-rules-head{
    position:sticky;
    top:0;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:44px;
    padding:8px 12px;
    border-bottom:1px solid rgba(150, 185, 190, .1);
    background:rgba(5, 17, 20);
}

.glossary-rules-head strong{
    color:#e6eee8;
    font-size:16px;
    font-weight:500;
}

.glossary-document-toolbar{
    position:sticky;
    top:44px;
    z-index:2;
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    border-bottom:1px solid rgba(150, 185, 190, .1);
    background:rgba(6, 20, 23);
}

.glossary-document-toolbar[hidden]{
    display:none;
}

.glossary-document-toolbar-spacer{
    flex:1 1 auto;
}

.glossary-document-color{
    position:relative;
    display:inline-flex;
}

.glossary-document-color-popover{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    z-index:12;
    display:grid;
    grid-template-columns:repeat(4, 26px);
    gap:6px;
    padding:8px;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:7px;
    background:rgb(9 24 25 / 0.98);
    box-shadow:0 16px 34px rgba(0,0,0,.42);
}

.glossary-document-color-popover[hidden]{
    display:none;
}

.glossary-document-color-swatch{
    width:26px;
    height:26px;
    padding:0;
    border:1px solid rgba(0,0,0,.35);
    border-radius:5px;
    background:var(--swatch, #d9e5e2);
    cursor:pointer;
}

.glossary-document-color-swatch:hover,
.glossary-document-color-swatch:focus-visible{
    outline:1px solid rgba(159, 197, 169, .85);
    outline-offset:1px;
}

.glossary-document-color-custom{
    position:relative;
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    gap:6px;
}

.glossary-document-color-custom input[type="color"]{
    position:absolute;
    width:0;
    height:0;
    margin:0;
    padding:0;
    border:0;
    opacity:0;
    pointer-events:none;
}

.glossary-document-color-pick{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    min-height:30px;
    padding:4px 8px 4px 6px;
    overflow:hidden;
    color:#cdd8d6;
    font-size:12px;
    text-align:left;
    border:1px solid rgba(150, 185, 190, .3);
    border-radius:5px;
    background:rgba(6, 19, 22, .68);
    cursor:pointer;
}

.glossary-document-color-pick:hover,
.glossary-document-color-pick:focus-visible{
    border-color:rgba(159, 197, 169, .6);
}

.glossary-document-color-custom-rainbow{
    flex:0 0 auto;
    width:20px;
    height:20px;
    border-radius:4px;
    border:1px solid rgba(0,0,0,.4);
    background:conic-gradient(from 0deg,
        #ff6b6b, #ffd166, #9fd4a0, #8fc7dd, #a9b4e8, #d3a6dd, #ff6b6b);
}

.glossary-document-color-custom-icon{
    position:absolute;
    left:6px;
    top:50%;
    width:20px;
    height:20px;
    transform:translateY(-50%);
    background-color:#0a1a1c;
    -webkit-mask:url("/static/icons/feather.png") center / 13px no-repeat;
    mask:url("/static/icons/feather.png") center / 13px no-repeat;
    pointer-events:none;
}

.glossary-document-color-custom-text{
    flex:1 1 auto;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.glossary-document-color-apply{
    flex:0 0 auto;
    width:32px;
    min-height:30px;
    padding:0;
    border:1px solid rgba(150, 185, 190, .3);
    border-radius:5px;
    background:rgba(6, 19, 22, .68);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.glossary-document-color-apply:hover,
.glossary-document-color-apply:focus-visible{
    border-color:rgba(159, 197, 169, .6);
}

.glossary-document-color-custom-value{
    width:20px;
    height:20px;
    border-radius:4px;
    border:1px solid rgba(0,0,0,.4);
    background:var(--picked, #9fd4a0);
}

.glossary-document-color-clear{
    grid-column:1 / -1;
    min-height:28px;
    padding:4px 8px;
    color:#cdd8d6;
    font-size:12px;
    border:1px solid rgba(150, 185, 190, .22);
    border-radius:5px;
    background:rgba(6, 19, 22, .68);
    cursor:pointer;
}

.glossary-document-color-clear:hover{
    border-color:rgba(159, 197, 169, .6);
}

.glossary-document{
    position:relative;
    z-index:0;
    flex:0 0 auto;
    width:min(100%, 980px);
    margin:0 auto;
    padding:8px 0 16px;
    color:#d9e5e2;
    font-size:15px;
    line-height:1.68;
    outline:none;
}

.glossary-document.is-editing{
    margin-top:16px;
    margin-bottom:16px;
    background:transparent;
    box-shadow:none;
    border:0;
    padding:8px 0 16px;
}

.glossary-document.is-editing::before{
    content:"";
    position:absolute;
    inset:-4px -30px -12px;
    z-index:-1;
    pointer-events:none;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:6px;
    background:rgba(6, 20, 23, .58);
    box-shadow:0 18px 36px rgba(0, 0, 0, .18);
}

.glossary-document h1,
.glossary-document h2,
.glossary-document h3{
    margin:1.2em 0 .45em;
    color:#eef6f3;
    font-family:"Cormorant Garamond", serif;
    font-weight:600;
    line-height:1.15;
}

.glossary-document h1{
    font-size:34px;
}

.glossary-document h2{
    font-size:27px;
}

.glossary-document h3{
    font-size:22px;
}

.glossary-document p,
.glossary-document ul,
.glossary-document ol,
.glossary-document blockquote{
    margin:0 0 .9em;
}

.glossary-document ul,
.glossary-document ol{
    padding-left:1.45em;
}

.glossary-document li{
    margin:.28em 0;
}

.glossary-document blockquote{
    padding:8px 0 8px 14px;
    color:#b7c8c4;
    border-left:3px solid rgba(111, 200, 179, .42);
}

.glossary-document a{
    color:#9fe3d6;
    text-decoration:underline;
}

.glossary-document-search-hit{
    color:#101816;
    background:#d4c16c;
    border-radius:2px;
}

.glossary-document-cancel,
.glossary-document-save{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:96px;
    min-height:34px;
    padding:0 14px;
    font-size:13px;
    line-height:1;
    border-radius:5px;
    cursor:pointer;
}

.glossary-document-cancel{
    color:#aebfbc;
    border:1px solid rgba(150, 185, 190, .16);
    background:rgba(5, 18, 21, .62);
}

.glossary-document-save{
    color:#e0f4ee;
    border:1px solid rgba(111, 200, 179, .42);
    background:linear-gradient(180deg, rgba(24, 94, 81, .86), rgba(13, 66, 58, .86));
}

.glossary-document-cancel:hover,
.glossary-document-save:hover{
    color:#e7f4f0;
    border-color:rgba(155, 227, 210, .48);
    background:rgba(21, 64, 58, .72);
}

.glossary-document-cancel:disabled,
.glossary-document-save:disabled{
    opacity:.55;
    cursor:wait;
}

.glossary-main{
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
    border-right:0;
}

.glossary-table-headline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:52px;
    padding:8px 12px;
    border-bottom:1px solid var(--glossary-line-soft);
}

.glossary-result-counter{
    display:flex;
    align-items:baseline;
    gap:8px;
    min-width:0;
}

.glossary-result-counter strong{
    color:#e5eeeb;
    font-size:16px;
    font-weight:500;
}

.glossary-result-counter span{
    color:#8fa19d;
    font-size:12px;
}

.glossary-table-shell{
    position:relative;
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    overflow:auto;
}

.glossary-table-shell::before{
    content:"";
    position:sticky;
    top:0;
    z-index:3;
    display:block;
    height:38px;
    margin-bottom:-38px;
    pointer-events:none;
    background:#061417;
    border-bottom:1px solid rgba(111, 200, 179, .28);
}

.glossary-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    table-layout:fixed;
    min-width:0;
}

.glossary-table thead th{
    position:sticky;
    top:0;
    z-index:4;
    height:38px;
    padding:0 10px;
    color:#97b4ae;
    font-size:16px;
    font-weight:500;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    border-bottom:1px solid transparent;
    border-right:1px solid var(--glossary-line-soft);
    background:#061417 !important;
}

.glossary-table thead{
    background:transparent !important;
}

.glossary-table td{
    height:42px;
    padding:8px 10px;
    color:#cbd9d6;
    font-size:14px;
    line-height:1.42;
    vertical-align:middle;
    min-width:0;
    overflow:hidden;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:manual;
    border-bottom:1px solid rgba(150, 185, 190, .075);
    border-right:1px solid rgba(150, 185, 190, .07);
    background:rgba(5, 18, 20, .24);
}

.glossary-table tbody tr:nth-child(even) td{
    background:rgba(111, 200, 179, .025);
}

.glossary-table tbody tr.glossary-section-divider-row td{
    position:relative;
    min-height:14px;
    padding:10px 0px 8px 0px;
    border-top:28px solid rgba(5, 18, 20, .98);
    border-bottom:1px solid rgba(111, 200, 179, .1);
    border-right:0;
    background: rgb(9 30 29);
}

.glossary-table tbody tr.glossary-section-divider-row:first-child td{
    border-top-width:0;
}

.glossary-table tbody tr.glossary-section-divider-row.is-empty td{
    border-top-width:0;
    padding-bottom:8px;
}

.glossary-table tbody tr.glossary-empty-row td{
    height:220px;
}

.glossary-section-divider-title{
    display:block;
    max-width:100%;
    min-height:26px;
    color:#d1dddb;
    font-size:16px;
    font-weight:500;
    white-space:normal;
    overflow:hidden;
    overflow-wrap:anywhere;
    word-break:break-word;
    pointer-events:none;
    box-sizing:border-box;
    text-align: center;
}

.glossary-table th:last-child,
.glossary-table td:last-child{
    border-right:0;
}

.glossary-table td:last-child{
    text-align:center;
}

.glossary-row.is-active td:first-child{
    box-shadow:inset 3px 0 0 rgba(111, 200, 179, .78);
}

.glossary-table td:first-child a{
    color:#9fd9cf;
}

.glossary-table td.glossary-text-cell,
.glossary-table td.glossary-note-cell{
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    vertical-align:middle;
}

.glossary-ru-cell{
    color:#dde8e4;
}

.glossary-note-cell{
    color:#a8b8b5;
}

.glossary-category-pill{
    align-items:center;
    max-width:100%;
    min-height:23px;
    padding:3px 7px;
    border-radius:5px;
    line-height:1.25;
}

.glossary-category-pill{
    display:inline-flex;
    justify-content:center;
    overflow:hidden;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    text-align:center;
    color:#b8d9d2;
    border:1px solid rgba(111, 200, 179, .16);
    background:rgba(16, 50, 47, .46);
}

.glossary-table-footer{
    flex:0 0 auto;
    min-height:54px;
    border-top:1px solid var(--glossary-line-soft);
}

.glossary-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:54px;
    padding:9px 12px;
}

.glossary-page-link,
.glossary-page-arrow,
.glossary-page-ellipsis{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:32px;
    height:32px;
    color:#adbbb8;
    font-size:14px;
    border:1px solid transparent;
    border-radius:5px;
}

.glossary-page-link:hover,
.glossary-page-arrow:hover,
.glossary-page-link.is-active{
    color:#e0ebe8;
    border-color:rgba(111, 200, 179, .2);
    background:rgba(111, 200, 179, .1);
}

.glossary-page-arrow.is-disabled{
    opacity:.35;
    pointer-events:none;
}

.glossary-empty-row td{
    height:220px;
    text-align:center;
    border-right:0;
}

.glossary-empty-state{
    display:flex;
    flex-direction:column;
    gap:6px;
    color:#93a5a1;
}

.glossary-empty-state strong{
    color:#dce8e4;
    font-weight:500;
}

.glossary-history-list{
    display:grid;
    gap:8px;
    margin-top:9px;
}

.glossary-history-item{
    --history-accent:#82cdbf;
    --history-accent-soft:rgba(130, 205, 191, .075);
    position:relative;
    display:grid;
    gap:10px;
    min-width:0;
    padding:10px 12px 11px;
    border:1px solid rgba(150, 185, 190, .105);
    border-left-color:color-mix(in srgb, var(--history-accent) 38%, rgba(150, 185, 190, .105));
    border-radius:7px;
    background:linear-gradient(90deg, var(--history-accent-soft), transparent 44%),
            rgba(4, 15, 18, .32);
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, .025);
}

.glossary-history-item::before{
    display:none;
}

.glossary-history-item[data-tone="created"],
.glossary-history-item[data-tone="imported"]{
    --history-accent:#8ed8a8;
    --history-accent-soft:rgba(142, 216, 168, .08);
}

.glossary-history-item[data-tone="updated"]{
    --history-accent:#d8bd7b;
    --history-accent-soft:rgba(216, 189, 123, .08);
}

.glossary-history-item[data-tone="rules"]{
    --history-accent: #9a96d1;
    --history-accent-soft: rgb(173 164 230 / 0.1);
}

.glossary-history-item[data-tone="deleted"]{
    --history-accent:#de8a8a;
    --history-accent-soft:rgba(222, 138, 138, .08);
}

.glossary-history-item[data-tone="section"]{
    --history-accent:#8cb7e4;
    --history-accent-soft:rgba(140, 183, 228, .08);
}

.glossary-history-item-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-width:0;
    margin-bottom:0;
}

.glossary-history-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:20px;
    max-width:150px;
    padding:0 8px;
    color:var(--history-accent);
    border:1px solid color-mix(in srgb, var(--history-accent) 24%, transparent);
    border-radius:999px;
    background:rgba(0, 0, 0, .14);
    font-size:11px;
    font-weight:600;
    line-height:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.glossary-history-item strong{
    display:block;
    min-width:0;
    margin:-1px 0 0;
    color:#dce9e5;
    font-size:13.5px;
    font-weight:500;
    line-height:1.35;
    overflow-wrap:anywhere;
}

.glossary-history-meta{
    display:block;
    min-width:0;
    margin-left:auto;
    color:#8fa29e;
    font-size:11px;
    line-height:1.35;
    text-align:right;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.glossary-history-diff{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    margin-top:1px;
}

.glossary-history-value{
    justify-self:start;
    width:fit-content;
    max-width:100%;
    min-width:0;
    min-height:0;
    padding:1px 12px;
    border:0;
    border-left:2px solid rgba(150, 185, 190, .12);
    border-right:2px solid rgba(150, 185, 190, .12);
    border-radius:999px;
    background:transparent;
}

.glossary-history-value span{
    display:block;
    margin-bottom:3px;
    color:#8fa49f;
    font-size:11px;
    font-weight:700;
    line-height:1;
    letter-spacing:0;
}

.glossary-history-value-old{
    border-left-color:rgba(223, 154, 154, .36);
    border-right-color:rgba(223, 154, 154, .36);
    background:transparent;
}

.glossary-history-value-new{
    border-left-color:rgba(155, 220, 179, .36);
    border-right-color:rgba(155, 220, 179, .36);
    background:transparent;
}

.glossary-history-value p{
    color:#c3d0cd;
    font-size:12px;
    line-height:1.42;
    overflow-wrap:anywhere;
}

.glossary-history-value-old p{
    color:#cfb4b2;
}

.glossary-history-value-new p{
    color:#bdd1c4;
}

.glossary-history-single{
    margin:0;
    color:#bdcbc8;
    font-size:12px;
    line-height:1.42;
    overflow-wrap:anywhere;
}

.glossary-history-single-old{
    color:#d2aaa7;
}

.glossary-history-single-new{
    color:#b7d6c0;
}

.glossary-history-item[data-tone="rules"] .glossary-history-single-new{
    color: #c1ccd6;
}

.glossary-history-empty{
    padding:22px 10px;
    color:#8fa19d;
    font-size:12px;
    text-align:center;
}

.glossary-modal[hidden]{
    display:none;
}

.glossary-modal{
    position:fixed;
    inset:0;
    z-index:10001;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 22px 32px;
    background:rgba(0, 0, 0, .58);
    backdrop-filter:blur(10px);
}

.glossary-modal-card{
    width:min(720px, 100%);
    max-height:min(760px, calc(100vh - 36px));
    overflow:auto;
    border:1px solid rgba(150, 185, 190, .16);
    border-radius:8px;
    background:linear-gradient(180deg, rgba(10, 27, 30, .98), rgba(5, 16, 19, .98));
    box-shadow:0 26px 80px rgba(0, 0, 0, .45);
}

.glossary-section-modal-card{
    width:min(760px, 100%);
    overflow:visible;
    border-color:rgba(111, 200, 179, .24);
    background:radial-gradient(ellipse at 18% 0%, rgba(123, 197, 180, .08), transparent 42%),
            linear-gradient(180deg, rgba(10, 24, 27, .97), rgba(5, 15, 18, .98)),
            #061316;
    box-shadow:0 26px 80px rgba(0, 0, 0, .45),
            0 0 0 1px rgba(155, 227, 210, .045),
            inset 0 1px 0 rgba(215, 255, 246, .055);
    animation:glossaryQuickPanelIn .16s ease-out;
}

.glossary-modal-head{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:58px;
    padding:10px 12px 10px 16px;
    border-bottom:1px solid var(--glossary-line-soft);
}

.glossary-modal-head .rev-icon-btn{
    color:#c8ddd8 !important;
    border-color:transparent !important;
    background:transparent !important;
    box-shadow:none !important;
}

.glossary-modal-head .rev-icon-btn:hover,
.glossary-modal-head .rev-icon-btn:focus-visible{
    color:#f0fffb !important;
    background:rgba(111, 200, 179, .05) !important;
    border-color:transparent !important;
}

.glossary-section-modal-card .glossary-modal-head,
.glossary-history-modal-card .glossary-modal-head{
    border-bottom:0;
    padding:12px 12px 8px 16px;
}

.glossary-section-modal-card .glossary-modal-head::after,
.glossary-history-modal-card .glossary-modal-head::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg, rgba(111, 200, 179, .36), rgba(111, 200, 179, .08), transparent);
}

.glossary-section-modal-card .glossary-modal-head .rev-icon-btn,
.glossary-history-modal-card .glossary-modal-head .rev-icon-btn{
    color:#c8ddd8 !important;
    border-color:transparent !important;
    background:transparent !important;
    box-shadow:none !important;
}

.glossary-section-modal-card .glossary-modal-head .rev-icon-btn:hover,
.glossary-section-modal-card .glossary-modal-head .rev-icon-btn:focus-visible,
.glossary-history-modal-card .glossary-modal-head .rev-icon-btn:hover,
.glossary-history-modal-card .glossary-modal-head .rev-icon-btn:focus-visible{
    color:#f0fffb !important;
    background:rgba(111, 200, 179, .05) !important;
}

.glossary-modal-title{
    display:flex;
    align-items:center;
    min-width:0;
    gap:9px;
    color:#9be3d2;
}

.glossary-modal-title .glossary-quick-spark-icon{
    width:20px;
    height:20px;
    filter:drop-shadow(0 0 8px rgba(111, 200, 179, .24));
}

.glossary-modal-head strong{
    color:#e0ebe8;
    font-size:17px;
    font-weight:500;
}

.glossary-add-form{
    display:grid;
    grid-template-columns:1fr 190px;
    gap:12px;
    padding:14px;
}

.glossary-section-form{
    grid-template-columns:1fr;
    gap:12px;
    padding:14px 16px 16px;
}

.glossary-section-form > input[type="hidden"]{
    display:none;
}

.glossary-section-builder{
    display:grid;
    gap:26px;
}

.glossary-section-builder-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(210px, .78fr);
    gap:12px;
}

.glossary-add-form label{
    display:grid;
    gap:6px;
    min-width:0;
}

.glossary-add-form label span{
    color:#8fb0a9;
    font-size:14px;
}

.glossary-add-form input,
.glossary-add-form select{
    height:40px;
    padding:0 11px;
}

.glossary-section-form input,
.glossary-section-picker-input{
    width:100%;
    height:40px;
    padding:0 11px;
    color:#cdd8d6;
    font:500 14px "Lora", serif;
    text-align:left;
    border:1px solid rgba(150, 185, 190, .22);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
    outline:none;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
    transition:border-color .24s ease, background .24s ease, box-shadow .35s ease, color .18s ease;
}

.glossary-section-picker{
    position:relative;
}

.glossary-section-picker.is-disabled .glossary-section-picker-input{
    cursor:not-allowed;
    opacity:.52;
}

.glossary-section-form input:hover,
.glossary-section-form input:focus,
.glossary-section-picker-input:hover,
.glossary-section-picker-input:focus{
    border-color:var(--field-focus-border);
    background:linear-gradient(180deg, var(--field-hover-bg), transparent),
            rgba(6, 21, 22, .72);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .07),
            0 0 18px rgba(80, 180, 153, .08);
}

.glossary-section-form input:-webkit-autofill,
.glossary-section-form input:-webkit-autofill:hover,
.glossary-section-form input:-webkit-autofill:focus,
.glossary-dropdown.translate-dropdown .glossary-dropdown-search-input:-webkit-autofill,
.glossary-dropdown.translate-dropdown .glossary-dropdown-search-input:-webkit-autofill:hover,
.glossary-dropdown.translate-dropdown .glossary-dropdown-search-input:-webkit-autofill:focus{
    -webkit-text-fill-color:#cdd8d6;
    caret-color:#cdd8d6;
    border-color:var(--field-focus-border) !important;
    box-shadow:0 0 0 1000px #061516 inset,
            inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .08),
            0 0 18px rgba(80, 180, 153, .08) !important;
    transition:background-color 9999s ease-out, color 9999s ease-out;
}

.glossary-section-picker-menu{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 6px);
    z-index:12;
    padding:6px;
    border:1px solid rgba(111, 200, 179, .2);
    border-radius:6px;
    background:linear-gradient(180deg, rgba(8, 25, 27, .99), rgba(4, 14, 18, .99));
    box-shadow:0 12px 28px rgba(0, 0, 0, .32);
}

.glossary-section-picker-list{
    display:grid;
    gap:2px;
    max-height:220px;
    overflow:auto;
}

.glossary-section-picker-list button{
    min-height:34px;
    padding:6px 8px;
    color:#dce9e5;
    font:600 13px "Lora", serif;
    text-align:left;
    border:0;
    border-radius:6px;
    background:transparent;
}

.glossary-section-picker-list button{
    cursor:pointer;
    transition:color .18s ease, background .18s ease;
}

.glossary-section-picker-list button:hover,
.glossary-section-picker-list button.selected{
    color:#f0fffb;
    background:rgba(111, 200, 179, .1);
}

.glossary-add-form textarea{
    min-height:230px;
    resize:vertical;
    padding:10px 11px;
    line-height:1.45;
}

.glossary-add-status{
    grid-column:1 / -1;
    padding:9px 10px;
    border:1px solid rgba(150, 185, 190, .12);
    border-radius:6px;
    color:#b5c5c1;
    background:rgba(4, 15, 18, .42);
    font-size:12px;
}

.glossary-add-status[data-kind="success"]{
    color:#99e0bd;
    border-color:rgba(104, 189, 137, .26);
}

.glossary-add-status[data-kind="error"]{
    color:#e4a2a2;
    border-color:rgba(198, 86, 86, .32);
}

.glossary-modal-actions{
    grid-column:1 / -1;
    display:flex;
    justify-content:flex-end;
    gap:8px;
}

.glossary-section-form .glossary-modal-actions{
    align-items:center;
    padding-top:2px;
}

.glossary-section-form .glossary-modal-actions .glossary-quick-cancel,
.glossary-section-form .glossary-modal-actions .glossary-quick-save{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:36px;
    padding:0 13px;
    border-radius:6px;
    font:500 15px "Lora", sans-serif;
    cursor:pointer;
    transition:transform .08s ease,
            border-color .18s ease,
            background .18s ease,
            box-shadow .18s ease,
            color .18s ease,
            opacity .18s ease;
}

.glossary-section-form .glossary-modal-actions .glossary-quick-save .glossary-quick-spark-icon{
    width:17px;
    height:17px;
}

.glossary-history-modal-card{
    width:min(720px, calc(100vw - 44px));
    height:auto;
    max-height:calc(100dvh - 56px);
    max-height:calc(100dvh - env(safe-area-inset-bottom, 0px) - 56px);
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    max-width:100%;
}

.glossary-modal-card{
    box-sizing:border-box;
}

.glossary-global-history{
    flex:1 1 auto;
    gap:9px;
    min-height:0;
    max-height:none;
    margin:0;
    padding:12px;
    overflow:auto;
    overscroll-behavior:contain;
}

.glossary-history-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:5px;
    padding:8px 10px 12px;
    border-top:1px solid var(--glossary-line-soft);
}

.glossary-history-pagination .glossary-page-link,
.glossary-history-pagination .glossary-page-arrow{
    min-width:30px;
    height:30px;
    background:transparent;
    border:1px solid transparent;
    cursor:pointer;
}

.glossary-history-pagination button:disabled{
    opacity:.35;
    pointer-events:none;
}

.glossary-global-history .glossary-history-item{
    position:relative;
}

.glossary-global-history .glossary-history-item::before{
    display:none;
}

.glossary-global-history .glossary-history-item + .glossary-history-item{
    padding-top:10px;
}

.glossary-global-history .glossary-history-item + .glossary-history-item::before{
    display:none;
}

@media (max-width:430px){
    .glossary-history-item{
        padding:9px;
    }

    .glossary-history-item-head{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

    .glossary-history-meta{
        margin-left:0;
        text-align:left;
    }

    .glossary-history-badge{
        justify-content:flex-start;
        max-width:100%;
        width:max-content;
    }

    .glossary-history-diff{
        grid-template-columns:1fr;
    }
}

@media (max-width:1420px){
    .glossary-shell{
        grid-template-columns:minmax(220px, 270px) minmax(620px, 1fr);
    }
}

@media (max-width:1080px){
    .glossary-topbar{
        grid-template-columns:1fr 1fr auto;
    }

    .glossary-search-input{
        grid-column:1 / -1;
    }

    .glossary-shell{
        grid-template-columns:1fr;
    }

    .glossary-sidebar{
        border-right:0;
        border-bottom:1px solid var(--glossary-line-soft);
    }

    .glossary-sections{
        max-height:none;
    }

    .glossary-main{
        border-right:0;
    }
}

@media (max-width:760px){
    .glossary-section-builder-row{
        grid-template-columns:1fr;
    }
}

@media (max-width:820px){
    .glossary-page{
        padding:14px 8px 22px;
    }

    .glossary-workspace{
        height:auto;
        min-height:0;
        overflow:visible;
    }

    .glossary-topbar,
    .glossary-add-form{
        grid-template-columns:1fr;
        gap:8px;
        padding:12px;
        min-height:0;
    }

    .glossary-search-input.search-field,
    .glossary-category-dropdown.glossary-dropdown.translate-dropdown,
    .glossary-search-button.search-action{
        grid-column:1;
        width:100%;
    }

    .glossary-shell{
        display:flex;
        flex-direction:column;
        min-height:0;
    }

    .glossary-sidebar{
        max-height:360px;
        overflow:hidden;
    }

    .glossary-sections{
        max-height:260px;
    }

    .glossary-table-headline{
        align-items:stretch;
        flex-direction:column;
    }

    .glossary-modal-actions{
        justify-content:stretch;
    }
}

/*==================================================
    GLOSSARY PAGE V3 TREE + EDITING
==================================================*/

.glossary-search-input.search-field{
    width:100%;
    min-width:0;
    height:48px;
    min-height:48px;
    padding:0 16px;
    color:#cdd8d6;
    font-size:16px;
    border:1px solid rgba(150, 185, 190, .22);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
}

.glossary-search-input::-webkit-search-cancel-button,
.glossary-section-search::-webkit-search-cancel-button{
    display:none;
}

.glossary-dropdown.translate-dropdown{
    width:100%;
    min-width:0;
}

.glossary-dropdown.translate-dropdown .custom-dropdown{
    position:relative;
    width:100%;
}

.glossary-category-dropdown.glossary-dropdown.translate-dropdown .custom-dropdown::after{
    content:"";
    position:absolute;
    top:50%;
    right:14px;
    z-index:2;
    width:8px;
    height:8px;
    pointer-events:none;
    border-right:1.5px solid rgba(183, 219, 211, .72);
    border-bottom:1.5px solid rgba(183, 219, 211, .72);
    transform:translateY(-62%) rotate(45deg);
    transition:transform .18s ease, border-color .18s ease;
}

.glossary-category-dropdown.glossary-dropdown.translate-dropdown .custom-dropdown.open::after{
    transform:translateY(-20%) rotate(225deg);
    border-color:rgba(210, 242, 234, .9);
}

.glossary-dropdown.translate-dropdown .dropdown-btn{
    box-sizing:border-box !important;
    width:100% !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 36px 0 13px !important;
    color:#cdd8d6 !important;
    font-family:"Lora", serif !important;
    font-size:15px !important;
    line-height:1 !important;
    border:1px solid rgba(150, 185, 190, .22) !important;
    border-radius:6px !important;
    background:rgb(6 19 22 / .68) !important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28) !important;
    transition:border-color .24s ease, background .24s ease, box-shadow .35s ease, color .18s ease !important;
}

.glossary-dropdown.translate-dropdown .dropdown-btn:hover,
.glossary-dropdown.translate-dropdown .dropdown-btn:focus,
.glossary-dropdown.translate-dropdown .dropdown-btn:focus-visible,
.glossary-dropdown.translate-dropdown .custom-dropdown.open .dropdown-btn{
    border-color:var(--field-focus-border) !important;
    background:linear-gradient(180deg, var(--field-hover-bg), transparent),
            rgba(6, 21, 22, .72) !important;
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28),
            0 0 0 1px rgba(123, 197, 180, .07),
            0 0 18px rgba(80, 180, 153, .08) !important;
}

.glossary-dropdown.translate-dropdown .glossary-dropdown-search-input{
    cursor:text;
    outline:none;
}

.glossary-dropdown.translate-dropdown .glossary-dropdown-search-input::selection{
    color:#f0fffb;
    background:rgba(111, 200, 179, .34);
}

.glossary-dropdown.translate-dropdown .dropdown-menu{
    max-height:260px;
    overflow:auto;
}

.glossary-table-tools{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    min-width:132px;
}

.glossary-per-page-dropdown.glossary-dropdown.translate-dropdown{
    width:132px;
    height:38px;
    min-height:38px;
    max-height:38px;
    align-self:center;
}

.glossary-per-page-dropdown.glossary-dropdown.translate-dropdown .custom-dropdown{
    height:38px;
    min-height:38px;
    max-height:38px;
}

.glossary-per-page-dropdown.glossary-dropdown.translate-dropdown .dropdown-btn{
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    font-size:13px !important;
}

.glossary-action-icon{
    display:block;
    background:currentColor;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
    -webkit-mask-size:contain;
    mask-size:contain;
}

.glossary-action-icon-plus{
    width:24px;
    height:24px;
    -webkit-mask-image:url("/static/icons/star.png");
    mask-image:url("/static/icons/star.png");
}

.glossary-action-icon-history{
    width:22px;
    height:22px;
    -webkit-mask-image:url("/static/icons/hourglass.png");
    mask-image:url("/static/icons/hourglass.png");
}

.glossary-action-icon-export{
    width:22px;
    height:22px;
    -webkit-mask-image:url("/static/icons/book.png");
    mask-image:url("/static/icons/book.png");
}

.glossary-action-icon-pin{
    width:19px;
    height:19px;
    -webkit-mask-image:url("/static/icons/glossary-pin.png");
    mask-image:url("/static/icons/glossary-pin.png");
}

.glossary-panel-actions .rev-icon-btn,
.glossary-table-icon{
    color:rgb(181 207 202 / 0.82);
}

.glossary-panel-actions .rev-icon-btn:hover,
.glossary-table-icon:hover{
    color:rgba(236, 247, 239, .96);
}

.glossary-search-button.search-action{
    display:flex;
    align-items:center;
    justify-content:center;
    align-self:start;
    width:100%;
    height:48px;
    min-height:47px;
    max-height:48px;
    padding:0 16px;
    color:#b8cbc8;
    font-size:16px;
    text-shadow:none;
    border:1px solid rgba(138, 166, 170, .22);
    border-radius:5px;
    background:linear-gradient(180deg, rgba(12, 28, 29, .76), rgba(8, 17, 20, .86));
    box-shadow:inset 0 1px 0 rgba(180, 235, 225, .035), 0 8px 20px rgba(0,0,0,.14);
}

.glossary-search-button.search-action:hover{
    transform:none;
    color:#d8ece4;
    border-color:rgb(107 228 210 / 0.28);
    background:linear-gradient(180deg, rgb(13 34 35 / 0.58), rgb(8 20 21 / 0.94));
}

.glossary-search-button.search-action:active{
    transform:translateY(1px) scale(.985);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.12);
}

.glossary-panel-actions{
    display:flex;
    align-items:center;
    gap:6px;
}

.glossary-panel-actions .rev-icon-btn{
    width:30px;
    height:30px;
}

.glossary-section-search.search-field{
    width:100%;
    min-width:0;
    height:38px;
    min-height:38px;
    margin-bottom:8px;
    padding:0 10px;
    color:#cdd8d6;
    font-family:"Lora", serif;
    font-size:13px;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:5px;
    background:rgb(6 19 22 / .58);
}

.glossary-section-group-title{
    margin:4px 0 5px;
    color:#829692;
    font-size:11px;
}

.glossary-pinned-section{
    margin-bottom:12px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(150, 185, 190, .09);
}

.glossary-section-node{
    display:grid;
    grid-template-columns:18px minmax(0, 1fr) auto;
    gap:4px;
    align-items:center;
    min-height:28px;
    padding:1px 5px 1px 0;
    color:#a8b9b6;
    font-size:12px;
    border:1px solid transparent;
    border-radius:5px;
    transition:background .18s ease, border-color .18s ease, color .18s ease;
}

.glossary-section-node.is-sortable{
    cursor:grab;
}

.glossary-section-node.is-sortable .glossary-section-link{
    cursor:grab;
    -webkit-user-drag:none;
}

.glossary-section-node.is-sortable:active{
    cursor:grabbing;
}

.glossary-section-node.is-dragging{
    opacity:.58;
    border-color:rgba(111, 200, 179, .22);
    background:rgba(111, 200, 179, .06);
}

body.glossary-section-dragging{
    user-select:none;
}

.glossary-section-node[hidden]{
    display:none;
}

.glossary-section-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:22px;
    padding:0;
    color:#b8c9c5;
    border:0;
    background:transparent;
    cursor:pointer;
}

.glossary-section-toggle i{
    font-size:10px;
    transition:transform .16s ease;
}

.glossary-section-node.is-collapsed > .glossary-section-toggle i{
    transform:rotate(-90deg);
}

.glossary-section-toggle.is-empty{
    cursor:default;
}

.glossary-section-number{
    color:#91aaa5;
    font-variant-numeric:tabular-nums;
}

.glossary-pinned-row .glossary-section-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.glossary-pinned-row .glossary-action-icon-pin{
    width:19px;
    height:19px;
    color:rgb(181 207 202 / 0.82);
}

.glossary-section-title{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.glossary-section-count{
    padding-right:4px;
    color:#8eaaa4;
    font-size:11px;
    font-variant-numeric:tabular-nums;
}

.glossary-unpin-section{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    color:#8fa4a0;
    border:0;
    background:transparent;
    cursor:pointer;
}

.glossary-unpin-section:hover{
    color:#dbe8e4;
}

.glossary-section-node:hover,
.glossary-section-node.is-active{
    color:#e0ebe8;
    border-color:rgba(111, 200, 179, .18);
    background:rgba(111, 200, 179, .08);
}

.glossary-section-node .glossary-section-link:hover,
.glossary-section-node.is-active .glossary-section-link,
.glossary-section-node:hover .glossary-section-link{
    border-color:transparent !important;
    background:transparent !important;
}

.glossary-section-node:hover .glossary-section-count,
.glossary-section-node.is-active .glossary-section-count,
.glossary-section-node:hover .glossary-section-number,
.glossary-section-node.is-active .glossary-section-number{
    color:#c0d9d3;
}

@media (min-width:1920px){
    .glossary-shell{
        grid-template-columns:minmax(280px, 340px) minmax(0, 1fr);
    }

    .glossary-col-chinese{
        width:220px;
    }

    .glossary-col-english{
        width:260px;
    }

    .glossary-col-russian{
        width:280px;
    }

    .glossary-col-note{
        width:340px;
    }

    .glossary-col-category{
        width:260px;
    }
}


.glossary-col-number{
    width:48px;
}

.glossary-col-chinese{
    width:160px;
}

.glossary-col-english,
.glossary-col-russian{
    width:190px;
}

.glossary-col-note{
    width:220px;
}

.glossary-col-category{
    width:210px;
}

.glossary-column-resizer{
    position:absolute;
    top:0;
    right:-4px;
    z-index:8;
    width:8px;
    height:100%;
    cursor:col-resize;
    touch-action:none;
    user-select:none;
}

.glossary-table thead th:last-child .glossary-column-resizer{
    right:0;
}

.glossary-column-resizer::after{
    content:"";
    position:absolute;
    top:7px;
    right:3px;
    width:1px;
    height:calc(100% - 14px);
    border-radius:999px;
    background:transparent;
    transition:background .16s ease, box-shadow .16s ease;
}

.glossary-column-resizer:hover::after,
.glossary-column-resizer.is-dragging::after{
    background:rgba(155, 227, 210, .75);
    box-shadow:0 0 8px rgba(111, 200, 179, .28);
}

body.glossary-column-resizing{
    cursor:col-resize;
    user-select:none;
}

.glossary-section-children{
    display:block;
}

.glossary-section-children[hidden]{
    display:none;
}

.glossary-section-level-1{
    padding-left:14px;
}

.glossary-section-level-2{
    padding-left:31px;
}

.glossary-section-level-3{
    padding-left:48px;
}

.glossary-row{
    cursor:default;
    user-select:text;
}

.glossary-row-number{
    color:#90aaa5;
    text-align:center;
    cursor:cell;
    user-select:none;
}

.glossary-row.is-sortable .glossary-row-number{
    cursor:grab;
}

.glossary-row.is-sortable .glossary-row-number:active,
body.glossary-row-dragging .glossary-row-number{
    cursor:grabbing;
}

.glossary-row.is-dragging td{
    background:rgba(75, 123, 110, .38) !important;
    box-shadow:inset 0 1px 0 rgba(155, 227, 210, .22),
               inset 0 -1px 0 rgba(155, 227, 210, .22);
}

body.glossary-row-dragging{
    user-select:none;
    cursor:grabbing;
}

body.glossary-row-dragging .glossary-table{
    cursor:grabbing;
}

body.glossary-row-dragging .glossary-row,
body.glossary-row-dragging .glossary-editable-cell{
    cursor:grabbing;
}

.glossary-table tbody tr.glossary-row.is-selected td,
.glossary-table tbody tr.glossary-draft-row td{
    background:rgba(75, 123, 110, .28);
}

.glossary-table tbody tr.glossary-row:hover td,
.glossary-table tbody tr.glossary-row.is-active td{
    background:rgba(54, 104, 88, .3);
}

.glossary-row.is-saving td{
    opacity:.68;
}

.glossary-editable-cell{
    cursor:text;
}

.glossary-editable-cell.is-editing{
    padding:8px 10px;
    background:rgba(8, 30, 32, .58) !important;
    box-shadow:inset 0 0 0 1px rgba(155, 227, 210, .22);
}

.glossary-cell-editor{
    display:block;
    width:100%;
    min-height:1.42em;
    max-height:none;
    padding:0;
    color:#e1ece9;
    font:inherit;
    line-height:inherit;
    border:0;
    border-radius:0;
    background:transparent;
    outline:none;
    white-space:pre-wrap;
    overflow-wrap:break-word;
    box-shadow:none;
}

textarea.glossary-cell-editor{
    min-height:1.42em;
    overflow:hidden;
    resize:none;
}

.glossary-context-menu[hidden]{
    display:none;
}

.glossary-context-menu{
    position:fixed;
    z-index:5000;
    display:grid;
    min-width:180px;
    padding:5px;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:6px;
    background:rgba(6, 18, 21, .98);
    box-shadow:0 18px 38px rgba(0,0,0,.42);
}

.glossary-context-menu button{
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    min-height:34px;
    padding:0 10px;
    color:#cbd9d6;
    font-size:13px;
    text-align:left;
    border:0;
    border-radius:4px;
    background:transparent;
    cursor:pointer;
}

.glossary-context-menu button:hover{
    color:#eef8f4;
    background:rgba(111, 200, 179, .1);
}

.glossary-context-menu button[data-action="delete"]{
    color:#e3aaa5;
}

.glossary-context-menu button[data-action="delete"]:hover{
    color:#ffd0ca;
    background:rgba(150, 52, 48, .2);
}

.glossary-quick-context-menu{
    position:fixed;
    z-index:5000;
    min-width:180px;
    padding:4px;
    border:1px solid rgb(111 200 179 / 0.32);
    border-radius:6px;
    background:linear-gradient(180deg, rgba(10, 27, 30, .98), rgba(5, 16, 19, .98)),
            radial-gradient(ellipse at 18% 0%, rgba(123, 197, 180, .09), transparent 42%);
    box-shadow:0 18px 42px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(155, 227, 210, .08);
    backdrop-filter:blur(14px);
}

.glossary-quick-context-menu button{
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    min-height:36px;
    padding:0 10px;
    color:#dce9e5;
    font:600 15px "Lora", sans-serif;
    text-align:left;
    border:0;
    border-radius:6px;
    background:transparent;
    cursor:pointer;
    transition:color .18s ease, background .18s ease;
}

.glossary-quick-context-menu button:hover{
    color:#f0fffb;
    background:rgb(111 200 179 / 0.1);
}

.glossary-quick-spark-icon{
    display:inline-block;
    flex:0 0 auto;
    width:18px;
    height:18px;
    background:currentColor;
    -webkit-mask:url("/static/icons/sparkling.png") center / contain no-repeat;
    mask:url("/static/icons/sparkling.png") center / contain no-repeat;
}

.glossary-quick-add-panel{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:4990;
    width:min(390px, calc(100vw - 24px));
    max-height:calc(100vh - 32px);
    overflow:visible;
    color:#dce9e5;
    border:1px solid rgba(111, 200, 179, .24);
    border-radius:8px;
    background:radial-gradient(ellipse at 18% 0%, rgba(123, 197, 180, .08), transparent 42%),
            linear-gradient(180deg, rgba(10, 24, 27, .96), rgba(5, 15, 18, .98)),
            #061316;
    box-shadow:0 22px 60px rgba(0, 0, 0, .44),
            0 0 0 1px rgba(155, 227, 210, .045),
            inset 0 1px 0 rgba(215, 255, 246, .055);
    backdrop-filter:blur(16px);
    transform-origin:bottom right;
    animation:glossaryQuickPanelIn .16s ease-out;
}

@keyframes glossaryQuickPanelIn{
    from{
        opacity:0;
        transform:translateY(8px) scale(.985);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.glossary-quick-add-head{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:52px;
    padding:12px 12px 8px 14px;
    cursor:move;
}

.glossary-quick-add-head::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg, rgba(111, 200, 179, .36), rgba(111, 200, 179, .08), transparent);
}

.glossary-quick-title{
    display:flex;
    align-items:center;
    min-width:0;
    gap:9px;
    color:#9be3d2;
}

.glossary-quick-title .glossary-quick-spark-icon{
    width:20px;
    height:20px;
    filter:drop-shadow(0 0 8px rgba(111, 200, 179, .24));
}

.glossary-quick-title strong{
    color:#f0fffb;
    font:700 15px "Inter", Arial, sans-serif;
    letter-spacing:0;
}

.glossary-quick-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    color:#c8ddd8;
    border:1px solid transparent;
    border-radius:6px;
    background:transparent;
    cursor:pointer;
    transition:color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.glossary-quick-close:hover{
    color:#f0fffb;
    border-color:rgba(155, 227, 210, .2);
    background:rgba(111, 200, 179, .08);
    box-shadow:0 0 18px rgba(80, 180, 153, .08);
}

.glossary-quick-add-body{
    display:grid;
    gap:10px;
    max-height:calc(100vh - 144px);
    overflow:auto;
    padding:12px 14px;
}

.glossary-quick-add-body label{
    display:grid;
    gap:5px;
}

.glossary-quick-add-body label span{
    color:#91b6ae;
    font:600 12px "Lora", sans-serif;
}

.glossary-quick-add-body input,
.glossary-quick-add-body textarea{
    width:100%;
    color:#e6f3ef;
    border:1px solid rgba(150, 185, 190, .22);
    border-radius:6px;
    background:rgba(4, 15, 18, .72);
    box-shadow:inset 0 1px 2px rgba(0, 0, 0, .28);
    outline:none;
    font:500 14px "Lora", serif;
    transition:border-color .24s ease, background .24s ease, box-shadow .35s ease, color .18s ease;
}

.glossary-quick-add-body input::placeholder,
.glossary-quick-add-body textarea::placeholder{
    color:rgba(182, 195, 193, .45);
    font-family:"Lora", serif;
    opacity:1;
}

.glossary-quick-add-body input::selection,
.glossary-quick-add-body textarea::selection{
    color:#f0fffb;
    background:rgba(111, 200, 179, .34);
}

.glossary-quick-add-body input:hover,
.glossary-quick-add-body textarea:hover{
    border-color:var(--field-focus-border);
    background:linear-gradient(180deg, var(--field-hover-bg), transparent),
            rgba(6, 21, 22, .72);
    box-shadow:inset 0 1px 2px rgba(0, 0, 0, .28),
            0 0 0 1px rgba(123, 197, 180, .07),
            0 0 18px rgba(80, 180, 153, .08);
}

.glossary-quick-add-body input{
    height:36px;
    padding:0 10px;
}

.glossary-quick-add-body textarea{
    min-height:64px;
    padding:9px 10px;
    resize:vertical;
}

.glossary-quick-add-body input:focus,
.glossary-quick-add-body textarea:focus{
    border-color:rgba(111, 200, 179, .48);
    background:rgba(7, 24, 26, .82);
    box-shadow:inset 0 1px 2px rgba(0, 0, 0, .28),
            0 0 0 1px rgba(123, 197, 180, .07),
            0 0 18px rgba(80, 180, 153, .08);
}

.glossary-quick-section-field{
    position:relative;
}

.glossary-quick-section-list{
    position:fixed;
    z-index:5005;
    max-height:230px;
    margin:0;
    overflow:auto;
    padding:5px;
    border:1px solid rgba(111, 200, 179, .24);
    border-radius:8px;
    background:radial-gradient(ellipse at 18% 0%, rgba(123, 197, 180, .08), transparent 42%),
            linear-gradient(180deg, rgba(8, 25, 27, .99), rgba(4, 14, 18, .99));
    box-shadow:0 16px 36px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(155, 227, 210, .055);
}

.glossary-quick-section-list button{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:36px;
    padding:6px 8px;
    color:#dce9e5;
    text-align:left;
    border:0;
    border-radius:6px;
    background:transparent;
    cursor:pointer;
    transition:color .18s ease, background .18s ease;
}

.glossary-quick-section-list button:hover{
    color:#f0fffb;
    background:rgba(111, 200, 179, .1);
}

.glossary-quick-section-list strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font:600 13px "Lora", sans-serif;
}

.glossary-quick-section-list span{
    color:#8fa49f;
    font-size:12px;
}

.glossary-quick-status{
    padding:8px 10px;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:6px;
    color:#d7e4e1;
    background:rgba(111, 200, 179, .06);
    font:500 12px "Lora", sans-serif;
}

.glossary-quick-status[data-kind="error"]{
    color:#ffd0d0;
    border-color:rgba(226, 116, 116, .38);
    background:rgba(112, 31, 31, .24);
}

.glossary-quick-status[data-kind="success"]{
    color:#d6f4df;
    border-color:rgba(100, 190, 126, .36);
    background:rgba(23, 84, 43, .24);
}

.glossary-quick-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding:11px 14px 14px;
    border-top:1px solid rgba(111, 200, 179, .12);
    background:linear-gradient(180deg, rgba(4, 15, 18, 0), rgba(4, 15, 18, .24));
}

.glossary-quick-actions button,
.avatar-cropper-actions button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:36px;
    padding:0 13px;
    border-radius:6px;
    font:500 15px "Lora", sans-serif;
    cursor:pointer;
    transition:transform .08s ease,
            border-color .18s ease,
            background .18s ease,
            box-shadow .18s ease,
            color .18s ease,
            opacity .18s ease;
    will-change:transform;
}

.glossary-quick-actions button:active,
.avatar-cropper-actions button:active{
    transform:translateY(1px) scale(.985);
    box-shadow:inset 0 1px 3px rgba(0, 0, 0, .28), 0 4px 10px rgba(0, 0, 0, .12);
}

.glossary-quick-cancel{
    color:#b9cbc7;
    border:1px solid rgba(150, 185, 190, .18);
    background:rgba(4, 15, 18, .42);
}

.glossary-quick-cancel:hover{
    color:#e7f4f0;
    border-color:rgba(155, 227, 210, .32);
    background:rgba(111, 200, 179, .08);
}

.glossary-quick-save{
    color:#b8cbc8;
    text-shadow:none;
    border:1px solid rgba(138, 166, 170, .22);
    background:linear-gradient(180deg, rgba(12, 28, 29, .76), rgba(8, 17, 20, .86));
    box-shadow:inset 0 1px 0 rgba(180, 235, 225, .035), 0 8px 20px rgba(0, 0, 0, .14);
}

.glossary-quick-save .glossary-quick-spark-icon{
    width:17px;
    height:17px;
}

.glossary-quick-save:not(:disabled):hover{
    transform:none;
    color:#d8ece4;
    border-color:rgb(107 228 210 / 0.28);
    background:linear-gradient(180deg, rgb(13 34 35 / 0.58), rgb(8 20 21 / 0.94));
}

.glossary-quick-save:disabled,
.avatar-cropper-actions button:disabled{
    opacity:.62;
    cursor:wait;
}

@media (max-width:520px){
    .glossary-quick-add-panel{
        right:12px;
        bottom:12px;
        width:calc(100vw - 24px);
    }
}

/*==================================================
    MODERATION OFFICE HEADER
==================================================*/

.revisions-page .moderation-office-tabs {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 20px;
    padding: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(150, 185, 190, .15);
    border-radius: 7px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), transparent),
        rgba(5, 16, 19, .46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.revisions-page .moderation-office-tab {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 22px;
    color: #91a09e;
    font-size: 14px;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .08s ease;
}

.revisions-page .moderation-office-tab:hover {
    color: #dce8e3;
    border-color: rgba(123, 197, 180, .18);
    background: rgba(123, 197, 180, .055);
}

.revisions-page .moderation-office-tab.active {
    color: #eef7f3;
    border-color: rgba(123, 197, 180, .28);
    background: linear-gradient(
        180deg,
        rgba(123, 197, 180, .05),
        rgba(13, 39, 39, .22)
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.revisions-page .moderation-office-tab.active::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 5px;
    height: 1px;
    opacity: .75;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(123, 197, 180, .72),
        transparent
    );
}

@media (max-width: 760px) {
    .revisions-page .revisions-workspace:not(.admin-workspace) .moderation-office-topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 11px;
    }

    .revisions-page .moderation-office-tabs {
        justify-content: flex-start;
        border-radius: 7px;
        scrollbar-width: none;
    }

    .revisions-page .moderation-office-tabs::-webkit-scrollbar {
        display: none;
    }

    .revisions-page .moderation-office-tab {
        min-height: 32px;
        padding: 0 13px;
    }
}


/* ==================================================
   PROFILE PAGE
================================================== */

body:has(.profile-page) .header{
    position:relative;
    top:auto;
}

.profile-page{
    --translate-workspace-image:url("/static/images/main-darkforest2.webp");
    position:relative;
    min-height:100vh;
    padding:46px clamp(12px, 2.5vw, 48px) 48px;
}

.profile-page::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(
                to bottom,
                rgba(4, 12, 16, .68) 0,
                rgba(4, 12, 16, .76) 76px,
                rgba(4, 12, 16, .82) 168px,
                rgb(4 16 16 / 0.98) 100%
            ),
            radial-gradient(
                ellipse at 20% 0%,
                rgba(123, 197, 180, .14),
                transparent 42%
            ),
            var(--translate-workspace-image);
    background-size:cover;
    background-position:center;
}

.profile-shell{
    position:relative;
    width:100%;
    max-width:none;
    margin:0 auto;
    padding:clamp(12px, 1.5vw, 24px);
    border:1px solid rgba(150, 185, 190, .13);
    border-radius:3px;
    background:linear-gradient(180deg, rgb(10 23 24 / 0.96), rgb(9 22 24 / 0.98));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),
            0 18px 46px rgba(0,0,0,.22);
}

.profile-hero{
    display:grid;
    grid-template-columns:minmax(0, 1.08fr) minmax(420px, .92fr);
    gap:22px;
    margin-bottom:20px;
}

.profile-hero.is-identity-only{
    grid-template-columns:1fr;
}

.profile-summary{
    position:relative;
    min-width:0;
    border:1px solid rgba(150, 185, 190, .11);
    background:
        linear-gradient(
            180deg,
            rgba(10, 27, 29, .93),
            rgba(6, 17, 20, .96)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 16px 38px rgba(0,0,0,.18);
}

.profile-identity{
    display:flex;
    align-items:center;
    gap:28px;
    min-height:220px;
    padding:26px 30px;
    border-radius:10px;
    overflow:hidden;
}

.profile-avatar-wrap{
    position:relative;
    flex:0 0 auto;
}

.profile-avatar{
    position:relative;
    width:166px;
    height:166px;
    margin:0;
    border-radius:50%;
    overflow:hidden;
    border:2px solid rgba(150,185,180,.25);
    background:linear-gradient(135deg,rgba(20,40,40,.6),rgba(10,27,29,.8));
}

.profile-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-avatar-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,rgba(30,50,50,.6),rgba(15,35,35,.8));
}

.profile-avatar-creature{
    width:54%;
    height:54%;
    background:#a0b0ac;
    -webkit-mask:url("/static/icons/herne-the-hunter.png") center / contain no-repeat;
    mask:url("/static/icons/herne-the-hunter.png") center / contain no-repeat;
}

.profile-avatar-edit{
    position:absolute;
    right:-2px;
    bottom:8px;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(154, 195, 184, .18);
    border-radius:50%;
    background:linear-gradient(
        180deg,
        rgba(16, 35, 35, .96),
        rgba(8, 18, 20, .96)
    );
    color:#b8cbc6;
    cursor:pointer;
    box-shadow:0 7px 18px rgba(0,0,0,.30);
    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.profile-avatar-edit .profile-edit-feather{
    width:17px;
    height:17px;
}

.profile-avatar-edit:hover{
    color:#e4eee9;
    border-color:rgba(123, 197, 180, .36);
    background:rgba(51, 111, 95, .20);
    transform:translateY(-1px);
}

.profile-avatar-edit:focus-visible{
    color:#e4eee9;
    border-color:rgba(123, 197, 180, .44);
    outline:2px solid rgba(123, 197, 180, .18);
    outline-offset:2px;
}

.profile-avatar-input{
    display:none;
}

/* Shared avatar framing: profile and conversation images are cropped once,
   then rendered from the exact same square in every avatar size. */
.profile-avatar img,
.stats-avatar img,
.messages-avatar img,
.msg-avatar img,
.messages-draft-avatar-preview img{
    display:block;
    width:100%;
    height:100%;
    aspect-ratio:1;
    object-fit:cover;
    object-position:50% 50%;
}

body.avatar-cropper-open{
    overflow:hidden;
}

.avatar-cropper{
    position:fixed;
    z-index:10050;
    inset:0;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(1, 8, 10, .82);
    backdrop-filter:blur(9px);
}

.avatar-cropper,
.avatar-cropper *,
.avatar-cropper *::before,
.avatar-cropper *::after{
    box-sizing:border-box;
}

.avatar-cropper-dialog{
    position:relative;
    width:min(520px, 100%);
    max-height:calc(100dvh - 32px);
    overflow:auto;
    padding:22px;
    border:1px solid rgba(123, 197, 180, .2);
    border-radius:12px;
    background:linear-gradient(155deg, rgba(12, 31, 34, .99), rgba(4, 15, 18, .99));
    box-shadow:0 26px 80px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .025);
}

.avatar-cropper-close{
    position:absolute;
    z-index:3;
    top:30px;
    right:30px;
    width:34px;
    height:34px;
    flex:0 0 auto;
    border:0;
    border-radius:50%;
    border:1px solid rgba(220, 235, 231, .2);
    background:rgba(2, 11, 13, .68);
    color:#c5d2cf;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.avatar-cropper-stage{
    position:relative;
    width:100%;
    aspect-ratio:1;
    overflow:hidden;
    border-radius:8px;
    background:#02090b;
    cursor:default;
    touch-action:none;
    user-select:none;
    outline:none;
}

.avatar-cropper-stage.is-move-ready{
    cursor:move;
}

.avatar-cropper-stage.is-dragging{
    cursor:grabbing;
}

.avatar-cropper-stage[data-resize-corner="nw"],
.avatar-cropper-stage[data-resize-corner="se"]{
    cursor:nwse-resize;
}

.avatar-cropper-stage[data-resize-corner="ne"],
.avatar-cropper-stage[data-resize-corner="sw"]{
    cursor:nesw-resize;
}

.avatar-cropper-stage:focus-visible{
    box-shadow:0 0 0 2px #061316, 0 0 0 4px rgba(123, 197, 180, .62);
}

.avatar-cropper-stage canvas{
    display:block;
    width:100%;
    height:100%;
}

.avatar-cropper-mask{
    position:absolute;
    top:var(--avatar-crop-y);
    left:var(--avatar-crop-x);
    width:var(--avatar-crop-size);
    height:var(--avatar-crop-size);
    transform:translate(-50%, -50%);
    border:2px solid rgba(229, 238, 234, .92);
    border-radius:50%;
    box-shadow:0 0 0 999px rgba(0, 8, 10, .58), inset 0 0 36px rgba(0, 0, 0, .12);
    pointer-events:none;
}

.avatar-cropper-corner{
    position:absolute;
    width:27px;
    height:27px;
    border-color:rgba(255, 255, 255, .96);
    border-style:solid;
    border-width:0;
    filter:drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}

.avatar-cropper-corner.is-nw{
    top:-3px;
    left:-3px;
    border-top-width:4px;
    border-left-width:4px;
}

.avatar-cropper-corner.is-ne{
    top:-3px;
    right:-3px;
    border-top-width:4px;
    border-right-width:4px;
}

.avatar-cropper-corner.is-sw{
    bottom:-3px;
    left:-3px;
    border-bottom-width:4px;
    border-left-width:4px;
}

.avatar-cropper-corner.is-se{
    right:-3px;
    bottom:-3px;
    border-right-width:4px;
    border-bottom-width:4px;
}

.avatar-cropper-stage[data-resize-corner="nw"] .avatar-cropper-corner.is-nw,
.avatar-cropper-stage[data-resize-corner="ne"] .avatar-cropper-corner.is-ne,
.avatar-cropper-stage[data-resize-corner="sw"] .avatar-cropper-corner.is-sw,
.avatar-cropper-stage[data-resize-corner="se"] .avatar-cropper-corner.is-se{
    border-color:#fff;
    filter:drop-shadow(0 0 4px rgba(123, 197, 180, .78));
}

.avatar-cropper-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:14px;
}

.avatar-cropper button:focus-visible{
    outline:none;
    box-shadow:0 0 0 2px rgba(123, 197, 180, .18);
}

.avatar-cropper-close:hover:not(:disabled){
    color:#f2f7f5;
    border-color:rgba(123, 197, 180, .48);
}

.avatar-cropper-status{
    margin:10px 0 0;
    color:#d39a91;
    font:11px/1.45 "Lora", serif;
    text-align:center;
}

@media (max-width:560px){
    .avatar-cropper{
        align-items:end;
        padding:0;
    }

    .avatar-cropper-dialog{
        width:100%;
        max-height:94dvh;
        padding:18px;
        border-right:0;
        border-bottom:0;
        border-left:0;
        border-radius:14px 14px 0 0;
    }

    .avatar-cropper-close{
        top:26px;
        right:26px;
    }

    .avatar-cropper-actions button{
        flex:1;
    }
}

.profile-main-info{
    position:relative;
    z-index:1;
    flex:1 1 auto;
    min-width:0;
    max-width:560px;
}

.profile-name-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
}

.profile-name-row h1{
    margin:0;
    color:#dfe6e1;
    font-family:"Cormorant Garamond", serif;
    font-size:48px;
    line-height:.95;
    font-weight:600;
    letter-spacing:.01em;
}

.profile-online-dot{
    flex:0 0 auto;
    width:9px;
    height:9px;
    margin:0 2px 0 1px;
    border-radius:50%;
    background:#65c18f;
    box-shadow:
        0 0 0 3px rgba(101, 193, 143, .10),
        0 0 13px rgba(101, 193, 143, .52);
}

.profile-online-dot.is-offline{
    background:#b85e65;
    box-shadow:
        0 0 0 3px rgba(184, 94, 101, .10),
        0 0 11px rgba(184, 94, 101, .34);
}

.profile-role-badge{
    color:rgb(161, 181, 178);
    font-family:"Lora", serif;
    font-size:13px;
    font-weight:400;
    line-height:1.35;
    letter-spacing:.01em;
}

.profile-account-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px 11px;
    min-height:30px;
    margin-top:5px;
}

.profile-handle-row{
    display:flex;
    align-items:center;
    gap:2px;
    width:max-content;
    max-width:100%;
    min-height:26px;
    color:#91a59f;
}

.profile-handle-prefix,
.profile-handle{
    font-size:13px;
    line-height:1.35;
    letter-spacing:.025em;
}

.profile-handle-prefix{
    color:#708c85;
}

.profile-handle{
    min-width:0;
    overflow-wrap:anywhere;
}

.profile-account-divider{
    width:1px;
    height:14px;
    background:rgba(143, 171, 164, .20);
}

.profile-persona{
    display:grid;
    grid-template-columns:max-content 1px max-content;
    align-items:center;
    box-sizing:border-box;
    width:max-content;
    max-width:100%;
    min-height:48px;
    margin-top:8px;
    margin-bottom:12px;
    padding:8px 13px;
    border:1px solid rgba(112, 165, 167, 0.15);
    border-radius:7px;
    background:
        linear-gradient(100deg, rgba(51, 114, 117, 0.09), rgba(20, 47, 48, 0.12)),
        rgba(5, 18, 19, .34);
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.022);
}

.profile-role-line{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:0;
    padding:0 13px;
    color:#91a59f;
    text-align:center;
}

.profile-role-line > i{
    flex:0 0 auto;
    width:15px;
    font-size:13px;
    text-align:center;
}

.profile-persona-divider{
    align-self:stretch;
    width:1px;
    background:linear-gradient(transparent, rgba(104, 196, 200, 0.25), transparent);
}

.profile-title{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:0 13px;
    text-align:center;
}

.profile-title strong{
    min-width:0;
    color:rgb(161, 181, 178);
    font-family:"Lora", serif;
    font-size:15px;
    font-weight:400;
    line-height:1.35;
    letter-spacing:.01em;
    white-space:nowrap;
}

.profile-title-edit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    padding:0;
    color:#8fb9b1;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:50%;
    background:transparent;
    font-size:11px;
    cursor:pointer;
    transition:color .18s ease, border-color .18s ease, background .18s ease;
}

.profile-title-edit:hover,
.profile-title-edit:focus-visible{
    color:#d8ece4;
    border-color:rgba(123, 197, 180, .34);
    background:rgba(123, 197, 180, .08);
}

.profile-title-menu{
    position:absolute;
    z-index:60;
    min-width:280px;
    max-height:320px;
    overflow:auto;
    padding:6px;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:7px;
    background:rgba(6, 19, 22, .98);
    box-shadow:0 18px 38px rgba(0,0,0,.34);
}

.profile-title-menu[hidden]{
    display:none;
}

.profile-title-option{
    display:block;
    width:100%;
    min-height:38px;
    padding:8px 10px;
    color:#aab8b4;
    font-family:"Lora", serif;
    font-size:13px;
    text-align:left;
    border:0;
    border-radius:5px;
    background:transparent;
    cursor:pointer;
    transition:color .16s ease, background .16s ease;
}

.profile-title-option:hover,
.profile-title-option.is-selected{
    color:#e4eee9;
    background:rgba(111, 200, 179, .08);
}

.profile-title-option .title-option-note{
    display:block;
    margin-top:2px;
    color:#75857f;
    font-size:11px;
}

.profile-status-line{
    display:flex;
    align-items:center;
    gap:7px;
    box-sizing:border-box;
    width:min(100%, 410px);
    min-height:30px;
    margin:8px 0 0;
    padding:2px 6px;
    color:#8aa29c;
}

.profile-status-line.is-empty .profile-status-text{
    color:#758983;
    font-style:italic;
}

.profile-status-icon{
    flex:0 0 auto;
    width:16px;
    color:#66827b;
    font-size:12px;
    text-align:center;
}

.profile-status-text{
    min-width:0;
    color:#c0d0cc;
    font-size:14px;
    line-height:1.5;
    font-style:italic;
}

.profile-status-text[contenteditable="true"]{
    outline:none;
    border-bottom:1px dashed rgba(123, 197, 180, .28);
}

.profile-name-row h1[contenteditable="true"],
.profile-handle[contenteditable="true"]{
    outline:none;
    border-bottom:1px dashed rgba(123, 197, 180, .38);
}

.profile-feather-btn{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    padding:0;
    border:1px solid transparent;
    border-radius:50%;
    color:#789891;
    background:transparent;
    cursor:pointer;
    transition:color .18s ease, border-color .18s ease, background .18s ease;
}

.profile-edit-feather{
    display:block;
    width:14px;
    height:14px;
    background:currentColor;
    -webkit-mask:url("/static/icons/feather.png") center / contain no-repeat;
    mask:url("/static/icons/feather.png") center / contain no-repeat;
}

.profile-feather-btn:hover,
.profile-feather-btn:focus-visible{
    color:#d8ece4;
    border-color:rgba(123, 197, 180, .34);
    background:rgba(123, 197, 180, .08);
    outline:none;
}

.profile-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    color:#849792;
    font-size:12px;
}

.profile-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.profile-meta i{
    color:#708c85;
    font-size:11px;
}

/* ==================================================
   SUMMARY
================================================== */

.profile-summary{
    padding:20px 22px 30px;
    border-radius:10px;
}

.profile-summary-title{
    margin-bottom:16px;
    color:#c5d0cc;
    font-family:"Lora", serif;
    font-size:16px;
    font-weight:400;
}

.profile-summary-body{
    display:grid;
    grid-template-columns:168px minmax(0,1fr);
    grid-template-areas:
        "donut rows"
        ". link";
    align-items:center;
    column-gap:14px;
    row-gap:2px;
}

.profile-donut{
    grid-area:donut;
    position:relative;
    width:145px;
    height:145px;
    margin:0 auto;
    display:grid;
    place-items:center;
    overflow:visible;
    border-radius:50%;
    background:conic-gradient(
        from -90deg,
        #59b596 0 var(--profile-approved, 0%),
        #cdaa65 var(--profile-approved, 0%) calc(var(--profile-approved, 0%) + var(--profile-pending, 0%)),
        #a86456 calc(var(--profile-approved, 0%) + var(--profile-pending, 0%)) 100%
    );
    box-shadow:
        0 0 18px rgba(80, 182, 157, .10),
        inset 0 0 22px rgba(0,0,0,.28);
}

.profile-donut::before{
    content:"";
    position:absolute;
    inset:11px;
    border-radius:50%;
    background:#0a1b1d;
    border:1px solid rgba(167, 203, 196, .06);
    box-shadow:inset 0 0 20px rgba(0,0,0,.34);
    z-index:0;
}

.profile-summary-list{
    grid-area:rows;
    display:grid;
    gap:0;
}


.profile-summary-footer{
    grid-area:link;
    display:flex;
    justify-content:center;
    position:relative;
    z-index:2;
    margin:-12px 0 0;
    pointer-events:auto;
}
.profile-donut-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
    z-index:1;
    display:none;
}

.profile-donut-shadow-ring{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
    z-index:0;
    display:none;
}

.profile-donut-svg circle{
    fill:none;
    stroke-linecap:butt;
}

.profile-donut-shadow{
    position:absolute;
    inset:0;
    border-radius:50%;
    filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .82)) drop-shadow(0 2px 3px rgba(0, 0, 0, .42));
}

.profile-donut-center{
    position:relative;
    z-index:1;
    display:grid;
    justify-items:center;
    gap:3px;
    color:#96aba6;
    font-family:"Lora", serif;
    font-size:11px;
    line-height:1;
    text-align:center;
    font-weight:400;
    letter-spacing:0;
}

.profile-donut-center span{
    font-weight:400;
}

.profile-donut-center strong{
    color:#e6eeeb;
    font-family:"Cormorant Garamond", serif;
    font-size:36px;
    font-weight:400;
    line-height:.9;
}


.profile-summary-row{
    display:grid;
    grid-template-columns:
        8px
        minmax(0, 1fr)
        36px
        45px;
    align-items:center;
    column-gap:12px;
    padding:12px 0;
    font-family:"Lora", serif;
    font-size:15px;
    font-weight:400;
}

.summary-dot{
    width:7px;
    height:7px;
    border-radius:50%;
}

.summary-dot-approved{background:#59b596;}
.summary-dot-pending{background:#cdaa65;}
.summary-dot-rejected{background:#a86456;}

.profile-summary-row span,
.profile-summary-row strong{
    font-size:15px;
    font-style:normal;
    font-weight:400;
}


.profile-summary-row span{color:#abbdb9;}

.profile-summary-row strong{
    color:#e4ebe8;
    font-family:"Cormorant Garamond", serif;
    font-size:18px;
    font-weight:400;
    text-align:right;
    font-variant-numeric:lining-nums tabular-nums;
}

.profile-summary-row em{
    color:#a0b0ac;
    font-family:"Cormorant Garamond", serif;
    font-size:14px;
    font-weight:400;
    text-align:right;
    font-style:normal;
    font-variant-numeric:lining-nums tabular-nums;
}

.profile-view-all{
    margin-top:0;
    padding:0;
    color:#8fb9b1;
    border:0;
    background:transparent;
    font-family:"Lora", serif;
    font-size:13px;
    font-weight:400;
    cursor:pointer;
    position:relative;
    z-index:2;
    pointer-events:auto;
    transition:color .18s ease;
}

.profile-view-all:hover{
    color:#d8ece4;
}

/* ==================================================
   LEVEL / XP
================================================== */

.profile-current-title{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

/* ==================================================
   PROFILE COLLECTIONS
================================================== */

.profile-lower-grid{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(330px,.95fr);
    gap:20px;
}

.profile-lower-grid.is-public-profile{
    grid-template-columns:1fr;
}

.profile-panel{
    min-width:0;
    border:1px solid rgba(150, 185, 190, .10);
    border-radius:8px;
    background:
        linear-gradient(
            180deg,
            rgba(10, 27, 29, .90),
            rgba(6, 17, 20, .95)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 12px 28px rgba(0,0,0,.15);
}

.profile-achievements{
    display:flex;
    flex-direction:column;
}

.profile-panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:17px 18px 10px;
}

.profile-panel-header h2{
    color:#d2dbd7;
    font-family:"Lora", serif;
    font-size:20px;
    font-weight:400;
}

.profile-panel-header button,
.profile-panel-header a{
    color:#82938f;
    font-size:11px;
    transition:color .2s ease;
}

.profile-panel-header button:hover,
.profile-panel-header a:hover{
    color:#b9c9c4;
}

.profile-achievement-grid{
    flex:1 1 auto;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    align-content:center;
    gap:16px 10px;
    padding:18px 16px 22px;
}

.profile-achievements-empty{
    display:grid;
    min-height:112px;
    margin:0;
    padding:18px;
    place-items:center;
    color:#718681;
    font-family:"Lora", serif;
    font-size:13px;
    text-align:center;
}

.profile-achievement{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:8px 4px 7px;
    color:#92a39f;
}

.achievement-icon{
}

.profile-achievement.is-complete .achievement-icon{
}

.profile-achievement strong{
    margin-top:13px;
    min-height:36px;
    color:#bdcbc6;
    font-family:"Lora", serif;
    font-size:13px;
    line-height:1.35;
    font-weight:500;
    text-wrap:balance;
}

.profile-achievement.is-complete strong{
    color:#d6e0dc;
}

.achievement-night{
    color:#8faeb5;
}

.profile-achievement.is-complete .achievement-night{
    color:#a1cfd0;
}

.profile-achievement.achievement-locked{
    opacity:.45;
}

.achievement-full-grid{
    display:block;
    padding:8px 4px 18px;
}

.achievement-category + .achievement-category{
    margin-top:28px;
}

.achievement-category > h3{
    margin:0 0 12px;
    color:#879894;
    font-family:"Lora", serif;
    font-size:13px;
    font-weight:400;
    letter-spacing:.03em;
}

.achievement-category-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.achievement-full-card{
    position:relative;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:18px 13px 15px;
    text-align:center;
    border:1px solid rgba(136, 164, 160, .12);
    border-radius:5px;
    background:rgba(5, 16, 19, .18);
}

.achievement-full-card.is-complete{
    border-color:rgba(91, 178, 142, .46);
    background:rgba(31, 71, 58, .12);
}

.achievement-full-badge{
    position:relative;
    width:104px;
    height:104px;
    margin-bottom:12px;
}

.achievement-state{
    position:absolute;
    z-index:1;
    display:grid;
    place-items:center;
    border-radius:50%;
}

.achievement-full-card.is-complete .achievement-state{
    top:3px;
    right:3px;
    width:23px;
    height:23px;
    color:#d9fff0;
    background:#3b9c74;
    font-size:11px;
}

.achievement-full-card:not(.is-complete) .achievement-state{
    top:50%;
    left:50%;
    width:30px;
    height:30px;
    color:#92a39f;
    border:1px solid rgba(146, 163, 159, .24);
    background:rgba(4, 13, 16, .82);
    font-size:12px;
    transform:translate(-50%,-50%);
}

.achievement-full-card > strong{
    min-height:40px;
    color:#dce6e2;
    font-family:"Lora", serif;
    font-size:15px;
    line-height:1.3;
    font-weight:600;
    text-wrap:balance;
}

.achievement-full-card p{
    margin:0;
}

.achievement-full-card .achievement-requirement{
    flex:1 1 auto;
    width:100%;
    margin-top:13px;
    color:#9fb2ac;
    font-size:11.5px;
    line-height:1.55;
    font-style:normal;
}

.achievement-full-card .achievement-note{
    width:100%;
    margin-top:9px;
    color:#6f827d;
    font-size:10px;
    line-height:1.5;
    font-style:italic;
}

.achievement-full-card .achievement-progress{
    width:100%;
    margin-top:14px;
    color:#b5c6c0;
    font-family:"Lora", serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:.02em;
}

.achievement-full-card.is-complete .achievement-progress{
    color:#78c7a7;
}

@media (max-width:900px){
    .achievement-category-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media (max-width:680px){
    .achievement-category-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:440px){
    .achievement-category-grid{
        grid-template-columns:1fr;
    }
}

/* ==================================================
   TITLES
================================================== */

.profile-title-legend{
    position:fixed;
    z-index:14000;
    width:min(330px, calc(100vw - 28px));
    padding:18px 19px;
    color:#d6dfdd;
    font-family:"Lora", serif;
    text-align:left;
    border:1px solid transparent;
    border-radius:8px;
    background:
        linear-gradient(
            180deg,
            rgba(20, 36, 32, .97),
            rgba(7, 17, 20, .98)
        ) padding-box,
        linear-gradient(
            128deg,
            rgba(244, 230, 196, .62) 0%,
            rgba(202, 167, 90, .28) 18%,
            rgba(42, 58, 54, .22) 46%,
            rgba(8, 18, 18, .9) 70%,
            rgba(202, 167, 90, .55) 100%
        ) border-box;
    background-clip:padding-box, border-box;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.03) inset,
        0 22px 48px rgba(0,0,0,.38),
        0 0 28px rgba(202, 167, 90, .10);
    pointer-events:none;
}

.profile-title-legend[hidden]{
    display:none;
}

.profile-title-legend::before{
    content:"";
    position:absolute;
    top:9px;
    bottom:9px;
    left:0;
    width:1px;
    background:linear-gradient(180deg, transparent, rgba(202, 167, 90, .55), transparent);
}

.profile-title-legend strong{
    display:block;
    margin-bottom:7px;
    color:#dfc48d;
    font-family:"Cormorant Garamond", serif;
    font-size:20px;
    line-height:1.2;
    font-weight:600;
}

.profile-title-legend p{
    margin:0;
    color:#a9bab4;
    font-size:14px;
    font-weight:400;
    font-style:italic;
    line-height:1.55;
    text-align:left;
    white-space: pre-line;
}


/* ==================================================
   SETTINGS
================================================== */

.profile-settings-list{
    padding:6px 9px 12px;
}

.profile-setting-form{
    margin:0;
}

.profile-setting-form .profile-setting-item{
    width:100%;
    color:inherit;
    border:0;
    background:transparent;
    font:inherit;
    text-align:left;
    cursor:pointer;
}

.profile-setting-item{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 18px;
    align-items:center;
    gap:10px;
    min-width:0;
    padding:11px 8px;
    border-radius:6px;
    text-decoration:none;
    transition:
        background .18s ease,
        color .18s ease;
}

.profile-setting-item:hover{
    background:rgba(108, 184, 160, .055);
}

.profile-setting-icon{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    color:#9baaa7;
    border:1px solid rgba(148, 183, 177, .08);
    border-radius:6px;
    background:rgba(7, 18, 20, .34);
    font-size:13px;
}

.profile-setting-text{
    min-width:0;
}

.profile-setting-text strong{
    display:block;
    color:#c3ceca;
    font-size:12px;
    font-weight:500;
}

.profile-setting-text small{
    display:block;
    margin-top:3px;
    color:#70817d;
    font-size:10px;
    line-height:1.35;
}

.profile-setting-arrow{
    color:#828d8a;
    font-size:10px;
}


.profile-history-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:0 20px 16px;
}

.profile-history-filter{
    min-height:34px;
    padding:0 16px;
    color:#91a09e;
    font-family:"Lora", serif;
    font-size:13px;
    border:1px solid rgba(150, 185, 190, .14);
    border-radius:5px;
    background:rgba(5, 16, 19, .42);
    cursor:pointer;
    transition:color .18s ease, border-color .18s ease, background .18s ease;
}

.profile-history-filter:hover{
    color:#dce8e3;
    border-color:rgba(123, 197, 180, .18);
    background:rgba(123, 197, 180, .055);
}

.profile-history-filter.is-active{
    color:#eef7f3;
    border-color:rgba(123, 197, 180, .28);
    background:linear-gradient(180deg, rgba(123, 197, 180, .05), rgba(13, 39, 39, .22));
}

.profile-history-list{
    display:grid;
    gap:14px;
    padding:0 20px 20px;
}

#profile-history-results{
    transition:opacity .14s ease;
}

#profile-history-results[aria-busy="true"]{
    opacity:.58;
    pointer-events:none;
}

.profile-history-empty{
    padding:28px 0;
    color:#a0b0ac;
    font-size:14px;
    text-align:center;
}


.profile-modal{
    position:fixed;
    inset:0;
    z-index:12001;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 22px 32px;
    background:rgba(0,0,0,.58);
    backdrop-filter:blur(10px);
}

.profile-modal[hidden]{
    display:none;
}

.profile-modal-card{
    --profile-modal-height-limit:780px;
    width:min(1080px, 100%);
    max-height:min(var(--profile-modal-height-limit), calc(100vh - 56px));
    max-height:min(var(--profile-modal-height-limit), calc(100dvh - 56px));
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(150, 185, 190, .16);
    border-radius:8px;
    background:linear-gradient(180deg, rgba(10, 27, 30, .98), rgba(5, 16, 19, .98));
    box-shadow:0 26px 80px rgba(0,0,0,.45);
}

.profile-modal-head{
    position:relative;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:58px;
    padding:12px 12px 8px 16px;
    border-bottom:0;
    background:transparent;
}

.profile-modal-head::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg, rgba(111, 200, 179, .36), rgba(111, 200, 179, .08), transparent);
}

.profile-modal-head h2{
    margin:0;
    color:#e0ebe8;
    font-family:inherit;
    font-size:17px;
    font-weight:500;
}

.profile-modal-close{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    color:#c8ddd8;
    border:0;
    border-radius:5px;
    background:transparent;
    cursor:pointer;
    transition:color .18s ease, background .18s ease;
}

.profile-modal-close:hover{
    color:#f0fffb;
    background:rgba(111, 200, 179, .05);
}

.profile-modal-body{
    flex:1 1 auto;
    min-height:0;
    padding:18px;
    overflow:auto;
    overscroll-behavior:contain;
}

.profile-modal-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
}

.profile-titles-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:10px;
    padding:16px;
}

@media (max-width: 900px){
    .profile-titles-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

.profile-title-card{
    position:relative;
    justify-items:center;
    overflow:visible;
}

.profile-title-card .title-card-icon{
    width:124px;
    height:124px;
    object-fit:contain;
    image-rendering:auto;
    filter:none;
}

.profile-title-card strong{
    font-weight:600;
}

.profile-title-card:hover:not(:disabled){
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 0 30px rgba(202, 167, 90, .05),
        0 0 22px rgba(202, 167, 90, .14),
        0 18px 34px rgba(0,0,0,.35);
}

.profile-title-legend .legend-threshold{
    display:block;
    margin-top:10px;
    color:#8fb9b1;
    font-family:"Lora", serif;
    font-size:12px;
    font-weight:400;
    font-style:normal;
    line-height:1.3;
    text-align: center;
    letter-spacing:0;
    font-variant-numeric:tabular-nums;
}

.profile-title-card{
    display:grid;
    gap:7px;
    padding:14px 15px;
    border:1px solid rgba(202, 167, 90, .16);
    border-radius:7px;
    background:linear-gradient(180deg, rgba(20, 36, 32, .64), rgba(6, 17, 20, .86));
    text-align:left;
    cursor:pointer;
    transition:border-color .18s ease, background .18s ease, transform .08s ease;
}

.profile-title-card:hover:not(:disabled){
    border-color:rgba(202, 167, 90, .32);
    background:linear-gradient(180deg, rgba(24, 42, 37, .72), rgba(6, 17, 20, .9));
    transform:translateY(-1px);
}

.profile-title-card:disabled{
    opacity:.48;
    cursor:not-allowed;
}

.profile-title-card strong{
    color:#dfc48d;
    font-family:"Cormorant Garamond", serif;
    font-size:18px;
    line-height:1.2;
}

.profile-title-card p{
    margin:0;
    color:#a9bab4;
    font-size:12px;
    line-height:1.55;
}

/* Profile: avoid legacy '?' pseudo-icons */
.profile-modal .block-head > span::before,
.profile-modal .preview-label::before,
.profile-modal .preview-label-new::before{
    content:none;
    margin-right:0;
}

.profile-modal-body .achievement-category-grid{
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}

@media (max-width:1000px){
    .profile-hero,
    .profile-lower-grid{
        grid-template-columns:1fr;
    }

    .profile-identity{
        flex-direction:column;
        text-align:center;
        padding:24px 18px;
    }

    .profile-main-info{
        width:100%;
        margin:0 auto;
    }

    .profile-name-row{
        justify-content:center;
    }

    .profile-account-row,
    .profile-handle-row{
        justify-content:center;
    }

    .profile-persona{
        margin-left:auto;
        margin-right:auto;
        text-align:center;
    }

    .profile-meta{
        justify-content:center;
    }

    .profile-status-line{
        justify-content:center;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
    }

    .profile-summary-body{
        grid-template-columns:1fr;
        grid-template-areas:
            "donut"
            "rows"
            "link";
        justify-items:center;
    }

    .profile-donut{
        width:132px;
        height:132px;
    }

}

@media (max-width:560px){
    .profile-name-row h1{
        font-size:38px;
    }

    .profile-avatar{
        width:96px;
        height:96px;
        margin:0 auto 18px;
    }

    .profile-account-row{
        column-gap:8px;
    }

    .profile-achievement-grid,
    .profile-lower-grid.is-public-profile .profile-achievement-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .profile-summary{
        padding-left:15px;
        padding-right:15px;
    }

    .profile-summary-row{
        grid-template-columns:8px minmax(0,1fr) auto;
    }

    .profile-summary-row em{
        display:none;
    }

    .profile-history-head,
    .profile-history-filters,
    .profile-history-list{
        padding-left:14px;
        padding-right:14px;
    }
}

@media (max-width:420px){
    .profile-account-divider{
        display:none;
    }

    .profile-meta{
        flex-basis:100%;
    }

    .profile-persona{
        grid-template-columns:minmax(0, 1fr) 1px minmax(0, 1fr);
        width:100%;
        padding:8px 5px;
    }

    .profile-role-line{
        padding:0 8px;
    }

    .profile-title{
        padding:0 8px;
    }

    .profile-title strong{
        white-space:normal;
        overflow-wrap:anywhere;
    }
}

/*==================================================
    NOTIFICATIONS (restored)
==================================================*/

.notifications-header-wrap{
    position:relative;
}

.notifications-header-wrap .header-notifications-btn{
    position:relative;
}

.notifications-dropdown{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    z-index:10500;
    width:min(420px, calc(100vw - 28px));
    color:var(--text);
    border:1px solid rgba(150, 185, 190, .16);
    border-radius:10px;
    background:#071416;
    overflow:hidden;
    opacity:1;
    transform:none;
}

.notifications-dropdown[hidden]{
    display:none;
}

.notifications-head{
    position:relative;
    padding:14px 16px 12px;
    background:linear-gradient(180deg, rgba(111, 200, 179, .055), transparent);
}

.notifications-head::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg, rgba(111, 200, 179, .52), rgba(111, 200, 179, .12), transparent);
}

.notifications-list{
    background:#071416;
    max-height:min(430px, 60vh);
    overflow-y:auto;
    overscroll-behavior:contain;
}

.notification-item{
    position:relative;
    display:flex;
    gap:12px;
    padding:12px 16px;
    color:var(--text);
    text-decoration:none;
    background:#071416;
    border-bottom:1px solid rgba(160, 185, 190, .06);
    transition:background .16s ease, color .16s ease;
}

.notification-item:last-child{
    border-bottom:0;
}

.notification-item:hover{
    background:rgba(111, 200, 179, .07);
    color:#e7f4f0;
}

.notification-item.is-unread{
    background:rgba(111, 200, 179, .05);
}

.notification-item.is-unread::before{
    content:"";
    position:absolute;
    left:7px;
    top:18px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#7bc5b4;
}

.notification-icon{
    --notification-icon-image:none;
    position:relative;
    flex:0 0 auto;
    width:42px;
    height:42px;
    border:1px solid rgba(150, 185, 190, .14);
    border-radius:50%;
    background:transparent;
    box-shadow:none;
}

.notification-icon::before{
    content:"";
    position:absolute;
    inset:4px;
    background-image:var(--notification-icon-image);
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
}

.notification-icon[data-kind="edit"]{
    --notification-icon-image:url("/static/icons/notification-edit.svg?v=20261016g");
}

.notification-icon[data-kind="glossary"]{
    --notification-icon-image:url("/static/icons/notification-term.svg?v=20261016h");
}

.notification-icon[data-kind="achievement"]{
    --notification-icon-image:url("/static/icons/notification-achievement.svg?v=20261016h");
}

.notification-icon[data-state="achievement"]{
    border-color:rgba(205, 170, 106, .42);
    background:transparent;
}

.notification-icon[data-state="accepted"]{
    border-color:rgba(111, 200, 179, .38);
    background:transparent;
}

.notification-icon[data-state="rejected"]{
    border-color:rgba(194, 112, 103, .42);
    background:transparent;
}

.notification-content{
    display:grid;
    gap:3px;
    min-width:0;
    flex:1;
}

.notification-title{
    color:#e3efeb;
    font-size:14px;
    font-weight:600;
    line-height:1.35;
    overflow-wrap:anywhere;
}

.notification-body{
    color:#b8cbc8;
    font-size:14px;
    line-height:1.45;
    overflow-wrap:anywhere;
}

.notification-time{
    color:#8e9998;
    font-size:12px;
}

.notifications-empty{
    background:#071416;
    padding:38px 16px;
    color:#93a5a1;
    text-align:center;
    font-size:14px;
}

.notifications-dot{
    position:absolute;
    top:9px;
    right:9px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#7bc5b4;
    border:1px solid rgb(7 20 22);
    box-shadow:0 0 6px rgba(123, 197, 180, .35);
    pointer-events:none;
}

@media (max-width:640px){
    .notifications-dropdown{
        right:-8px;
        width:min(360px, calc(100vw - 28px));
    }

    .notifications-list{
        max-height:56vh;
    }

    .notification-item{
        padding:11px 13px 11px 18px;
    }

    .notification-icon{
        width:40px;
        height:40px;
    }
}

/* Reference title block */


.profile-titles-panel .profile-titles-all{
    justify-self:end;
    align-self:center;
    margin-top:0;
    display:inline-flex;
    align-items:center;
    padding:6px 14px;
    border:1px solid rgba(202, 167, 90, .34);
    border-radius:99px;
    color:#cdc3a2;
    font-family:"Lora", serif;
    font-size:13px;
    line-height:1;
    background:transparent;
    letter-spacing:.01em;
    cursor:pointer;
    transition:color .18s ease, background .18s ease, border-color .18s ease;
}

.profile-titles-panel .profile-titles-all:hover{
    color:#c9a95c;
    background:rgba(202, 167, 90, .08);
}

.profile-titles-panel{
    display:grid;
    gap:0;
    margin:18px 0 20px;
    border:1px solid rgba(150, 185, 190, .12);
    border-radius:8px;
    background:linear-gradient(180deg, rgba(10, 27, 29, .90), rgba(6, 17, 20, .95));
    overflow:hidden;
}

.profile-title-block{
    display:grid;
    grid-template-columns:auto 28px minmax(220px,1fr) 28px auto;
    align-items:center;
    min-height:96px;
    padding:14px 20px;
    gap:0;
}

.profile-title-divider{
    width:1px;
    height:62px;
    justify-self:center;
    background:linear-gradient(180deg, transparent, rgba(186, 206, 202, .5) 18%, rgba(186, 206, 202, .5) 82%, transparent);
}

.profile-title-left,
.profile-title-right{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.profile-title-left{
    padding-right:10px;
}

.profile-title-right{
    padding-left:10px;
    opacity:.82;
    border-left:0;
}

.profile-title-center{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    column-gap:18px;
    row-gap:9px;
    min-width:0;
    padding:2px 8px;
    border-left:0;
}
.profile-title-next-label{grid-column:1 / -1;}
.profile-title-next-label{grid-row:1;}
.profile-title-progress-bar{pointer-events:none;}
.profile-title-xp{grid-column:1;grid-row:3;justify-self:start;}
.profile-titles-all{grid-column:2;grid-row:3;justify-self:end;position:relative;z-index:3;pointer-events:auto;}

.profile-title-emblem{
    opacity:1;
}

.profile-title-left span,
.profile-title-right span{
    display:block;
    color:#c2d2ce;
    font-size:12px;
    line-height:1.2;
    letter-spacing:.01em;
}

.profile-title-left strong,
.profile-title-right strong{
    display:block;
    margin-top:3px;
    color:#d4b677;
    font-family:"Cormorant Garamond", serif;
    font-size:21px;
    line-height:1.25;
}

.profile-title-right strong{
    color:#d4b677;
    opacity:.82;
}

.profile-title-next-label{
    color:#c8d6d2;
    font-size:13px;
    line-height:1;
}

.profile-title-progress-bar{
    grid-column:1 / -1;
    grid-row:2;
    position:relative;
    width:100%;
    height:3px;
    border-radius:99px;
    background:rgba(143, 185, 177, .18);
    overflow:hidden;
}

.profile-title-progress-fill{
    height:100%;
    border-radius:99px;
    background:#5fb98a;
}

.profile-title-xp{
    color:#a7b3af;
    font-family:"Lora", serif;
    font-size:14px;
    line-height:1;
    font-weight:400;
    font-variant-numeric:tabular-nums;
}

.profile-title-xp span{
    color:#a7b3af;
    font-weight:400;
}

.profile-titles-all{
    display:inline-flex;
    align-items:center;
    padding:5px 16px;
    border:0;
    border-radius:99px;
    color:#9a937e;
    font-family:"Lora", serif;
    font-size:13px;
    line-height:1;
    background:transparent;
    letter-spacing:.01em;
    cursor:pointer;
    transition:color .18s ease, background .18s ease;
}

.profile-titles-all:hover,
.profile-titles-all:focus-visible{
    color:#c9a95c;
    background:rgba(202, 167, 90, .08);
    outline:none;
}

@media (max-width:1000px){
    .profile-title-block{
        grid-template-columns:1fr;
        gap:16px;
    }

    .profile-title-center,
    .profile-title-right{
        border-left:0;
        padding-left:0;
    }

    .profile-title-divider{
        display:none;
    }

    .profile-title-left{
        padding-right:0;
    }

    .profile-title-center{
        padding:0;
    }

    .profile-titles-all{
        grid-column:1;
        justify-self:center;
    }
}

/* Restore collapse arrow icons */
.profile-setting-arrow{
    font-family:"Font Awesome 6 Free", "Lora", serif;
    font-weight:900;
}



/* PNG icon system: achievements and title emblems */
.achievement-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(202, 167, 90, .16);
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 0%, rgba(202, 167, 90, .09), transparent 68%),
        rgba(6, 17, 20, .55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.achievement-icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    image-rendering: auto;
    filter: saturate(1.05) contrast(1.08);
    opacity: .52;
    transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}

.profile-achievement.is-complete .achievement-icon img {
    opacity: 1;
    filter: saturate(1.12) contrast(1.1) drop-shadow(0 0 8px rgba(202, 167, 90, .16));
}

.achievement-full-card.is-complete .achievement-icon img {
    opacity: 1;
    filter: saturate(1.12) contrast(1.1) drop-shadow(0 0 8px rgba(202, 167, 90, .16));
}

.achievement-full-card.is-complete .achievement-icon {
    border-color: rgba(202, 167, 90, .36);
}

.profile-achievement.is-complete .achievement-icon {
    border-color: rgba(202, 167, 90, .36);
}

.profile-achievement .achievement-icon,
.profile-achievement.is-complete .achievement-icon {
    width: 82px;
    height: 82px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.profile-achievement .achievement-icon img,
.profile-achievement.is-complete .achievement-icon img {
    width: 82px;
    height: 82px;
    opacity: 1;
    filter: none;
    transition: none;
}

.achievement-full-card .achievement-icon,
.achievement-full-card.is-complete .achievement-icon {
    width:104px;
    height:104px;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
}

.achievement-full-card .achievement-icon img,
.achievement-full-card.is-complete .achievement-icon img {
    width:104px;
    height:104px;
    opacity:1;
    filter:none;
    transition:none;
}

.achievement-full-card:not(.is-complete) .achievement-icon img {
    opacity:.36;
    filter:grayscale(.55) brightness(.72);
}

.profile-title-emblem {
    width: 92px;
    height: 92px;
    flex: 0 0 auto;
    object-fit: contain;
}

.profile-title-emblem img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    image-rendering: auto;
    opacity: 1;
}


.profile-donut.is-empty{
    background:rgba(143,185,177,.10);
    box-shadow:inset 0 0 0 1px rgba(150,185,190,.10);
}

/* full-width title progress */


/* legend dividers: keep text off the rules */
.profile-summary-row + .profile-summary-row{
    border-top:1px solid rgba(150, 185, 190, .16);
}

/* title images: plain, no effects */
.profile-title-emblem,
.profile-title-emblem img{
    filter:none !important;
    box-shadow:none !important;
    border:none !important;
    outline:none !important;
    background:transparent !important;
    image-rendering:auto;
}

.profile-title-card:hover:not(:disabled),
.profile-title-card:focus-visible:not(:disabled){
    transform:none;
}

.profile-title-card[aria-disabled="true"]{
    opacity:.48;
    cursor:not-allowed;
}

.profile-title-card .title-card-icon{
    transform:none;
    transition:none;
}

.profile-title-card.is-selected{
    border-color:rgba(212, 182, 119, .62);
    background:
        radial-gradient(circle at 50% 0%, rgba(202, 167, 90, .12), transparent 66%),
        linear-gradient(180deg, rgba(28, 47, 41, .82), rgba(6, 17, 20, .94));
    box-shadow:inset 0 0 0 1px rgba(212, 182, 119, .09);
}

.profile-title-card .title-card-status{
    color:#7f9d96;
    font-family:"Lora", serif;
    font-size:10px;
    line-height:1.2;
}

.profile-title-card.is-selected .title-card-status{
    color:#d4b677;
}

#profile-edits-modal .profile-modal-card{
    width:min(1120px, 100%);
    height:min(var(--profile-modal-height-limit), calc(100vh - 56px));
    height:min(var(--profile-modal-height-limit), calc(100dvh - 56px));
}

#profile-edits-modal .profile-modal-body{
    padding:16px 16px 18px;
}

#profile-edits-modal .profile-history-toolbar{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    width:100%;
    margin:0 0 14px;
    min-width:0;
}

#profile-edits-modal .profile-history-toolbar.is-moderator{
    justify-content:center;
}

#profile-edits-modal .profile-history-switch{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex:0 0 auto;
    gap:4px;
    margin-left:auto;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
}

#profile-edits-modal .profile-history-switch.is-moderator{
    justify-content:center;
    gap:8px;
    width:max-content;
    margin:0 auto;
    padding:4px;
    border:1px solid rgba(150, 185, 190, .15);
    border-radius:7px;
    background:linear-gradient(180deg, rgba(255,255,255,.035), transparent), rgba(5,16,19,.46);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

#profile-edits-modal .profile-history-switch.is-single button{
    display:inline-grid;
    place-items:center;
    min-height:34px;
    padding:0 2px 7px;
    color:#8e9998;
    font-family:"Lora", serif;
    font-size:16px;
    line-height:1.2;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    opacity:.9;
    transition:color .18s ease, opacity .18s ease;
}

#profile-edits-modal .profile-history-toggle-option{
    grid-area:1 / 1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    visibility:hidden;
}

#profile-edits-modal .profile-history-toggle-option.is-visible{
    visibility:visible;
}

#profile-edits-modal .profile-history-toggle-label{
    display:inline-block;
}

#profile-edits-modal .profile-history-toggle::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:100%;
    height:1px;
    transform:translateX(-50%) scaleX(0);
    transform-origin:center;
    background:linear-gradient(90deg, transparent, rgba(123, 197, 180, .78), transparent);
    opacity:.88;
    transition:transform .16s ease, opacity .16s ease;
}

#profile-edits-modal .profile-history-toggle-arrow{
    color:#7f9993;
    line-height:1;
}

#profile-edits-modal .profile-history-switch button{
    position:relative;
    flex:0 0 auto;
    min-height:34px;
    padding:0 16px;
    color:#91a09e;
    font:400 13px "Lora", serif;
    white-space:nowrap;
    border:1px solid transparent;
    border-radius:5px;
    background:transparent;
    cursor:pointer;
    transition:color .18s ease, border-color .18s ease, background .18s ease;
}

#profile-edits-modal .profile-history-switch.is-moderator button{
    min-height:34px;
    padding:0 22px;
    font-family:inherit;
    font-size:14px;
}

#profile-edits-modal .profile-history-switch button:hover,
#profile-edits-modal .profile-history-switch button:focus-visible{
    color:#d4e3df;
    border-color:rgba(123, 197, 180, .18);
    background:rgba(123, 197, 180, .055);
    outline:none;
}

#profile-edits-modal .profile-history-switch.is-single .profile-history-toggle:hover,
#profile-edits-modal .profile-history-switch.is-single .profile-history-toggle:focus-visible{
    color:#dce9e5;
    border-color:transparent;
    background:transparent;
    box-shadow:none;
    opacity:1;
}

#profile-edits-modal .profile-history-toggle:hover::after,
#profile-edits-modal .profile-history-toggle:focus-visible::after{
    transform:translateX(-50%) scaleX(1);
}

#profile-edits-modal .profile-history-switch.is-moderator button.active{
    color:#eef7f3;
    border-color:rgba(123, 197, 180, .28);
    background:linear-gradient(180deg, rgba(123, 197, 180, .05), rgba(13, 39, 39, .22));
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, .04);
}

#profile-edits-modal .profile-history-switch.is-moderator button.active::after{
    content:"";
    position:absolute;
    left:16px;
    right:16px;
    bottom:5px;
    height:1px;
    opacity:.75;
    background:linear-gradient(90deg, transparent, rgba(123, 197, 180, .72), transparent);
}

#profile-edits-modal .profile-history-switch button[hidden],
#profile-edits-modal .profile-modal-filters[hidden]{
    display:none !important;
}

#profile-edits-modal .profile-modal-filters{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 1 auto;
    width:max-content;
    min-width:0;
    max-width:100%;
    margin:0;
    padding:4px;
    overflow-x:auto;
    overflow-y:hidden;
    border:1px solid rgba(150, 185, 190, .12);
    border-radius:7px;
    background:rgba(5, 16, 19, .42);
}

#profile-edits-modal .profile-history-filter{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    min-width:0;
    padding:0 16px;
    color:#91a09e;
    font-family:inherit;
    font-size:14px;
    white-space:nowrap;
    border:1px solid transparent;
    border-radius:5px;
    background:transparent;
    box-shadow:none;
}

#profile-edits-modal .profile-history-filter:hover{
    color:#d8dfdc;
    border-color:rgba(123, 197, 180, .18);
    background:rgba(123, 197, 180, .055);
}

#profile-edits-modal .profile-history-filter.is-active{
    color:#dce8e3;
    border-color:rgb(123 197 191 / 0.28);
    background:linear-gradient(180deg, rgba(58, 105, 91, .12), rgb(13 39 39 / .42));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 0 18px rgba(80, 180, 153, .08);
}

#profile-edits-modal .profile-history-list{
    display:grid;
    gap:12px;
    padding:0;
}

#profile-edits-modal .profile-history-list.is-code-pending{
    visibility:hidden;
}

#profile-edits-modal .profile-edit-card{
    min-width:0;
    padding:14px;
    border:1px solid rgba(138, 166, 170, .22);
    border-radius:7px;
    background:
        linear-gradient(180deg, rgb(7 23 25 / .95), rgb(6 21 21 / .88)),
        radial-gradient(ellipse at 14% 0%, rgba(117, 173, 145, .08), transparent 44%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 10px 22px rgba(0,0,0,.18);
}

#profile-edits-modal .profile-edit-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

#profile-edits-modal .profile-edit-id{
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:max-content;
    max-width:100%;
    min-height:36px;
    padding:0 13px;
    border:1px solid rgba(150, 185, 190, .14);
    border-radius:5px;
    background:rgba(7, 20, 24, .48);
}

#profile-edits-modal .profile-edit-id::before{
    content:"";
    align-self:center;
    flex:0 0 6px;
    width:6px;
    height:6px;
    margin:0;
    border:1px solid rgba(202, 167, 90, .72);
    transform:rotate(45deg);
}

#profile-edits-modal .profile-edit-id-label,
#profile-edits-modal .profile-edit-id-value{
    color:#7f9290;
    font-size:12px;
    line-height:1;
    letter-spacing:.06em;
    white-space:nowrap;
}

#profile-edits-modal .profile-edit-id-value{
    min-width:0;
    max-width:100%;
}

#profile-edits-modal .profile-edit-times{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px 12px;
    margin-top:3px;
    color:#7f9c98;
    font-family:ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size:12px;
    white-space:nowrap;
}

#profile-edits-modal .profile-edit-status-row{
    display:flex;
    align-items:center;
    gap:14px;
    margin:-2px 0 12px;
}

#profile-edits-modal .profile-edit-decision{
    color:#8eaaa6;
    font-family:"Lora", serif;
    font-size:13px;
    font-weight:400;
    line-height:1.2;
}

#profile-edits-modal .profile-edit-status{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 10px;
    border:1px solid rgba(154, 177, 171, .22);
    border-radius:5px;
    color:#eef7f3;
    font-size:12px;
    font-weight:600;
    line-height:1;
}

#profile-edits-modal .profile-edit-status-approved{
    border-color:rgba(86, 190, 139, .38);
    background:rgba(64, 154, 112, .14);
    color:#bfead1;
}

#profile-edits-modal .profile-edit-status-auto-approved{
    border-color:rgba(140, 183, 228, .38);
    background:rgba(62, 113, 166, .15);
    color:#c5ddf5;
}

#profile-edits-modal .profile-edit-status-pending{
    border-color:rgba(205, 170, 106, .34);
    background:rgba(168, 132, 62, .14);
    color:#ead7a8;
}

#profile-edits-modal .profile-edit-status-rejected{
    border-color:rgba(214, 99, 99, .38);
    background:rgba(153, 55, 55, .14);
    color:#f0b9b9;
}

#profile-edits-modal .profile-edit-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

#profile-edits-modal .profile-edit-note{
    grid-column:1 / -1;
    min-width:0;
}

#profile-edits-modal .profile-history-field-wide{
    grid-column:1 / -1;
}

#profile-edits-modal .profile-edit-block-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:8px 0 8px;
    color:#9ba9a7;
    font-size:13px;
    line-height:1;
    letter-spacing:.06em;
    text-transform:uppercase;
}

#profile-edits-modal .profile-edit-text::before{
    content:none !important;
    margin:0 !important;
}

#profile-edits-modal .profile-edit-block-head > span{
    display:inline-flex;
    align-items:center;
}

#profile-edits-modal .profile-edit-block-head > span::before{
    content:"〉" !important;
    margin:0 6px 0 0 !important;
    color:rgb(123 197 191 / .66);
    font-size:17px;
    line-height:1;
    opacity:.8;
}

#profile-edits-modal .profile-edit-text{
    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    margin:0;
    padding:14px 18px;
    overflow-x:auto;
    color:#d6dfdd;
    font-family:"Lora", serif;
    font-size:15px;
    line-height:1.55;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
    border:1px solid rgba(150, 185, 190, .12);
    border-left:2px solid rgb(91 143 137 / .72);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
}

#profile-edits-modal .profile-edit-text.is-comparing{
    box-sizing:border-box;
    padding:14px 18px;
    border-left-width:2px;
    border-left-color:rgb(91 143 137 / .72);
}

#profile-edits-modal .profile-edit-text::before,
#profile-edits-modal .profile-edit-text::after,
#profile-edits-modal .profile-edit-text.is-comparing::before,
#profile-edits-modal .profile-edit-text.is-comparing::after{
    content:none !important;
    display:none !important;
    width:0 !important;
    margin:0 !important;
}

#profile-edits-modal .profile-edit-block-head .rev-icon-btn{
    display:none;
}

#profile-edits-modal .profile-edit-text-wrap{
    position:relative;
}

#profile-edits-modal .new-ru-actions{
    position:absolute;
    top:-3px;
    right:2px;
    z-index:6;
    display:flex;
    gap:2px;
}

#profile-edits-modal .profile-edit-text-wrap > .collapse-btn{
    top:-3px;
    right:0;
    width:38px;
    height:38px;
}

#profile-edits-modal .new-ru-item > .collapse-btn{
    right:38px;
}

#profile-edits-modal .profile-edit-text.is-collapsed{
    max-height:calc((1.55em * 2) + 30px);
    overflow:hidden;
}

#profile-edits-modal .profile-edit-text-wrap > .profile-edit-text{
    padding-right:42px;
}

#profile-edits-modal .new-ru-item > .profile-edit-text{
    padding-right:80px;
}

#profile-edits-modal .new-ru-actions .rev-icon-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:38px;
    margin:0;
    padding:0 0 6px;
    color:#8e9998;
    font-size:20px;
    line-height:1;
    border:0;
    border-radius:2px;
    background:transparent;
    box-shadow:none;
    cursor:pointer;
    opacity:.42;
    transform:none;
}

#profile-edits-modal .new-ru-actions .rev-icon-btn:hover,
#profile-edits-modal .new-ru-actions .rev-icon-btn.is-active{
    color:#d8ece4;
    opacity:.58;
    background:transparent;
    box-shadow:none;
}

#profile-edits-modal .new-ru-actions .rev-icon-btn:disabled{
    cursor:wait;
    opacity:.3;
}

#profile-edits-modal .new-ru-actions .rev-icon-btn:active{
    transform:none;
}

#profile-edits-modal .rev-action-icon{
    display:block;
    width:18px;
    height:18px;
    margin:8px 0 0;
    background:currentColor;
    -webkit-mask:url("/static/icons/compare.png") center / contain no-repeat;
    mask:url("/static/icons/compare.png") center / contain no-repeat;
}

#profile-edits-modal .profile-edit-text .diff-old,
#profile-edits-modal .profile-edit-text .diff-new,
#profile-edits-modal .profile-edit-text.code-highlighted-v2 .diff-old,
#profile-edits-modal .profile-edit-text.code-highlighted-v2 .diff-old span,
#profile-edits-modal .profile-edit-text.code-highlighted-v2 .diff-new,
#profile-edits-modal .profile-edit-text.code-highlighted-v2 .diff-new span{
    color:inherit;
    display:inline !important;
    border-radius:3px;
    padding:0 .08em !important;
    margin:0 !important;
    border:0 !important;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
}

#profile-edits-modal .profile-edit-text .diff-old,
#profile-edits-modal .profile-edit-text.code-highlighted-v2 .diff-old,
#profile-edits-modal .profile-edit-text.code-highlighted-v2 .diff-old span{
    background:rgba(185, 130, 120, .22) !important;
    box-shadow:inset 0 -1px 0 rgba(185, 130, 120, .28) !important;
}

#profile-edits-modal .profile-edit-text .diff-new,
#profile-edits-modal .profile-edit-text.code-highlighted-v2 .diff-new,
#profile-edits-modal .profile-edit-text.code-highlighted-v2 .diff-new span{
    background:rgba(123, 197, 180, .2) !important;
    box-shadow:inset 0 -1px 0 rgba(123, 197, 180, .26) !important;
}

#profile-edits-modal .profile-edit-note-body{
    padding:12px 14px;
    color:#d6dfdd;
    font-size:14px;
    line-height:1.5;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    border:1px solid rgba(150, 185, 190, .12);
    border-left:2px solid rgb(91 143 137 / .72);
    border-radius:6px;
    background:rgb(6 19 22 / .62);
}

#profile-edits-modal .profile-history-value{
    min-height:46px;
    padding:12px 14px;
    color:#d6dfdd;
    font-size:14px;
    line-height:1.5;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    border:1px solid rgba(150, 185, 190, .12);
    border-left:2px solid rgb(91 143 137 / .72);
    border-radius:6px;
    background:rgb(6 19 22 / .62);
}

#profile-edits-modal .profile-replace-details{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}

#profile-edits-modal .profile-replace-result,
#profile-edits-modal .profile-replace-parameters{
    border:1px solid rgba(150, 185, 190, .1);
    border-radius:6px;
    background:rgba(6, 19, 22, .55);
}

#profile-edits-modal .profile-replace-result{
    display:flex;
    align-items:center;
    min-height:52px;
    padding:14px 18px;
    color:#d6dfdd;
    font-family:"Lora", serif;
    font-size:15px;
    line-height:1.55;
    border-left:2px solid rgb(91 143 137 / .72);
}

#profile-edits-modal .profile-replace-result strong{
    color:#eef7f3;
    font-weight:600;
}

#profile-edits-modal .profile-replace-parameters{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:1px;
    overflow:hidden;
    border-left:2px solid rgb(91 143 137 / .72);
    background:rgba(150, 185, 190, .1);
}

#profile-edits-modal .profile-replace-parameters > span{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
    padding:13px 16px;
    background:rgba(6, 19, 22, .92);
}

#profile-edits-modal .profile-replace-parameters small{
    color:#718783;
    font-size:12px;
    letter-spacing:.07em;
    text-transform:uppercase;
}

#profile-edits-modal .profile-replace-parameters strong{
    color:#c3d1ce;
    font-family:"Lora", serif;
    font-size:14.5px;
    font-weight:400;
    line-height:1.35;
    overflow-wrap:anywhere;
}

#profile-edits-modal .profile-edit-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

#profile-edits-modal .profile-edit-tag{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    color:#d8ece4;
    font-size:12.5px;
    border:1px solid rgb(107 228 210 / .38);
    border-radius:999px;
    background:rgba(13, 34, 35, .72);
}

#profile-edits-modal .profile-history-pager{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}

#profile-edits-modal .profile-history-pager[hidden]{
    display:none;
}

#profile-edits-modal .profile-history-page,
#profile-edits-modal .profile-history-ellipsis{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    min-height:34px;
    padding:0 10px;
    color:#b8cbc8;
    font-family:"Lora", serif;
    font-size:14px;
    border:1px solid rgba(138, 166, 170, .18);
    border-radius:5px;
    background:rgba(6, 19, 22, .42);
    cursor:pointer;
}

#profile-edits-modal .profile-history-ellipsis{
    min-width:24px;
    color:#7f918d;
    border-color:transparent;
    background:transparent;
}

#profile-edits-modal .profile-history-page:hover:not(:disabled){
    color:#d8ece4;
    border-color:rgb(107 228 210 / .28);
    background:rgba(9, 29, 31, .58);
}

#profile-edits-modal .profile-history-page.is-active{
    color:#eef7f3;
    border-color:rgba(123, 197, 180, .42);
    background:rgba(53, 117, 102, .22);
    pointer-events:none;
}

#profile-edits-modal .profile-history-page:disabled{
    opacity:.38;
    cursor:default;
}

#profile-edits-modal .profile-history-jump{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-left:4px;
    color:#8ea39f;
    font-family:"Lora", serif;
    font-size:13px;
}

#profile-edits-modal .profile-history-page-input{
    width:58px;
    min-height:34px;
    padding:0 8px;
    color:#e7f3ef;
    font-family:"Lora", serif;
    font-size:14px;
    text-align:center;
    border:1px solid rgba(138, 166, 170, .18);
    border-radius:5px;
    background:rgba(6, 19, 22, .42);
}

#profile-edits-modal .profile-history-page-input:focus{
    outline:none;
    border-color:rgba(123, 197, 180, .42);
}

@media (max-width: 800px){
    #profile-edits-modal .profile-edit-head,
    #profile-edits-modal .profile-edit-grid{
        display:grid;
        grid-template-columns:1fr;
    }

    #profile-edits-modal .profile-edit-times{
        justify-content:flex-start;
        white-space:normal;
    }

    #profile-edits-modal .profile-history-toolbar{
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    #profile-edits-modal .profile-history-switch{
        justify-content:flex-start;
        align-self:flex-end;
    }

    #profile-edits-modal .profile-history-switch.is-moderator{
        justify-content:flex-start;
        align-self:center;
        max-width:100%;
    }

    #profile-edits-modal .profile-replace-details{
        grid-template-columns:1fr;
    }
}


.admin-db-body{
    padding:0 0 40px;
}

.admin-db-result-panel .admin-panel-head h1{
    font-size:27px;
}

.admin-panel + .admin-panel{
    margin-top:18px;
}

.admin-db-flash{
    margin:0 0 18px;
    padding:12px 16px;
    color:#d8e2df;
    font-family:"Lora", serif;
    font-size:14px;
    line-height:1.5;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:6px;
    background:rgba(10, 31, 31, .72);
}

.admin-db-flash-success{
    border-color:rgba(123, 197, 180, .38);
    background:linear-gradient(180deg, rgba(23, 56, 50, .8), rgba(10, 31, 31, .78));
    box-shadow:inset 0 0 24px rgba(80, 180, 153, .06);
}

.admin-db-flash-error{
    border-color:rgba(185, 130, 120, .4);
    background:linear-gradient(180deg, rgba(58, 25, 22, .8), rgba(36, 16, 14, .78));
}

.admin-db-form-row{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px 20px;
    align-items:stretch;
}

.admin-db-column{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0;
    min-height:100%;
}

.admin-db-card{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-width:0;
    border:1px solid rgba(150, 185, 190, .22);
    border-radius:8px;
    background:linear-gradient(180deg, rgb(9 28 30 / .72), rgb(6 19 22 / .8)),
            radial-gradient(ellipse at 12% 0%, rgba(117, 173, 145, .06), transparent 46%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),
            0 12px 26px rgba(0,0,0,.18);
}

.admin-db-card-head{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:52px;
    padding:12px 14px;
    border-bottom:1px solid rgba(138, 166, 170, .16);
    background:rgba(8, 22, 24, .4);
}

.admin-db-card-title{
    color:#cdd8d6;
    font-family:"Lora", serif;
    font-size:15px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.admin-db-icon{
    display:block;
    width:18px;
    height:18px;
    background:currentColor;
    -webkit-mask-position:center;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-size:contain;
    mask-position:center;
    mask-repeat:no-repeat;
    mask-size:contain;
}

.admin-db-icon-close{
    position:relative;
    width:14px;
    height:14px;
    background:transparent;
    -webkit-mask-image:none;
    mask-image:none;
}

.admin-db-icon-close::before,
.admin-db-icon-close::after{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:1.5px;
    border-radius:2px;
    background:currentColor;
}

.admin-db-icon-close::before{
    transform:translateY(-50%) rotate(45deg);
}

.admin-db-icon-close::after{
    transform:translateY(-50%) rotate(-45deg);
}

.admin-db-card-body{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    gap:13px;
    padding:14px;
}

.admin-db-control{
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
}

.admin-db-control-label{
    color:#8fa09d;
    font-family:"Lora", serif;
    font-size:12px;
    letter-spacing:.02em;
}

.admin-db-control-action{
    margin-top:auto;
    align-items:flex-end;
}

.admin-db-source-dropdown,
.admin-db-source-dropdown .custom-dropdown{
    width:100%;
}

.admin-db-source-dropdown .dropdown-btn{
    width:100%;
}

.admin-db-source-dropdown,
.admin-db-source-dropdown .custom-dropdown,
.admin-db-source-dropdown .dropdown-btn,
.admin-db-file-field,
.admin-db-submit{
    height:44px;
    min-height:44px;
    max-height:44px;
}

.admin-db-file-field{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:0 8px 0 13px;
    border:1px solid rgba(150, 185, 190, .22);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
    transition:border-color .18s ease, box-shadow .18s ease;
}

.admin-db-file-field.has-file{
    border-color:rgba(123, 197, 180, .3);
}

.admin-db-file-btn{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:30px;
    min-height:30px;
    max-height:30px;
    padding:0 13px;
    color:#b8cbc8;
    font-family:"Lora", serif;
    font-size:13px;
    border:1px solid rgba(138, 166, 170, .22);
    border-radius:5px;
    background:linear-gradient(180deg, rgb(12 28 29 / .56), rgb(7 18 20 / .82));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),
            0 8px 18px rgba(0,0,0,.16);
    cursor:pointer;
    transition:transform .08s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.admin-db-file-btn:hover{
    color:#d8ece4;
    border-color:rgb(107 228 210 / .28);
    background:linear-gradient(180deg, rgb(13 34 35 / .58), rgb(8 20 21 / .94));
}

.admin-db-file-btn:active{
    transform:translateY(1px) scale(.985);
}

.admin-db-file-name{
    flex:1 1 auto;
    min-width:0;
    text-align:left;
    color:#cdd8d6;
    font-family:"Lora", serif;
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.admin-db-file-name:empty::before,
.admin-db-file-name[data-empty]{
    color:rgba(182, 195, 193, .45);
}

.admin-db-file-clear{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    padding:0;
    color:#9fb4b0;
    border:1px solid transparent;
    border-radius:5px;
    background:transparent;
    cursor:pointer;
    transition:color .18s ease, border-color .18s ease, background .18s ease;
}

.admin-db-file-clear:hover{
    color:#e8b9ae;
    border-color:rgba(185, 130, 120, .4);
    background:rgba(58, 25, 22, .5);
}

.admin-db-file-clear[hidden]{
    display:none;
}

.admin-db-file-field .admin-db-icon-close{
    width:12px;
    height:12px;
}

.admin-db-submit{
    padding:0 20px;
    font-family:"Lora", serif;
    font-size:14px;
}

.admin-db-source-dropdown .dropdown-btn{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 36px 0 14px;
    color:#cdd8d6;
    font-family:"Lora", serif;
    font-size:14px;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    border:1px solid rgba(150, 185, 190, .22);
    border-radius:6px;
    background:rgb(6 19 22 / .68);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
    cursor:pointer;
    transition:border-color .2s ease, background .2s ease, box-shadow .45s ease;
}

.admin-db-source-dropdown .dropdown-btn::after{
    right:13px;
}

.admin-db-source-dropdown .dropdown-btn:hover,
.admin-db-source-dropdown .custom-dropdown.open .dropdown-btn{
    border-color:var(--field-focus-border);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.2),
            0 0 0 1px rgba(123, 197, 180, .08),
            0 0 18px rgba(80, 180, 153, .08);
}

.admin-db-source-dropdown .dropdown-menu{
    top:calc(100% + 6px);
    bottom:auto;
    min-width:max(100%, 260px);
    max-height:min(300px, calc(100vh - 220px));
    overflow-y:auto;
    overflow-x:hidden;
    padding:5px;
    border:1px solid rgba(150, 185, 190, .14);
    border-radius:6px;
    background:#09181b;
    box-shadow:0 18px 34px rgba(0,0,0,.36);
}

.admin-db-source-dropdown .dropdown-menu li{
    padding:9px 11px;
    color:#c5cfcd;
    border-radius:4px;
    font-family:"Lora", serif;
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.admin-db-source-dropdown .dropdown-menu li:hover,
.admin-db-source-dropdown .dropdown-menu li.selected{
    background:rgba(123, 197, 180, .08);
    color:#e2e4dc;
}

@media (max-width:760px){
    .admin-db-form-row{
        grid-template-columns:1fr;
    }
}

.admin-db-head-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:10px 12px;
    margin-left:auto;
}

.admin-db-head-actions .admin-db-inline-form{
    display:inline-flex;
}

.admin-db-head-actions .admin-db-submit{
    height:40px;
    min-height:40px;
    max-height:40px;
    padding:0 16px;
    font-size:13px;
}

.admin-db-counts{
    padding:18px;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    margin-bottom:16px;
}

@media (max-width:760px){
    .admin-db-counts{
        grid-template-columns:repeat(2, 1fr);
    }
}

.admin-db-count{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:14px 16px;
    border:1px solid rgba(138, 166, 170, .16);
    border-radius:7px;
    background:rgba(8, 22, 24, .42);
}

.admin-db-count-value{
    color:#d7dad4;
    font-family:"Cormorant Garamond", serif;
    font-size:30px;
    font-weight:400;
    line-height:1;
}

.admin-db-count-label{
    color:#8fa09d;
    font-family:"Lora", serif;
    font-size:13px;
}

.admin-db-count-new .admin-db-count-value{
    color:#b9efd0;
}

.admin-db-count-changed .admin-db-count-value{
    color:#e8c9a0;
}

.admin-db-count-old .admin-db-count-value{
    color:#c4a8a2;
}

.admin-db-toolbar{
    padding:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin:0 0 14px;
}

.admin-db-toolbar .admin-db-modes{
    margin:0;
}

.admin-db-toolbar .admin-db-filter{
    margin:0;
    flex:0 1 auto;
    justify-content:flex-end;
}

.admin-db-toolbar .admin-db-search-input{
    flex:0 0 auto;
    width:min(340px, 42vw);
    min-width:180px;
}

.admin-db-toolbar .admin-db-search-submit{
    flex:0 0 auto;
}

.admin-db-modes{
    display:flex;
    align-items:center;
    gap:0;
    width:max-content;
    max-width:100%;
    margin:0 0 14px;
    padding:4px;
    overflow-x:auto;
    overflow-y:hidden;
    border:1px solid rgba(150, 185, 190, .12);
    border-radius:7px;
    background:rgba(5, 16, 19, .42);
}

.admin-db-mode{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:38px;
    padding:0 16px;
    color:#91a09e;
    font-family:"Lora", serif;
    font-size:14px;
    white-space:nowrap;
    text-decoration:none;
    border:1px solid transparent;
    border-radius:5px;
    background:transparent;
    transition:color .18s ease,
            border-color .18s ease,
            background .18s ease,
            box-shadow .18s ease,
            transform .08s ease;
}

.admin-db-mode:hover{
    color:#d8dfdc;
    border-color:rgba(123, 197, 180, .18);
    background:rgba(123, 197, 180, .055);
}

.admin-db-mode.active{
    color:#dce8e3;
    border-color:rgb(123 197 191 / 0.28);
    background:linear-gradient(180deg, rgba(58, 105, 91, .12), rgb(13 39 39 / .42));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),
            0 0 18px rgba(80, 180, 153, .08);
}

.admin-db-mode:active{
    transform:translateY(1px) scale(.985);
}

.admin-db-mode-count{
    padding:1px 8px;
    color:#aebfbc;
    font-size:12px;
    border:1px solid rgba(150, 185, 190, .14);
    border-radius:10px;
    background:rgba(5, 16, 19, .54);
}

.admin-db-filter{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.admin-db-filter .admin-db-search-input{
    height:40px;
    min-height:40px;
    padding:0 14px;
    font-size:14px;
}

.admin-db-filter .admin-db-search-submit{
    flex:0 0 auto;
    height:40px;
    min-height:40px;
    padding:0 17px;
    font-size:13px;
}

.admin-db-tables{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
}

.admin-db-table{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:0 12px;
    color:#aebfbc;
    font-family:"Lora", serif;
    font-size:13px;
    text-decoration:none;
    border:1px solid rgba(150, 185, 190, .14);
    border-radius:16px;
    background:rgba(5, 16, 19, .54);
    transition:border-color .18s ease, color .18s ease, background .18s ease;
}

.admin-db-table:hover{
    color:#d0dbd8;
    border-color:rgba(123, 197, 180, .3);
}

.admin-db-table.active{
    color:#e6efec;
    border-color:rgba(123, 197, 180, .45);
    background:linear-gradient(180deg, rgba(23, 58, 52, .8), rgba(12, 34, 32, .84));
}

.admin-db-preview-wrap{
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.admin-db-preview-table{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.admin-db-preview-header,
.admin-db-preview-row{
    display:grid;
    grid-template-columns:minmax(90px, .7fr) minmax(110px, .9fr) minmax(0, 2fr) minmax(0, 2fr) minmax(80px, .6fr);
    gap:10px;
    align-items:stretch;
}

.admin-db-preview-header{
    color:#8e9998;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.admin-db-preview-header > span{
    padding:0 12px 6px;
}

.admin-db-preview-row{
    border-radius:6px;
    background:rgba(6, 19, 22, .5);
    border:1px solid rgba(150, 185, 190, .1);
}

.admin-db-preview-row > span{
    padding:12px;
    min-width:0;
    overflow-wrap:anywhere;
    font-family:"Lora", serif;
    font-size:13px;
    line-height:1.5;
}

.admin-db-preview-row > span + span{
    border-left:1px solid rgba(150, 185, 190, .08);
}

.admin-db-cell-table{
    color:#8e9998;
    font-family:monospace;
    font-size:12px;
}

.admin-db-cell-id{
    color:#aebfbc;
    font-family:monospace;
    font-size:12px;
}

.admin-db-cell-text{
    max-height:220px;
    overflow:auto;
    white-space:pre-wrap;
    color:#cfd8d7;
}

.admin-db-cell-old .diff-old{
    color:#f2b2aa;
    background:rgba(188, 73, 73, .28);
    box-shadow:inset 0 -1px 0 rgba(188, 73, 73, .42);
    border-radius:3px;
    padding:0 .1em;
}

.admin-db-cell-new .diff-new{
    color:#b9efd0;
    background:rgba(55, 145, 89, .3);
    box-shadow:inset 0 -1px 0 rgba(55, 145, 89, .44);
    border-radius:3px;
    padding:0 .1em;
}

.admin-db-cell-status{
    color:#aebfbc;
    font-size:12px;
    text-align:center;
    align-self:center;
}

.admin-db-preview-new .admin-db-cell-status{
    color:#b9efd0;
}

.admin-db-preview-changed .admin-db-cell-status{
    color:#e8c9a0;
}

.admin-db-preview-old .admin-db-cell-status{
    color:#c4a8a2;
}

.admin-db-preview-old .admin-db-cell-new{
    color:#5f6f6c;
    font-size:12px;
    font-style:italic;
}

.admin-db-empty{
    padding:34px 18px;
    color:#8e9998;
    text-align:center;
    font-family:"Lora", serif;
    border:1px solid rgba(138, 166, 170, .14);
    border-radius:7px;
    background:rgba(8, 22, 24, .34);
}

.admin-db-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:6px;
}

.admin-db-page-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    color:#d8e2df;
    font-size:18px;
    text-decoration:none;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:6px;
    background:rgba(10, 31, 31, .72);
    transition:border-color .18s ease, background .18s ease;
}

.admin-db-page-link:hover{
    border-color:rgba(123, 197, 180, .32);
    background:rgba(13, 42, 40, .84);
}

.admin-db-page-info{
    color:#8fa09d;
    font-family:"Lora", serif;
    font-size:13px;
}

.admin-db-inline-form{
    display:inline-flex;
}

.admin-db-inline-form .admin-db-submit{
    height:46px;
    min-height:46px;
    padding:0 19px;
}

.admin-db-apply-btn{
    border-color:rgb(123 197 180 / .4);
    background:linear-gradient(180deg, rgba(26, 66, 58, .88), rgba(14, 40, 37, .9));
}
.header-messages-btn{
    position:relative;
}

.header-messages-btn.is-active .letter{
    background:#e7f3f0;
}

/* Profile collections: title gallery and achievement hierarchy */
#profile-titles-modal .profile-modal-card,
#profile-achievements-modal .profile-modal-card{
    background:
        radial-gradient(circle at 50% -18%, rgba(93, 128, 113, .12), transparent 42%),
        linear-gradient(180deg, rgba(9, 25, 28, .99), rgba(4, 14, 17, .99));
}

/* Title cards borrow the calm, emblem-first rhythm of the achievement shelf. */
#profile-titles-modal .profile-modal-body{
    padding:12px 16px 22px;
}

#profile-titles-modal .profile-titles-grid{
    grid-template-columns:repeat(auto-fill, minmax(178px, 1fr));
    gap:12px;
    padding:12px 0 0;
}

#profile-titles-modal .profile-title-card{
    isolation:isolate;
    min-width:0;
    min-height:218px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    padding:18px 12px 15px;
    color:inherit;
    border:1px solid rgba(196, 163, 94, .14);
    border-radius:6px;
    background:
        radial-gradient(circle at 50% 23%, rgba(203, 171, 101, .075), transparent 43%),
        linear-gradient(180deg, rgba(15, 31, 31, .66), rgba(5, 16, 19, .82));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    overflow:hidden;
    transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

#profile-titles-modal .profile-title-card::after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:auto 24px 0;
    height:32%;
    background:radial-gradient(ellipse at bottom, rgba(201, 169, 92, .08), transparent 70%);
    pointer-events:none;
}

#profile-titles-modal .profile-title-card:hover:not([aria-disabled="true"]),
#profile-titles-modal .profile-title-card:focus-visible:not([aria-disabled="true"]){
    border-color:rgba(212, 182, 119, .42);
    background:
        radial-gradient(circle at 50% 23%, rgba(203, 171, 101, .13), transparent 45%),
        linear-gradient(180deg, rgba(19, 37, 35, .78), rgba(6, 18, 20, .9));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 10px 26px rgba(0,0,0,.2);
    outline:none;
}

#profile-titles-modal .profile-title-card:focus-visible{
    box-shadow:
        inset 0 0 0 2px rgba(224, 196, 134, .28),
        0 10px 26px rgba(0,0,0,.2);
}

#profile-titles-modal .profile-title-card.is-selected{
    border-color:rgba(224, 190, 115, .62);
    background:
        radial-gradient(circle at 50% 22%, rgba(217, 184, 109, .17), transparent 46%),
        linear-gradient(180deg, rgba(28, 40, 34, .88), rgba(7, 18, 19, .96));
    box-shadow:
        inset 0 0 0 1px rgba(244, 215, 153, .08),
        0 0 24px rgba(181, 139, 58, .08);
}

#profile-titles-modal .profile-title-card[aria-disabled="true"]{
    opacity:1;
    cursor:not-allowed;
}

#profile-titles-modal .title-card-badge{
    position:relative;
    width:124px;
    height:124px;
    flex:0 0 124px;
}

#profile-titles-modal .profile-title-card .title-card-icon{
    width:124px;
    height:124px;
    display:block;
    object-fit:contain;
    opacity:.94;
    filter:saturate(.92) contrast(1.04);
}

#profile-titles-modal .profile-title-card[aria-disabled="true"] .title-card-icon{
    opacity:.3;
    filter:grayscale(.72) brightness(.65);
}

#profile-titles-modal .title-card-state{
    position:absolute;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    color:#efe0b9;
    border:1px solid rgba(224, 190, 115, .38);
    border-radius:50%;
    background:#172521;
    box-shadow:0 4px 12px rgba(0,0,0,.35);
    font-size:10px;
}

#profile-titles-modal .title-card-state.is-locked{
    top:50%;
    left:50%;
    width:30px;
    height:30px;
    color:#87928e;
    border-color:rgba(135, 146, 142, .24);
    background:rgba(6, 16, 18, .92);
    transform:translate(-50%, -50%);
}

#profile-titles-modal .title-card-state.is-selected{
    top:11px;
    right:11px;
}

#profile-titles-modal .title-card-copy{
    min-width:0;
    display:grid;
    justify-items:center;
    gap:5px;
    margin-top:auto;
    text-align:center;
}

#profile-titles-modal .profile-title-card strong{
    color:#dfc48d;
    font-family:"Cormorant Garamond", serif;
    font-size:19px;
    font-weight:600;
    line-height:1.12;
    text-wrap:balance;
}

#profile-titles-modal .profile-title-card[aria-disabled="true"] strong{
    color:#8b8779;
}

#profile-titles-modal .profile-title-card .title-card-status{
    color:#899c97;
    font-family:"Lora", serif;
    font-size:10.5px;
    font-weight:400;
    line-height:1.35;
}

#profile-titles-modal .profile-title-card.is-selected .title-card-status{
    color:#cdb878;
}

/* The achievement card reads top-down: identity, task, context, progress. */
#profile-achievements-modal .profile-modal-body{
    padding:16px 20px 24px;
}

#profile-achievements-modal .achievement-full-grid{
    padding:2px 0 10px;
}

#profile-achievements-modal .achievement-category + .achievement-category{
    margin-top:34px;
}

#profile-achievements-modal .achievement-category > h3{
    margin:0 0 14px;
    color:#b9c8c3;
    font-family:"Cormorant Garamond", serif;
    font-size:20px;
    font-weight:600;
    letter-spacing:0;
}

#profile-achievements-modal .achievement-category-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    align-items:stretch;
    gap:12px;
}

#profile-achievements-modal .achievement-full-card{
    z-index:0;
    align-items:center;
    padding:18px 17px 15px;
    text-align:center;
    border-color:rgba(134, 159, 153, .105);
    border-radius:7px;
    background:
        radial-gradient(circle at 50% 18%, rgba(126, 157, 145, .07), transparent 40%),
        rgba(5, 16, 19, .24);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

#profile-achievements-modal .achievement-full-card:has(.achievement-info:hover),
#profile-achievements-modal .achievement-full-card:has(.achievement-info:focus-within){
    z-index:3;
}

#profile-achievements-modal .achievement-full-card.is-complete{
    border-color:rgba(190, 164, 102, .3);
    background:
        radial-gradient(circle at 50% 18%, rgba(202, 167, 90, .105), transparent 42%),
        linear-gradient(180deg, rgba(20, 37, 34, .54), rgba(5, 16, 19, .38));
}

#profile-achievements-modal .achievement-full-badge{
    margin-bottom:11px;
}

#profile-achievements-modal .achievement-full-copy{
    width:100%;
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    align-items:center;
}

#profile-achievements-modal .achievement-full-title{
    color:#e2e8e5;
    font-family:"Cormorant Garamond", serif;
    font-size:20px;
    font-weight:600;
    line-height:1.12;
    text-wrap:balance;
}

#profile-achievements-modal .achievement-info{
    position:absolute;
    top:11px;
    right:11px;
    z-index:4;
}

#profile-achievements-modal .achievement-info-trigger{
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    padding:0;
    color:#82958f;
    border:1px solid rgba(132, 157, 150, .2);
    border-radius:50%;
    background:rgba(5, 17, 19, .72);
    font-size:10px;
    cursor:help;
    transition:color .18s ease, border-color .18s ease, background .18s ease;
}

#profile-achievements-modal .achievement-info-trigger:hover,
#profile-achievements-modal .achievement-info-trigger:focus-visible{
    color:#e0c98f;
    border-color:rgba(208, 177, 106, .46);
    background:rgba(24, 35, 30, .94);
    outline:none;
}

#profile-achievements-modal .achievement-info-popover{
    position:absolute;
    top:34px;
    right:0;
    width:min(280px, calc(100vw - 86px));
    padding:9px 11px;
    color:#a7b6b1;
    text-align:center;
    border:1px solid rgba(132, 157, 150, .16);
    border-radius:5px;
    background:rgba(7, 20, 22, .98);
    box-shadow:0 7px 16px rgba(0,0,0,.26);
    opacity:0;
    visibility:hidden;
    transform:translateY(-4px);
    pointer-events:none;
    transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
}

#profile-achievements-modal .achievement-info:hover .achievement-info-popover,
#profile-achievements-modal .achievement-info:focus-within .achievement-info-popover{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

#profile-achievements-modal .achievement-full-card.is-complete .achievement-full-title{
    color:#eadcb9;
}

#profile-achievements-modal .achievement-full-card .achievement-requirement{
    flex:0 0 auto;
    max-width:30ch;
    margin-top:9px;
    color:#a9b8b3;
    font-size:12px;
    line-height:1.48;
    font-style:normal;
}

#profile-achievements-modal .achievement-full-card .achievement-note{
    width:auto;
    max-width:100%;
    display:flex;
    align-items:flex-start;
    gap:6px;
    margin-top:11px;
    padding:7px 9px;
    color:#778b85;
    border-radius:5px;
    background:rgba(128, 153, 146, .065);
    font-size:10px;
    font-style:normal;
    line-height:1.4;
    text-align:left;
}

#profile-achievements-modal .achievement-info-popover .achievement-note{
    width:auto;
    max-width:none;
    margin:0;
    padding:0;
    color:#b8c6c1;
    background:transparent;
    justify-content:center;
    text-align:center;
}

#profile-achievements-modal .achievement-note i{
    flex:0 0 auto;
    margin-top:2px;
    color:#8da19b;
    font-size:9px;
}

#profile-achievements-modal .achievement-progress{
    width:auto;
    min-width:89px;
    min-height:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:auto;
    padding:8px 14px;
    color:#aabbb6;
    border:1px solid rgba(133, 158, 151, .12);
    border-radius:99px;
    background:rgba(4, 14, 16, .36);
    font-family:"Lora", serif;
    font-size:11px;
    font-weight:600;
    line-height:1;
    letter-spacing:0;
}

#profile-achievements-modal .achievement-full-card.is-complete .achievement-progress{
    color:#d9c88f;
    border-color:rgba(202, 167, 90, .18);
    background:rgba(62, 51, 27, .14);
}

/* Share content tracks within each visual row instead of reserving a fixed
   two-line height in every card. The flex rules above remain the fallback. */
@supports (grid-template-rows:subgrid){
    #profile-achievements-modal .achievement-full-card{
        display:grid;
        grid-row:span 4;
        grid-template-rows:subgrid;
    }

    #profile-achievements-modal .achievement-full-badge{
        justify-self:center;
        margin-bottom:0;
    }

    #profile-achievements-modal .achievement-full-copy{
        display:grid;
        grid-row:span 2;
        grid-template-rows:subgrid;
        align-items:start;
        justify-items:center;
    }

    #profile-achievements-modal .achievement-full-card .achievement-requirement,
    #profile-achievements-modal .achievement-progress{
        margin-top:0;
    }

    #profile-achievements-modal .achievement-progress{
        justify-self:center;
    }
}

/* Wide collection dialogs add useful columns without becoming edge-to-edge. */
@media (min-width:1600px){
    #profile-titles-modal .profile-modal-card,
    #profile-achievements-modal .profile-modal-card{
        width:min(1520px, calc(100vw - 96px));
    }

    #profile-edits-modal .profile-modal-card{
        width:min(1640px, calc(100vw - 96px));
    }

    #profile-titles-modal .profile-titles-grid{
        grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
    }

    #profile-achievements-modal .achievement-category-grid{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

/* On tall desktop displays, reveal about two additional content rows while
   keeping the collections contained instead of turning them into full-screen sheets. */
@media (min-width:1600px) and (min-height:1100px){
    #profile-edits-modal,
    #profile-titles-modal,
    #profile-achievements-modal{
        padding-block:48px;
    }

    #profile-edits-modal .profile-modal-card,
    #profile-titles-modal .profile-modal-card,
    #profile-achievements-modal .profile-modal-card{
        --profile-modal-height-limit:1240px;
        max-height:min(var(--profile-modal-height-limit), calc(100vh - 96px));
        max-height:min(var(--profile-modal-height-limit), calc(100dvh - 96px));
    }
}

@media (max-width:820px){
    #profile-achievements-modal .achievement-category-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:560px){
    #profile-titles-modal .profile-modal-body,
    #profile-achievements-modal .profile-modal-body{
        padding:12px;
    }

    #profile-titles-modal .profile-titles-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
    }

    #profile-titles-modal .profile-title-card{
        min-height:196px;
        padding:13px 7px 12px;
    }

    #profile-titles-modal .title-card-badge,
    #profile-titles-modal .profile-title-card .title-card-icon{
        width:108px;
        height:108px;
    }

    #profile-titles-modal .title-card-badge{
        flex-basis:108px;
    }

    #profile-titles-modal .profile-title-card strong{
        font-size:17px;
    }

    #profile-achievements-modal .achievement-category-grid{
        grid-template-columns:1fr;
    }

    #profile-achievements-modal .achievement-full-card{
        min-height:0;
    }
}

@media (prefers-reduced-motion:reduce){
    #profile-titles-modal .profile-title-card,
    #profile-achievements-modal .achievement-info-popover{
        transition:none;
    }
}

/* Warm reflected light keeps dark title art legible without recolouring it. */
.profile-title-left .profile-title-emblem,
.profile-title-right .profile-title-emblem{
    filter:
        brightness(1.08)
        saturate(1.04)
        drop-shadow(0 7px 13px rgba(205, 169, 91, .17))
        drop-shadow(0 0 9px rgba(129, 177, 158, .09)) !important;
}

#profile-titles-modal .profile-title-card:not([aria-disabled="true"]) .title-card-icon{
    opacity:1;
    filter:
        brightness(1.08)
        saturate(1.04)
        contrast(1.04)
        drop-shadow(0 7px 13px rgba(205, 169, 91, .17))
        drop-shadow(0 0 9px rgba(129, 177, 158, .09));
}

/* Achievement names use the same display treatment in the shelf and modal. */
.profile-achievements .profile-achievement-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:20px 14px;
}

.profile-lower-grid:not(.is-public-profile) .profile-achievement:nth-child(n+6),
.profile-lower-grid.is-public-profile .profile-achievement:nth-child(n+7){
    display:none;
}

.profile-lower-grid.is-public-profile .profile-achievement-grid{
    grid-template-columns:repeat(auto-fit, minmax(170px, 198px));
    justify-content:center;
}

.profile-achievements .profile-achievement .achievement-icon,
.profile-achievements .profile-achievement.is-complete .achievement-icon,
.profile-achievements .profile-achievement .achievement-icon img,
.profile-achievements .profile-achievement.is-complete .achievement-icon img{
    width:104px;
    height:104px;
}

.profile-achievements .achievement-preview-badge{
    position:relative;
    width:104px;
    height:104px;
}

.profile-achievements .profile-achievement:not(.is-complete) .achievement-icon img{
    opacity:.34;
    filter:grayscale(.62) brightness(.7);
}

.profile-achievements .achievement-preview-lock{
    position:absolute;
    top:50%;
    left:50%;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    color:#92a39f;
    border:1px solid rgba(146, 163, 159, .24);
    border-radius:50%;
    background:rgba(4, 13, 16, .84);
    box-shadow:0 5px 14px rgba(0,0,0,.3);
    font-size:12px;
    transform:translate(-50%, -50%);
}

.profile-achievements .profile-achievement strong{
    margin-top:11px;
    min-height:44px;
    color:#eadcb9;
    font-family:"Cormorant Garamond", serif;
    font-size:18px;
    font-weight:600;
    line-height:1.16;
}

.profile-achievements .profile-achievement.is-complete strong{
    color:#eadcb9;
}

.profile-achievements .profile-achievement:not(.is-complete) strong{
    color:#878f8b;
}

@media (min-width:1800px){
    .profile-lower-grid:not(.is-public-profile){
        grid-template-columns:minmax(0, 1.85fr) minmax(360px, .75fr);
    }

    .profile-lower-grid:not(.is-public-profile) .profile-achievement-grid{
        grid-template-columns:repeat(auto-fit, minmax(112px, 128px));
        justify-content:center;
    }

    .profile-lower-grid:not(.is-public-profile) .profile-achievement:nth-child(n+6),
    .profile-lower-grid.is-public-profile .profile-achievement:nth-child(n+7){
        display:flex;
    }
}

@media (max-width:800px){
    .profile-achievements .profile-achievement-grid,
    .profile-lower-grid.is-public-profile .profile-achievement-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

@media (max-width:560px){
    .profile-achievements .profile-achievement-grid,
    .profile-lower-grid.is-public-profile .profile-achievement-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:16px 8px;
    }

    .profile-achievements .profile-achievement .achievement-icon,
    .profile-achievements .profile-achievement.is-complete .achievement-icon,
    .profile-achievements .profile-achievement .achievement-icon img,
    .profile-achievements .profile-achievement.is-complete .achievement-icon img{
        width:88px;
        height:88px;
    }

    .profile-achievements .achievement-preview-badge{
        width:88px;
        height:88px;
    }

    .profile-achievements .profile-achievement strong{
        font-size:17px;
    }
}

/*==================================================
    CUSTOMIZATION AND PRIVACY
==================================================*/
/* Saved preferences that affect translation and edit pages. */
.translate-workspace .translate-results tr.row-has-no-edits::before{
    background:var(--translation-status-no-edits, #5c6c68);
}

.translate-workspace .translate-results tr.row-has-pending::before{
    background:var(--translation-status-pending, #caa75a);
}

.translate-workspace .translate-results tr.row-has-approved::before{
    background:var(--translation-status-approved, #588f72);
}

.translate-workspace .translate-results tr.row-has-auto-approved::before{
    background:var(--translation-status-approved, #588f72);
}

html.customization-separate-auto-approved .translate-workspace .translate-results tr.row-has-auto-approved::before{
    background:var(--translation-status-auto-approved, #8cb7e4);
}

.translate-workspace .translate-results tr.row-has-rejected::before{
    background:var(--translation-status-rejected, #a66d62);
}

html.customization-status-indicator-hidden .translate-workspace .translate-results tr::before{
    display:none;
}

html.customization-hide-edit-comment .edit-page .edit-comment-block,
html.customization-hide-edit-tag .edit-page .edit-tag-block{
    display:none !important;
}

/* Customization page: one shell, with section rules instead of nested cards. */
.customization-page{
    padding-top:34px;
}

.customization-shell{
    --customization-gutter:clamp(12px, 1.5vw, 24px);
    --customization-surface:rgba(9, 27, 29, .58);
    --customization-surface-strong:rgba(10, 31, 33, .82);
    --customization-text:#aebfbb;
    padding-bottom:0;
}

.customization-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;
    padding:0 0 clamp(24px, 3vw, 34px);
}

.customization-back{
    display:inline-flex;
    margin-bottom:15px;
    color:#82938f;
    font-size:12px;
    text-decoration:none;
    transition:color .18s ease;
}

.customization-back:hover,
.customization-back:focus-visible{
    color:#c4d5d0;
    outline:none;
}

.customization-form{
    margin:0;
}

.customization-section{
    padding:clamp(30px, 4vw, 48px) 0;
    border-top:1px solid rgba(150, 185, 190, .14);
}

.customization-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:28px;
    margin-bottom:24px;
}

.customization-section-head h2{
    margin:0;
    color:#cbd7d3;
    font-family:"Lora", serif;
    font-size:21px;
    font-weight:400;
    line-height:1.25;
}

.privacy-preference-list,
.privacy-connection-list{
    display:grid;
    gap:10px;
}

.privacy-preference-row{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:64px;
    padding:0 14px 0 0;
    border-radius:6px;
    background:var(--customization-surface);
    transition:background .18s ease;
}

.privacy-preference-row:hover{
    background:var(--customization-surface-strong);
}

.privacy-preference-row .privacy-check{
    flex:1 1 auto;
    min-width:0;
    min-height:64px;
    background:transparent;
}

.privacy-preference-row .customization-info{
    flex:0 0 auto;
}

.privacy-preference-row .customization-info::after{
    right:0;
    left:auto;
    max-width:calc(100vw - 32px);
    transform:translateY(4px);
}

.privacy-preference-row .customization-info:hover::after,
.privacy-preference-row .customization-info:focus-visible::after{
    transform:translateY(0);
}

.privacy-connection-row{
    display:grid;
    grid-template-columns:38px minmax(0, 1fr) auto auto;
    align-items:center;
    gap:12px;
    min-height:68px;
    padding:11px 14px;
    border-radius:6px;
    background:var(--customization-surface);
}

.privacy-connection-icon{
    display:grid;
    width:34px;
    height:34px;
    place-items:center;
    color:#89aaa2;
    border:1px solid rgba(150, 185, 190, .15);
    border-radius:50%;
    background:rgba(4, 14, 16, .5);
}

.privacy-connection-copy strong,
.privacy-connection-copy small{
    display:block;
}

.privacy-connection-copy strong{
    color:#acbcb8;
    font-size:12px;
    font-weight:500;
}

.privacy-connection-copy small{
    margin-top:3px;
    color:#6c7e7a;
    font-size:10px;
}

.privacy-connection-state{
    color:#758681;
    font-size:10px;
    white-space:nowrap;
}

.privacy-connection-state.is-connected{
    color:#8fc8b4;
}

.privacy-connection-action{
    min-height:30px;
    padding:0 10px;
    color:#9bb2ac;
    font:400 10px "Lora", serif;
    border:1px solid rgba(150, 185, 190, .22);
    border-radius:4px;
    background:rgba(5, 16, 18, .55);
    cursor:pointer;
    transition:border-color .18s ease, color .18s ease, background .18s ease, opacity .18s ease;
}

.privacy-connection-action:hover:not(:disabled),
.privacy-connection-action:focus-visible{
    color:#d6e4df;
    border-color:rgba(132, 190, 181, .5);
    background:rgba(17, 42, 43, .72);
}

.privacy-connection-action.is-danger:hover:not(:disabled),
.privacy-connection-action.is-danger:focus-visible{
    color:#e3b0aa;
    border-color:rgba(196, 112, 103, .48);
    background:rgba(58, 24, 24, .45);
}

.privacy-connection-action:disabled{
    color:#5f6d69;
    border-color:rgba(150, 185, 190, .1);
    cursor:not-allowed;
    opacity:.58;
}

.privacy-connection-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
}

.privacy-connection-panel{
    display:grid;
    grid-template-columns:minmax(240px, 1fr) auto;
    align-items:end;
    gap:10px;
    padding:14px;
    border:1px solid rgba(120, 164, 163, .14);
    border-radius:6px;
    background:rgba(2, 13, 15, .56);
}

.privacy-connection-panel[hidden]{
    display:none;
}

.privacy-connection-panel--telegram{
    grid-template-columns:auto minmax(0, 1fr);
    align-items:center;
}

.privacy-connection-stage{
    display:grid;
    grid-column:1 / -1;
    grid-template-columns:minmax(240px, 1fr) auto;
    align-items:end;
    gap:10px;
}

.privacy-connection-stage[hidden]{
    display:none;
}

.privacy-connection-prompt{
    grid-column:1 / -1;
    margin:0;
    color:#839690;
    font-size:11px;
    line-height:1.55;
}

.privacy-connection-prompt strong{
    color:#b8cbc6;
    font-weight:500;
}

.privacy-connection-field{
    display:grid;
    gap:6px;
    min-width:0;
    width:100%;
}

.privacy-connection-field span{
    color:#778b86;
    font-size:10px;
}

.privacy-connection-field input{
    width:100%;
    min-height:38px;
    padding:0 11px;
    color:#c4d3cf;
    font:400 12px "Lora", serif;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:5px;
    outline:none;
    background:rgba(2, 12, 14, .78);
}

.privacy-connection-field input:focus{
    border-color:rgba(129, 188, 179, .58);
    box-shadow:0 0 0 2px rgba(80, 147, 139, .1);
}

.privacy-connection-field input:-webkit-autofill,
.privacy-connection-field input:-webkit-autofill:hover,
.privacy-connection-field input:-webkit-autofill:focus,
.privacy-connection-field input:-webkit-autofill:active{
    -webkit-text-fill-color:#c4d3cf !important;
    caret-color:#c4d3cf;
    -webkit-box-shadow:0 0 0 1000px #020c0e inset !important;
    box-shadow:0 0 0 1000px #020c0e inset !important;
    transition:background-color 9999s ease-out, color 9999s ease-out;
}

.privacy-connection-field input:autofill{
    color:#c4d3cf;
    background-color:#020c0e !important;
    box-shadow:0 0 0 1000px #020c0e inset !important;
}

.privacy-connection-field input[readonly]{
    color:#879b96;
    cursor:default;
}

.privacy-connection-code{
    display:grid;
    grid-column:1 / -1;
    grid-template-columns:minmax(180px, 1fr) auto;
    align-items:end;
    gap:10px;
}

.privacy-connection-code[hidden]{
    display:none;
}

.privacy-connection-submit{
    justify-self:end;
    min-height:38px;
    padding:0 14px;
    color:#c5d6d1;
    font:500 11px "Lora", serif;
    white-space:nowrap;
    border:1px solid rgba(124, 181, 173, .34);
    border-radius:5px;
    background:rgba(17, 48, 47, .38);
    cursor:pointer;
}

.privacy-connection-submit:disabled{
    cursor:wait;
    opacity:.55;
}

.privacy-connection-status{
    grid-column:1 / -1;
    min-height:15px;
    margin:1px 0 0;
    color:#839690;
    font-size:10px;
}

.privacy-connection-status[data-kind="success"]{
    color:#8fc8b4;
}

.privacy-connection-status[data-kind="error"]{
    color:#d39a91;
}

.customization-theme-list{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
}

.customization-theme-option{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    min-height:66px;
    padding:12px 14px;
    color:#b8c7c3;
    border-radius:6px;
    background:var(--customization-surface);
}

.customization-theme-option.is-coming{
    opacity:.54;
}

.customization-theme-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.customization-theme-flag{
    position:relative;
    width:17px;
    height:17px;
    flex:0 0 auto;
    border:1px solid rgba(151, 190, 181, .28);
    border-radius:3px;
    background:rgba(4, 14, 16, .62);
    box-shadow:inset 0 1px 2px rgba(0, 0, 0, .3);
}

.customization-theme-option input:checked + .customization-theme-flag::after{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:1px;
    background:#78b19e;
    box-shadow:0 0 8px rgba(111, 189, 164, .26);
}

.customization-theme-copy strong,
.customization-theme-copy small{
    display:block;
}

.customization-theme-copy strong{
    font-size:13px;
    font-weight:500;
}

.customization-theme-copy small{
    margin-top:2px;
    color:#71827e;
    font-size:10px;
}

.customization-switch{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
    color:#aebfbb;
    font-size:12px;
    cursor:pointer;
    user-select:none;
}

.customization-switch input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.customization-switch-track{
    position:relative;
    width:36px;
    height:19px;
    border:1px solid rgba(144, 176, 172, .24);
    border-radius:999px;
    background:#071518;
    box-shadow:inset 0 2px 4px rgba(0, 0, 0, .35);
    transition:background .18s ease, border-color .18s ease;
}

.customization-switch-track::after{
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:11px;
    height:11px;
    border-radius:50%;
    background:#738580;
    transition:transform .18s ease, background .18s ease;
}

.customization-switch input:checked + .customization-switch-track{
    border-color:rgba(113, 181, 159, .4);
    background:rgba(47, 108, 89, .42);
}

.customization-switch input:checked + .customization-switch-track::after{
    transform:translateX(17px);
    background:#a8d6c6;
}

.customization-switch input:focus-visible + .customization-switch-track,
.customization-check-row input:focus-visible + .customization-check-mark{
    outline:2px solid rgba(133, 202, 181, .55);
    outline-offset:3px;
}

.customization-color-grid,
.customization-status-colors{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
}

.customization-color-grid--activation{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.customization-color-column{
    display:grid;
    align-content:start;
    gap:12px;
    min-width:0;
}

.customization-color-setting{
    display:flex;
    align-items:stretch;
    flex-direction:column;
    justify-content:flex-start;
    gap:12px;
    min-width:0;
    min-height:96px;
    padding:14px;
    border-radius:6px;
    background:var(--customization-surface);
    cursor:pointer;
    transition:background .18s ease;
}

.customization-color-setting:hover{
    background:var(--customization-surface-strong);
}

.customization-color-copy{
    min-width:0;
}

.customization-color-copy strong,
.customization-color-copy code{
    display:block;
}

.customization-color-copy strong{
    color:var(--customization-text);
    font-size:12px;
    font-weight:500;
    line-height:1.35;
}

.customization-color-copy code,
.customization-number-setting code,
.customization-text-setting code{
    margin-top:3px;
    color:#687b77;
    font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size:10px;
}

.customization-color-control,
.customization-compact-color{
    display:inline-flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}

.customization-color-control input[type="color"],
.customization-compact-color input[type="color"]{
    width:38px;
    height:32px;
    padding:3px;
    border:1px solid rgba(150, 185, 190, .18);
    border-radius:4px;
    background:#071518;
    cursor:pointer;
}

.customization-color-control input[type="color"]::-webkit-color-swatch,
.customization-compact-color input[type="color"]::-webkit-color-swatch{
    border:0;
    border-radius:2px;
}

.customization-color-control output,
.customization-compact-color output{
    min-width:58px;
    color:#70827e;
    font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size:10px;
    text-transform:uppercase;
}

.customization-color-control{
    margin-top:auto;
}

.customization-inline-settings,
.customization-preference-list,
.customization-shortcut-list{
    display:grid;
    gap:10px;
    margin-top:24px;
}

.customization-check-row,
.customization-number-setting,
.customization-text-setting,
.customization-shortcut-row,
.customization-preference-row{
    display:flex;
    align-items:center;
    min-height:58px;
    padding:10px 14px;
    border-radius:6px;
    background:var(--customization-surface);
}

.customization-check-row{
    position:relative;
    gap:12px;
    cursor:pointer;
}

.customization-check-row input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.customization-check-mark{
    position:relative;
    width:17px;
    height:17px;
    flex:0 0 auto;
    border:1px solid rgba(151, 190, 181, .24);
    border-radius:3px;
    background:#071518;
}

.customization-check-row input:checked + .customization-check-mark::after{
    content:"";
    position:absolute;
    left:4px;
    top:1px;
    width:5px;
    height:9px;
    border:solid #a8d6c6;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.customization-check-row strong,
.customization-check-row small,
.customization-number-setting strong,
.customization-number-setting small,
.customization-text-setting strong,
.customization-text-setting small,
.customization-shortcut-row strong,
.customization-shortcut-row small{
    display:block;
}

.customization-check-row strong,
.customization-number-setting strong,
.customization-text-setting strong,
.customization-shortcut-row strong{
    color:#acbcb8;
    font-size:12px;
    font-weight:500;
}

.customization-check-row small,
.customization-number-setting small,
.customization-text-setting small,
.customization-shortcut-row small{
    margin-top:3px;
    color:#6c7e7a;
    font-size:10px;
    line-height:1.35;
}

.customization-compact-color{
    align-self:start;
    min-height:48px;
    margin-left:43px;
    padding:8px 12px;
    color:#859793;
    font-size:11px;
    border-radius:6px;
    background:rgba(8, 24, 26, .48);
}

.customization-compact-color[hidden],
.customization-status-colors[hidden]{
    display:none;
}

.customization-number-setting,
.customization-text-setting,
.customization-shortcut-row{
    justify-content:space-between;
    gap:28px;
}

.customization-number-setting > span,
.customization-text-setting > span,
.customization-shortcut-row > span{
    min-width:0;
}

.customization-number-setting input,
.customization-text-setting input,
.customization-shortcut-row input{
    width:min(230px, 38vw);
    min-height:36px;
    padding:7px 11px;
    color:#c4d5d0;
    font-family:"Lora", serif;
    font-size:12px;
    text-align:center;
    border:1px solid rgba(150, 185, 190, .16);
    border-radius:4px;
    background:#071518;
    outline:none;
}

.customization-number-setting input:focus,
.customization-text-setting input:focus,
.customization-shortcut-row input:focus{
    border-color:rgba(123, 197, 180, .42);
    box-shadow:0 0 0 3px rgba(82, 156, 139, .08);
}

.customization-shortcut-row input.is-recording{
    color:#d4e9e2;
    border-color:rgba(123, 197, 180, .58);
}

.customization-preference-row{
    justify-content:flex-start;
    gap:9px;
}

.customization-info{
    position:relative;
    display:inline-grid;
    place-items:center;
    width:18px;
    height:18px;
    padding:0;
    color:#82938f;
    font:600 10px/1 "Lora", serif;
    border:1px solid rgba(150, 185, 190, .2);
    border-radius:50%;
    background:transparent;
    cursor:help;
}

.customization-info::after{
    content:attr(data-tooltip);
    position:absolute;
    left:50%;
    bottom:calc(100% + 9px);
    z-index:30;
    width:max-content;
    max-width:min(310px, calc(100vw - 42px));
    padding:9px 11px;
    color:#bdcbc7;
    font:400 11px/1.45 "Lora", serif;
    text-align:left;
    border:1px solid rgba(150, 185, 190, .16);
    border-radius:4px;
    background:#071719;
    box-shadow:0 12px 28px rgba(0, 0, 0, .35);
    opacity:0;
    pointer-events:none;
    transform:translate(-50%, 4px);
    transition:opacity .15s ease, transform .15s ease;
}

.customization-info:hover::after,
.customization-info:focus-visible::after{
    opacity:1;
    transform:translate(-50%, 0);
}

.customization-status-colors{
    margin:2px 0 8px 46px;
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.customization-reset{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:22px;
    padding:0;
    color:#778985;
    font:400 11px/1.2 "Lora", serif;
    border:0;
    background:transparent;
    cursor:pointer;
    transition:color .18s ease;
}

.customization-reset:hover,
.customization-reset:focus-visible{
    color:#c0cfcb;
    outline:none;
}

.customization-actions{
    position:sticky;
    bottom:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:74px;
    margin:0 calc(0px - var(--customization-gutter));
    padding:13px var(--customization-gutter);
    border-top:1px solid rgba(150, 185, 190, .12);
    background:rgba(7, 19, 21, .94);
    box-shadow:0 -12px 30px rgba(0, 0, 0, .15);
    backdrop-filter:blur(12px);
}

.customization-actions p{
    margin:0;
    color:#71827e;
    font-size:11px;
}

.customization-actions p[data-kind="success"]{
    color:#91cbb7;
}

.customization-actions p[data-kind="error"]{
    color:#d29a90;
}

.customization-save{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 13px;
    color:#b8cbc8;
    font:500 15px "Lora", sans-serif;
    text-shadow:none;
    border:1px solid rgba(138, 166, 170, .22);
    border-radius:6px;
    background:linear-gradient(180deg, rgba(12, 28, 29, .76), rgba(8, 17, 20, .86));
    cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(180, 235, 225, .035), 0 8px 20px rgba(0, 0, 0, .14);
    transition:transform .08s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        color .18s ease,
        opacity .18s ease;
}

.customization-save:hover,
.customization-save:focus-visible{
    color:#d8ece4;
    border-color:rgb(107 228 210 / .28);
    background:linear-gradient(180deg, rgb(13 34 35 / .58), rgb(8 20 21 / .94));
    outline:none;
}

.customization-save:disabled{
    opacity:.62;
    cursor:wait;
}

@media(max-width:900px){
    .customization-color-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

}

@media(max-width:820px){
    .customization-page{
        padding:14px 10px 32px;
    }
}

@media(max-width:650px){
    .customization-shell{
        --customization-gutter:12px;
    }

    .customization-section-head{
        flex-direction:column;
        gap:16px;
    }

    .customization-theme-list{
        grid-template-columns:1fr;
        gap:15px;
    }

    .customization-color-grid,
    .customization-status-colors{
        grid-template-columns:1fr;
    }

    .customization-status-colors{
        margin-left:0;
    }

    .customization-compact-color{
        margin-left:0;
    }

    .customization-number-setting,
    .customization-text-setting,
    .customization-shortcut-row{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
        padding:12px 0;
    }

    .customization-number-setting input,
    .customization-text-setting input,
    .customization-shortcut-row input{
        width:100%;
    }

    .customization-actions{
        margin-right:calc(0px - var(--customization-gutter));
        margin-left:calc(0px - var(--customization-gutter));
        padding-right:var(--customization-gutter);
        padding-left:var(--customization-gutter);
    }

    .privacy-connection-row{
        grid-template-columns:38px minmax(0, 1fr) auto;
    }

    .privacy-connection-state{
        display:none;
    }

    .privacy-connection-panel{
        grid-template-columns:1fr;
        align-items:stretch;
    }

    .privacy-connection-stage{
        grid-template-columns:1fr;
        align-items:stretch;
    }

    .privacy-connection-code{
        grid-template-columns:1fr;
    }

    .privacy-connection-submit{
        justify-self:start;
    }
}

@media(max-width:420px){
    .privacy-preference-row{
        align-items:flex-start;
        padding-right:10px;
    }

    .privacy-preference-row .customization-info{
        margin-top:22px;
    }

    .privacy-connection-row{
        grid-template-columns:34px minmax(0, 1fr);
    }

    .privacy-connection-actions{
        grid-column:2;
        justify-self:start;
    }

    .privacy-connection-code{
        grid-template-columns:1fr;
        align-items:stretch;
    }
}

@media(prefers-reduced-motion:reduce){
    .customization-page *,
    .customization-page *::before,
    .customization-page *::after{
        scroll-behavior:auto !important;
        transition:none !important;
    }
}

.profile-unavailable-page{
    min-height:calc(100vh - 92px);
    display:grid;
    place-items:center;
    padding:130px 24px 48px;
}

.profile-unavailable-card{
    width:min(560px, 100%);
    padding:46px 38px 42px;
    color:#9aaba7;
    text-align:center;
    border:1px solid rgba(138, 166, 170, .18);
    border-radius:9px;
    background:linear-gradient(180deg, rgba(9, 28, 29, .92), rgba(5, 18, 20, .94));
    box-shadow:0 24px 70px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(190, 235, 225, .025);
}

.profile-unavailable-lock{
    width:42px;
    height:42px;
    margin:0 auto 20px;
    display:block;
    color:#8eb6ad;
    opacity:.78;
}

.profile-unavailable-card h1{
    margin:0 0 12px;
    color:#dce8e5;
    font-size:clamp(28px, 5vw, 38px);
    font-weight:500;
}

.profile-unavailable-card p{
    margin:0;
    line-height:1.65;
}

.profile-unavailable-actions{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
}

.profile-unavailable-actions a{
    min-height:39px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 16px;
    color:#c9ddd8;
    border:1px solid rgba(123, 197, 180, .3);
    border-radius:6px;
    background:rgba(39, 92, 80, .18);
    transition:border-color .18s ease, background .18s ease, color .18s ease;
}

.profile-unavailable-actions a:hover,
.profile-unavailable-actions a:focus-visible{
    color:#e0efeb;
    border-color:rgba(123, 197, 180, .48);
    background:rgba(50, 112, 97, .25);
    outline:none;
}

@media(max-width:600px){
    .profile-unavailable-page{
        min-height:calc(100vh - 76px);
        padding:104px 14px 30px;
    }

    .profile-unavailable-card{
        padding:38px 20px 34px;
    }
}

/*==================================================
    LOGIN
==================================================*/

.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: 1fr auto;
    background: var(--bg);
}

.login-page .page-bg {
    opacity: 1;
    background:
        linear-gradient(180deg, rgba(4, 18, 22, .16), rgba(3, 14, 18, .46)),
        url("/static/images/main-darkforest2.webp") center 42% / cover no-repeat;
    filter: brightness(1.04) contrast(1.03) saturate(.82);
}

.login-page .page-bg::after {
    background:
        radial-gradient(ellipse at 50% 36%, rgba(123, 174, 159, .09), transparent 38%),
        radial-gradient(ellipse at center, transparent 22%, rgba(0, 0, 0, .12) 64%, rgba(0, 0, 0, .42) 100%);
}

.login-main {
    width: 100%;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: clamp(24px, 4.5vh, 52px) 20px 30px;
}

.auth-shell {
    width: min(100%, 600px);
    display: grid;
    justify-items: center;
    gap: 34px;
}

.auth-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: #d5dfdc;
    text-decoration: none;
}


.auth-brand-name {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(34px, 7vw, 46px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: .025em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.auth-brand-caption {
    width: min(540px, calc(100vw - 40px));
    display: grid;
    grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr);
    align-items: center;
    gap: 13px;
    margin-top: 15px;
    color: rgba(190, 202, 194, .68);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .31em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

.auth-brand-caption::before,
.auth-brand-caption::after {
    content: "";
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(103, 158, 145, .5));
}

.auth-brand-caption::after {
    transform: scaleX(-1);
}

.auth-card {
    position: relative;
    width: 100%;
    padding: clamp(34px, 6vw, 48px);
    overflow: visible;
    border: 1px solid rgba(103, 158, 145, .42);
    border-radius: 4px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(53, 92, 83, .12), transparent 42%),
        linear-gradient(180deg, rgba(7, 31, 31, .95), rgba(4, 20, 23, .97));
    box-shadow:
        0 28px 72px rgba(0, 0, 0, .36),
        0 0 34px rgba(91, 142, 128, .055),
        inset 0 1px 0 rgba(225, 248, 241, .04);
    backdrop-filter: blur(18px);
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: 7px;
    pointer-events: none;
    border: 1px solid rgba(134, 172, 164, .11);
    border-radius: 1px;
}

.auth-card-crown {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: -34px;
    width: 54px;
    height: 35px;
    transform: translateX(-50%);
    pointer-events: none;
}

.auth-card-crown::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(128, 185, 172, .78);
    background: #082023;
    box-shadow: inset 0 0 0 3px #082023, inset 0 0 0 4px rgba(128, 185, 172, .3);
    transform: translateX(-50%) rotate(45deg);
}

.auth-frame-corner {
    position: absolute;
    z-index: 2;
    width: 22px;
    height: 22px;
    pointer-events: none;
}

.auth-frame-corner::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border: 1px solid rgba(128, 185, 172, .56);
    background: #092225;
    transform: rotate(45deg);
}

.auth-frame-corner.is-top-left {
    top: -1px;
    left: -1px;
    border-top: 2px solid rgba(128, 185, 172, .62);
    border-left: 2px solid rgba(128, 185, 172, .62);
}

.auth-frame-corner.is-top-left::after {
    top: -3px;
    left: -3px;
}

.auth-frame-corner.is-top-right {
    top: -1px;
    right: -1px;
    border-top: 2px solid rgba(128, 185, 172, .62);
    border-right: 2px solid rgba(128, 185, 172, .62);
}

.auth-frame-corner.is-top-right::after {
    top: -3px;
    right: -3px;
}

.auth-frame-corner.is-bottom-left {
    bottom: -1px;
    left: -1px;
    border-bottom: 2px solid rgba(128, 185, 172, .62);
    border-left: 2px solid rgba(128, 185, 172, .62);
}

.auth-frame-corner.is-bottom-left::after {
    bottom: -3px;
    left: -3px;
}

.auth-frame-corner.is-bottom-right {
    right: -1px;
    bottom: -1px;
    border-right: 2px solid rgba(128, 185, 172, .62);
    border-bottom: 2px solid rgba(128, 185, 172, .62);
}

.auth-frame-corner.is-bottom-right::after {
    right: -3px;
    bottom: -3px;
}

.auth-heading {
    position: relative;
    margin-bottom: 28px;
    text-align: center;
}

.auth-heading h1 {
    margin: 0;
    color: #e2e9e6;
    font-family: "Cormorant Garamond", serif;
    font-size: 38px;
    line-height: 38px;
    font-weight: 500;
    letter-spacing: .01em;
}

@media (max-width: 520px) {
    .auth-heading h1 {
        font-size: 32px;
        line-height: 32px;
    }
}

.auth-heading-divider {
    width: min(210px, 68%);
    display: grid;
    grid-template-columns: 1fr 8px 1fr;
    align-items: center;
    gap: 12px;
    margin: 16px auto 0;
}

.auth-heading-divider::before,
.auth-heading-divider::after {
    content: "";
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(103, 158, 145, .46));
}

.auth-heading-divider::after {
    transform: scaleX(-1);
}

.auth-heading-divider span {
    width: 7px;
    height: 7px;
    border: 1px solid rgba(128, 185, 172, .66);
    transform: rotate(45deg);
}

.auth-form {
    position: relative;
    display: grid;
    gap: 14px;
}

.telegram-login-wrap {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.telegram-login-wrap iframe {
    max-width: 100%;
}

.telegram-login-loading,
.auth-telegram-warning {
    color: rgba(173, 191, 187, .78);
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}

.auth-telegram-warning {
    padding: 10px 12px;
    color: #d8c6a5;
    border: 1px solid rgba(184, 150, 92, .26);
    border-radius: 6px;
    background: rgba(92, 66, 28, .14);
}

.auth-status:empty {
    display: none;
}

.auth-status {
    color: #adbfbb;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.telegram-privacy-note {
    margin: 4px auto 0;
    max-width: 430px;
    color: rgba(173, 191, 187, .72);
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}

.auth-label {
    display: block;
    margin: 0 0 8px 2px;
    color: #adbfbb;
    font-size: 13px;
    line-height: 1;
}

.auth-control {
    --auth-control-bg: #061719;
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(150, 185, 190, .22);
    border-radius: 7px;
    background: var(--auth-control-bg);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28);
    transition: border-color .2s ease, background .2s ease, box-shadow .45s ease;
}

.auth-control:hover {
    border-color: var(--field-focus-border);
    background: var(--auth-control-bg);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, .2),
        0 0 0 1px rgba(123, 197, 180, .06),
        0 0 14px var(--field-focus-glow);
}

.auth-control:focus-within {
    border-color: var(--field-focus-border);
    background: var(--auth-control-bg);
    outline: none;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, .2),
        0 0 0 1px rgba(123, 197, 180, .08),
        0 0 18px rgba(80, 180, 153, .08);
}

.auth-control-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0 10px;
    color: #77918d;
}

.auth-control-icon svg,
.telegram-button svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-input {
    min-width: 0;
    flex: 1;
    height: 50px;
    padding: 0 6px;
    color: #e1e9e6;
    border: 0;
    outline: 0;
    background: transparent;
    font: 15px/1.3 "Lora", serif;
}

.auth-input::placeholder {
    color: rgba(151, 171, 167, .55);
}

.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus,
.auth-input:-webkit-autofill:active {
    -webkit-text-fill-color: #e1e9e6 !important;
    caret-color: #e1e9e6;
    -webkit-box-shadow: 0 0 0 1000px var(--auth-control-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--auth-control-bg) inset !important;
    transition: background-color 9999s ease-out, color 9999s ease-out;
}

.auth-input:autofill {
    color: #e1e9e6;
    background-color: var(--auth-control-bg) !important;
    box-shadow: 0 0 0 1000px var(--auth-control-bg) inset !important;
}

.send-code-button,
.enter-button {
    position: relative;
    align-self: stretch;
    flex: 0 0 auto;
    min-height: 50px;
    padding: 0 17px;
    color: #b8cbc8;
    text-shadow: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: 500 15px/1 "Lora", sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform .08s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        color .18s ease,
        opacity .18s ease;
}

.send-code-button::before,
.enter-button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 24px;
    background: rgba(138, 166, 170, .22);
    transform: translateY(-50%);
    transition: background .18s ease, box-shadow .18s ease;
}

.auth-control .send-code-button:not(:disabled):hover,
.auth-control .enter-button:not(:disabled):hover {
    transform: none;
    color: #d8ece4;
    background: transparent;
    box-shadow: none;
}

.telegram-button:active {
    transform: translateY(1px);
}

.send-code-button:active,
.enter-button:active {
    transform: none;
}

.send-code-button:focus-visible,
.enter-button:focus-visible {
    color: #d8ece4;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

.send-code-button:disabled,
.enter-button:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.telegram-button:focus-visible {
    outline: 2px solid rgba(123, 197, 180, .7);
    outline-offset: 2px;
}

.auth-input:focus,
.auth-input:focus-visible {
    outline: 0;
    box-shadow: none;
}

.auth-code-field {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-6px);
    transition: grid-template-rows .25s ease, opacity .2s ease, transform .25s ease;
}

.auth-code-field.is-visible {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
}

.auth-code-inner {
    min-height: 0;
    overflow: hidden;
}

.auth-code-content {
    padding-top: 2px;
}

.auth-code-input {
    letter-spacing: .22em;
    font-variant-numeric: tabular-nums;
}

.auth-error {
    color: #e1aaa5;
    padding: 10px 12px;
    border: 1px solid rgba(194, 112, 103, .3);
    border-radius: 6px;
    background: rgba(105, 45, 43, .18);
    font-size: 13px;
    line-height: 1.45;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 8px 0 0;
    color: #71847f;
    font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, rgba(150, 185, 190, .18));
}

.auth-divider::after {
    transform: scaleX(-1);
}

.telegram-button {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: #c7d5d2;
    border: 1px solid rgba(150, 185, 190, .2);
    border-radius: 7px;
    background: rgba(4, 15, 18, .46);
    font: 500 15px/1 "Lora", serif;
    cursor: pointer;
    transition: color .45s ease, border-color .45s ease, background .45s ease, transform .08s ease;
}

.telegram-button:hover {
    color: #eef7f3;
    border-color: rgba(86, 166, 191, .4);
    background: rgba(12, 31, 35, .72);
}

.telegram-button-icon {
    width: 21px;
    height: 21px;
    color: #68a9bd;
}

.auth-card-foot {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: -7px;
    width: 86px;
    height: 14px;
    transform: translateX(-50%);
    pointer-events: none;
}

.auth-card-foot::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(128, 185, 172, .54), transparent);
}

.auth-card-foot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 2px;
    width: 8px;
    height: 8px;
    border: 1px solid rgba(128, 185, 172, .66);
    background: #06191c;
    transform: translateX(-50%) rotate(45deg);
}

.login-footer {
    position: relative;
    padding: 0 20px 22px;
    color: rgba(151, 171, 167, .5);
    font-size: 12px;
    text-align: center;
}

@media (max-width: 520px) {
    .login-main {
        align-items: start;
        padding: 20px 12px 24px;
    }

    .auth-shell {
        gap: 14px;
    }

    .auth-brand-mark {
        width: 86px;
        height: 86px;
    }

    .auth-brand-caption {
        width: calc(100vw - 28px);
        gap: 8px;
        margin-top: 12px;
        font-size: 7px;
        letter-spacing: .22em;
    }

    .auth-card {
        padding: 28px 18px 24px;
    }

    .auth-heading {
        margin-bottom: 24px;
    }

    .auth-control-icon {
        margin: 0 8px;
    }

    .send-code-button,
    .enter-button {
        padding: 0 11px;
        font-size: 12px;
    }
}

@media (max-width: 370px) {
    .auth-card {
        padding-inline: 14px;
    }

    .auth-brand-caption {
        letter-spacing: .14em;
    }

    .auth-control-icon {
        display: none;
    }

    .auth-input {
        padding-left: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .auth-code-field,
    .send-code-button,
    .enter-button,
    .telegram-button {
        transition: none;
    }
}

@media (max-width: 760px) {
    .header-inner::before,
    .translate-controls,
    .right-panel,
    .glossary-workspace,
    .glossary-modal,
    .glossary-quick-context-menu,
    .glossary-quick-panel,
    .profile-modal,
    .customization-actions,
    .auth-card {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}