:root {
    --site-width: 1320px;
    --hrp-bg: #141922;
    --hrp-panel: #1f2635;
    --hrp-panel-soft: #252d3d;
    --hrp-border: #2e334d;
    --hrp-text: #f7f8fa;
    --hrp-muted: #98a0ab;
    --hrp-green: #3F9D13;
    --hrp-green-hover: #2D750C;
    --hrp-yellow: #ffc431;
    --hrp-yellow-hover: #A97B00;
    --hrp-red: #AC0F09;
    --hrp-red-hover: #7D110D;
    --hrp-cyan: #28b8d8;
}

/* ---------- Téléchargements HabboRP ---------- */
.download-page { min-height: 100vh; background: #1d2637; }
.download-main { width: min(1320px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 72px; font-family: "Poppins", sans-serif; }
.download-hero { position: relative; min-height: 330px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr); align-items: center; gap: 30px; overflow: hidden; padding: 52px 58px; border: 1px solid #34405a; border-radius: 18px; background: linear-gradient(90deg, rgba(10,16,27,.91) 0%, rgba(10,16,27,.76) 55%, rgba(10,16,27,.5) 100%), url('../img/download-hero-background.png') center/cover no-repeat; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.download-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(3,8,16,.1)); }
.download-hero-copy, .download-hero-visual { position: relative; z-index: 1; }
.download-kicker { display: inline-flex; align-items: center; gap: 8px; color: #ffc000; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.download-hero h1 { max-width: 720px; margin: 12px 0 10px; color: #fff; font-size: clamp(34px, 5vw, 58px); line-height: 1.08; letter-spacing: -.04em; }
.download-hero-copy > p { max-width: 690px; margin: 0; color: #aeb7c8; font-size: 16px; line-height: 1.75; }
.download-hero-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.download-hero-pills span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; color: #d9deea; border: 1px solid #313c50; border-radius: 9px; background: rgba(29,38,54,.72); font-size: 11px; font-weight: 700; }
.download-hero-pills i { color: #ffc000; font-size: 16px; }
.download-hero-visual { min-height: 220px; display: grid; place-items: center; }
.download-devices-image { display: block; width: min(100%, 530px); height: auto; object-fit: contain; filter: drop-shadow(0 22px 28px rgba(0,0,0,.34)); }
.download-app-emblem { width: 172px; height: 172px; display: grid; place-items: center; overflow: hidden; border-radius: 30px; background: #c99200; box-shadow: 0 24px 55px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.18); transform: rotate(-3deg); }
.download-app-emblem img { width: 100%; height: 100%; object-fit: cover; }
.download-device { position: absolute; display: grid; place-items: center; color: #fff; border: 1px solid #3e4b63; background: #202b3d; box-shadow: 0 12px 25px rgba(0,0,0,.28); }
.download-device i { font-size: 29px; }
.download-device-mobile { width: 57px; height: 68px; right: 12%; top: 6%; border-radius: 13px; transform: rotate(8deg); }
.download-device-desktop { width: 68px; height: 61px; left: 8%; bottom: 5%; border-radius: 13px; transform: rotate(-9deg); }
.download-platforms { margin-top: 38px; }
.download-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.download-section-heading small { color: #ffc000; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.download-section-heading h2 { margin: 4px 0 0; color: #fff; font-size: 27px; }
.download-section-heading > span { padding: 7px 11px; color: #9da7b9; border: 1px solid #354158; border-radius: 8px; background: #222c3d; font-size: 11px; font-weight: 700; }
.download-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.download-card { min-height: 315px; display: flex; flex-direction: column; padding: 22px; border: 1px solid #344058; border-radius: 15px; background: linear-gradient(145deg, #222c3e, #1c2535); box-shadow: 0 10px 25px rgba(0,0,0,.13); transition: transform .2s ease, border-color .2s ease; }
.download-card:hover { transform: translateY(-4px); border-color: rgba(255,192,0,.55); }
.download-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.download-platform-icon { width: 53px; height: 53px; display: grid; place-items: center; color: #ffc000; border: 1px solid rgba(255,192,0,.27); border-radius: 13px; background: rgba(255,192,0,.09); }
.download-platform-icon i { font-size: 29px; }
.download-status { display: inline-flex; align-items: center; gap: 5px; color: #8e98aa; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.download-status.is-online { color: #4ac94a; }
.download-card-copy { margin: 27px 0 23px; }
.download-card-copy small { color: #8f99aa; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.download-card-copy h3 { margin: 4px 0 7px; color: #fff; font-size: 25px; }
.download-card-copy p { margin: 0; color: #a8b1c1; font-size: 12px; line-height: 1.65; }
.download-button { min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 10px 12px; color: #161a21; border-radius: 9px; background: #ffc02c; font-size: 11px; font-weight: 800; text-decoration: none; transition: filter .18s ease, transform .18s ease; }
.download-button:hover { color: #161a21; filter: brightness(1.06); transform: translateY(-1px); }
.download-button.is-disabled { color: #858fa1; background: #2a3446; cursor: not-allowed; }
.download-security { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; margin-top: 20px; padding: 18px 21px; border: 1px solid #334057; border-radius: 13px; background: #202a3b; }
.download-security > span { width: 43px; height: 43px; display: grid; place-items: center; color: #ffc000; border-radius: 10px; background: rgba(255,192,0,.1); font-size: 23px; }
.download-security strong { color: #fff; font-size: 13px; }
.download-security p { margin: 3px 0 0; color: #929dae; font-size: 11px; }
.download-security a { display: inline-flex; align-items: center; gap: 6px; color: #ffc000; font-size: 11px; font-weight: 800; text-decoration: none; }
@media (max-width: 1050px) { .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .download-main { width: min(100% - 24px, 620px); padding-top: 18px; }
    .download-hero { grid-template-columns: 1fr; padding: 31px 25px; background-position: center; }
    .download-hero-visual { min-height: 185px; }
    .download-devices-image { width: min(100%, 430px); }
    .download-app-emblem { width: 142px; height: 142px; border-radius: 24px; }
    .download-section-heading { align-items: flex-start; }
    .download-section-heading > span { display: none; }
    .download-grid { grid-template-columns: 1fr; }
    .download-card { min-height: 270px; }
    .download-security { grid-template-columns: auto 1fr; }
    .download-security a { grid-column: 1 / -1; padding-left: 58px; }
}

/* Le catalogue Nitro est rendu ici, au meme niveau que les composants PHP. */
.hotel-catalogue-portal {
    position: fixed;
    inset: 0;
    z-index: 390;
    width: 100vw;
    height: 100vh;
    overflow: visible;
    pointer-events: none;
}

/* ============================================================
   Poste professionnel Agence immobilière
   ============================================================ */
.real-estate-panel[hidden],
.real-estate-panel [hidden] { display: none !important; }
.real-estate-panel {
    position: fixed;
    z-index: 79;
    top: 50%;
    left: 50%;
    display: flex;
    width: 660px;
    height: min(680px, calc(100vh - 64px));
    max-width: calc(100vw - 32px);
    max-height: 680px;
    flex-direction: column;
    overflow: hidden;
    color: #f5f7fb;
    border: 2px solid rgba(74, 86, 125, .78);
    border-radius: 15px;
    background: rgba(17, 23, 34, .30);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
    transform: translate(-50%, -50%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    font-family: "Poppins", "Segoe UI", sans-serif;
}
.real-estate-panel *, .real-estate-panel *::before, .real-estate-panel *::after { box-sizing: border-box; }
.real-estate-panel button, .real-estate-panel input, .real-estate-panel textarea,
.real-estate-panel select, .real-estate-panel strong, .real-estate-panel b {
    font-family: "Poppins", "Segoe UI", sans-serif;
}
.real-estate-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 62px;
    padding: 10px 13px 10px 17px;
    border-bottom: 1px solid rgba(105, 118, 157, .38);
    background: rgba(20, 26, 37, .40);
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.real-estate-panel.is-dragging .real-estate-header { cursor: grabbing; }
.real-estate-title { display: flex; align-items: center; gap: 11px; }
.real-estate-logo {
    display: grid; place-items: center; width: 37px; height: 37px;
    color: #1c2330; font-size: 21px; border-radius: 9px;
    background: linear-gradient(180deg, #ffd33f, #ffc400);
}
.real-estate-title > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.real-estate-title strong { font-family: "Roboto Condensed","Arial Narrow",sans-serif; font-size: 20px; line-height: 1.1; }
.real-estate-title small { color: #9ca8bb; font-size: 10px; }
.real-estate-header > button {
    display: grid; place-items: center; width: 27px; height: 27px; padding: 0;
    color: #fff; font-size: 20px; line-height: 1; border: 0; border-radius: 7px;
    background: #df2935; box-shadow: inset 0 -2px 0 rgba(115,4,14,.35); cursor: pointer;
}

/* Catalogue de location — même identité visuelle que les alertes HabboRP. */
#real-estate-panel {
    width: min(620px, calc(100vw - 28px));
    height: min(620px, calc(100vh - 28px));
    max-height: min(680px, calc(100vh - 28px));
    border: 2px solid #2e334d;
    border-radius: 11px;
    background: rgba(16, 20, 29, .94);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255,255,255,.06);
    -webkit-backdrop-filter: blur(6px) saturate(145%);
    backdrop-filter: blur(6px) saturate(145%);
}
#real-estate-panel .real-estate-header {
    min-height: 62px;
    padding: 10px 15px 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(12, 19, 31, .38);
}
#real-estate-panel .real-estate-title { gap: 11px; }
#real-estate-panel .real-estate-title img { display: block; width: 126px; height: auto; }
#real-estate-panel .real-estate-title strong {
    color: #d9dce3;
    font-family: "Poppins", "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
}
#real-estate-panel .real-estate-header > button {
    width: 29px;
    height: 29px;
    border-radius: 6px;
    background: var(--hrp-red);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
#real-estate-panel .real-estate-header > button:hover { background: var(--hrp-red-hover); }
#real-estate-panel .real-estate-body {
    display: flex;
    min-height: 0;
    max-height: none;
    flex-direction: column;
    overflow: hidden;
    padding: 14px 16px 16px;
    background: transparent;
    scrollbar-color: var(--hrp-yellow) transparent;
}
#real-estate-panel .real-estate-tabs {
    flex: 0 0 auto;
    margin-bottom: 12px;
    border-color: #303d57;
    background: rgba(8,13,22,.68);
}
#real-estate-panel .real-estate-tabs button.is-active {
    background: var(--hrp-yellow);
    box-shadow: 0 4px 12px rgba(255,196,0,.15);
}
#real-estate-panel .real-estate-intro {
    border-color: rgba(255,255,255,.07);
    background: rgba(29,36,49,.72);
}
#real-estate-panel .estate-catalog-intro {
    min-height: 84px;
    flex: 0 0 84px;
    justify-content: flex-start;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-color: rgba(255,196,49,.22);
    background: rgba(255,196,49,.07);
}
#real-estate-panel .estate-catalog-emblem {
    display: grid;
    width: 76px;
    height: 58px;
    flex: 0 0 76px;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    background: rgba(255,196,49,.12);
}
#real-estate-panel .estate-catalog-emblem img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
}
#real-estate-panel .estate-catalog-intro > span:last-child { gap: 2px; }
#real-estate-panel .estate-catalog-intro strong { font-size: 15px; }
#real-estate-panel .estate-catalog-intro small { color: #9ca7b9; font-size: 10px; }
#real-estate-panel .estate-search {
    height: 42px;
    min-height: 42px;
    flex: 0 0 42px;
    gap: 9px;
    padding: 0 12px;
    border-radius: 9px;
    border-color: #303d57;
    background: rgba(8,13,22,.72);
}
#real-estate-panel .estate-search > i { font-size: 18px; }
#real-estate-panel .estate-search > input { font-size: 11px; }
#real-estate-panel .real-estate-view:not([hidden]) {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}
#real-estate-panel .real-estate-list {
    min-height: 0;
    flex: 1 1 auto;
    align-content: start;
    grid-auto-rows: 62px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: var(--hrp-yellow) transparent;
}
#real-estate-panel .real-estate-list::-webkit-scrollbar { width: 5px; }
#real-estate-panel .real-estate-list::-webkit-scrollbar-track { background: transparent; }
#real-estate-panel .real-estate-list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--hrp-yellow);
}
#real-estate-panel .estate-property-card {
    border-color: #303b51;
    background: rgba(29,36,49,.80);
}
#real-estate-panel .estate-property-card.is-available {
    grid-template-columns: 43px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 62px;
    padding: 8px 9px;
    border-radius: 9px;
}
#real-estate-panel .estate-property-card.is-available .estate-property-icon {
    width: 43px;
    height: 43px;
}
#real-estate-panel .estate-property-card.is-available .estate-property-copy {
    justify-content: center;
    gap: 5px;
}
#real-estate-panel .estate-property-card.is-available .estate-price-details {
    margin-top: 0;
}
#real-estate-panel .estate-property-card.is-available .estate-price-detail.is-rent {
    height: 21px;
    padding: 0 7px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 5px;
    color: #ffd34f;
    background: #111824;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    line-height: 1;
}
#real-estate-panel .estate-property-card.is-available .estate-price-detail.is-rent img {
    display: block;
    width: 12px;
    height: 12px;
    object-fit: contain;
}
#real-estate-panel .estate-property-card.is-rented {
    grid-template-columns: 43px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 62px;
    padding: 8px 9px;
    border-radius: 9px;
}
#real-estate-panel .estate-property-card.is-rented .estate-property-actions {
    width: auto;
    flex-wrap: nowrap;
}
#real-estate-panel .estate-property-card.is-rented .estate-property-actions button {
    width: auto;
    min-width: 72px;
    height: 37px;
    min-height: 37px;
    gap: 6px;
    padding: 0 11px;
    color: #ffc431;
    border: 0;
    border-radius: 8px;
    background: #111824;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
#real-estate-panel .estate-property-card.is-rented .estate-property-actions button:hover {
    color: #ffd65e;
    background: #202938;
}
#real-estate-panel .estate-property-card.is-rented .estate-property-actions button img {
    display: block;
    width: 15px;
    height: 15px;
    object-fit: contain;
}
.real-estate-body {
    flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
    padding: 12px; background: rgba(18,24,35,.18);
    scrollbar-color: #687286 rgba(12,18,28,.58); scrollbar-width: thin;
}
.real-estate-tabs {
    display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px;
    margin-bottom: 11px; padding: 4px; border: 1px solid rgba(76,91,132,.64);
    border-radius: 11px; background: rgba(15,22,35,.32);
}
.real-estate-panel.is-public-menu .real-estate-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.real-estate-tabs button {
    display: flex; align-items: center; justify-content: center; gap: 6px; height: 43px;
    min-width: 0; padding: 0 5px; color: #aeb8ca; font-size: 11px; font-weight: 800;
    border: 0; border-radius: 8px; background: transparent; cursor: pointer; white-space: nowrap;
}
.real-estate-tabs button i { font-size: 16px; }
.real-estate-tabs button.is-active {
    color: #1c2330; background: linear-gradient(180deg,#ffd33f,#ffc400);
    box-shadow: 0 4px 12px rgba(255,196,0,.15);
}
.real-estate-feedback {
    margin: 0 0 10px; padding: 9px 11px; color: #9eebba; font-size: 11px;
    font-weight: 700; border: 1px solid rgba(66,194,112,.38); border-radius: 8px;
    background: rgba(39,130,75,.22);
}
.real-estate-feedback.is-error { color: #ff9ca5; border-color: rgba(229,61,74,.4); background: rgba(151,37,48,.23); }
.real-estate-intro, .real-estate-section-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 15px; border: 1px solid rgba(79,94,135,.58); border-radius: 10px;
    background: linear-gradient(135deg,rgba(36,47,69,.84),rgba(20,28,42,.72));
}
.real-estate-intro span, .real-estate-section-heading span { display: flex; flex-direction: column; }
.real-estate-intro small, .real-estate-section-heading small { color: #95a3b9; font-size: 10px; }
.real-estate-intro strong, .real-estate-section-heading strong { font-size: 15px; }
.real-estate-intro > i, .real-estate-section-heading > i { color: #ffd13c; font-size: 25px; }
.real-estate-list { display: grid; gap: 8px; margin-top: 10px; }
.estate-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin-top: 7px;
    padding: 0 11px;
    color: #8f9cb0;
    border: 1px solid rgba(76,91,132,.64);
    border-radius: 8px;
    background: rgba(12,19,30,.72);
}
.estate-search:focus-within { color: #ffc400; border-color: rgba(255,196,0,.72); }
.estate-search > i { font-size: 15px; }
.estate-search > input {
    width: 100%;
    min-width: 0;
    padding: 0;
    color: #f4f6fa;
    font-size: 10px;
    border: 0;
    outline: 0;
    background: transparent;
}
.estate-search > input::placeholder { color: #778499; }
.estate-card {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 76px; padding: 11px 12px; border: 1px solid rgba(71,85,124,.64);
    border-radius: 9px; background: rgba(24,32,48,.76);
}
.estate-card strong { font-size: 13px; }.estate-card p { margin: 3px 0; color: #aab5c7; font-size: 10px; }
.estate-card small { color: #c1cada; font-size: 9px; }.estate-card aside { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.estate-card button, .real-estate-create > button {
    padding: 8px 11px; color: #202633; font-size: 10px; font-weight: 800;
    border: 0; border-radius: 7px; background: linear-gradient(180deg,#ffd33f,#ffc400);
    box-shadow: inset 0 -2px 0 rgba(161,119,0,.28); cursor: pointer;
}
.estate-card button.danger { color: #fff; background: #df2935; }
.estate-card button[data-estate-visit] {
    color: #d6deeb;
    border: 1px solid rgba(93, 111, 157, .72);
    background: rgba(34, 45, 66, .88);
    box-shadow: none;
}
.estate-card button[data-estate-visit]:hover { color: #202633; border-color: #ffc400; background: #ffc400; }
.estate-property-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 70px;
    padding: 9px 12px;
    border: 1px solid rgba(71,85,124,.64);
    border-radius: 10px;
    background: linear-gradient(135deg,rgba(39,48,66,.9),rgba(26,33,47,.84));
}
.estate-property-card:nth-child(even) {
    background: linear-gradient(135deg,rgba(32,40,56,.92),rgba(22,29,41,.86));
}
.estate-property-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
}
.estate-property-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.estate-property-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.estate-property-copy > strong {
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.estate-property-copy > small {
    margin-top: 3px;
    overflow: hidden;
    color: #aeb9cb;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.estate-property-copy > small b { color: #fff; }
.estate-price-details {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.estate-price-detail {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #aeb9cb;
    font-size: 9px;
    font-weight: 700;
}
.estate-price-detail i { color: #7fc8ff; font-size: 11px; }
.estate-price-detail.is-rent { color: #f3d66d; }
.estate-price-detail.is-rent i { color: #ffc400; }
.estate-property-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}
.estate-property-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 7px 11px;
    color: #202633;
    font-size: 10px;
    font-weight: 800;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg,#ffd33f,#ffc400);
    box-shadow: inset 0 -2px 0 rgba(161,119,0,.28);
    cursor: pointer;
}
.estate-button-users {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 3px;
    padding-left: 7px;
    border-left: 1px solid rgba(32,38,51,.25);
    font-size: 9px;
}
.estate-button-users i { font-size: 11px; }
.estate-property-actions button[data-estate-visit] {
    color: #d8e0ed;
    border: 1px solid rgba(93,111,157,.72);
    background: rgba(28,38,56,.9);
    box-shadow: none;
}
.estate-property-actions button[data-estate-visit]:hover {
    color: #202633;
    border-color: #ffc400;
    background: #ffc400;
}
.estate-occupancy,
.estate-users {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    font-size: 9px;
    font-weight: 800;
    border-radius: 7px;
}
.estate-occupancy.is-available {
    color: #9eebba;
    border: 1px solid rgba(66, 194, 112, .38);
    background: rgba(39, 130, 75, .22);
}
.estate-occupancy.is-occupied {
    color: #ffd969;
    border: 1px solid rgba(255, 196, 0, .4);
    background: rgba(161, 119, 0, .22);
}
.estate-users {
    color: #cbd5e5;
    border: 1px solid rgba(93, 111, 157, .58);
    background: rgba(34, 45, 66, .72);
}
.real-estate-confirm {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(4, 7, 12, .76);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.real-estate-confirm > div {
    display: flex;
    width: min(390px, 100%);
    align-items: center;
    flex-direction: column;
    padding: 22px;
    text-align: center;
    border: 1px solid rgba(83, 99, 143, .82);
    border-radius: 13px;
    background: linear-gradient(145deg, #202b40, #121925);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .5);
}
.real-estate-confirm-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    color: #202633;
    font-size: 25px;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffd33f, #ffc400);
}
.real-estate-confirm strong { font-size: 16px; }
.real-estate-confirm p { margin: 7px 0 18px; color: #aeb8ca; font-size: 11px; line-height: 1.55; }
.real-estate-confirm-input {
    width: 100%;
    margin: -7px 0 15px;
    padding: 10px 11px;
    color: #fff;
    border: 1px solid rgba(84,100,143,.72);
    border-radius: 8px;
    outline: 0;
    background: rgba(10,16,26,.86);
}
.real-estate-confirm-input:focus { border-color: #ffc400; }
.real-estate-confirm footer { display: flex; justify-content: center; gap: 8px; }
.real-estate-confirm footer button {
    min-width: 105px;
    padding: 9px 13px;
    color: #d6deeb;
    font-size: 10px;
    font-weight: 800;
    border: 1px solid rgba(93, 111, 157, .72);
    border-radius: 7px;
    background: rgba(34, 45, 66, .88);
    cursor: pointer;
}
.real-estate-confirm footer [data-estate-confirm-accept] {
    color: #202633;
    border-color: #ffc400;
    background: linear-gradient(180deg, #ffd33f, #ffc400);
}
.real-estate-dashboard[hidden], .real-estate-dashboard [hidden] { display: none !important; }
.real-estate-dashboard {
    position: fixed; z-index: 80; top: 50%; left: 50%; width: 610px;
    max-width: calc(100vw - 28px); max-height: calc(100vh - 48px); overflow: hidden;
    color: #f5f7fb; border: 2px solid rgba(74,86,125,.78); border-radius: 15px;
    background: rgba(17,23,34,.82); box-shadow: 0 24px 70px rgba(0,0,0,.55);
    transform: translate(-50%,-50%); backdrop-filter: blur(16px) saturate(140%);
    font-family: "Poppins","Segoe UI",sans-serif;
}
.real-estate-dashboard * { box-sizing: border-box; }
.real-estate-dashboard > header { display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid rgba(105,118,157,.38);background:rgba(20,26,37,.75);cursor:grab;user-select:none;touch-action:none; }
.real-estate-dashboard.is-dragging > header { cursor:grabbing; }
.real-estate-dashboard > header > div { display:flex;align-items:center;gap:10px; }.real-estate-dashboard > header span { display:grid;place-items:center;width:38px;height:38px;color:#202633;font-size:20px;border-radius:9px;background:#ffc400; }
.real-estate-dashboard > header p { display:flex;flex-direction:column;margin:0; }.real-estate-dashboard > header strong { font-size:17px; }.real-estate-dashboard > header small { color:#9ca8bb;font-size:9px; }
.real-estate-dashboard > header > button { width:28px;height:28px;color:#fff;font-size:20px;border:0;border-radius:7px;background:#df2935;cursor:pointer; }
.rental-dashboard-body { max-height:calc(100vh - 120px);overflow-y:auto;padding:12px; }
.rental-tabs { display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:10px;padding:4px;border:1px solid rgba(76,91,132,.64);border-radius:10px;background:rgba(15,22,35,.55); }
.rental-tabs button { display:flex;align-items:center;justify-content:center;gap:6px;height:40px;color:#aeb8ca;font-size:10px;font-weight:800;border:0;border-radius:7px;background:transparent;cursor:pointer; }
.rental-tabs button i { font-size:15px; }.rental-tabs button.is-active { color:#202633;background:linear-gradient(180deg,#ffd33f,#ffc400); }
.rental-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px; }
.rental-summary article { display:flex;flex-direction:column;padding:11px;border:1px solid rgba(73,87,125,.6);border-radius:9px;background:rgba(24,32,48,.76); }
.rental-summary small { color:#99a6ba;font-size:9px; }.rental-summary strong { margin-top:3px;font-size:11px; }
.rental-electricity-card{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;margin:0 0 10px;padding:10px;border:1px solid rgba(255,200,0,.35);border-radius:9px;background:linear-gradient(110deg,rgba(255,200,0,.1),rgba(24,32,48,.8))}.rental-electricity-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:#ffc800;color:#172036;font-size:20px}.rental-electricity-card>div{display:flex;flex-direction:column}.rental-electricity-card small{font-size:9px;color:#a7b1c3}.rental-electricity-card strong{font-size:13px;color:#ffc800}.rental-electricity-card em{font-size:8px;color:#8794aa;font-style:normal}.rental-electricity-card dl{display:flex;gap:14px;margin:0}.rental-electricity-card dl div{display:flex;flex-direction:column}.rental-electricity-card dt{font-size:8px;color:#8f9bb0}.rental-electricity-card dd{margin:0;font-size:10px;font-weight:600;white-space:nowrap}
.rental-electricity-card>[data-rental-electricity-pay]{grid-column:2/4;justify-self:start;padding:6px 10px;border:0;border-radius:6px;background:#ffc800;color:#172036;font:600 9px Poppins,sans-serif;cursor:pointer}.rental-electricity-card>[data-rental-electricity-pay]:disabled{background:#344057;color:#8994a7;cursor:not-allowed;opacity:.75}
.rental-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0; }
.rental-actions.is-tenant-only { grid-template-columns:1fr; }
.rental-actions button[hidden] { display:none !important; }
.rental-actions button { display:flex;align-items:center;gap:10px;padding:12px;color:#202633;text-align:left;border:0;border-radius:9px;background:linear-gradient(180deg,#ffd33f,#ffc400);cursor:pointer; }
.rental-actions button.danger { color:#fff;background:#df2935; }.rental-actions button > i { font-size:22px; }.rental-actions button span { display:flex;flex-direction:column; }.rental-actions button strong { font-size:11px; }.rental-actions button small { opacity:.75;font-size:8px; }
.rental-section { margin-top:9px;padding:11px;border:1px solid rgba(71,85,124,.64);border-radius:10px;background:rgba(17,24,37,.58); }
.rental-section > div:first-child { display:flex;align-items:center;justify-content:space-between;margin-bottom:9px; }.rental-section > div:first-child span { display:flex;flex-direction:column; }.rental-section > div:first-child strong { font-size:13px; }.rental-section > div:first-child small { color:#99a6ba;font-size:8px; }.rental-section > div:first-child > i { color:#ffc400;font-size:22px; }
.rental-section form { display:flex;gap:6px; }.rental-section input { flex:1;min-width:0;padding:8px 9px;color:#fff;border:1px solid rgba(84,100,143,.72);border-radius:7px;background:rgba(10,16,26,.76);outline:0; }
.rental-section form button { padding:8px 11px;color:#202633;font-size:9px;font-weight:800;border:0;border-radius:7px;background:#ffc400;cursor:pointer; }.rental-section form [data-rental-unlock] { color:#d6deeb;border:1px solid rgba(93,111,157,.72);background:#222d42; }
.rental-rights-list { display:grid;gap:5px;margin-top:8px; }.rental-rights-list > p { margin:4px;color:#8895aa;font-size:9px; }.rental-rights-list article { display:flex;align-items:center;justify-content:space-between;padding:7px 9px;border-radius:7px;background:rgba(34,45,66,.72); }.rental-rights-list article span { display:flex;align-items:center;gap:7px; }.rental-rights-list article button { color:#ff8d96;border:0;background:transparent;cursor:pointer; }
.real-estate-dashboard > .real-estate-confirm { position:absolute; }
.rental-offer { padding:14px;border:1px solid rgba(71,85,124,.64);border-radius:11px;background:rgba(17,24,37,.58); }
.rental-offer-heading { display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid rgba(73,87,125,.5); }
.rental-offer-heading span { display:flex;flex-direction:column; }.rental-offer-heading small { color:#99a6ba; }.rental-offer-heading i { color:#ffc400;font-size:28px; }
.rental-offer-prices { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0; }
.rental-offer-prices article { display:flex;flex-direction:column;padding:11px;border:1px solid rgba(73,87,125,.6);border-radius:9px;background:rgba(24,32,48,.76); }
.rental-offer-prices small { color:#99a6ba; }.rental-offer-total { display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;padding:11px;border-radius:8px;background:rgba(255,196,0,.12); }
.rental-offer-total strong { color:#ffd33f; }.rental-offer > button { width:100%;padding:12px;color:#202633;font-weight:800;border:0;border-radius:8px;background:linear-gradient(180deg,#ffd33f,#ffc400);cursor:pointer; }
.rental-offer > button:disabled { opacity:.55;cursor:wait; }
.real-estate-dashboard *:not(i) {
    font-family: "Poppins", "Segoe UI", sans-serif !important;
    font-size: 14px !important;
}
@media (max-width: 700px) {
    .real-estate-panel,
    .real-estate-dashboard {
        top: max(133px, env(safe-area-inset-top)) !important;
        right: 8px !important;
        bottom: max(245px, calc(88px + env(safe-area-inset-bottom))) !important;
        left: 8px !important;
        width: auto !important;
        height: auto;
        max-width: none;
        max-height: none;
        border-radius: 12px;
        transform: none !important;
    }
    .real-estate-dashboard {
        display: flex;
        flex-direction: column;
    }
    .real-estate-header,
    .real-estate-dashboard > header {
        flex: 0 0 auto;
        cursor: default;
        touch-action: auto;
    }
    .real-estate-title,
    .real-estate-dashboard > header > div {
        min-width: 0;
    }
    .real-estate-title > span:last-child,
    .real-estate-dashboard > header p {
        min-width: 0;
    }
    .real-estate-title strong,
    .real-estate-dashboard > header strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .rental-dashboard-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .rental-tabs {
        grid-template-columns: 1fr;
    }
    .rental-tabs button {
        min-height: 40px;
        height: auto;
        padding: 8px;
    }
    .rental-summary,
    .rental-actions,
    .rental-offer-prices {
        grid-template-columns: 1fr;
    }
    .rental-section form {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .rental-section form button {
        width: 100%;
    }
    .real-estate-confirm {
        padding: 10px;
    }
    .real-estate-confirm > div {
        max-height: calc(100dvh - 40px);
        padding: 16px;
        overflow-y: auto;
    }
    .real-estate-confirm footer {
        width: 100%;
        flex-direction: column;
    }
    .real-estate-confirm footer button {
        width: 100%;
    }
}
.real-estate-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 10px; }
.real-estate-stats article {
    display: grid; grid-template-columns: 32px 1fr; padding: 10px; border: 1px solid rgba(73,87,125,.6);
    border-radius: 9px; background: rgba(24,32,48,.72);
}
.real-estate-stats article > i { grid-row: 1/3; align-self: center; color: #ffd13c; font-size: 22px; }
.real-estate-stats article > span { color: #99a6ba; font-size: 9px; }.real-estate-stats article > strong { font-size: 12px; }
.real-estate-create { margin-bottom: 12px; padding: 10px; border: 1px solid rgba(71,85,124,.64); border-radius: 10px; background: rgba(17,24,37,.58); }
.real-estate-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.real-estate-form-grid label { display: flex; min-width: 0; flex-direction: column; gap: 4px; color: #aeb8ca; font-size: 10px; font-weight: 700; }
.real-estate-form-grid input, .real-estate-form-grid select, .real-estate-form-grid textarea {
    width: 100%; min-width: 0; padding: 8px 9px; color: #f4f6fa; font-size: 11px;
    border: 1px solid rgba(84,100,143,.72); border-radius: 7px; outline: 0;
    background: rgba(10,16,26,.76); resize: vertical;
}
.real-estate-form-grid input:focus, .real-estate-form-grid select:focus, .real-estate-form-grid textarea:focus { border-color: #ffc400; }
.real-estate-wide { grid-column: 1/-1; }
.real-estate-input-unit { position: relative; }.real-estate-input-unit input { padding-right: 58px; }
.real-estate-input-unit b { position: absolute; right: 8px; top: 9px; color: #77849a; font-size: 8px; }
.real-estate-create > button { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
.real-estate-create > button small { padding-left: 7px; border-left: 1px solid rgba(32,38,51,.3); font-size: 8px; }
.real-estate-park-heading { margin-top: 5px; }
.real-estate-management {
    width: 700px;
    height: min(570px, calc(100vh - 64px));
    max-height: 570px;
}
.management-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.management-tabs button { height: 37px; }
.real-estate-management .real-estate-section-heading {
    padding: 9px 11px;
}
.real-estate-management .real-estate-section-heading strong { font-size: 13px; }
.real-estate-management .real-estate-section-heading > i { font-size: 21px; }
.management-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 11px;
}
.management-stats article {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 48px;
    padding: 7px 8px;
    border: 1px solid rgba(73,87,125,.6);
    border-radius: 9px;
    background: rgba(24,32,48,.72);
}
.management-stats article > i {
    grid-row: 1 / 3;
    align-self: center;
    color: #ffd13c;
    font-size: 18px;
}
.management-stats article > span { color: #99a6ba; font-size: 8px; }
.management-stats article > strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.management-overview,
.management-client-list,
.management-property-list {
    display: grid;
    gap: 5px;
    margin-top: 7px;
}
.management-overview-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 6px 9px;
    border: 1px solid rgba(71,85,124,.64);
    border-radius: 9px;
    background: rgba(24,32,48,.76);
}
.management-overview-row > img,
.management-property-card > img {
    width: 29px;
    height: 29px;
    object-fit: contain;
}
.management-overview-row > span:nth-child(2),
.management-property-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.management-overview-row strong,
.management-property-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.management-overview-row small,
.management-property-copy small { color: #9ba8bb; font-size: 9px; }
.management-status,
.management-people {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 24px;
    padding: 4px 7px;
    font-size: 9px;
    font-weight: 800;
    border: 1px solid rgba(89,105,145,.6);
    border-radius: 7px;
    background: rgba(19,27,41,.7);
}
.management-status.is-available { color: #8de4ac; border-color: rgba(67,190,111,.42); }
.management-status.is-occupied { color: #ffd65d; border-color: rgba(255,196,0,.4); }
.management-status.is-blocked { color: #ff929b; border-color: rgba(223,41,53,.4); }
.management-people { color: #d1d9e7; }
.management-client-card {
    display: grid;
    grid-template-columns: 42px repeat(3, minmax(0, 1fr)) auto auto;
    align-items: center;
    gap: 11px;
    min-height: 65px;
    padding: 10px 12px;
    border: 1px solid rgba(71,85,124,.64);
    border-radius: 9px;
    background: rgba(24,32,48,.76);
}
.management-client-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    background: #ffc400;
}
.management-client-avatar img {
    width: 46px;
    height: 46px;
    margin-top: -5px;
    margin-left: -3px;
    object-fit: contain;
}
.management-client-card > span:not(.management-client-avatar):not(.management-people) {
    display: flex;
    min-width: 0;
    flex-direction: column;
}
.management-client-card small { color: #8f9db2; font-size: 8px; }
.management-client-card strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.management-client-card > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 28px;
    padding: 5px 9px;
    color: #202633;
    font-size: 9px;
    font-weight: 800;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(180deg,#ffd33f,#ffc400);
    cursor: pointer;
}
.management-property-layout { display: grid; gap: 13px; }
.management-property-form {
    padding: 11px;
    border: 1px solid rgba(71,85,124,.64);
    border-radius: 11px;
    background: rgba(17,24,37,.58);
}
.management-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.management-form-actions button,
.management-property-card aside button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 32px;
    padding: 7px 10px;
    color: #202633;
    font-size: 9px;
    font-weight: 800;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(180deg,#ffd33f,#ffc400);
    cursor: pointer;
}
.management-form-actions button[data-management-cancel-edit],
.management-property-card aside button:last-child {
    color: #dce3ef;
    border: 1px solid rgba(88,104,145,.66);
    background: rgba(29,38,56,.86);
}
.management-form-actions small { margin-left: auto; color: #ffd65d; font-size: 9px; }
.management-settings-form {
    width: 100%;
    max-width: none;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.management-settings-form .real-estate-section-heading {
    margin-bottom: 9px;
    padding: 11px 13px;
    border-color: rgba(255,196,0,.28);
    background: linear-gradient(135deg,rgba(35,45,65,.94),rgba(25,33,49,.9));
}
.management-settings-grid {
    gap: 9px;
    margin-top: 0;
}
.management-settings-grid > label {
    gap: 6px;
    padding: 10px;
    color: #d9e0ec;
    border: 1px solid rgba(71,85,124,.64);
    border-radius: 9px;
    background: rgba(20,28,42,.82);
}
.management-settings-form label > small {
    display: block;
    margin-top: 1px;
    color: #8f9db2;
    font-size: 8px;
    line-height: 1.35;
}
.management-settings-number { position: relative; display: block; }
.management-settings-number input { width: 100%; padding-right: 34px; }
.management-settings-number b {
    position: absolute;
    top: 50%;
    right: 11px;
    color: #ffd13c;
    transform: translateY(-50%);
}
.management-settings-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 58px;
    margin-top: 9px;
    padding: 10px 12px;
    border: 1px solid rgba(71,85,124,.64);
    border-radius: 9px;
    background: rgba(24,32,48,.76);
    cursor: pointer;
}
.management-settings-switch > span {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}
.management-settings-switch strong { font-size: 11px; }
.management-settings-switch small {
    color: #8f9db2;
    font-size: 8px;
    font-weight: 500;
    line-height: 1.35;
}
.management-settings-switch input { position: absolute; opacity: 0; pointer-events: none; }
.management-settings-switch > i {
    position: relative;
    width: 38px;
    height: 21px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #39445a;
    transition: .2s ease;
}
.management-settings-switch > i::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    content: "";
    transition: .2s ease;
}
.management-settings-switch input:checked + i { background: #ffc400; }
.management-settings-switch input:checked + i::after { transform: translateX(17px); }
.management-settings-actions {
    justify-content: space-between;
    margin-top: 9px;
    padding: 0 2px;
}
.management-settings-actions small {
    max-width: 220px;
    margin-left: 12px;
    color: #98a5b9;
    text-align: right;
    line-height: 1.35;
}
.management-property-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid rgba(71,85,124,.64);
    border-radius: 9px;
    background: rgba(24,32,48,.76);
}
.management-property-card aside { display: flex; gap: 5px; }
.management-empty {
    margin: 0;
    padding: 18px;
    color: #96a3b6;
    text-align: center;
    font-size: 11px;
    border: 1px dashed rgba(84,100,143,.55);
    border-radius: 9px;
}
.management-edit-modal {
    position: absolute;
    z-index: 6;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(4,8,14,.72);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.management-edit-modal > form {
    width: min(580px, 100%);
    max-height: 100%;
    padding: 14px;
    overflow-y: auto;
    border: 1px solid rgba(83,100,145,.86);
    border-radius: 13px;
    background: linear-gradient(145deg,#1d2638,#121926);
    box-shadow: 0 22px 60px rgba(0,0,0,.58);
}
.management-edit-modal > form > header {
    display: grid;
    grid-template-columns: 40px minmax(0,1fr) 28px;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(82,97,137,.48);
}
.management-edit-modal > form > header > span {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    color: #202633;
    font-size: 20px;
    border-radius: 9px;
    background: #ffc400;
}
.management-edit-modal > form > header > div { display: flex; min-width: 0; flex-direction: column; }
.management-edit-modal > form > header strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.management-edit-modal > form > header small { color: #94a1b5; font-size: 9px; }
.management-edit-modal > form > header button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #fff;
    font-size: 18px;
    border: 0;
    border-radius: 7px;
    background: #df2935;
    cursor: pointer;
}
.management-edit-modal footer {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    margin-top: 12px;
}
.management-edit-modal footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 8px 13px;
    color: #dce3ef;
    font-size: 10px;
    font-weight: 800;
    border: 1px solid rgba(88,104,145,.66);
    border-radius: 7px;
    background: rgba(29,38,56,.86);
    cursor: pointer;
}
.management-edit-modal footer button[type="submit"] {
    color: #202633;
    border-color: transparent;
    background: linear-gradient(180deg,#ffd33f,#ffc400);
}
.management-client-modal > section {
    width: min(610px, 100%);
    max-height: 100%;
    padding: 14px;
    overflow-y: auto;
    border: 1px solid rgba(83,100,145,.86);
    border-radius: 13px;
    background: linear-gradient(145deg,#1d2638,#121926);
    box-shadow: 0 22px 60px rgba(0,0,0,.58);
}
.management-client-modal > section > header {
    display: grid;
    grid-template-columns: 76px minmax(0,1fr) 28px;
    align-items: center;
    gap: 11px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(82,97,137,.48);
}
.management-client-modal > section > header > img {
    width: 72px;
    height: 82px;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(255,196,0,.12);
}
.management-client-modal > section > header > div { display: flex; min-width: 0; flex-direction: column; }
.management-client-modal > section > header small { color: #ffd13c; font-size: 8px; text-transform: uppercase; }
.management-client-modal > section > header strong { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.management-client-modal > section > header span { color: #9ca8ba; font-size: 10px; }
.management-client-modal > section > header button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #fff;
    font-size: 18px;
    border: 0;
    border-radius: 7px;
    background: #df2935;
    cursor: pointer;
}
.management-client-details {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
    margin-top: 11px;
}
.management-client-details article {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 9px;
    border: 1px solid rgba(76,91,132,.62);
    border-radius: 8px;
    background: rgba(18,26,40,.7);
}
.management-client-details small { color: #909db1; font-size: 8px; }
.management-client-details strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.management-client-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.management-client-actions button {
    min-height: 34px;
    color: #202633;
    font-size: 10px;
    font-weight: 800;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(180deg,#ffd33f,#ffc400);
    cursor: pointer;
}
.management-client-actions button.danger { color: #fff; background: #df2935; }
.management-payment-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(76,91,132,.55);
}
.management-payment-heading span { display: flex; flex-direction: column; }
.management-payment-heading strong { font-size: 12px; }
.management-payment-heading small { color: #909db1; font-size: 8px; }
.management-payment-heading i { color: #ffc400; font-size: 19px; }
.management-payment-list { display: grid; gap: 5px; margin-top: 7px; }
.management-payment-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 7px;
    background: rgba(31,41,59,.72);
}
.management-payment-list article span { display: flex; min-width: 0; flex-direction: column; }
.management-payment-list article strong { color: #9be7b6; font-size: 10px; }
.management-payment-list article small { overflow: hidden; color: #9ba7b8; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.management-payment-list time { flex: 0 0 auto; color: #c7d0df; font-size: 8px; }
@media (max-width: 620px) {
    .real-estate-panel { max-width: calc(100vw - 16px); }
    .real-estate-form-grid, .real-estate-stats { grid-template-columns: 1fr; }
    .real-estate-wide { grid-column: auto; }.estate-card { align-items: flex-start; flex-direction: column; }
    .estate-property-card {
        grid-template-columns: 38px minmax(0,1fr);
        gap: 9px;
        padding: 10px;
    }
    .estate-property-icon { width: 36px; height: 36px; }
    .estate-property-icon img { width: 32px; height: 32px; }
    .estate-property-actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }
    .estate-property-actions button { flex: 1 1 auto; }
    .estate-property-actions .estate-users { margin-right: auto; }
    .management-tabs { grid-template-columns: 1fr; }
    .management-tabs button { height: 36px; }
    .management-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .management-overview-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
    .management-overview-row .management-people { grid-column: 2 / -1; justify-self: start; }
    .management-client-card { grid-template-columns: 36px minmax(0, 1fr); }
    .management-client-card > span:nth-child(n+3) { grid-column: 2; }
    .management-client-card .management-people { justify-self: start; }
    .management-client-card > button { grid-column: 1 / -1; width: 100%; }
    .management-property-card { grid-template-columns: 34px minmax(0, 1fr); }
    .management-property-card > .management-status { grid-column: 2; justify-self: start; }
    .management-property-card aside { grid-column: 1 / -1; }
    .management-property-card aside button { flex: 1; }
    .management-form-actions { align-items: stretch; flex-direction: column; }
    .management-form-actions small { margin-left: 0; text-align: center; }
    .management-edit-modal { padding: 8px; }
    .management-edit-modal footer { flex-direction: column-reverse; }
    .management-edit-modal footer button { width: 100%; }
    .management-client-details { grid-template-columns: 1fr; }
    .management-client-actions { grid-template-columns: 1fr; }
}

/* ============================================================
   Golden Duck Bank — interface HTML du client
   Les couches restent volontairement translucides afin que la salle demeure
   visible sous la fenetre, comme pour les panneaux situes a droite.
   ============================================================ */
.bank-window[hidden],
.bank-window [hidden] {
    display: none !important;
}

.bank-window {
    --bank-border: rgba(74, 86, 125, .72);
    --bank-surface: rgba(27, 34, 48, .42);
    --bank-surface-soft: rgba(18, 24, 36, .34);
    --bank-input: rgba(25, 35, 53, .58);
    --bank-yellow: #ffc400;
    --bank-text: #f5f7fb;
    --bank-muted: #9ba6ba;
    position: fixed;
    z-index: 78;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 430px;
    height: 560px;
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
    flex-direction: column;
    color: var(--bank-text);
    overflow: hidden;
    border: 2px solid var(--bank-border);
    border-radius: 15px;
    background: rgba(17, 23, 34, .26);
    box-shadow:
        0 18px 55px rgba(0, 0, 0, .48),
        inset 0 1px 0 rgba(255, 255, 255, .045);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    font-family: "Poppins", "Segoe UI", sans-serif;
    animation: bank-window-in .16s ease-out;
}

.bank-window.is-dragging {
    box-shadow: 0 24px 70px rgba(0, 0, 0, .58);
}

.bank-window *,
.bank-window *::before,
.bank-window *::after {
    box-sizing: border-box;
}

.bank-window button,
.bank-window input {
    font: inherit;
}

.bank-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 53px;
    padding: 0 12px 0 17px;
    border-bottom: 1px solid rgba(105, 118, 157, .34);
    background: rgba(20, 26, 37, .34);
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.bank-window.is-dragging .bank-window-header {
    cursor: grabbing;
}

.bank-window-header > strong {
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.45px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .35);
}

.bank-window-header [data-bank-close] {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    padding: 0;
    color: #fff;
    border: 0;
    border-radius: 7px;
    background: rgba(226, 42, 47, .92);
    box-shadow: inset 0 -2px 0 rgba(121, 8, 16, .35);
    cursor: pointer;
    transition: filter .12s ease, transform .12s ease;
}

.bank-window-header [data-bank-close]:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.bank-window-header [data-bank-close] svg {
    width: 15px;
    height: 15px;
}

.bank-window-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 10px;
    background:
        linear-gradient(145deg, rgba(61, 72, 95, .08), rgba(7, 12, 20, .08)),
        rgba(18, 24, 35, .16);
}

.bank-pin-view {
    height: 100%;
    padding: 24px 18px 18px;
    text-align: center;
    border: 1px solid rgba(79, 94, 137, .6);
    border-radius: 12px;
    background: rgba(18, 26, 41, .34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.bank-pin-view > strong {
    display: block;
    margin-bottom: 8px;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.bank-pin-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.bank-pin-dots span {
    width: 11px;
    height: 11px;
    border: 2px solid #6e7e9e;
    border-radius: 50%;
    background: rgba(7, 12, 21, .32);
    transition: background .1s ease, border-color .1s ease, transform .1s ease;
}

.bank-pin-dots span.is-filled {
    border-color: var(--bank-yellow);
    background: var(--bank-yellow);
    transform: scale(1.08);
    box-shadow: 0 0 9px rgba(255, 196, 0, .35);
}

.bank-pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 62px);
    justify-content: center;
    gap: 8px;
}

.bank-pin-pad button {
    height: 47px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    border: 1px solid rgba(76, 94, 137, .72);
    border-radius: 10px;
    background: rgba(35, 49, 75, .69);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 3px 7px rgba(0, 0, 0, .13);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background .1s ease, transform .08s ease;
}

.bank-pin-pad button:hover {
    background: rgba(49, 66, 98, .82);
}

.bank-pin-pad button:active {
    transform: translateY(1px);
}

.bank-pin-pad .bank-pin-clear {
    color: #ff4d5c;
}

.bank-pin-pad .bank-pin-back {
    color: #a9b5ca;
}

.bank-pin-view.is-shaking {
    animation: bank-pin-shake .45s ease;
}

.bank-app-view {
    display: flex;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

.bank-window :where(button, input, strong, b, small, span, p, label, time) {
    font-family: "Poppins", "Segoe UI", sans-serif;
}

.bank-account-switch {
    display: grid;
    width: 100%;
    min-height: 52px;
    margin-bottom: 8px;
    padding: 7px 10px;
    grid-template-columns: 30px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 9px;
    color: #f6f8fc;
    text-align: left;
    cursor: pointer;
    border: 1px solid rgba(255, 196, 0, .45);
    border-radius: 10px;
    background: rgba(31, 40, 56, .58);
}

.bank-account-switch > i:first-child {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: var(--bank-yellow);
    font-size: 18px;
    border-radius: 8px;
    background: rgba(255, 196, 0, .1);
}

.bank-account-switch > span {
    min-width: 0;
}

.bank-account-switch strong,
.bank-account-switch small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-account-switch strong {
    font-size: 14px;
}

.bank-account-switch small {
    margin-top: 1px;
    color: #9ca7ba;
    font-size: 12px;
}

.bank-account-switch > i:last-child {
    color: var(--bank-yellow);
    font-size: 18px;
}

.bank-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 10px;
    padding: 4px;
    border: 1px solid rgba(76, 91, 132, .65);
    border-radius: 11px;
    background: rgba(15, 22, 35, .30);
}

.bank-tabs:has([data-bank-tab="credits"][hidden]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bank-app-view:has(.bank-account-switch:not([hidden])) .bank-loans-panel,
.bank-app-view:has(.bank-account-switch:not([hidden])) .bank-transfer-panel {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
}

.bank-tabs button {
    min-width: 0;
    height: 35px;
    padding: 0 5px;
    color: #a6b0c3;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 9px;
    font-weight: 800;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}

.bank-tabs button:hover:not(.is-active) {
    color: #fff;
    background: rgba(255, 255, 255, .045);
}

.bank-tabs button.is-active {
    color: #1d2432;
    background: linear-gradient(180deg, #ffcf36, var(--bank-yellow));
    box-shadow: 0 3px 10px rgba(255, 196, 0, .15);
}

.bank-tab-panel {
    min-width: 0;
}

.bank-transactions-panel {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.bank-card {
    position: relative;
    height: 136px;
    padding: 17px 17px 14px;
    overflow: hidden;
    border: 1px solid rgba(215, 173, 20, .55);
    border-radius: 13px;
    background:
        linear-gradient(118deg, rgba(51, 62, 83, .48) 0 31%, rgba(22, 29, 42, .42) 31% 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 7px 18px rgba(0, 0, 0, .12);
}

.bank-card::after {
    position: absolute;
    right: -24px;
    bottom: -50px;
    width: 145px;
    height: 145px;
    content: "";
    border-radius: 50%;
    background: rgba(209, 172, 27, .085);
    box-shadow: 0 0 0 35px rgba(209, 172, 27, .035);
}

.bank-card-top,
.bank-card-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bank-card-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f5f6fa;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 13px;
    font-weight: 800;
}

.bank-card-brand img {
    width: 27px;
    height: 27px;
    padding: 3px;
    border-radius: 6px;
    background: rgba(5, 10, 17, .72);
    object-fit: contain;
}

.bank-card-brand b {
    color: var(--bank-yellow);
}

.bank-card-chip {
    width: 29px;
    height: 20px;
    border-radius: 4px;
    background: linear-gradient(145deg, #ffe169, #e6a900);
    box-shadow:
        inset 0 0 0 1px rgba(127, 86, 0, .25),
        0 2px 7px rgba(255, 196, 0, .2);
}

.bank-card-balance {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 15px;
    color: #fff;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.7px;
}

.bank-card-balance small {
    color: var(--bank-yellow);
    font-size: 10px;
    text-transform: uppercase;
}

.bank-card-balance.is-negative,
.bank-card-balance.is-negative small {
    color: #ff6572;
}

.bank-ban-warning {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -2px 0 8px;
    padding: 7px 9px;
    color: #ffc077;
    font-size: 8px;
    font-weight: 700;
    border: 1px solid rgba(218, 127, 39, .48);
    border-radius: 8px;
    background: rgba(117, 58, 20, .3);
}

.bank-overdraft-warning {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -2px 0 8px;
    padding: 7px 9px;
    color: #ff9aa4;
    font-size: 8px;
    font-weight: 700;
    border: 1px solid rgba(218, 57, 70, .48);
    border-radius: 8px;
    background: rgba(112, 27, 38, .32);
}

.bank-overdraft-warning i {
    flex: 0 0 auto;
    font-size: 14px;
}

.bank-ban-warning i {
    flex: 0 0 auto;
    font-size: 14px;
}

.bank-card-bottom {
    margin-top: 14px;
    color: #c8cfdb;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .25px;
    text-transform: uppercase;
}

.bank-card-bottom span:last-child {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 49px;
    margin-top: 9px;
    padding: 0 13px;
    border: 1px solid rgba(70, 85, 125, .65);
    border-radius: 11px;
    background: rgba(18, 26, 41, .34);
}

.bank-wallet-copy {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 12px;
}

.bank-wallet-copy img {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    object-fit: contain;
    image-rendering: pixelated;
}

.bank-wallet-value {
    color: #aab4c6;
    font-size: 10px;
}

.bank-wallet-value b {
    margin-right: 3px;
    color: var(--bank-yellow);
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 18px;
}

.bank-change-pin-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    margin-top: 9px;
    color: #f4f6fa;
    font-size: 14px;
    font-weight: 800;
    border: 1px solid rgba(70, 88, 130, .72);
    border-radius: 10px;
    background: rgba(29, 40, 61, .58);
    cursor: pointer;
}

.bank-change-pin-open:hover {
    border-color: rgba(255, 196, 0, .7);
    background: rgba(44, 52, 65, .7);
}

.bank-change-pin-open i {
    color: var(--bank-yellow);
    font-size: 18px;
}

.bank-change-pin-layer {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 13px;
    background: rgba(5, 9, 16, .56);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.bank-account-choice-layer {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: grid;
    padding: 14px;
    place-items: center;
    background: rgba(5, 9, 16, .66);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

.bank-account-choice-layer > section {
    width: 100%;
    max-height: 100%;
    padding: 18px;
    overflow-y: auto;
    text-align: center;
    border: 1px solid rgba(79, 94, 137, .78);
    border-radius: 13px;
    background: rgba(20, 28, 42, .94);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .42);
}

.bank-account-choice-layer > section > i {
    color: var(--bank-yellow);
    font-size: 38px;
}

.bank-account-choice-layer > section > strong {
    display: block;
    margin-top: 5px;
    font-size: 19px;
}

.bank-account-choice-layer > section > p {
    margin: 3px 0 15px;
    color: #9ca7ba;
    font-size: 14px;
}

.bank-account-choice-layer [data-bank-account-options] {
    display: grid;
    gap: 8px;
}

.bank-account-choice-layer [data-bank-account-options] > button {
    display: grid;
    width: 100%;
    min-height: 62px;
    padding: 9px 11px;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    color: #f6f8fc;
    text-align: left;
    cursor: pointer;
    border: 1px solid rgba(75, 91, 129, .72);
    border-radius: 10px;
    background: rgba(31, 41, 60, .74);
}

.bank-account-choice-layer [data-bank-account-options] > button:hover {
    border-color: rgba(255, 196, 0, .72);
    background: rgba(43, 52, 69, .9);
}

.bank-account-choice-layer [data-bank-account-options] > button > i:first-child {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--bank-yellow);
    font-size: 20px;
    border-radius: 9px;
    background: rgba(255, 196, 0, .1);
}

.bank-account-choice-layer [data-bank-account-options] button strong,
.bank-account-choice-layer [data-bank-account-options] button small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-account-choice-layer [data-bank-account-options] button strong {
    font-size: 14px;
}

.bank-account-choice-layer [data-bank-account-options] button small {
    color: #9ca7ba;
    font-size: 12px;
}

.bank-account-choice-layer [data-bank-account-options] button > i:last-child {
    color: #8f9aac;
    font-size: 17px;
}

.bank-change-pin-layer form {
    width: 100%;
    padding: 15px;
    border: 1px solid rgba(79, 94, 137, .75);
    border-radius: 12px;
    background: rgba(20, 28, 42, .9);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .42);
}

.bank-change-pin-layer header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
}

.bank-change-pin-layer header > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bank-change-pin-layer header strong,
.bank-change-pin-layer header small {
    font-size: 14px;
}

.bank-change-pin-layer header small {
    color: #9ba6ba;
}

.bank-change-pin-layer [data-bank-change-pin-close] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    color: #fff;
    font-size: 22px;
    border: 0;
    border-radius: 8px;
    background: #dc2837;
    cursor: pointer;
}

.bank-change-pin-layer label {
    display: block;
    margin-top: 9px;
}

.bank-change-pin-layer label > span {
    display: block;
    margin: 0 0 5px 2px;
    color: #c3cad7;
    font-size: 14px;
    font-weight: 700;
}

.bank-change-pin-layer form > p {
    margin: 9px 0 0;
    padding: 8px 10px;
    color: #ff98a1;
    font-size: 14px;
    border: 1px solid rgba(219, 55, 70, .5);
    border-radius: 8px;
    background: rgba(110, 26, 38, .3);
}

.bank-change-pin-layer form > button[type="submit"] {
    width: 100%;
    min-height: 42px;
    margin-top: 12px;
    color: #202630;
    font-size: 14px;
    font-weight: 800;
    border: 1px solid #ffc400;
    border-radius: 9px;
    background: #ffc400;
    cursor: pointer;
}

.bank-change-pin-layer form > button[type="submit"]:disabled {
    opacity: .58;
    cursor: wait;
}

.bank-section-label {
    display: block;
    margin: 2px 0 6px;
    color: #8f9ab0;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.bank-amount-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 45px 45px;
    gap: 5px;
}

.bank-window input {
    width: 100%;
    height: 40px;
    padding: 0 11px;
    color: #f5f7fb;
    border: 1px solid rgba(70, 88, 130, .72);
    border-radius: 9px;
    outline: none;
    background: var(--bank-input);
    box-shadow: inset 0 1px 6px rgba(0, 0, 0, .13);
    -moz-appearance: textfield;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.bank-window input::-webkit-outer-spin-button,
.bank-window input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.bank-window input::placeholder {
    color: #7e899d;
}

.bank-window input:focus {
    border-color: rgba(255, 196, 0, .72);
    box-shadow: 0 0 0 2px rgba(255, 196, 0, .1);
}

.bank-amount-row button {
    color: #d9dfeb;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid rgba(76, 94, 137, .68);
    border-radius: 9px;
    background: rgba(37, 50, 74, .72);
    cursor: pointer;
}

.bank-operation-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 7px;
}

.bank-operation-actions button,
.bank-transfer-panel > button {
    height: 40px;
    color: #151c25;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}

.bank-loans-panel {
    height: calc(100% - 49px);
    min-height: 0;
    padding: 10px;
    border: 1px solid rgba(68, 83, 120, .55);
    border-radius: 11px;
    background: rgba(17, 24, 38, .3);
}

.bank-loans-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bank-loans-heading > span {
    display: flex;
    flex-direction: column;
}

.bank-loans-heading strong {
    font-size: 13px;
}

.bank-loans-heading small {
    color: #8995a9;
    font-size: 8px;
}

.bank-loans-heading > i {
    color: var(--bank-yellow);
    font-size: 22px;
}

.bank-loans-list {
    display: grid;
    max-height: 257px;
    gap: 7px;
    overflow-y: auto;
    padding-right: 3px;
    scrollbar-color: #687286 rgba(12, 18, 28, .46);
    scrollbar-width: thin;
}

.bank-loans-list::-webkit-scrollbar {
    width: 6px;
}

.bank-loans-list::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #687286;
}

.bank-loan-card {
    padding: 8px;
    border: 1px solid rgba(73, 89, 130, .62);
    border-radius: 9px;
    background: rgba(23, 32, 48, .58);
}

.bank-loan-card header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 7px;
}

.bank-loan-card header > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.bank-loan-card header strong {
    font-size: 10px;
}

.bank-loan-card header small {
    overflow: hidden;
    color: #8995a9;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-loan-card header em {
    padding: 3px 6px;
    color: #6ce099;
    font-size: 7px;
    font-style: normal;
    font-weight: 800;
    border-radius: 9px;
    background: rgba(53, 165, 94, .18);
    text-transform: uppercase;
}

.bank-loan-progress {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 7px;
    margin: 7px 0;
}

.bank-loan-progress > span {
    height: 6px;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(8, 13, 21, .72);
}

.bank-loan-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--bank-yellow);
}

.bank-loan-progress small {
    color: #aab4c6;
    font-size: 7px;
}

.bank-loan-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.bank-loan-facts span {
    display: flex;
    flex-direction: column;
    padding: 5px 6px;
    color: #8995a9;
    font-size: 7px;
    border-radius: 6px;
    background: rgba(11, 17, 27, .4);
}

.bank-loan-facts strong {
    margin-top: 1px;
    color: #e7ebf3;
    font-size: 8px;
}

.bank-loan-repay {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 4px;
    margin-top: 7px;
}

.bank-loan-repay input {
    height: 30px;
    padding: 0 7px;
    font-size: 8px;
}

.bank-loan-repay button {
    height: 30px;
    padding: 0 7px;
    color: #1d2432;
    font-size: 7px;
    font-weight: 800;
    border: 0;
    border-radius: 6px;
    background: var(--bank-yellow);
    cursor: pointer;
}

.bank-loan-repay button:last-child {
    color: #e7ecf5;
    border: 1px solid rgba(76, 94, 137, .68);
    background: rgba(37, 50, 74, .72);
}

.bank-operation-actions [data-bank-command="depot"] {
    background: rgba(117, 172, 145, .85);
}

.bank-operation-actions [data-bank-command="retrait"] {
    background: rgba(180, 164, 116, .85);
}

.bank-window button:disabled {
    opacity: .42;
    cursor: not-allowed;
    filter: saturate(.35);
}

.bank-history-title {
    margin-top: 11px;
}

.bank-history {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overflow: auto;
    padding-right: 3px;
    border: 1px solid rgba(65, 78, 114, .48);
    border-radius: 10px;
    background: rgba(16, 23, 36, .28);
}

.bank-history::-webkit-scrollbar {
    width: 5px;
}

.bank-history::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #6884b9;
}

.bank-history-row {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 37px;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(67, 79, 111, .25);
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 10px;
}

.bank-history-row:last-child {
    border-bottom: 0;
}

.bank-history-icon {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 900;
}

.bank-history-icon.is-in {
    color: #46d978;
    background: rgba(35, 136, 73, .2);
}

.bank-history-icon.is-out {
    color: #ff5261;
    background: rgba(154, 47, 61, .2);
}

.bank-history-label {
    min-width: 0;
    overflow: hidden;
    color: #d9deea;
    font-weight: 700;
}

.bank-history-label strong,
.bank-history-label small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-history-label small {
    margin-top: 2px;
    color: #8591a5;
    font-size: 11px !important;
    font-weight: 500;
}

.bank-history-amount {
    font-size: 10px;
}

.bank-history-amount.is-in {
    color: #49db78;
}

.bank-history-amount.is-out {
    color: #ff4d5d;
}

.bank-history-empty {
    margin: 22px 0 18px;
    color: #8894aa;
    font-size: 11px;
    text-align: center;
}

.bank-transfer-panel {
    height: calc(100% - 49px);
    min-height: 225px;
    padding: 13px;
    overflow-y: auto;
    border: 1px solid rgba(68, 83, 120, .55);
    border-radius: 11px;
    background: rgba(17, 24, 38, .30);
}

.bank-beneficiary-book {
    margin-bottom: 11px;
    padding: 9px;
    border: 1px solid rgba(68, 83, 120, .55);
    border-radius: 9px;
    background: rgba(12, 19, 31, .34);
}

.bank-beneficiary-book > header {
    display: flex;
    margin-bottom: 7px;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.bank-beneficiary-book > header > span {
    color: #d8deea;
    font-size: 13px;
    font-weight: 700;
}

.bank-beneficiary-book > header > button {
    padding: 5px 7px;
    color: #ffc400;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(255, 196, 0, .3);
    border-radius: 7px;
    background: rgba(255, 196, 0, .08);
}

.bank-beneficiary-book > header > button:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.bank-beneficiary-book > div {
    display: grid;
    max-height: 112px;
    overflow-y: auto;
    gap: 5px;
}

.bank-beneficiary-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 27px;
    gap: 5px;
}

.bank-beneficiary-item > button {
    min-width: 0;
    color: #edf1f7;
    cursor: pointer;
    border: 1px solid rgba(68, 83, 120, .52);
    border-radius: 7px;
    background: rgba(28, 38, 56, .68);
}

.bank-beneficiary-item > button:first-child {
    display: grid;
    padding: 6px 7px;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    text-align: left;
}

.bank-beneficiary-item > button:first-child > i {
    color: #ffc400;
    font-size: 16px;
}

.bank-beneficiary-item span,
.bank-beneficiary-item strong,
.bank-beneficiary-item small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-beneficiary-item strong { font-size: 12px; }
.bank-beneficiary-item small {
    margin-top: 1px;
    color: #8c98aa;
    font-size: 10px;
}

.bank-beneficiary-item > button:last-child {
    padding: 0;
    color: #ff7b86;
}

.bank-beneficiary-book > small {
    display: block;
    padding: 5px 2px 1px;
    color: #8792a5;
    font-size: 11px;
}

.bank-beneficiary-book > small[hidden] { display: none; }

.bank-transfer-panel > p {
    margin: 0 0 13px;
    color: #aeb8c8;
    font-size: 11px;
    line-height: 1.45;
}

.bank-transfer-panel label {
    display: block;
    margin-bottom: 10px;
}

.bank-transfer-panel label > span {
    display: block;
    margin: 0 0 5px 2px;
    color: #929db1;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.bank-transfer-panel > button {
    width: 100%;
    margin-top: 3px;
    background: linear-gradient(180deg, #ffd13c, var(--bank-yellow));
}

.bank-window :where(button, input, strong, b, small, span, p, label, time) {
    font-family: "Poppins", "Segoe UI", sans-serif !important;
}

/* Lisibilité du distributeur : aucun texte fonctionnel sous 14 px. */
.bank-window-header > strong {
    font-size: 22px;
}

.bank-pin-view > strong,
.bank-tabs button,
.bank-card-brand,
.bank-card-balance small,
.bank-card-bottom,
.bank-wallet-copy,
.bank-wallet-value,
.bank-section-label,
.bank-window input,
.bank-amount-row button,
.bank-operation-actions button,
.bank-transfer-panel > button,
.bank-history-row,
.bank-history-amount,
.bank-history-empty,
.bank-transfer-panel > p,
.bank-transfer-panel label > span,
.bank-ban-warning,
.bank-overdraft-warning,
.bank-loans-heading small,
.bank-loan-card header strong,
.bank-loan-card header small,
.bank-loan-card header em,
.bank-loan-progress small,
.bank-loan-facts span,
.bank-loan-facts strong,
.bank-loan-repay input,
.bank-loan-repay button {
    font-size: 14px;
}

.bank-loans-heading strong {
    font-size: 17px;
}

.bank-loans-list {
    max-height: 385px;
}

.bank-loan-card {
    padding: 12px;
}

.bank-loan-facts span {
    padding: 8px;
}

.bank-loan-repay {
    grid-template-columns: minmax(0, 1fr) minmax(105px, auto) minmax(92px, auto);
    gap: 6px;
}

.bank-loan-repay input,
.bank-loan-repay button {
    height: 38px;
}

@keyframes bank-window-in {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 7px)) scale(.985);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes bank-pin-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-7px); }
    40%, 80% { transform: translateX(7px); }
}

@media (max-width: 520px) {
    .bank-window {
        top: max(48px, calc(42px + env(safe-area-inset-top))) !important;
        right: auto !important;
        bottom: max(98px, calc(88px + env(safe-area-inset-bottom))) !important;
        left: 50% !important;
        width: min(430px, calc(100vw - 12px));
        height: auto !important;
        max-width: calc(100vw - 12px);
        max-height: none !important;
        margin: 0 !important;
        overflow: hidden;
        border-radius: 12px;
        transform: translateX(-50%) !important;
        animation: none;
    }

    .bank-window:has(.bank-pin-view:not([hidden])) {
        top: calc(50% - 25px) !important;
        bottom: auto !important;
        height: min(410px, calc(100dvh - 160px)) !important;
        transform: translate(-50%, -50%) !important;
    }

    .bank-window-header {
        height: 50px;
        min-height: 50px;
        padding-inline: 12px;
    }

    .bank-window-header > strong {
        min-width: 0;
        overflow: hidden;
        font-size: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bank-window-body {
        overflow-x: hidden;
        overflow-y: auto;
        padding: 8px;
        overscroll-behavior: contain;
    }

    .bank-window:has(.bank-pin-view:not([hidden])) .bank-window-body {
        overflow: hidden;
    }

    .bank-pin-view {
        height: 100%;
        min-height: 0;
        padding: 17px 10px 12px;
    }

    .bank-pin-pad {
        width: min(100%, 285px);
        margin-inline: auto;
    }

    .bank-app-view {
        height: auto;
        min-height: 100%;
    }

    .bank-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bank-tabs button {
        height: 40px;
    }

    .bank-card,
    .bank-wallet,
    .bank-change-pin-open,
    .bank-transfer-panel,
    .bank-loans-panel {
        max-width: 100%;
    }

    .bank-card {
        padding-inline: 14px;
    }

    .bank-card-bottom span:last-child {
        max-width: 45%;
    }

    .bank-history {
        max-height: none;
    }

    .bank-change-pin-layer {
        position: fixed;
        inset: max(6px, env(safe-area-inset-top)) 6px
            max(76px, calc(66px + env(safe-area-inset-bottom)));
        padding: 8px;
    }

    .bank-change-pin-layer form {
        max-height: 100%;
        overflow-y: auto;
    }

    .bank-loan-repay {
        grid-template-columns: 1fr 1fr;
    }

    .bank-loan-repay input {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bank-window,
    .bank-pin-view.is-shaking {
        animation: none;
    }
}

.site-box {
    width: calc(100% - 40px);
    max-width: var(--site-width);
    margin-right: auto;
    margin-left: auto;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.home-page { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--hrp-text); background: var(--hrp-bg); font-family: Inter, "Segoe UI", Arial, sans-serif; }
a { text-decoration: none; }

.home-navbar { min-height: 82px; background: rgba(19,21,25,.96); border-top: 3px solid rgba(255,255,255,.08); border-bottom: 1px solid var(--hrp-border); box-shadow: 0 12px 30px rgba(0,0,0,.24); backdrop-filter: blur(14px); }
.home-brand { display: flex; align-items: center; gap: 8px; margin-right: 2rem; }
.home-brand img { display: block; width: 210px; max-height: 46px; object-fit: contain; object-position: left center; }
.home-brand .badge { color: #161616 !important; font-size: 10px; border-radius: 5px; }
.home-navbar .nav-link { display: flex; align-items: center; gap: 7px; padding: 27px 13px !important; color: #9da4ae; font-weight: 700; transition: color .18s ease, background .18s ease; }
.home-navbar .nav-link:hover, .home-navbar .nav-link.active { color: #fff; background: rgba(255,255,255,.035); }
.home-navbar .nav-link.active::after { content: ""; position: absolute; bottom: 0; width: 28px; height: 3px; border-radius: 4px 4px 0 0; background: var(--hrp-green); }
.home-navbar .nav-item { position: relative; }
.home-dropdown { padding: 8px; color: #fff; background: #202329; border: 1px solid var(--hrp-border); border-radius: 12px; box-shadow: 0 18px 45px rgba(0,0,0,.4); }
.home-dropdown .dropdown-item { display: flex; align-items: center; gap: 9px; padding: 10px 12px; color: #c6cbd2; border-radius: 8px; font-weight: 600; }
.home-dropdown .dropdown-item:hover { color: #fff; background: rgba(73,200,87,.13); }
.navbar-actions { position: relative; }
.btn-play, .btn-logout { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; color: #fff; border: 0; border-radius: 8px; font-weight: 800; box-shadow: inset 0 -2px rgba(0,0,0,.18); transition: transform .15s ease, filter .15s ease; }
.btn-play { background: var(--hrp-green); }
.btn-logout { background: var(--hrp-red); }
.btn-play:hover, .btn-logout:hover { color: #fff; filter: brightness(1.1); transform: translateY(-1px); }
.profile-trigger { position: relative; width: 48px; height: 48px; overflow: hidden; padding: 0; background: #262a30; border: 1px solid var(--hrp-border); border-radius: 50%; }
.profile-trigger img { width: 70px; height: 90px; margin: -9px 0 0 -12px; object-fit: contain; image-rendering: pixelated; }
.online-dot { position: absolute; right: 1px; bottom: 2px; width: 11px; height: 11px; background: var(--hrp-green); border: 2px solid var(--hrp-panel); border-radius: 50%; }
.online-dot.static { position: static; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border: 0; }
.profile-menu { min-width: 240px; margin-top: 12px !important; }
.profile-menu-head { display: flex; flex-direction: column; padding: 10px 12px 12px; margin-bottom: 5px; border-bottom: 1px solid var(--hrp-border); }
.profile-menu-head small { color: var(--hrp-muted); }

.hero-section { position: relative; min-height: 510px; overflow: hidden; background: radial-gradient(circle at 70% 30%, rgba(40,184,216,.22), transparent 33%), linear-gradient(105deg, rgba(11,22,27,.94), rgba(19,70,80,.62)), url("../img/backaground/mairie.png") center 44% / min(760px, 72vw) auto no-repeat, #15333a; }
.hero-section::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(45deg, rgba(255,255,255,.17) 1px, transparent 1px), linear-gradient(-45deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 24px 24px; }
.hero-section::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(transparent, rgba(8,10,12,.85)); }
.hero-glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(90px); opacity: .25; }
.hero-glow-one { top: -190px; right: 20%; background: #35d6f2; }
.hero-glow-two { bottom: -240px; left: 8%; background: var(--hrp-green); }
.hero-container { position: relative; z-index: 2; min-height: 410px; padding-top: 58px; }
.hero-copy { padding: 26px 0 60px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; margin-bottom: 14px; color: #baf6c1; background: rgba(73,200,87,.13); border: 1px solid rgba(73,200,87,.3); border-radius: 999px; font-weight: 700; font-size: 13px; }
.hero-copy h1 { max-width: 760px; margin: 0 0 14px; color: #fff; font-size: clamp(38px, 5vw, 66px); font-weight: 900; letter-spacing: -2.3px; line-height: .98; text-shadow: 0 5px 22px rgba(0,0,0,.38); }
.hero-copy h1 span { color: var(--hrp-green); }
.hero-copy p { max-width: 610px; margin-bottom: 24px; color: #c9d7da; font-size: 18px; }
.hero-copy .btn-lg { min-height: 50px; padding-inline: 20px; border-radius: 9px; font-size: 15px; font-weight: 800; }
.hero-character { position: relative; min-height: 360px; display: flex; align-items: flex-end; justify-content: center; }
.hero-avatar { position: relative; z-index: 2; width: 230px; height: 350px; object-fit: contain; object-position: bottom; image-rendering: pixelated; filter: drop-shadow(0 18px 16px rgba(0,0,0,.45)); }
.avatar-aura { position: absolute; bottom: 50px; width: 270px; height: 270px; background: radial-gradient(circle, rgba(96,222,112,.24), transparent 66%); }
.avatar-nameplate { position: absolute; z-index: 3; right: 2%; bottom: 42px; display: grid; grid-template-columns: auto 1fr; align-items: center; min-width: 180px; padding: 10px 13px; color: #fff; background: rgba(18,21,24,.87); border: 1px solid var(--hrp-border); border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,.32); backdrop-filter: blur(8px); }
.avatar-nameplate small { grid-column: 2; color: #aeb5bd; font-size: 11px; }
.hero-stats { position: relative; z-index: 4; min-height: 100px; padding: 18px 0; background: rgba(10,12,14,.78); border-top: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(12px); }
.wallet-stat { display: flex; align-items: center; gap: 12px; }
.wallet-stat > div { display: flex; flex-direction: column; }
.wallet-stat small { color: var(--hrp-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .7px; }
.wallet-stat strong { color: #fff; font-size: 17px; }
.stat-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 24px; }
.stat-icon.coins { color: var(--hrp-yellow); background: rgba(255,196,49,.13); border: 1px solid rgba(255,196,49,.18); }
.progress-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.progress-item > div:first-child { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: #aab1b9; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.progress-item b { color: #fff; font-size: 11px; }
.progress { height: 13px; overflow: hidden; background: #111419; border: 1px solid rgba(255,255,255,.04); border-radius: 999px; }
.progress-bar { border-radius: inherit; box-shadow: inset 0 -2px rgba(0,0,0,.12); }
.progress-bar.green { background: var(--hrp-green); }.progress-bar.yellow { background: var(--hrp-yellow); }.progress-bar.red { background: var(--hrp-red); }

.content-section { position: relative; z-index: 3; padding: 30px 0 80px; background: #121416; }
.beta-alert { display: flex; align-items: center; gap: 12px; padding: 16px 18px; margin-bottom: 52px; color: #171717; background: linear-gradient(90deg,#ffc72f,#ffd94f); border-radius: 10px; box-shadow: 0 10px 26px rgba(255,196,49,.1); }
.beta-alert > i { font-size: 23px; }.beta-alert span { flex: 1; }.beta-alert a { color: #171717; font-weight: 800; white-space: nowrap; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.section-heading span, .card-tag { color: var(--hrp-green); font-size: 11px; font-weight: 900; letter-spacing: 1.6px; }
.section-heading h2 { margin: 4px 0 0; font-weight: 850; }.section-heading > a { color: #b7bdc5; font-weight: 700; }
.feature-card { position: relative; height: 100%; min-height: 275px; padding: 26px; overflow: hidden; color: #fff; background: linear-gradient(145deg,#1d2025,#171a1f); border: 1px solid var(--hrp-border); border-radius: 16px; box-shadow: 0 15px 35px rgba(0,0,0,.18); transition: transform .2s ease, border-color .2s ease; }
.feature-card:hover { transform: translateY(-4px); border-color: rgba(73,200,87,.38); }
.feature-card-main { background: radial-gradient(circle at 90% 15%, rgba(73,200,87,.18), transparent 35%), linear-gradient(145deg,#1c2322,#171a1f); }
.card-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 28px; color: #63df71; background: rgba(73,200,87,.12); border-radius: 13px; font-size: 28px; }
.card-icon.purple { color: #ad85ff; background: rgba(147,104,255,.12); }.card-icon.orange { color: #ffab52; background: rgba(255,145,56,.12); }
.feature-card h3 { margin: 7px 0 10px; font-size: 22px; font-weight: 850; }.feature-card p { color: #9fa7b1; }.feature-card > a { position: absolute; bottom: 24px; color: #fff; font-weight: 800; }

@media (max-width: 1199.98px) { .home-brand img { width: 170px; }.home-navbar .nav-link { padding-inline: 8px !important; }.avatar-nameplate { right: -3%; } }
@media (max-width: 991.98px) {
    .home-navbar { min-height: 70px; }.home-navbar .navbar-collapse { padding: 10px 0 18px; }.home-navbar .nav-link { padding: 11px 8px !important; }.home-navbar .nav-link.active::after { display:none; }.navbar-actions { padding-top: 12px; border-top: 1px solid var(--hrp-border); }
    .hero-section { min-height: auto; }.hero-container { min-height: 0; padding-top: 35px; }.hero-copy { padding-bottom: 10px; }.hero-character { min-height: 310px; }.hero-avatar { height: 300px; }.avatar-nameplate { right: 15%; bottom: 30px; }
}
@media (max-width: 767.98px) {
    .home-brand img { width: 155px; }.hero-copy h1 { font-size: 42px; }.hero-copy p { font-size: 16px; }.hero-character { min-height: 275px; }.hero-avatar { height: 260px; }.avatar-nameplate { right: 5%; }
    .progress-grid { grid-template-columns: 1fr; }.hero-stats { padding: 22px 0; }.beta-alert { align-items: flex-start; flex-wrap: wrap; }.beta-alert a { width: 100%; padding-left: 35px; }.section-heading { align-items: flex-start; flex-direction: column; }
}

/* Pages publiques : connexion et inscription */
body.auth-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    color: #fff;
    background: var(--hrp-panel);
    font-family: Poppins, "Segoe UI", sans-serif;
}

.auth-header {
    position: relative;
    z-index: 10;
    min-height: 64px;
    background: var(--hrp-bg);
    border-top: 0;
    border-bottom: 1px solid var(--hrp-border);
}

.auth-header-inner { min-height: 64px; display: flex; align-items: center; gap: 28px; }
.auth-logo { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.auth-logo img { width: 205px; height: 48px; object-fit: contain; }
.auth-logo span { padding: 3px 6px; color: #151515; background: var(--hrp-yellow); border-radius: 5px; font-size: 10px; font-weight: 900; }
.auth-nav { display: flex; align-self: stretch; align-items: center; gap: 26px; }
.auth-nav a { position: relative; height: 100%; display: flex; align-items: center; padding: 0; color: #8b9099; font-weight: 500; }
.auth-nav a:hover, .auth-nav a.active { color: #fff; }
.auth-nav a.active::after { display: none; }
.auth-online { margin-left: auto; display: flex; align-items: center; gap: 6px; color: #f4f4f4; font-size: 15px; }
.auth-online i { color: var(--hrp-yellow); font-size: 20px; }

.auth-main { flex: 1 0 auto; padding: 20px 0 42px; }
.auth-container { max-width: var(--site-width); }
.auth-beta { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; margin-bottom: 15px; color: #171717; background: var(--hrp-yellow); border-radius: 7px; font-size: 14px; font-weight: 700; text-align: center; }
.auth-beta i { font-size: 20px; }
.auth-shell { overflow: hidden; background: var(--hrp-bg); border: 1px solid var(--hrp-border); border-radius: 7px; box-shadow: 0 20px 60px rgba(0,0,0,.2); }

.auth-login-shell { min-height: 540px; display: grid; grid-template-columns: 1.08fr .92fr; }
.auth-showcase { position: relative; min-height: 540px; display: flex; align-items: flex-end; padding: 25px; background: linear-gradient(to bottom,rgba(0,0,0,0) 18%,rgba(0,0,0,.42) 48%,rgba(0,0,0,.88) 72%,rgba(0,0,0,.96) 100%), url("../img/cWKV75t.png") center / cover no-repeat; }
/* .auth-showcase::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent 72%,#202020); pointer-events: none; } */
.auth-showcase-content { position: relative; z-index: 1; width: 100%; padding: 0 0 52px; text-align: center; }
.auth-showcase h1 { margin-bottom: 10px; font-size: 26px; font-weight: 800; }
.auth-showcase p { max-width: 670px; margin: 0 auto 22px; color: #e3e3e3; line-height: 1.45; }
.auth-showcase .auth-button { width: 100%; }
.auth-form-panel { padding: 70px 50px 38px; background: var(--hrp-bg); }
.auth-form-heading { margin-bottom: 24px; text-align: center; }
.auth-form-heading img { width: 225px; max-height: 55px; margin-bottom: 16px; }
.auth-form-heading h1, .auth-form-heading h2 { margin: 0 0 8px; color: #fff; font-size: 27px; font-weight: 800; }
.auth-form-heading p { margin: 0; color: #9b9da3; }
.auth-form-heading.compact { margin-bottom: 20px; }
.auth-form-heading.compact h1, .auth-form-heading.compact h2 { font-size: 30px; }

.auth-form { display: flex; flex-direction: column; }
.auth-form > label, .auth-form-row label { margin: 0 0 7px; color: #fff; font-size: 14px; font-weight: 700; }
.auth-input { position: relative; margin-bottom: 14px; }
.auth-input i { position: absolute; top: 50%; left: 14px; color: #72777f; font-size: 19px; transform: translateY(-50%); }
.auth-input input { width: 100%; height: 47px; padding: 0 14px 0 43px; color: #fff; background: #101620; border: 1px solid var(--hrp-border); border-radius: 6px; outline: 0; transition: border-color .15s, box-shadow .15s; }
.auth-input input::placeholder { color: #747880; }
.auth-input input:focus { border-color: var(--hrp-yellow); box-shadow: 0 0 0 3px rgba(255,196,49,.14); }
.auth-input input:-webkit-autofill,
.auth-input input:-webkit-autofill:hover,
.auth-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    box-shadow: 0 0 0 1000px #101620 inset;
    caret-color: #fff;
    transition: background-color 9999s ease-out 0s;
}
.auth-input-avatar { overflow: hidden; border-radius: 6px; }
.auth-input-avatar input { padding-right: 68px; }
.auth-input-avatar img { position: absolute; z-index: 2; top: 66%; right: -6px; width: 57px; height: 110px; object-fit: contain; object-position: center; image-rendering: pixelated; pointer-events: none; transform: translateY(-50%); }
.auth-input-locked input { color: #c2c8d2; background: #171e2a; border-color: rgba(255,196,49,.34); cursor: not-allowed; }
.auth-input-locked i { color: var(--hrp-yellow); }
.auth-input-password input { padding-right: 48px; }
.auth-password-toggle { position: absolute; z-index: 2; top: 50%; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; color: #72777f; background: transparent; border: 0; border-radius: 5px; cursor: pointer; transform: translateY(-50%); }
.auth-password-toggle:hover { color: #fff; background: rgba(255,255,255,.06); }
.auth-password-toggle i { position: static; color: inherit; transform: none; }
.auth-button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; color: #171717; background: var(--hrp-yellow); border: 0; border-radius: 6px; font-weight: 800; transition: filter .15s, transform .15s; }
.auth-button:hover { color: #171717; filter: brightness(1.06); transform: translateY(-1px); background: var(--hrp-yellow); }
/*.auth-button:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }*/
.auth-social-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: #77839a; font-size: 12px; font-weight: 600; }
.auth-form-heading + .auth-social-divider, .auth-message + .auth-social-divider { margin-top: 0; }
.auth-social-divider-fields { margin: 16px 0 13px; }
.auth-social-divider::before, .auth-social-divider::after { content: ""; height: 1px; flex: 1; background: var(--hrp-border); }
.auth-social-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-social-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--hrp-yellow); border-radius: 7px; color: #171717; background: var(--hrp-yellow); font-weight: 800; text-decoration: none; transition: filter .15s, transform .15s; }
.auth-social-button i { font-size: 21px; }
.auth-social-button:hover { color: #171717; filter: brightness(1.06); transform: translateY(-1px); background: var(--hrp-yellow); }
.auth-social-button.is-discord i,
.auth-social-button.is-google i { color: #171717; }
.auth-switch { margin: 18px 0 0; color: #90949b; text-align: center; font-size: 13px; }
.auth-switch a { color: var(--hrp-yellow); font-weight: 700; }
.auth-message { display: flex; align-items: center; gap: 9px; padding: 11px 13px; margin-bottom: 15px; border-radius: 6px; font-size: 13px; font-weight: 600; }
.auth-message.error { color: #ffd4d6; background: rgba(226,59,67,.16); border: 1px solid rgba(226,59,67,.32); }
.auth-message i { font-size: 20px; }

.auth-register-shell { display: grid; grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); padding: 20px; gap: 20px; background: var(--hrp-bg); }
.auth-register-form,
.auth-look-panel { min-width: 0; padding: 24px; background: rgba(32,42,61,.44); border: 1px solid var(--hrp-border); border-radius: 10px; }
.auth-register-form { display: flex; flex-direction: column; }
.auth-register-form .auth-form { flex: 1; }
.auth-register-shell .auth-form-heading.compact { margin-bottom: 25px; text-align: left; }
.auth-register-shell .auth-form-heading.compact h1,
.auth-register-shell .auth-form-heading.compact h2 { margin-bottom: 5px; font-size: 27px; }
.auth-register-shell .auth-form-heading.compact p { line-height: 1.45; }
.auth-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-name-format {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -6px 0 12px;
    color: var(--hrp-muted);
    font-size: 12px;
    line-height: 1.45;
}
.auth-name-format i,
.auth-name-format strong { color: var(--hrp-yellow); }
.auth-label-with-help { display: flex; align-items: center; gap: 7px; }
.auth-help-tooltip { position: relative; display: inline-grid; place-items: center; color: var(--hrp-yellow); cursor: help; outline: 0; }
.auth-help-tooltip > i { font-size: 17px; }
.auth-help-tooltip > span { position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 10px); width: 285px; padding: 10px 12px; color: #fff; background: #101620; border: 1px solid rgba(255,196,49,.42); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.38); font-size: 12px; font-weight: 500; line-height: 1.45; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%,5px); transition: opacity .15s, transform .15s, visibility .15s; }
.auth-help-tooltip > span::after { content: ""; position: absolute; top: 100%; left: 50%; border: 6px solid transparent; border-top-color: rgba(255,196,49,.55); transform: translateX(-50%); }
.auth-help-tooltip:hover > span,
.auth-help-tooltip:focus > span,
.auth-help-tooltip:focus-within > span { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.auth-code-fields { display: grid; grid-template-columns: repeat(6, minmax(42px, 1fr)); gap: 8px; margin-bottom: 18px; }
.auth-code-fields input[type="text"] { width: 100%; height: 56px; padding: 0; color: #fff; background: #101620; border: 1px solid var(--hrp-border); border-radius: 8px; outline: 0; text-align: center; font-size: 23px; font-weight: 800; transition: border-color .15s, box-shadow .15s, transform .15s; }
.auth-code-fields input[type="text"]:focus { border-color: var(--hrp-yellow); box-shadow: 0 0 0 3px rgba(255,196,49,.14); transform: translateY(-1px); }
.auth-terms { display: flex; align-items: center; gap: 10px; margin: 1px 0 20px !important; padding: 12px 13px; background: #171e2a; border: 1px solid var(--hrp-border); border-radius: 8px; cursor: pointer; }
.auth-terms input { position: relative; width: 20px; height: 20px; flex: 0 0 20px; appearance: none; -webkit-appearance: none; background: #101620; border: 2px solid var(--hrp-yellow); border-radius: 4px; cursor: pointer; transition: background .15s, box-shadow .15s; }
.auth-terms input::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #171717; border-width: 0 2px 2px 0; opacity: 0; transform: rotate(45deg) scale(.7); transition: opacity .15s, transform .15s; }
.auth-terms input:checked { background: var(--hrp-yellow); }
.auth-terms input:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.auth-terms input:focus-visible { box-shadow: 0 0 0 3px rgba(255,196,49,.2); outline: 0; }
.auth-look-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.auth-look-card { position: relative; height: 224px; overflow: hidden; display: grid; place-items: center; margin: 0; cursor: pointer; background: #101620; border: 2px solid var(--hrp-border); border-radius: 10px; transition: border-color .15s, background .15s, transform .15s; }
.auth-look-card:hover { background: var(--hrp-panel-soft); border-color: var(--hrp-yellow); transform: translateY(-2px); }
.auth-look-card.selected { border-color: var(--hrp-yellow); background: rgba(255,196,49,.08); }
.auth-look-card input { position: absolute; opacity: 0; pointer-events: none; }
.auth-look-card img { width: 135px; height: 205px; object-fit: contain; image-rendering: pixelated; }
.auth-look-card > span { position: absolute; top: 9px; right: 9px; width: 24px; height: 24px; display: none; place-items: center; color: #171717; background: var(--hrp-yellow); border-radius: 50%; }
.auth-look-card.selected > span { display: grid; }

.auth-footer { flex: 0 0 auto; padding: 34px 0 36px; color: #858b94; background: var(--hrp-panel); border-top: 1px solid var(--hrp-border); font-size: 13px; }
.auth-footer-links { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-bottom: 15px; }
.auth-footer-links a { color: #fff; font-weight: 700; }
.auth-footer p { margin: 0 0 7px; }
.auth-footer strong { color: #fff; }

@media (max-width: 991.98px) {
    .auth-header-inner { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; gap: 8px 15px; }
    .auth-logo img { width: 170px; }
    .auth-nav { order: 3; width: 100%; height: 42px; justify-content: center; }
    .auth-nav a { height: 42px; }
    .auth-online { font-size: 13px; }
    .auth-login-shell { grid-template-columns: 1fr; }
    .auth-showcase { min-height: 390px; }
    .auth-showcase::after { background: linear-gradient(transparent 75%,#202020); }
    .auth-form-panel { padding: 38px 28px; }
    .auth-register-shell { grid-template-columns: 1fr; }
    .auth-register-form,
    .auth-look-panel { padding: 22px; }
}

@media (max-width: 575.98px) {
    .auth-main { padding-top: 12px; }
    .auth-logo img { width: 145px; }
    .auth-logo span { display: none; }
    .auth-online { margin-left: auto; max-width: 140px; text-align: right; }
    .auth-nav { overflow-x: auto; justify-content: flex-start; }
    .auth-beta { align-items: flex-start; text-align: left; }
    .auth-showcase { min-height: 330px; padding: 18px; }
    .auth-showcase h1 { font-size: 22px; }
    .auth-showcase p { font-size: 13px; }
    .auth-form-panel { padding: 30px 18px; }
    .auth-register-shell { padding: 14px; gap: 14px; }
    .auth-register-form,
    .auth-look-panel { padding: 18px; }
    .auth-register-shell .auth-form-heading.compact { text-align: center; }
    .auth-form-row { grid-template-columns: 1fr; gap: 0; }
    .auth-look-grid { grid-template-columns: repeat(2,1fr); }
    .auth-look-card { height: 220px; }
    .auth-look-card img { height: 205px; }
}

/* ============================================================
   Interface de la page d'accueil (fusionnée)
   ============================================================ */

/* ============================================================
   Accueil — Habbo RôlePlay
   ============================================================ */


body.dashboard-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--hrp-panel);
    font-family: 'Poppins', sans-serif;
    color: #fff;
}

body.dashboard-page a { text-decoration: none; color: inherit; }

/* ---------- Barre du haut ---------- */

.topbar {
    height: 64px;
    padding: 0;
    background: rgba(16, 20, 29, .97);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 8px 24px rgba(7, 12, 21, .18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.topbar-inner {
    width: calc(100% - 40px);
    max-width: var(--site-width);
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

.brand-logo img {
    display: block;
    width: 205px;
    height: auto;
    max-height: 46px;
    object-fit: contain;
}

.brand .beta {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--hrp-yellow);
    color: var(--hrp-bg);
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.menu {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    margin : 0px;
}

.menu > li { position: relative; }

.menu > li > a {
    display: block;
    padding: 20px 0;
    color: #8b9099;
    font-weight: 500;
    transition: color .15s ease;
}

.community-menu-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 20px 0;
    color: #8b9099;
    background: transparent;
    border: 0;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s ease;
}

.community-menu-trigger:hover,
.community-menu-trigger.active,
.community-menu-trigger[aria-expanded="true"] { color: #fff; }
.community-menu-trigger i { font-size: 15px; transition: transform .18s ease; }
.community-menu-trigger[aria-expanded="true"] i { transform: rotate(180deg); }

.menu > li > a:hover,
.menu > li > a.active {
    color: #fff;
}

/* Sous-menu */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    padding: 8px 0;
    list-style: none;
    background: var(--hrp-panel);
    border: 1px solid var(--hrp-border);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
    z-index: 20;
}

.has-sub:hover .submenu,
.has-sub.open .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .15s ease, transform .15s ease, visibility 0s;
}

.submenu a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    color: #b7bcc4;
    font-weight: 500;
}

.submenu a i { width: 18px; color: var(--hrp-yellow); font-size: 17px; text-align: center; }

.submenu a:hover {
    color: #fff;
    background: var(--hrp-panel-soft);
}

/* Page courante : entree du sous-menu mise en avant. */
.submenu a.active {
    color: #fff;
    background: var(--hrp-panel-soft);
    box-shadow: inset 3px 0 0 var(--hrp-yellow);
}

/* Boutons de droite */
.actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.btn {
    padding: 10px 18px;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    transition: filter .15s ease, transform .15s ease;
}

.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

.btn-jouer {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 19px;
    border-radius: 9px;
    background: var(--hrp-green);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.btn-jouer i { display: block; flex: 0 0 auto; font-size: 18px; line-height: 1; }
.btn-jouer span { display: block; line-height: 1; }
.btn-jouer:hover { background: var(--hrp-green-hover); }
.btn-logout { background: var(--hrp-red); }
.btn-logout:hover { background: var(--hrp-red-hover); }

/* ---------- Bouton Jouer : hôtel fermé ---------- */

.play-wrap {
    position: relative;
    display: inline-block;
}

/* Le curseur est porté par le conteneur : le bouton, lui, ne reçoit plus la souris. */
.play-wrap.is-offline {
    cursor: not-allowed;
}

/* Le bouton est grisé et inerte quand l'émulateur ne répond pas.
   L'état est porté par le conteneur : le ping n'a qu'une classe à basculer. */
.play-wrap.is-offline .btn-jouer {
    background: #4a4f5e;
    color: #9aa0b0;

    /* Coupe le clic a la racine. script.js ecoute .js-play pour demander l'affichage
       du client au parent : sans ca, le clic partait malgre le bouton grise. */
    pointer-events: none;
}

/* On neutralise l'animation de .btn:hover, qui donnerait l'illusion d'un bouton actif. */
.play-wrap.is-offline .btn-jouer:hover {
    filter: none;
    transform: none;
}

.play-wrap.is-restarting { cursor: wait; }
.play-wrap.is-restarting .btn-jouer {
    min-width: 218px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff;
    background: #a97b00;
    white-space: nowrap;
}
.play-wrap.is-banned { cursor: not-allowed; }
.play-wrap.is-banned .btn-jouer {
    min-width: 190px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    background: #c51616;
    white-space: nowrap;
}
.play-wrap.is-banned .btn-jouer:hover { background: #c51616; }
.mobile-play-item.is-banned .mobile-play-link { color: #fff; background: #c51616; }
.play-restart-spinner { display: inline-block; animation: playRestartSpin .8s linear infinite; }
@keyframes playRestartSpin { to { transform: rotate(360deg); } }

/* Même infobulle que les barres RP du client (.header-hotel-label). */
.play-label {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: rgba(18, 18, 22, .85);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #e8e8f0;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 5;
}

/* L'infobulle n'a de sens que si l'hôtel est fermé : sinon elle reste masquée,
   même si elle est présente dans le DOM pour le ping. */
.play-wrap.is-offline:hover .play-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.avatar-bubble {
    padding: 0;
    border: 1px solid var(--hrp-border);
    cursor: pointer;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--hrp-panel-soft);
    overflow: hidden;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.profile-menu-wrap {
    position: relative;
    display: flex;
}

.support-unread-badge {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid #111722;
    border-radius: 999px;
    color: #fff;
    background: var(--hrp-red);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}
.support-unread-badge[hidden] { display: none !important; }
.profile-unread { position: absolute; z-index: 4; top: -5px; right: -7px; border: 0; pointer-events: none; }
.support-link-unread { min-width: 17px; height: 17px; margin-left: auto; border: 0; font-size: 9px; }
.admin-support-header-link {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
}
.admin-header-notification {
    position: relative;
    top: -9px;
    right: auto;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    color: #fff;
    background: var(--hrp-red);
    border: 2px solid #111722;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}
.admin-header-notification[hidden] { display: none; }

.profile-menu-trigger {
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.profile-menu-trigger:hover,
.profile-menu-trigger[aria-expanded="true"] {
    border-color: var(--hrp-yellow);
    box-shadow: 0 0 0 3px var(--hrp-yellow)1c;
    transform: translateY(-1px);
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 225px;
    padding: 8px;
    color: #fff;
    background: var(--hrp-panel);
    border: 1px solid var(--hrp-border);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 100;
}

.profile-menu-wrap.open .profile-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profile-dropdown::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 15px;
    width: 11px;
    height: 11px;
    background: var(--hrp-panel);
    border-top: 1px solid var(--hrp-border);
    border-left: 1px solid var(--hrp-border);
    transform: rotate(45deg);
}

.profile-dropdown-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 10px;
    margin-bottom: 7px;
    background: rgba(255, 255, 255, .035);
    border-bottom: 1px solid var(--hrp-border);
    border-radius: 6px 6px 0 0;
}

.profile-dropdown-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--hrp-panel-soft);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
}

.profile-dropdown-avatar img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    image-rendering: pixelated;
    transform: scale(1.28) translateY(1px);
    margin-top: -7px;
    margin-left: -3px;
}

.profile-dropdown-head span,
.profile-dropdown-head small { display: block; }
.profile-dropdown-head span { min-width: 0; line-height: 1.25; }
.profile-dropdown-head strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-dropdown-head small {
    margin-top: 4px;
    color: var(--hrp-muted);
    font-size: 11px;
    font-weight: 500;
}

.profile-dropdown > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 9px 11px;
    color: #cbd0d8;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
}

.profile-dropdown > a:hover {
    color: #fff;
    background: var(--hrp-panel-soft);
}

.profile-dropdown > a i { font-size: 18px; }
.profile-hotel-disconnect { margin:5px 0 0; padding-top:5px; border-top:1px solid var(--hrp-border); }
.profile-hotel-disconnect button { width:100%; display:flex; align-items:center; gap:11px; padding:10px 14px; color:#ffc431; border:0; border-radius:5px; background:transparent; font:600 13px Poppins,sans-serif; text-align:left; cursor:pointer; }
.profile-hotel-disconnect button:hover { color:#172238; background:#ffc431; }
.profile-hotel-disconnect button i { font-size:18px; }
.profile-dropdown > .profile-logout { margin-top: 5px; color: var(--hrp-red); border-top: 1px solid var(--hrp-border); border-radius: 0 0 5px 5px; }

.avatar-bubble img {
    width: 54px;
    image-rendering: pixelated;
    margin-top: -10px;
    margin-left: -5px;
}

/* ---------- Bannière (valeurs de la référence) ---------- */

.hero-wrap {
    font: 600 16px/1.2 'Poppins', sans-serif;
}

.hero-banner {
    height: 209px;
    padding: 14px 0 0;
    margin-bottom: 0;
    background: transparent;
}

@keyframes backgroundScroll {
    from { object-position: 50% 0%; }
    to { object-position: 50% 100%; }
}

.hero-inner {
    position: relative;
    width: calc(100% - 40px);
    max-width: var(--site-width);
    margin: 0 auto;
    height: 195px;
    background-color: var(--hrp-bg);
    border: 5px solid rgb(20 25 34);
    border-radius: 5px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-background-track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    filter: blur(3px);
}

.hero-background-track img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
    animation: backgroundScroll 35s linear infinite;
}

.hero-inner > :not(.hero-background-track) {
    position: relative;
    z-index: 1;
}

.hero-title {
    padding: 50px;
}

.hero-title p {
    margin: 0;
    font: 200 25px/30px 'Poppins', sans-serif;
    text-transform: uppercase;
    color: #fff;
}

/* Bandeau sombre en bas de la bannière */
.hero-bottom {
    width: 100%;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .50);
}

/* Avatar + pupitre (l'avatar déborde dans la bannière) */
.podium-box {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    margin-top: -172px;
    flex: 0 0 auto;
}

.podium-avatar-container {
    position: relative;
    z-index: 1;
    width: 80%;
}

.podium-avatar {
    display: block;
    width: 100%;
}

.podium-platform-container {
    position: absolute;
    top: 131px;
    margin-left: -7px;
    left: 0;
    width: 100%;
}

.podium-box .habbo-podium {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Argent + jauges */
.strip-right {
    height: 65px;
}

.strip-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.strip-money {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.strip-money p {
    margin: 0;
    font: 300 16px/1.2 'Poppins', sans-serif;
    color: #fff;
}

.strip-money p.is-negative {
    color: #ff3b3b;
    font-weight: 600;
}

.coin-circle {
    width: 35px;
    height: 35px;
    margin-right: 3px;
    border-radius: 50%;
    background: #2d2d2d;
    flex: 0 0 auto;
}

.coin-circle img {
    width: 21px;
    height: 21px;
    margin: 7px 0 0 7px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Jauges */
.strip-bars {
    display: flex;
    align-items: center;
}

.strip-bar {
    position: relative;
    width: 200px;
    height: 20px;
    margin-right: 15px;
    border-radius: 5px;
    background: rgba(224, 224, 224, .13);
    overflow: visible;
    transition: transform .18s ease;
}

.strip-bar:hover {
    transform: scale(1.08);
    z-index: 5;
}

.strip-bar-fill {
    height: 100%;
    border-radius: inherit;
    transition: width .4s ease;
}

.strip-bar-fill.vie { background: var(--hrp-green); }
.strip-bar-fill.energie { background: var(--hrp-yellow); }
.strip-bar-fill.hygiene { background: var(--hrp-red); }

.strip-bar-label {
    position: absolute;
    top: auto;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: rgba(18, 18, 22, .94);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.strip-bar-label b {
    font-weight: 700;
}

.strip-bar:hover .strip-bar-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Alerte bêta ---------- */

.beta-banner {
    width: calc(100% - 40px);
    margin: 10px auto;
    max-width: var(--site-width);
    padding: 15px 20px;
    border-radius: 8px;
    background: var(--hrp-yellow);
    color: var(--hrp-bg);
    font-weight: 500;
    text-align: center;
}

/* ---------- Pied de page ---------- */

.home-footer {
    margin-top: auto;
    padding: 24px;
    border-top: 1px solid var(--hrp-border);
    background: var(--hrp-panel);
}

.home-footer-inner {
    width: calc(100% - 40px);
    max-width: var(--site-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.footer-main { min-width: 0; display: flex; align-items: center; gap: 22px; }

.home-footer-logo {
    display: block;
    width: 150px;
    height: auto;
}

.home-footer-copy {
    color: #9da2ad;
    font-size: 13px;
    line-height: 1.4;
}

.home-footer-copy p { margin: 0 0 3px; }

.home-footer-copy strong {
    color: #fff;
}

.footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; }
.footer-legal-links a, .footer-credits a { color: #fff; font-weight: 600; transition: color .15s ease; }
.footer-legal-links a:hover, .footer-credits a:hover { color: var(--hrp-yellow); }
.footer-credits { margin-bottom: 0 !important; }
.footer-socials { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.footer-socials a { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.055); border: 1px solid var(--hrp-border); border-radius: 8px; font-size: 21px; transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease; }
.footer-socials a:hover { color: var(--hrp-yellow); background: rgba(243,190,0,.1); border-color: rgba(243,190,0,.55); transform: translateY(-2px); }
.auth-footer.home-footer { padding: 24px; color: #9da2ad; background: var(--hrp-panel); }

/* ---------- Pages légales ---------- */
body.legal-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    color: var(--hrp-text);
    background: var(--hrp-panel);
    font-family: Poppins, "Segoe UI", sans-serif;
}

.legal-header-action {
    min-height: 40px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 15px;
    color: #fff;
    background: var(--hrp-green);
    border-radius: 7px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: inset 0 -2px rgba(0,0,0,.16);
    transition: filter .15s ease, transform .15s ease;
}
.legal-header-action:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.legal-main { flex: 1 0 auto; padding: 54px 0 70px; }
.legal-hero { margin-bottom: 40px; text-align: center; }
.legal-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 13px; color: var(--hrp-yellow); font-size: 12px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
.legal-hero h1 { margin: 0; color: #fff; font-size: clamp(34px,5vw,52px); font-weight: 800; letter-spacing: -.9px; }
.legal-hero h1::after { content: ""; width: 58px; height: 4px; display: block; margin: 19px auto 17px; background: var(--hrp-green); border-radius: 99px; }
.legal-hero > p { max-width: 760px; margin: 0 auto 16px; color: #aeb6c4; font-size: 16px; line-height: 1.65; }
.legal-updated { display: inline-flex; align-items: center; gap: 6px; color: #7f8999; font-size: 12px; }
.legal-layout { display: grid; grid-template-columns: 245px minmax(0,1fr); align-items: start; gap: 25px; }
.legal-summary { position: sticky; top: 24px; padding: 19px; background: var(--hrp-bg); border: 1px solid var(--hrp-border); border-radius: 10px; }
.legal-summary > strong { display: block; margin-bottom: 12px; color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .7px; }
.legal-summary nav { display: flex; flex-direction: column; gap: 4px; }
.legal-summary a { display: grid; grid-template-columns: 25px 1fr; gap: 7px; padding: 9px 8px; color: #99a3b2; border-radius: 6px; font-size: 12px; line-height: 1.35; transition: color .15s ease, background .15s ease; }
.legal-summary a span { color: var(--hrp-green); font-size: 10px; font-weight: 800; }
.legal-summary a:hover { color: #fff; background: var(--hrp-panel-soft); }
.legal-content { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.legal-card { overflow: hidden; scroll-margin-top: 25px; background: var(--hrp-bg); border: 1px solid var(--hrp-border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.1); }
.legal-card > header { min-height: 82px; display: flex; align-items: center; gap: 14px; padding: 17px 24px; border-bottom: 1px solid var(--hrp-border); }
.legal-card-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; color: var(--hrp-green); background: rgba(73,200,87,.1); border: 1px solid rgba(73,200,87,.2); border-radius: 9px; font-size: 23px; }
.legal-card header small { color: var(--hrp-yellow); font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.legal-card h2 { margin: 2px 0 0; color: #fff; font-size: 21px; font-weight: 700; }
.legal-card-body { padding: 25px 29px 27px; color: #c4cad4; font-size: 14px; line-height: 1.75; }
.legal-card-body p { margin: 0; }
.legal-card-body ul { margin: 0; padding-left: 20px; }
.legal-card-body li + li { margin-top: 7px; }
.legal-card-body li::marker { color: var(--hrp-green); }
.legal-help { display: flex; align-items: center; gap: 14px; padding: 20px 22px; color: #fff; background: linear-gradient(100deg,rgba(73,200,87,.14),rgba(40,184,216,.08)); border: 1px solid rgba(73,200,87,.28); border-radius: 10px; }
.legal-help > i { color: var(--hrp-green); font-size: 30px; }
.legal-help div { flex: 1; }
.legal-help strong { font-size: 14px; }
.legal-help p { margin: 2px 0 0; color: #9ca6b5; font-size: 12px; }
.legal-help a { padding: 9px 13px; color: #fff; background: var(--hrp-green); border-radius: 6px; font-size: 12px; font-weight: 800; }
.legal-footer { flex: 0 0 auto; }

@media (max-width: 991.98px) {
    .legal-nav { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; }
    .legal-header-action { margin-left: auto; }
    .legal-layout { grid-template-columns: 1fr; }
    .legal-summary { position: static; }
    .legal-summary nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 575.98px) {
    .legal-main { padding-top: 34px; }
    .legal-hero { margin-bottom: 28px; }
    .legal-summary nav { grid-template-columns: 1fr; }
    .legal-card > header { padding: 15px 17px; }
    .legal-card h2 { font-size: 18px; }
    .legal-card-body { padding: 20px 19px 22px; }
    .legal-help { align-items: flex-start; flex-wrap: wrap; }
    .legal-help a { width: 100%; text-align: center; }
}

/* Nouvelle DA des pages légales : mêmes panneaux et accent jaune que le forum. */
body.legal-page { background: var(--hrp-panel); }
.legal-main { width: 100%; padding: 30px 0 64px; }
.legal-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
    text-align: left;
}
.legal-hero-copy { min-width: 0; }
.legal-hero h1 {
    margin: 0 0 6px;
    color: var(--hrp-text);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
}
.legal-hero h1::after { display: none; }
.legal-hero > .legal-hero-copy > p {
    max-width: 760px;
    margin: 0 0 9px;
    color: var(--hrp-muted);
    font-size: 14px;
    line-height: 1.55;
}
.legal-updated { color: var(--hrp-muted); font-size: 11px; }
.legal-tabs {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 5px;
    padding: 4px;
    border: 1px solid var(--hrp-border);
    border-radius: 10px;
    background: var(--hrp-bg);
}
.legal-tabs a {
    padding: 8px 11px;
    border-radius: 7px;
    color: var(--hrp-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.legal-tabs a:hover { color: var(--hrp-text); background: rgba(255, 255, 255, .04); }
.legal-tabs a.active { color: #1b2130; background: var(--hrp-yellow); }
.legal-layout { grid-template-columns: 225px minmax(0, 1fr); gap: 18px; }
.legal-summary {
    top: 18px;
    padding: 16px;
    border-radius: 12px;
    background: var(--hrp-panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.legal-summary > strong {
    padding-bottom: 11px;
    margin-bottom: 7px;
    border-bottom: 1px solid var(--hrp-border);
    color: var(--hrp-text);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}
.legal-summary a { grid-template-columns: 23px 1fr; padding: 8px 7px; color: var(--hrp-muted); }
.legal-summary a span { color: var(--hrp-yellow); }
.legal-summary a:hover { color: var(--hrp-text); background: rgba(255, 255, 255, .035); }
.legal-content { gap: 12px; }
.legal-card {
    border-radius: 12px;
    background: var(--hrp-panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.legal-card > header { min-height: 70px; gap: 12px; padding: 14px 18px; }
.legal-card-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border: 0;
    border-radius: 10px;
    color: #1b2130;
    background: var(--hrp-yellow);
    font-size: 21px;
}
.legal-card header small { color: var(--hrp-yellow); font-size: 9px; letter-spacing: .6px; }
.legal-card h2 { margin-top: 1px; color: var(--hrp-text); font-size: 18px; font-weight: 700; }
.legal-card-body { padding: 18px 20px 20px; color: var(--hrp-muted); font-size: 13px; line-height: 1.7; }
.legal-card-body li + li { margin-top: 6px; }
.legal-card-body li::marker { color: var(--hrp-yellow); }
.legal-help {
    padding: 16px 18px;
    border-color: rgba(255, 196, 49, .28);
    border-radius: 12px;
    color: var(--hrp-text);
    background: rgba(255, 196, 49, .07);
}
.legal-help > i { color: var(--hrp-yellow); font-size: 26px; }
.legal-help p { color: var(--hrp-muted); }
.legal-help a { color: #1b2130; background: var(--hrp-yellow); border-radius: 8px; }

@media (max-width: 991.98px) {
    .legal-hero { align-items: flex-start; flex-direction: column; }
    .legal-tabs { width: 100%; overflow-x: auto; }
    .legal-layout { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .legal-main { padding-top: 22px; }
    .legal-hero h1 { font-size: 24px; }
    .legal-tabs a { flex: 1 0 auto; text-align: center; }
    .legal-card > header { padding: 13px 14px; }
    .legal-card-body { padding: 16px 15px 18px; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .menu { gap: 16px; }
    .strip-bar { width: 130px; }
}

@media (max-width: 820px) {
    .topbar { padding: 0; }
    .topbar-inner,
    .hero-inner,
    .home-footer-inner,
    .beta-banner,
    .site-box { width: calc(100% - 28px); }
    .brand-logo img { width: 165px; }
    .menu { display: none; }
    .hero h1 { font-size: 22px; padding: 0 16px; }
    .hero-strip { gap: 14px; }
    .strip-bar { width: 80px; }
    .home-footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }
    .footer-main { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   Appartements actifs (page d'accueil) — liste + taxi
   ============================================================ */

.active-rooms {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 16px;
    align-items: stretch;
    width: calc(100% - 40px);
    max-width: var(--site-width);
    margin: 10px auto 0;
    margin-bottom: 10px;
}

.active-rooms-card {
    padding: 26px 28px 20px;
    border: 1px solid var(--hrp-border);
    border-radius: 14px;
    background: var(--hrp-panel);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.active-rooms-card h2 {
    margin: 0 0 4px;
    text-align: left;
    font-size: 26px;
    font-weight: 600;
    color: var(--hrp-text);
}

.active-rooms-sub {
    margin: 0 0 18px;
    padding-bottom: 14px;
    text-align: left;
    font-size: 14px;
    color: var(--hrp-muted);
    border-bottom: 2px solid var(--hrp-yellow);
}

.active-rooms-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 390px;
    margin: 0;
    padding: 0 8px 0 0;
    overflow-y: auto;
    scrollbar-color: var(--hrp-yellow) var(--hrp-panel-soft);
    scrollbar-width: thin;
    list-style: none;
}

.active-rooms-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--hrp-border);
    border-radius: 10px;
    background: var(--hrp-panel-soft);
    transition: border-color .15s ease, transform .15s ease;
}

.active-rooms-item:hover {
    border-color: var(--hrp-yellow);
}

.active-rooms-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    image-rendering: pixelated;
}

.active-rooms-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    color: var(--hrp-text);
}

.active-rooms-users {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--hrp-muted);
}

.active-rooms-taxi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    padding: 0;
    cursor: pointer;
    font-size: 20px;
    color: #141922;
    border: 0;
    border-radius: 9px;
    background: var(--hrp-yellow);
    transition: filter .15s ease, transform .15s ease;
}

.active-rooms-taxi:hover { filter: brightness(1.1); }
.active-rooms-taxi:active { transform: scale(.94); }
.active-rooms-taxi:disabled { cursor: wait; filter: grayscale(.6); }

.active-rooms-empty {
    padding: 14px;
    text-align: center;
    font-size: 14px;
    color: var(--hrp-muted);
    border: 1px dashed var(--hrp-border);
    border-radius: 10px;
}

/* Carte "Qui est en ligne" : trait vert sous le titre, noms en pavé. */
.online-card h2 {
    padding-bottom: 0;
    border-bottom: 0;
}

.online-card .online-sub {
    margin-bottom: 12px;
}

.online-card {
    padding-bottom: 10px;
}

.online-names {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: flex-start;
    gap: 8px;
    max-height: 390px;
    margin: 0;
    padding: 0 8px 0 0;
    font-size: 14px;
    line-height: 1.7;
    overflow-y: auto;
    overflow-wrap: anywhere;
    scrollbar-color: var(--hrp-yellow) var(--hrp-panel-soft);
    scrollbar-width: thin;
    color: var(--hrp-muted);
}

.active-rooms-list::-webkit-scrollbar,
.online-names::-webkit-scrollbar {
    width: 8px;
}

.active-rooms-list::-webkit-scrollbar-track,
.online-names::-webkit-scrollbar-track {
    border-radius: 999px;
    background: var(--hrp-panel-soft);
}

.active-rooms-list::-webkit-scrollbar-thumb,
.online-names::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--hrp-yellow);
}

.online-names.is-empty {
    display: block;
    padding: 14px;
    text-align: center;
    border: 1px dashed var(--hrp-border);
    border-radius: 10px;
}

.online-player {
    display: inline-flex;
    width: 58px;
    max-width: 100%;
    justify-self: center;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--hrp-muted);
    transition: transform .15s ease;
}

.online-player:hover {
    transform: translateY(-3px);
}

.online-player-avatar {
    position: relative;
    display: flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
}

.online-player-crop {
    display: flex;
    width: 52px;
    height: 52px;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--hrp-border);
    border-radius: 50%;
    background: var(--hrp-panel-soft);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.online-player:hover .online-player-crop {
    border-color: var(--hrp-yellow);
    background: rgba(255, 194, 45, .08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
}

.online-player-crop > img {
    display: block;
    width: auto;
    height: auto;
    margin-top: -20px;
}

.online-player-avatar .online-player-badge {
    position: absolute;
    left: 50%;
    bottom: -4px;
    z-index: 1;
    width: auto;
    height: auto;
    max-width: 17px;
    max-height: 15px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
    transform: translateX(-50%);
}

.online-player-name {
    width: 100%;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1.3;
}

.online-player.online-staff .online-player-name {
    color: var(--hrp-yellow);
    font-weight: 600;
}

@media (max-width: 900px) {
    .active-rooms { grid-template-columns: 1fr; }
}

.mobile-menu-trigger,
.mobile-play-item { display: none; }

/* Menu burger de l'accueil connecté. */
@media (max-width: 768px) {
    .topbar { height: 72px; }
    .topbar-inner {
        position: relative;
        width: calc(100% - 24px);
        gap: 10px;
    }
    .brand-logo {
        min-width: 0;
        max-width: calc(100% - 114px);
        gap: 5px;
    }
    .brand-logo img {
        width: clamp(118px, 34vw, 160px);
        max-width: calc(100% - 45px);
        max-height: 38px;
    }
    .brand .beta { margin-left: 0; padding: 3px 6px; font-size: 10px; }

    .mobile-menu-trigger {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        margin-left: auto;
        padding: 0;
        flex: 0 0 42px;
        color: #fff;
        background: var(--hrp-panel-soft);
        border: 1px solid var(--hrp-border);
        border-radius: 8px;
        font-size: 25px;
        cursor: pointer;
    }
    .mobile-menu-trigger[aria-expanded="true"] {
        color: #171717;
        background: var(--hrp-yellow);
        border-color: var(--hrp-yellow);
    }

    .topbar .actions { margin-left: 0; flex: 0 0 auto; }
    .topbar .actions > .play-wrap { display: none; }
    .avatar-bubble { width: 42px; height: 42px; }

    .topbar .menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: 0;
        z-index: 90;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        max-height: 0;
        margin: 0;
        padding: 0 10px;
        overflow: hidden;
        background: var(--hrp-panel);
        border: 0 solid var(--hrp-border);
        border-radius: 10px;
        box-shadow: 0 18px 40px rgba(0,0,0,.45);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: max-height .22s ease, padding .22s ease, opacity .18s ease, transform .18s ease, visibility .18s;
    }
    .mobile-menu-open .topbar .menu {
        max-height: 620px;
        padding: 10px;
        border-width: 1px;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .topbar .menu > li,
    .topbar .menu > li > a { width: 100%; }
    .topbar .menu > li > a { padding: 11px 13px; border-radius: 7px; }
    .topbar .menu > li > a:hover,
    .topbar .menu > li > a.active { background: rgba(255,255,255,.055); }
    .topbar .community-menu-trigger {
        justify-content: space-between;
        width: 100%;
        padding: 11px 13px;
        border-radius: 7px;
    }
    .topbar .community-menu-trigger:hover,
    .topbar .community-menu-trigger[aria-expanded="true"] { background: rgba(255,255,255,.055); }
    .topbar .has-sub .submenu {
        position: static;
        display: none;
        min-width: 0;
        margin: 4px 0 2px;
        padding: 5px;
        border-radius: 7px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .topbar .has-sub.open .submenu { display: block; }
    .topbar .submenu a { padding: 10px 13px; border-radius: 6px; }

    .mobile-play-item { display: block; margin-top: 4px; }
    .topbar .menu .mobile-play-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #fff;
        background: var(--hrp-green);
        font-weight: 800;
    }

    .topbar .menu .mobile-play-link:hover {
        color: #fff;
        background: var(--hrp-green-hover);
    }

    .topbar .menu .mobile-play-item.is-offline .mobile-play-link {
        background: #4a4f5e;
        color: #9aa0b0;
        cursor: not-allowed;
        filter: none;
    }

    .profile-dropdown {
        position: fixed;
        top: 70px;
        right: 12px;
        max-width: calc(100vw - 24px);
    }
}

@media (max-width: 430px) {
    .topbar-inner { width: calc(100% - 16px); }
    .brand-logo { max-width: calc(100% - 104px); }
    .brand-logo img { width: clamp(108px, 31vw, 132px); max-height: 34px; }
    .brand .beta { font-size: 9px; }
    .mobile-menu-trigger,
    .avatar-bubble { width: 40px; height: 40px; }
    .mobile-menu-trigger { flex-basis: 40px; }
}

/* Bannière du profil adaptée aux téléphones. */
@media (max-width: 575.98px) {
    .hero-banner {
        height: 250px;
        padding-top: 12px;
    }

    .hero-inner {
        width: calc(100% - 24px);
        height: 238px;
        justify-content: flex-start;
        border-width: 4px;
    }

    .hero-background-track img {
        animation-duration: 24s;
    }

    .hero-title {
        width: 100%;
        min-height: 155px;
        padding: 24px 18px 12px 105px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        text-align: center;
    }

    .hero-title p {
        max-width: 285px;
        font-size: clamp(18px, 5.6vw, 23px);
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .hero-bottom {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 76px;
        justify-content: flex-start;
        padding-left: 100px;
        background: rgba(0,0,0,.50);
    }

    .podium-box {
        position: absolute;
        bottom: 0;
        left: 8px;
        width: 100px;
        height: 165px;
        margin: 0;
        overflow: visible;
    }

    .podium-avatar-container {
        position: absolute;
        bottom: 28px;
        left: 10px;
        width: 70px;
        height: auto;
    }

    .podium-platform-container {
        top: auto;
        bottom: 0;
        left: 0;
        width: 100px;
        height: auto;
        aspect-ratio: 1449 / 889;
        margin-left: 0;
    }

    .strip-right {
        width: 100%;
        height: 76px;
        min-width: 0;
    }

    .strip-row {
        width: 100%;
        height: 100%;
        padding: 9px 10px;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 8px;
    }

    .strip-money {
        height: 25px;
        margin: 0;
    }

    .coin-circle {
        width: 25px;
        height: 25px;
        margin-right: 6px;
    }

    .coin-circle img {
        width: 17px;
        height: 17px;
        margin: 4px 0 0 4px;
    }

    .strip-money p {
        font-size: 14px;
        white-space: nowrap;
    }

    .strip-bars {
        width: 100%;
        gap: 6px;
    }

    .strip-bar {
        width: auto;
        min-width: 0;
        height: 12px;
        margin: 0;
        flex: 1 1 0;
        border-radius: 4px;
    }
}

@media (max-width: 370px) {
    .hero-title { padding-left: 90px; padding-right: 10px; }
    .hero-title p { font-size: 17px; }
    .hero-bottom { padding-left: 88px; }
    .podium-box { left: 3px; width: 88px; }
    .podium-avatar-container {position: absolute;bottom: 26px;left: 11px;width: 70px;height: auto; }
    .podium-platform-container { width: 88px; }
}

/* Connexion sur téléphone : formulaire seul, sans navigation ni promotion. */
@media (max-width: 575.98px) {
    .auth-login-page .auth-header-inner {
        min-height: 70px;
        justify-content: space-between;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .auth-login-page .auth-logo img {
        width: 175px;
    }

    .auth-login-page .auth-logo span,
    .auth-login-page .auth-nav,
    .auth-login-page .auth-showcase {
        display: none;
    }

    .auth-login-page .auth-online,
    .auth-register-page .auth-online {
        display: flex;
        max-width: 145px;
        margin-left: auto;
        justify-content: flex-end;
        text-align: right;
        font-size: 12px;
        line-height: 1.25;
    }

    .auth-login-page .auth-online i,
    .auth-register-page .auth-online i {
        flex: 0 0 auto;
        font-size: 18px;
    }

    .auth-login-page .auth-main {
        padding-top: 12px;
    }

    .auth-login-page .auth-login-shell {
        min-height: 0;
        display: block;
    }

    .auth-login-page .auth-form-panel {
        padding-top: 28px;
    }

    /* Inscription : même entête épuré que la connexion. */
    .auth-register-page .auth-header-inner {
        min-height: 70px;
        justify-content: space-between;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .auth-register-page .auth-logo img { width: 175px; }
    .auth-register-page .auth-logo span,
    .auth-register-page .auth-nav { display: none; }

    .auth-register-page .auth-register-shell {
        padding: 18px 14px 16px;
        gap: 22px;
    }

    .auth-register-page .auth-form-heading.compact {
        margin-bottom: 18px;
    }

    .auth-register-page .auth-form-heading.compact h1,
    .auth-register-page .auth-form-heading.compact h2 {
        font-size: 27px;
    }

    .auth-register-page .auth-look-panel {
        padding: 16px;
        margin: 2px 0 17px;
    }

    .auth-register-page .auth-look-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .auth-register-page .auth-look-card {
        height: 135px;
        border-radius: 8px;
    }

    .auth-register-page .auth-look-card img {
        width: 90px;
        height: 125px;
    }

    .auth-register-page .auth-look-card > span {
        top: 7px;
        right: 7px;
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 370px) {
    .auth-register-page .auth-register-shell { padding-inline: 10px; }
    .auth-register-page .auth-look-card { height: 120px; }
    .auth-register-page .auth-look-card img { width: 80px; height: 112px; }
}

/* === INTERFACE HOTEL (ancien hotel.css) === */
/* ============================================================
   Interface Hôtel — dock, radio, modale (style HabboCity)
   ============================================================ */

:root {
    --box-color: #1b202c;
    --box-color-double: #202635;
    --border-color: #2E334D;
    --text-color: #FFFFFF;
    --text-secondaire: #B0B5C3;
    --box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px;
}

* { box-sizing: border-box; }

body.client-fullscreen {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #111827;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--text-color);
}

/* ---------- Client plein écran ---------- */

.JavaScriptData { display: none !important; }

.ModuleClient {
    position: fixed;
    inset: 0;
}

.ModuleClient iframe {
    display: block;
    width: 100vw;
    height: 100vh;
    border: 0;
}

#hotel-layer {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

/* ---------- Bascule site / jeu ---------- */

#site-layer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    opacity: 1;
    visibility: visible;
    transition: opacity .24s ease, transform .24s ease, visibility 0s;
}

#site-layer iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #111827;
}

body.game-mode #site-layer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(.985);
    transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}

/* ---------- Dock flottant ---------- */

.header-hotel-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: fit-content;
    top: 20px;
    left: 20px;
    position: relative;
    z-index: 1002;
    /* visible uniquement en mode jeu */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}

body.game-mode .header-hotel-wrapper {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity .24s ease, transform .24s ease, visibility 0s;
}

/* Écran "Connexion au serveur impossible" (DisconnectedView pose la classe sur le
   body) : le dock n'a plus rien à piloter, et ses jauges afficheraient des valeurs
   figées. On le masque tant que le client n'est pas reconnecté. */
body.hotel-disconnected .header-hotel-wrapper {
    display: none;
}

.header-hotel-dock {
    display: flex;
    gap: 8px;
    background: #10141dcc;
    border: 2px solid #2E334D;
    height: 55px;
    align-items: center;
    padding: 0 8px;
    border-radius: 11px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
    z-index: 10000;
    overflow: visible;
    isolation: isolate;
    position: relative;
    animation: dockIn .24s ease;
}

@keyframes dockIn {
    from { opacity: 0; transform: translateY(10px); }
}

.header-hotel-dock::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 45%);
    pointer-events: none;
    z-index: 0;
}

.header-hotel-item,
.header-hotel-item-logo {
    position: relative;
    z-index: 1;
}

.header-hotel-item {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #e8e8f0;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
    outline: none;
}

.header-hotel-item:hover {
    transform: scale(1.12);
    background: rgba(255, 255, 255, .06);
}

.header-hotel-item-logo {
    width: auto;
    min-width: 98px;
    padding: 0 10px;
    height: 38px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #e8e8f0;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
    outline: none;
}

.header-hotel-item-logo:hover {
    transform: scale(1.12);
    background: rgba(255, 255, 255, .06);
}

.game-support-unread {
    position: absolute;
    top: -7px;
    right: -3px;
    z-index: 4;
    display: grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    color: #fff;
    background: var(--hrp-red);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
}
.game-support-unread[hidden] { display: none !important; }

.game-support-notification {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 310px;
    min-height: 62px;
    padding: 10px 12px;
    border: 2px solid #2E334D;
    border-radius: 11px;
    color: var(--hrp-text);
    background:
        linear-gradient(to bottom right, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 45%),
        #10141dcc;
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
    text-align: left;
    cursor: pointer;
    transform-origin: 34px 0;
    animation: supportNotificationAttention 5s ease-in-out infinite;
}
.game-support-notification[hidden] { display: none !important; }
.game-support-notification::before {
    display: none;
}
.game-support-notification > i:first-child {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 2px solid #ffd95f;
    border-radius: 10px;
    color: #172238;
    background: linear-gradient(180deg, #ffd54b 0%, #ffb91f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 #a86a08;
    font-size: 19px;
}
.game-support-notification > span { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.game-support-notification strong {
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.game-support-notification small {
    margin-top: 3px;
    color: #b9c7da;
    font-size: 10px;
    line-height: 1.25;
}
.game-support-notification > i:last-child {
    color: #d8e2ef;
    font-size: 17px;
    transition: transform .18s ease;
}
.game-support-notification:hover {
    border-color: #ffc431;
    filter: brightness(1.08);
}
.game-support-notification:hover > i:last-child { transform: translateX(2px); }

@keyframes supportNotificationAttention {
    0%, 82%, 100% { transform: translateX(0) rotate(0); }
    84% { transform: translateX(-4px) rotate(-1deg); }
    86% { transform: translateX(4px) rotate(1deg); }
    88% { transform: translateX(-3px) rotate(-.7deg); }
    90% { transform: translateX(3px) rotate(.7deg); }
    92% { transform: translateX(-1px) rotate(-.25deg); }
    94% { transform: translateX(0) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .game-support-notification { animation: none; }
}

/* ---- Jauges RP dans le dock ---- */
.dock-stats-toggle {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #e8e8f0;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease;
}

.dock-stats-toggle:hover {
    transform: scale(1.12);
    filter: brightness(1.2);
}

.dock-stats-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: transform .24s ease;
}

.header-hotel-dock.stats-open .dock-stats-toggle svg {
    transform: rotate(180deg);
}

/* Repliées par défaut, dépliage animé */
.dock-stats-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    max-width: 0;
    margin-left: -12px; /* compense le gap du dock quand replié */
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-width .28s ease, opacity .2s ease, margin-left .28s ease;
}

.header-hotel-dock.stats-open .dock-stats-wrap {
    max-width: 720px;
    margin-left: 0;
    opacity: 1;
    pointer-events: auto;
}

.dock-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.dock-bar {
    position: relative;
    width: 120px;
    height: 14px;
    transition: transform .18s ease;
}

.dock-bar:hover {
    transform: scale(1.12);
}

.dock-bar-track {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #00000042;
    overflow: hidden;
}

/* Étiquette au survol (alignée avec celles des icônes du dock) */
.dock-bar .header-hotel-label {
    top: calc(100% + 33px);
}

.dock-bar:hover .header-hotel-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Une fois le dépliage terminé, on laisse dépasser les étiquettes */
.header-hotel-dock.stats-settled .dock-stats-wrap {
    overflow: visible;
}

.dock-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .4s ease;
}

.dock-bar-fill.vie { background: var(--hrp-green); }
.dock-bar-fill.energie { background: var(--hrp-yellow); }
.dock-bar-fill.hygiene { background: var(--hrp-red); }

.header-hotel-sep {
    width: 1px;
    height: 38px;
    align-self: center;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .12), transparent);
    pointer-events: none;
}

.header-hotel-icon img {
    width: 30px !important;
    height: 30px !important;
    display: block;
}

.header-hotel-icon-logo img {
    display: block;
    height: 28px;
    width: auto;
}

.header-hotel-label,
.header-hotel-label-logo {
    position: absolute;
    top: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: rgba(18, 18, 22, .85);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #e8e8f0;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 2;
}

.header-hotel-item:hover .header-hotel-label,
.header-hotel-item-logo:hover .header-hotel-label-logo {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Radio ---------- */

.nav-radio { margin-left: 0; }

.nav-radio-box {
    height: 62px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background-color: var(--box-color);
    padding: 0 8px 0 10px;
    display: flex;
    align-items: center;
}

.nav-radio-box-dragger { display: none; z-index: 1; }

.nav-radio-box-img {
    background-color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: opacity .5s ease, transform .5s ease;
}

.nav-radio-box-title {
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    width: 140px;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity .5s ease, transform .5s ease;
}

.nav-radio-box-title-top {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    display: inline-flex;
}

.nav-radio-box-title-down {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--hrp-yellow);
    display: flex;
    flex-direction: column;
}

.nav-radio-box-controls {
    display: flex;
    align-items: center;
}

.nav-radio-box-controls-button {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .16s ease, background-color .16s ease, opacity .16s ease;
    cursor: pointer;
}

.controls--off svg path { fill: var(--hrp-red); }
.controls--on svg path { fill: var(--hrp-green); }
.controls--volume svg path,
.controls--chevron svg path { fill: #c8d6e5; }

#radioBox {
    --radio-controls-gap: 6px;
    --radio-button-size: 40px;
    --radio-icon-size: 24px;
}

#radioBox,
#radioBox * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

#radioBox #artist,
#radioBox #title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.1;
    padding: 1px 0;
}

#radioBox .nav-radio-box-title {
    margin: 0;
    width: 140px;
    position: relative;
}

#radioBox .nav-radio-box-img {
    max-width: 40px;
    flex: 0 0 40px;
    opacity: 1;
    transform: scale(1);
    transform-origin: left center;
    overflow: hidden;
    transition: max-width .2s ease, margin .2s ease, opacity .16s ease, transform .16s ease;
}

#radioBox .nav-radio-box-controls {
    gap: var(--radio-controls-gap);
    overflow: visible;
}

#radioBox .nav-radio-box-controls-button {
    width: var(--radio-button-size);
    height: var(--radio-button-size);
    min-width: var(--radio-button-size);
}

#radioBox .nav-radio-box-controls-button:hover {
    transform: scale(1.08);
    background-color: rgba(255, 255, 255, .08);
}

#radioBox .nav-radio-box-controls-button:active {
    transform: scale(.96);
}

#radioBox .controls--off svg,
#radioBox .controls--on svg,
#radioBox .controls--volume svg,
#radioBox .controls--chevron svg {
    width: var(--radio-icon-size);
    height: var(--radio-icon-size);
    display: block;
}

#radioBox .controls--off svg path,
#radioBox .controls--on svg path,
#radioBox .controls--volume svg path,
#radioBox .controls--chevron svg path {
    transition: fill .16s ease;
}

#radioBox #menuRadio {
    align-items: center;
    gap: var(--radio-controls-gap);
    display: inline-flex;
    overflow: visible;
    max-width: 0;
    opacity: 0;
    transform: translateX(4px);
    pointer-events: none;
    transition: max-width .2s ease, opacity .16s ease, transform .16s ease;
}

#radioBox #titrageRadio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    overflow: hidden;
    max-width: 180px;
    opacity: 1;
    transform: translateX(0);
    transition: max-width .2s ease, opacity .16s ease, transform .16s ease;
}

#radioBox.radio-menu-max #menuRadio {
    max-width: 340px;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

#radioBox.radio-menu-normal #menuRadio,
#radioBox.radio-menu-reduced #menuRadio {
    max-width: 0;
    opacity: 0;
    transform: translateX(4px);
    pointer-events: none;
}

#radioBox.radio-menu-reduced #titrageRadio {
    max-width: 0;
    opacity: 0;
    transform: translateX(-4px);
    pointer-events: none;
}

#radioBox.radio-menu-reduced .nav-radio-box-img {
    max-width: 0;
    margin: 0;
    opacity: 0;
    transform: scale(.92);
    pointer-events: none;
}

#radioBox.radio-menu-normal,
#radioBox.radio-menu-max {
    gap: 12px;
    padding-right: 10px;
}

#radioBox.radio-menu-reduced {
    gap: 10px;
    --radio-button-size: 38px;
    --radio-icon-size: 23px;
}

#radioBox #rollRadio svg {
    transition: transform .2s ease;
}

#radioBox.radio-menu-max #rollRadio svg {
    transform: rotate(180deg);
}

/* Popover volume */
#radioBox .radio-volume-wrap { position: relative; }

#radioBox .radio-volume-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}

#radioBox .radio-volume-popover {
    position: absolute;
    left: 50%;
    top: calc(100% + 2px);
    transform: translate(-50%, -6px);
    background: rgba(18, 18, 22, .38);
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
    box-shadow: var(--box-shadow);
    z-index: 14;
}

#radioBox .radio-volume-wrap:hover .radio-volume-popover,
#radioBox .radio-volume-popover:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity .14s ease, transform .14s ease, visibility 0s linear 0s;
}

#radioBox .radio-volume-slider {
    width: 110px;
    accent-color: var(--hrp-yellow);
    cursor: pointer;
}

#radioBox .radio-volume-wrap:active {
    transform: none !important;
    background-color: transparent !important;
}

/* Habillage "hotel" de la radio (verre dépoli) */
.radio-hotel {
    left: auto;
    position: relative;
    align-items: center;
    padding: 10px;
    border-radius: 16px;
    color: #e8e8f0;
    background: rgba(18, 18, 22, .35);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
    z-index: 10000;
    isolation: isolate;
    overflow: visible;
    height: 62px !important;
}

.radio-hotel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(18, 18, 22, .01);
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
    pointer-events: none;
    z-index: 0;
}

.radio-hotel > * {
    position: relative;
    z-index: 1;
}

/* ---------- Modale déplaçable / redimensionnable ---------- */

.hotel-modal[hidden] { display: none !important; }

.hotel-modal {
    inset: 0;
    z-index: 1010;
    position: fixed;
    pointer-events: none;
}

.hotel-modal-window {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: hsl(221, 23%, 16%);
    color: #e8e8f0;
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(10px);
    min-width: 420px;
    min-height: 280px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    border: 3px solid #2E334D;
    pointer-events: auto;
}

.hotel-modal-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    cursor: move;
    user-select: none;
}

.hotel-modal-titlebar h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
}

.hotel-modal-btn {
    border: 1px solid rgba(255, 255, 255, .12);
    background: var(--hrp-red);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.hotel-modal-btn:hover { filter: brightness(1.1); }

.hotel-modal-content {
    position: relative;
    flex: 1 1 auto;
    overflow: auto;
    padding: 12px;
    background: rgba(8, 8, 12, .25);
}

.hotel-modal.is-loading .hotel-modal-content {
    opacity: .75;
    background: linear-gradient(90deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)) 0/280% 100%,
    rgba(8, 8, 12, .25);
    animation: hotelShimmer 1.5s linear infinite;
}

@keyframes hotelShimmer {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

.hotel-modal-resize { position: absolute; z-index: 5; }

.hotel-modal-resize[data-dir="n"],
.hotel-modal-resize[data-dir="s"] {
    left: 0; right: 0; height: 8px; cursor: ns-resize;
}

.hotel-modal-resize[data-dir="e"],
.hotel-modal-resize[data-dir="w"] {
    top: 0; bottom: 0; width: 8px; cursor: ew-resize;
}

.hotel-modal-resize[data-dir="n"] { top: -2px; }
.hotel-modal-resize[data-dir="s"] { bottom: -2px; }
.hotel-modal-resize[data-dir="e"] { right: -2px; }
.hotel-modal-resize[data-dir="w"] { left: -2px; }

.hotel-modal-resize[data-dir="ne"],
.hotel-modal-resize[data-dir="se"],
.hotel-modal-resize[data-dir="sw"],
.hotel-modal-resize[data-dir="nw"] {
    width: 12px; height: 12px;
}

.hotel-modal-resize[data-dir="ne"] { top: -2px; right: -2px; cursor: nesw-resize; }
.hotel-modal-resize[data-dir="se"] { bottom: -2px; right: -2px; cursor: nwse-resize; }
.hotel-modal-resize[data-dir="sw"] { bottom: -2px; left: -2px; cursor: nesw-resize; }
.hotel-modal-resize[data-dir="nw"] { top: -2px; left: -2px; cursor: nwse-resize; }

/* Contenu des pages chargées en modale */
.hotel-page h2 {
    margin: 4px 0 12px;
    font-size: 20px;
}

.hotel-page p {
    color: var(--text-secondaire);
    line-height: 1.5;
}

.hotel-page .hotel-card {
    background: var(--box-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}

@media (max-width: 700px) {
    .hotel-modal-window {
        left: 12px !important;
        top: 12px !important;
        width: calc(100vw - 24px) !important;
        height: calc(100vh - 24px) !important;
        border-radius: 12px;
        min-width: 0;
    }

    .hotel-modal-titlebar { cursor: default; }

    .header-hotel-wrapper {
        flex-wrap: wrap;
    }
}

/* ============================================================
   Redémarrage de l'hôtel (commande :reboot)
   ============================================================ */

/* Masquée par défaut : client.php retire l'attribut [hidden] quand
   reboot-status.php signale un redémarrage. */
.reboot-overlay[hidden] { display: none; }

.reboot-overlay {
    position: fixed;
    inset: 0;
    /* Au-dessus du jeu, du site et de la modale : pendant un redémarrage
       plus rien d'autre ne doit être utilisable. */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
    background: transparent;
    backdrop-filter: none;
}

.reboot-box {
    position: relative;
    width: 445px;
    max-width: 100%;
    overflow: hidden;
    border-radius: 11px;
    color: var(--text-color);
    pointer-events: auto;
        background: #10141dcc;
    border: 2px solid #2E334D;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
    animation: reboot-box-shake .55s cubic-bezier(.36, .07, .19, .97) both;
}

#reboot-overlay .reboot-frank {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: center;
    width: 145px;
    height: auto;
    pointer-events: none;
    user-select: none;
}

#reboot-overlay .reboot-content {
    display: grid;
    grid-template-columns: 155px minmax(0, 1fr);
    grid-template-rows: minmax(100px, auto) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    padding: 0 20px 20px;
}

#reboot-overlay .reboot-message {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
}

#reboot-overlay .reboot-ok {
    grid-column: 1 / -1;
    grid-row: 2;
}

/* Notification reboot / shutdown — même direction artistique que :about. */
#reboot-overlay .reboot-box {
    width: min(560px, calc(100vw - 28px));
    border: 2px solid #2e334d;
    border-radius: 11px;
    background: rgba(16, 20, 29, .94);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(4px) saturate(145%);
    backdrop-filter: blur(4px) saturate(145%);
}

#reboot-overlay .reboot-header {
    min-height: 66px;
    padding: 11px 16px 11px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

#reboot-overlay .reboot-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

#reboot-overlay .reboot-brand img {
    display: block;
    width: 128px;
    height: auto;
}

#reboot-overlay .reboot-brand strong {
    color: #d5d7dd;
    font-size: 14px;
    font-weight: 700;
}

#reboot-overlay .reboot-close {
    width: 29px;
    height: 29px;
    border-radius: 6px;
}

#reboot-overlay .reboot-content {
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 22px;
    row-gap: 16px;
    align-items: center;
    padding: 24px 20px 18px;
    text-align: left;
}

#reboot-overlay .reboot-frank-card {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 142px;
    height: 142px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 194, 38, .45);
    background: linear-gradient(145deg, #c99500, #8e6800);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 10px 24px rgba(0, 0, 0, .22);
}

#reboot-overlay .reboot-frank {
    width: 125px;
    max-height: 137px;
    object-fit: contain;
    align-self: end;
}

#reboot-overlay .reboot-details {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

#reboot-overlay .reboot-heading {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 9px;
}

#reboot-overlay .reboot-title {
    font-size: 18px;
    line-height: 1.2;
}

#reboot-overlay .reboot-countdown {
    min-width: 45px;
    height: 28px;
    padding: 0 11px;
    border-radius: 7px;
    color: #fff;
    background: rgba(201, 153, 0, .28);
    border: 1px solid rgba(255, 194, 38, .28);
}

#reboot-overlay .reboot-message {
    min-height: 0;
    margin: 13px 0 0;
    padding: 0;
    justify-content: flex-start;
    text-align: left;
    color: #d5d7dd;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
}

#reboot-overlay .reboot-ok {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    min-width: 120px;
    margin: 0;
    padding: 10px 26px;
    color: #101010;
    border-radius: 8px;
    background: var(--hrp-yellow);
}

#reboot-overlay .reboot-ok:hover {
    background: #ffd258;
}

/* Variante finale compacte : Frank reste détouré, sans grosse tuile colorée. */
#reboot-overlay .reboot-box {
    width: min(470px, calc(100vw - 28px));
}

#reboot-overlay .reboot-header {
    min-height: 58px;
    padding: 11px 14px 11px 17px;
}

#reboot-overlay .reboot-content {
    grid-template-columns: 145px minmax(0, 1fr);
    grid-template-rows: minmax(95px, auto) auto;
    column-gap: 14px;
    row-gap: 12px;
    padding: 10px 20px 18px;
}

#reboot-overlay .reboot-frank {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: end;
    justify-self: center;
    width: 132px;
    max-height: 155px;
    object-fit: contain;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .3));
}

#reboot-overlay .reboot-message {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    padding: 8px 0;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 700;
}

#reboot-overlay .reboot-ok {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    min-width: 0;
    margin: 0;
    color: #fff;
    background: var(--hrp-green);
}

#reboot-overlay .reboot-ok:hover {
    background: var(--hrp-green-hover);
}

/* Présentation finale commune aux alertes :reboot et :shutdown. */
#reboot-overlay,
#reboot-overlay * {
    font-family: "Poppins", "Segoe UI", sans-serif;
}

#reboot-overlay .reboot-box {
    width: min(510px, calc(100vw - 28px));
}

#reboot-overlay .reboot-header {
    min-height: 62px;
    padding: 10px 15px 10px 18px;
}

#reboot-overlay .reboot-brand {
    gap: 11px;
}

#reboot-overlay .reboot-brand img {
    width: 126px;
}

#reboot-overlay .reboot-brand strong {
    display: block;
    color: #d9dce3;
    font-size: 13px;
    font-weight: 700;
}

#reboot-overlay .reboot-content {
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: 18px;
    padding: 18px 20px 20px;
}

#reboot-overlay .reboot-frank {
    grid-column: 1;
    grid-row: 1;
    width: 135px;
    max-height: 185px;
}

#reboot-overlay .reboot-details {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    min-width: 0;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
}

#reboot-overlay .reboot-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 5px;
}

#reboot-overlay .reboot-title {
    font-size: 17px;
    font-weight: 800;
}

#reboot-overlay .reboot-message {
    display: block;
    width: 100%;
    min-height: 34px;
    margin: 7px 0 14px;
    padding: 0;
    text-align: left;
    color: #d8dbe2;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 500;
}

#reboot-overlay .reboot-countdown {
    min-width: 0;
    height: auto;
    padding: 0;
    gap: 1px;
    border: 0;
    border-radius: 0;
    color: var(--hrp-yellow);
    background: transparent;
    box-shadow: none;
}

#reboot-overlay .reboot-seconds,
#reboot-overlay .reboot-unit {
    color: inherit;
    font-size: 13px;
    font-weight: 800;
}

#reboot-overlay .reboot-requester {
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 5px 12px 5px 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 13px;
    background: rgba(7, 12, 22, .64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

#reboot-overlay .reboot-requester img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 50%;
    background: #202738;
}

#reboot-overlay .reboot-requester span {
    color: #aeb4c0;
    font-size: 11px;
    font-weight: 500;
}

#reboot-overlay .reboot-requester strong {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

@keyframes reboot-box-shake {
    0%, 100% { transform: translateX(0); }
    12% { transform: translateX(-12px) rotate(-.4deg); }
    24% { transform: translateX(10px) rotate(.4deg); }
    36% { transform: translateX(-8px) rotate(-.3deg); }
    48% { transform: translateX(7px) rotate(.3deg); }
    60% { transform: translateX(-5px); }
    72% { transform: translateX(4px); }
    84% { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .reboot-box { animation: none; }
}

.reboot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 45px;
    padding: 10px 12px 10px 16px;
    border-bottom: 0;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.reboot-box.is-dragging .reboot-header { cursor: grabbing; }

.reboot-heading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.reboot-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.reboot-close {
    width: 25px;
    height: 25px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--hrp-red);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.reboot-close:hover {
    background: var(--hrp-red-hover);
}

.reboot-content {
    padding: 0px 15px 20px;
    text-align: center;
}

.reboot-message {
    min-height: 30px;
    margin: 0;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    overflow-wrap: anywhere;
    margin-bottom: 10px;
}

.reboot-countdown[hidden] { display: none; }

.reboot-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 35px;
    height: 25px;
    padding: 0px 10px;
    gap: 1px;
    border-radius: 30px;
    color: #171717;
    background: var(--hrp-yellow);
}

.reboot-seconds {
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    /* Chiffres à chasse fixe : sinon la boîte tremble à chaque seconde. */
    font-variant-numeric: tabular-nums;
    color: inherit;
}

.reboot-unit {
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    color: inherit;
}

.reboot-hint {
    margin: 4px 0 15px;
    font-size: 12px;
    color: var(--text-secondaire);
}

.reboot-ok {
    display: block;
    min-width: 150px;
    margin: 0 auto;
    padding: 10px 28px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: var(--hrp-green);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.reboot-ok:hover {
    background: var(--hrp-green-hover);
    transform: translateY(-1px);
}

.reboot-close:focus-visible,
.reboot-ok:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 430px) {
    #reboot-overlay .reboot-header {
        min-height: 58px;
        padding-left: 14px;
    }

    #reboot-overlay .reboot-brand img {
        width: 108px;
    }

    #reboot-overlay .reboot-brand strong {
        display: block;
        font-size: 10px;
    }

    #reboot-overlay .reboot-content {
        grid-template-columns: 90px minmax(0, 1fr);
        column-gap: 12px;
        padding: 18px 14px 15px;
    }

    #reboot-overlay .reboot-frank-card {
        width: 88px;
        height: 108px;
    }

    #reboot-overlay .reboot-frank {
        width: 88px;
        max-height: 104px;
    }

    #reboot-overlay .reboot-title {
        font-size: 15px;
    }

    #reboot-overlay .reboot-message {
        font-size: 11px;
    }
}

/* Confirmation Taxi — même DA que les alertes :ha. */
#taxi-overlay, #taxi-overlay * { font-family: "Poppins", "Segoe UI", sans-serif; }
body:not(.game-mode) #taxi-overlay { display:none !important; }
#taxi-overlay .taxi-hotel-alert { width:min(510px,calc(100vw - 28px)); overflow:hidden; border:2px solid #2e334d; border-radius:11px; background:rgba(16,20,29,.94); box-shadow:0 18px 45px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06); -webkit-backdrop-filter:blur(6px) saturate(145%); backdrop-filter:blur(6px) saturate(145%); }
#taxi-overlay .reboot-header { min-height:62px; padding:10px 15px 10px 18px; border-bottom:1px solid rgba(255,255,255,.07); }
#taxi-overlay .reboot-brand { display:flex; align-items:center; gap:11px; }
#taxi-overlay .reboot-brand img { display:block; width:126px; height:auto; }
#taxi-overlay .reboot-brand strong { color:#d9dce3; font-size:13px; font-weight:700; }
#taxi-overlay .reboot-content { display:block; padding:20px; text-align:left; }
#taxi-overlay .reboot-details { width:100%; }
#taxi-overlay .reboot-heading { justify-content:flex-start; }
#taxi-overlay .reboot-title { color:#fff; font-size:17px; line-height:1.2; font-weight:800; }
#taxi-overlay .reboot-message { display:block; width:100%; min-height:0; margin:8px 0 15px; padding:0; color:#d8dbe2; font-size:12px; line-height:1.55; font-weight:500; text-align:left; }
.taxi-purchase-message { display:block !important; width:100% !important; max-width:none !important; margin-right:0 !important; margin-left:0 !important; text-align:left !important; }
.taxi-purchase-tail { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.taxi-purchase-tail[hidden] { display:none; }
.taxi-purchase-price { display:inline-flex; height:20px; align-items:center; justify-content:center; gap:4px; color:#ffc431; font-size:13px; line-height:20px; font-weight:800; white-space:nowrap; vertical-align:middle; }
.taxi-purchase-price[hidden] { display:none; }
.taxi-purchase-price img { display:block; width:15px; height:15px; flex:0 0 15px; object-fit:contain; image-rendering:pixelated; }
.taxi-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.taxi-actions button {
    min-width: 0;
    min-height: 40px;
    padding: 9px 14px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}

.taxi-actions button:hover { filter: brightness(1.1); }
.taxi-actions button:active { transform: scale(.96); }
.taxi-actions button:disabled { cursor: wait; filter: grayscale(.5); }

.taxi-accept { background: var(--hrp-green); }
.taxi-refuse { background: var(--hrp-red); }
@media (max-width:520px) { #taxi-overlay .reboot-brand img{width:108px} #taxi-overlay .reboot-content{padding:17px 14px 15px} }

/* Confirmation d'achat des distributeurs : même boîte que taxi/reboot. */
#vending-purchase-overlay,
#vending-purchase-overlay * { font-family:"Poppins","Segoe UI",sans-serif; }
body:not(.game-mode) #vending-purchase-overlay { display:none !important; }
#vending-purchase-overlay .vending-purchase-dialog { width:min(560px,calc(100vw - 28px)); overflow:hidden; border:2px solid #2e334d; border-radius:11px; background:rgba(16,20,29,.94); box-shadow:0 18px 45px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06); -webkit-backdrop-filter:blur(6px) saturate(145%); backdrop-filter:blur(6px) saturate(145%); }
#vending-purchase-overlay .reboot-header { min-height:62px; padding:10px 15px 10px 18px; border-bottom:1px solid rgba(255,255,255,.07); }
#vending-purchase-overlay .reboot-brand { display:flex; align-items:center; gap:11px; }
#vending-purchase-overlay .reboot-brand img { display:block; width:126px; height:auto; }
#vending-purchase-overlay .reboot-brand strong { color:#d9dce3; font-size:13px; font-weight:700; }
#vending-purchase-overlay .reboot-content { display:block; padding:20px; text-align:left; }
#vending-purchase-overlay .reboot-message { display:block; width:100%; min-height:0; margin:0 0 15px; padding:0; color:#d8dbe2; font-size:12px; line-height:1.55; font-weight:500; text-align:left; }
.vending-purchase-message { display:flex !important; width:100% !important; max-width:none !important; align-items:center !important; justify-content:flex-start !important; flex-wrap:wrap; gap:4px; margin-right:0 !important; margin-left:0 !important; text-align:left !important; }
.vending-purchase-price { display:inline-flex; height:20px; align-items:center; justify-content:center; gap:4px; color:#ffc431; font-size:13px; line-height:20px; font-weight:800; white-space:nowrap; vertical-align:middle; }
.vending-purchase-price img { display:block; width:15px; height:15px; flex:0 0 15px; object-fit:contain; image-rendering:pixelated; }
.vending-purchase-quantity { display:flex; min-width:150px; flex:1 1 150px; align-items:center; justify-content:space-between; gap:10px; margin:0; color:#d8dbe2; font-size:12px; font-weight:600; }
.vending-purchase-quantity input { width:110px; height:36px; padding:0 10px; border:1px solid #39445a; border-radius:6px; outline:0; background:#141a25; color:#fff; font:700 14px Poppins,sans-serif; }
.vending-purchase-quantity input:focus { border-color:#ffca18; box-shadow:0 0 0 2px rgba(255,202,24,.14); }
.vending-purchase-actions {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    width:100%;
}

.vending-purchase-actions .vending-purchase-action {
    min-width: 0;
    min-height:40px;
    padding: 9px 12px;
    color: var(--hrp-text);
    border: 0;
    border-radius: 9px;
    font-size:12px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .15s ease, filter .15s ease, transform .15s ease;
}

.vending-purchase-action:hover { filter: brightness(1.1); transform: translateY(-1px); }
.vending-purchase-action:active { transform: scale(.96); }
.vending-purchase-action.buy { color: var(--hrp-bg); background: var(--hrp-yellow); }
.vending-purchase-action.buy:hover { color: var(--hrp-text); background: var(--hrp-yellow-hover); }
.vending-purchase-action.consume { background: var(--hrp-green); }
.vending-purchase-action.consume:hover { background: var(--hrp-green-hover); }
.vending-purchase-action.cancel { background: var(--hrp-red); }
.vending-purchase-action.cancel:hover { background: var(--hrp-red-hover); }
@media(max-width:520px) { #vending-purchase-overlay .reboot-brand img{width:108px} #vending-purchase-overlay .reboot-content{padding:17px 14px 15px} }

/* ============================================================
   Bibliothèque des commandes (:commandes)
   ============================================================ */

.commands-dialog {
    width: min(620px, calc(100vw - 28px));
    height: min(680px, calc(100vh - 28px));
    max-height: min(680px, calc(100vh - 28px));
    display: flex;
    flex-direction: column;
    border: 2px solid #2e334d;
    border-radius: 11px;
    background: rgba(16, 20, 29, .94);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(4px) saturate(145%);
    backdrop-filter: blur(4px) saturate(145%);
}

.commands-header {
    flex: 0 0 auto;
    min-height: 62px;
    padding: 10px 15px 10px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.commands-dialog.is-dragging .commands-header { cursor: grabbing; }

.commands-brand { display: flex; align-items: center; gap: 11px; }
.commands-brand img { display: block; width: 126px; height: auto; }
.commands-brand strong { color: #d9dce3; font-size: 13px; font-weight: 700; }

.commands-close {
    align-self: flex-start;
    color: #fff;
    background: var(--hrp-red);
}

.commands-content {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 20px 16px;
}

.commands-search {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 9px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #303d57;
    border-radius: 9px;
    background: rgba(8, 13, 22, .7);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.commands-search:focus-within {
    border-color: var(--hrp-yellow);
    box-shadow: 0 0 0 3px rgba(255, 194, 38, .12);
}

.commands-search > i {
    flex: 0 0 auto;
    color: #8793a6;
    font-size: 18px;
}

.commands-search input {
    min-width: 0;
    flex: 1;
    width: 100%;
    color: #fff;
    font: 500 11px Poppins, sans-serif;
    border: 0;
    outline: 0;
    background: transparent;
}

.commands-search input::placeholder { color: #758095; }

.commands-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    flex: 0 0 auto;
    gap: 4px;
    margin-top: 11px;
    padding: 4px;
    border: 1px solid #303d57;
    border-radius: 11px;
    background: rgba(8, 13, 22, .68);
}

.commands-filters button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    height: 43px;
    padding: 0 8px;
    color: #aeb8ca;
    font: 800 11px/1 Poppins, sans-serif;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    background: transparent;
    white-space: nowrap;
}

.commands-filters button:hover { color: #fff; background: rgba(255, 255, 255, .04); }

.commands-filters button.is-active {
    color: #1c2330;
    background: #ffc431;
    box-shadow: 0 4px 12px rgba(255, 196, 0, .15);
}

.commands-filters button > i { font-size: 16px; }

.commands-filters button span {
    min-width: 19px;
    padding: 3px 5px;
    color: #ffc431;
    text-align: center;
    font-size: 10px;
    border-radius: 5px;
    background: rgba(0, 0, 0, .22);
}

.commands-filters button.is-active span {
    color: #1c2330;
    background: rgba(255, 255, 255, .3);
}

.commands-list {
    min-height: 120px;
    flex: 1 1 auto;
    margin: 14px -6px 0 0;
    padding: 0 6px 0 0;
    overflow-y: auto;
    scrollbar-color: #ffc431 transparent;
    scrollbar-width: thin;
}

.commands-list::-webkit-scrollbar { width: 5px; }
.commands-list::-webkit-scrollbar-track { background: transparent; }
.commands-list::-webkit-scrollbar-thumb { border-radius: 10px; background: #ffc431; }

.commands-group + .commands-group { margin-top: 18px; }

.commands-group > h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.commands-group > h2::before {
    width: 4px;
    height: 15px;
    content: "";
    border-radius: 2px;
    background: #ffc431;
}

.commands-group-vip > h2::before,
.commands-group-staff > h2::before { background: #ffc431; }

.commands-group > h2 small {
    padding: 3px 6px;
    color: rgba(255, 255, 255, .45);
    font-size: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .06);
}

.commands-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.commands-item {
    padding: 13px 14px;
    border: 1px solid transparent;
    min-height: 72px;
    border-color: rgba(255, 255, 255, .05);
    border-radius: 13px;
    background: rgba(7, 12, 22, .64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    transition: border-color .15s ease, background-color .15s ease;
}

.commands-item:hover {
    border-color: rgba(255, 194, 38, .2);
    background: rgba(255, 194, 38, .055);
}

.commands-item h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    margin: 0;
    line-height: 1.25;
}

.commands-item h3 code {
    color: var(--hrp-yellow);
    font: 800 13px/1.35 ui-monospace, Consolas, monospace;
}

.commands-item p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    line-height: 1.35;
}

.commands-empty {
    min-height: 0;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 24px 16px;
    color: rgba(255, 255, 255, .5);
    text-align: center;
    font-size: 13px;
}

.commands-empty:not([hidden]) { display: flex; }

@media (max-width: 560px) {
    .commands-dialog { height: calc(100vh - 20px); max-height: calc(100vh - 20px); }
    .commands-header { padding: 14px; }
    .commands-content { padding: 12px 14px 14px; }
    .commands-filters { overflow-x: auto; }
    .commands-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   À propos de l'hôtel (:about)
   ============================================================ */

.about-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    color: #fff;
    border: 3px solid #071b2a;
    border-radius: 8px;
    background: #182633;
    box-shadow:
        0 0 0 2px #6f8393,
        0 0 0 4px #0a0f14,
        8px 8px 0 rgba(0, 0, 0, .28);
    backdrop-filter: none;
    animation: none;
}

.about-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 9px 11px 9px 14px;
    border-bottom: 3px solid #071b2a;
    background: #0d6d9d;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .2);
}

.about-header-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 13px;
}

.about-header img {
    width: 112px;
    height: auto;
}

.about-header strong {
    overflow: hidden;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-left: 2px solid rgba(0, 0, 0, .2);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}

.about-close {
    width: 31px;
    height: 31px;
    color: #fff;
    border: 2px solid #68100d;
    border-radius: 5px;
    background: #c92720;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), 0 2px 0 #06131c;
}

.about-content { padding: 17px; }

.about-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 17px;
    padding: 2px 2px 14px;
    border-bottom: 1px solid #344756;
}

.about-intro h2 {
    margin: 0;
    color: #fff;
    font-size: 22px;
    text-shadow: 0 2px 0 #000;
}

.about-intro div > p:last-child {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
}

.about-version {
    flex: 0 0 auto;
    padding: 7px 10px;
    color: #151109;
    font: 800 11px/1.2 "Ubuntu Condensed", sans-serif;
    border: 2px solid #8e6600;
    border-radius: 5px;
    background: #f5b51b;
    box-shadow: inset 0 2px 0 #ffd96b, 0 2px 0 #08141d;
}

.about-section + .about-section { margin-top: 16px; }

.about-section > h3 {
    margin: 0 0 7px;
    color: #dce9f1;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .035em;
    text-shadow: 0 2px 0 #000;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 2px solid #0a151e;
    border-radius: 5px;
    background: #101c26;
    box-shadow: inset 0 0 0 1px #344756;
}

.about-stats article,
.about-server article {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.about-stats article {
    min-height: 54px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    padding: 8px 11px;
    border-right: 1px solid #344756;
    border-bottom: 1px solid #344756;
}

.about-stats article:first-child {
    background: rgba(245, 181, 27, .08);
}

.about-stats strong {
    grid-row: 1;
    color: #f5b51b;
    font-size: 20px;
    line-height: 1;
    text-shadow: 0 2px 0 #000;
}

.about-stats span,
.about-server span {
    margin: 0;
    color: #aebcc6;
    font-size: 11px;
}

.about-server {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 2px solid #0a151e;
    border-radius: 5px;
    background: #101c26;
    box-shadow: inset 0 0 0 1px #344756;
}

.about-server article {
    display: flex;
    flex-direction: column;
    padding: 9px 11px;
    border-right: 1px solid #344756;
    border-bottom: 1px solid #344756;
}

.about-server .about-uptime {
    grid-column: 1 / -1;
    background: #213646;
}

.about-server strong {
    margin-top: 4px;
    color: #fff;
    font: 700 12px/1.3 ui-monospace, Consolas, monospace;
}

.about-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 17px;
    padding-top: 14px;
    border-top: 1px solid #344756;
}

.about-footer p {
    margin: 0;
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
}

.about-footer button {
    min-width: 110px;
    padding: 9px 18px;
    color: #18130a;
    font: 800 13px/1 "Ubuntu Condensed", sans-serif;
    cursor: pointer;
    border: 2px solid #8e6600;
    border-radius: 5px;
    background: #f5b51b;
    box-shadow: inset 0 2px 0 #ffd96b, 0 3px 0 #08141d;
}

.about-footer button:hover { background: #ffc83d; }
.about-footer button:active { transform: translateY(2px); box-shadow: inset 0 2px 0 #ffd96b, 0 1px 0 #08141d; }

@media (max-width: 560px) {
    .about-content { padding: 15px; }
    .about-header img { width: 100px; }
    .about-header strong { display: none; }
    .about-stats { grid-template-columns: 1fr; }
    .about-server { grid-template-columns: 1fr; }
    .about-server .about-uptime { grid-column: auto; }
    .about-footer { align-items: stretch; flex-direction: column; }
    .about-footer button { width: 100%; }
}

/* Variante compacte retenue pour :about. */
.about-dialog {
    width: min(620px, calc(100vw - 32px));
    color: var(--text-color);
    border: 2px solid #2e334d;
    border-radius: 11px;
    background: rgba(16, 20, 29, .95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(2px) saturate(160%);
}

.about-header {
    min-height: 72px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: transparent;
    box-shadow: none;
}

.about-header img { width: 142px; }

.about-close {
    width: 29px;
    height: 24px;
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    padding: 0;
    color: #fff;
    border: 0;
    border-radius: 6px;
    background: var(--hrp-red);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 2px 0 rgba(0, 0, 0, .2);
    transition: background-color .15s ease, transform .15s ease;
}

.about-close:hover { background: var(--hrp-red-hover); }
.about-close:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.about-close .reboot-close-icone { width: 18px; height: 18px; }

.about-content { padding: 20px; }

.about-intro {
    margin-bottom: 22px;
    padding: 0;
    border-bottom: 0;
}

.about-kicker {
    margin: 0 0 3px;
    color: var(--hrp-yellow);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.about-intro h2 {
    font-size: 24px;
    text-shadow: none;
}

.about-version {
    padding: 8px 11px;
    color: var(--hrp-yellow);
    font: 800 11px/1.2 ui-monospace, Consolas, monospace;
    border: 1px solid rgba(255, 194, 38, .25);
    border-radius: 8px;
    background: rgba(255, 194, 38, .09);
    box-shadow: none;
}

.about-section + .about-section { margin-top: 20px; }

.about-section > h3 {
    margin-bottom: 10px;
    color: rgba(255, 255, 255, .55);
    font-size: 10px;
    letter-spacing: .08em;
    text-shadow: none;
}

.about-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.about-stats article,
.about-server article {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 9px;
    background: rgba(255, 255, 255, .03);
}

.about-stats article {
    min-height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px;
}

.about-stats article:first-child {
    border-color: rgba(255, 194, 38, .25);
    background: rgba(255, 194, 38, .07);
}

.about-stats strong {
    color: #fff;
    font-size: 22px;
    text-shadow: none;
}

.about-stats article:first-child strong { color: var(--hrp-yellow); }

.about-stats span,
.about-server span {
    margin-top: 6px;
    color: rgba(255, 255, 255, .45);
    font-size: 10px;
}

.about-server {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.about-server article {
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, .08);
}

.about-server .about-uptime {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, .03);
}

.about-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.about-footer button {
    padding: 10px 18px;
    color: var(--hrp-bg);
    font: 800 13px/1 inherit;
    border: 0;
    border-radius: 9px;
    background: var(--hrp-yellow);
    box-shadow: none;
}

.about-footer button:hover { background: var(--hrp-yellow); filter: brightness(1.08); }
.about-footer button:active { transform: none; box-shadow: none; }

@media (max-width: 560px) {
    .about-content { padding: 15px; }
    .about-header img { width: 120px; }
    .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-server { grid-template-columns: 1fr; }
    .about-server .about-uptime { grid-column: auto; }
}

/* Présentation finale compacte de la commande :about. */
.about-dialog {
    width: min(540px, calc(100vw - 32px));
    font-family: "Poppins", "Segoe UI", sans-serif;
    min-height: 0;
}

.about-dialog * {
    font-family: "Poppins", "Segoe UI", sans-serif !important;
}

.about-header {
    min-height: 62px;
    padding: 11px 18px;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.about-dialog.is-dragging .about-header { cursor: grabbing; }

.about-header-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}

.about-header-title img { width: 138px; }

.about-header-title strong {
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    line-height: 1;
}

.about-content { padding: 18px 20px 16px; }

.about-main {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    min-height: 205px;
}

.about-emblem {
    display: grid;
    place-items: center;
    width: 142px;
    height: 142px;
    justify-self: center;
    overflow: hidden;
    border-radius: 15px;
    background: #c99200;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.about-emblem img {
    width: 142px;
    height: 142px;
    object-fit: contain;
}

.about-summary {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 11px;
    width: calc(100% - 16px);
    margin-left: 16px;
}

.about-summary .about-version {
    align-self: flex-start;
    padding: 8px 11px;
    color: rgba(255, 255, 255, .82);
    font: 600 11px/1.2 inherit;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 194, 38, .14);
}

.about-details {
    display: grid;
    align-self: stretch;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin-top: 3px;
}

.about-details article {
    min-width: 0;
    grid-column: span 2;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 6px;
    background: rgba(255, 255, 255, .025);
}

.about-details article:nth-child(4),
.about-details article:nth-child(5) {
    grid-column: span 3;
}

.about-details .about-details-uptime {
    grid-column: 1 / -1;
}

.about-details span {
    display: block;
    overflow: hidden;
    color: rgba(255, 255, 255, .42);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.about-details strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: rgba(255, 255, 255, .85);
    font: 700 10px/1.25 ui-monospace, Consolas, monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.about-footer {
    justify-content: flex-end;
    margin-top: 11px;
    padding-top: 0;
    border-top: 0;
}

.about-footer p {
    margin: 0;
    color: rgba(255, 255, 255, .42);
    font-size: 10px;
}

.about-footer p strong {
    color: var(--hrp-yellow);
    font-weight: 700;
}

.about-footer button {
    min-width: 118px;
    padding: 10px 20px;
    font-size: 14px;
}

@media (max-width: 700px) {
    .about-main {
        grid-template-columns: 50px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        min-height: 0;
    }
    .about-emblem {
        width: 50px;
        height: 50px;
        justify-self: start;
        border-radius: 5px;
    }
    .about-emblem img { width: 50px; height: 50px; }
    .about-header img { width: 135px; }
    .about-footer { justify-content: flex-start; }
}

@media (max-width: 500px) {
    .about-main {
        grid-template-columns: 50px minmax(0, 1fr);
        align-items: center;
    }
    .about-summary { display: contents; }
    .about-summary .about-version {
        align-self: center;
        justify-self: start;
        margin: 0;
    }
    .about-details {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 8px;
    }
    .about-details article,
    .about-details article:nth-child(4),
    .about-details article:nth-child(5) { grid-column: auto; }
    .about-details .about-details-uptime { grid-column: 1 / -1; }
}

.contact-request-popover {
    position: fixed;
    z-index: 12550;
    width: 275px;
    transform: translate(-50%, -100%);
    pointer-events: auto;
}

.contact-request-popover[hidden] { display: none !important; }

.contact-request-dialog {
    position: relative;
    padding: 8px;
    color: #fff;
    background: rgba(20, 31, 47, .96);
    border: 2px solid #40526d;
    border-radius: 9px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .4);
}

.contact-request-dialog::after {
    position: absolute;
    bottom: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    content: "";
    background: #141f2f;
    border-right: 2px solid #40526d;
    border-bottom: 2px solid #40526d;
    transform: translateX(-50%) rotate(45deg);
}

.contact-request-dialog h2 {
    margin: 0 0 4px;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
}

.contact-request-dialog p {
    margin: 0 0 6px;
    font-size: 10px;
    text-align: center;
}

.contact-request-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.contact-request-action {
    min-width: 74px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    border: 0;
    border-radius: 6px;
}

.contact-request-action.accept { background: var(--hrp-green); }
.contact-request-action.decline { background: var(--hrp-red); }
.contact-request-action.accept:hover { background: var(--hrp-green-hover); }
.contact-request-action.decline:hover { background: var(--hrp-red-hover); }

@media (max-width: 480px) {
    .vending-purchase-actions { flex-direction: column; }
    .vending-purchase-actions .vending-purchase-action { width: 100%; }
}

/* ---------- Bloc haut-droite du client : credits + groupe ----------
   Remplace l'affichage d'origine de Nitro. Tout se modifie ici et dans
   components/hotel/top_barre/hud_droite.php, sans recompiler le client. */
.hud-droite {
    position: fixed;
    font-family: Poppins, 'Segoe UI', sans-serif;
    /* Aligne sur le dock (top/left 20px) : les deux blocs sont sur la meme ligne. */
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 142px;
    /* Au-dessus de l'iframe du jeu, sous les fenetres modales du site. */
    z-index: 9000;
    /* Visible uniquement en mode jeu, comme le dock : sur le site, ce bloc
       n'aurait aucun sens et recouvrirait la navigation. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}

body.game-mode .hud-droite {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity .24s ease, transform .24s ease, visibility 0s;
}

/* Client deconnecte : les montants seraient figes, on masque le bloc. */
body.hotel-disconnected .hud-droite {
    display: none;
}

.hud-carte {
    /* Memes fond, bordure et rayon que les boites (taxi, achat, redemarrage). */
    background: #10141dcc;
    border: 2px solid #2E334D;
    border-radius: 11px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
}

/* ---- Credits ---- */
.hud-credits {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 62px;
    padding: 8px 12px;
    box-sizing: border-box;
}

.hud-monnaie-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 20px;
    gap: 10px;
}

.hud-monnaie-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.hud-monnaie-icone img,
.hud-monnaie-icone svg {
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6));
}

.hud-monnaie-diamant svg {
    fill: #66dce8;
    filter: drop-shadow(0 1px 0 #176d78);
}

.hud-monnaie-valeur {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    /* Chiffres de largeur fixe : le montant ne tremble pas en changeant. */
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
}

.hud-monnaie-valeur.is-negative {
    color: #ff3b3b;
}

.hud-diamants-valeur { color: #66dce8; }

/* ---- Groupe de l'appartement ---- */
.hud-groupe {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 7px;
}

.hud-groupe[hidden] { display: none; }

/* Tout le bloc suit le depliage du dock : replie, credits et carte du groupe
   disparaissent ensemble. Meme fondu que l'entree en mode jeu.
   Doit rester APRES la regle body.game-mode : specificite identique. */
body:not(.dock-stats-open) .hud-droite {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}

.hud-groupe-entete {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hud-groupe-badge {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 5px;
}

.hud-groupe-nom {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    /* Un nom de groupe long ne doit pas casser la carte. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hud-groupe-action {
    padding: 5px 9px;
    cursor: pointer;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border: 0;
    border-radius: 8px;
    background: #46a34a;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22);
    transition: filter .15s ease, transform .1s ease;
}

.hud-groupe-action[hidden] { display: none; }
.hud-groupe-action:hover { filter: brightness(1.1); }
.hud-groupe-action:active { transform: translateY(1px); }

@media (max-width: 900px) {
    .hud-droite { width: 124px; }
}

/* Croix de fermeture : icone tabler.io, centree dans le bouton rouge. */
.reboot-close-icone {
    display: block;
    width: 15px;
    height: 15px;
}

/* ---------- Fiche mobi (HTML dans components/hotel/infostand/furni.php) ---------- */
.furni-fiche {
    position: fixed;
    /* En bas a droite, au-dessus de la barre de chat : la ou l'ancienne fiche
       de Nitro s'affichait. */
    bottom: 100px;
    right: 20px;
    z-index: 8500;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 222px;
    font-family: Poppins, 'Segoe UI', sans-serif;
    animation: furni-fiche-entree .18s ease-out both;
}

.furni-fiche[hidden] { display: none; }

@keyframes furni-fiche-entree {
    from { opacity: 0; transform: translateX(14px); }
    to { opacity: 1; transform: none; }
}

.furni-fiche-carte {
    overflow: hidden;
    background: #10141dcc;
    border: 2px solid #2E334D;
    border-radius: 11px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
}

.furni-fiche-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 8px 12px;
    background: rgba(21, 26, 35, .6);
    border-bottom: 1px solid #2E334D;
}

.furni-fiche-titre {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.furni-fiche-fermer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    padding: 0;
    cursor: pointer;
    color: #fff;
    border: 0;
    border-radius: 7px;
    background: var(--hrp-red);
}

.furni-fiche-fermer svg { width: 13px; height: 13px; display: block; }

.furni-fiche-corps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

.furni-fiche-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    border-radius: 9px;
    background: rgba(0, 0, 0, .22);
}

.furni-fiche-image img { max-width: 100%; max-height: 84px; image-rendering: pixelated; }

.furni-fiche-description {
    margin: 0;
    color: #c8d0dd;
    font-size: 11px;
    line-height: 1.35;
}

.furni-fiche-proprietaire {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.furni-fiche-owner {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.furni-fiche-owner:hover { text-decoration: underline; }

.furni-fiche-panier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    padding: 0;
    cursor: pointer;
    color: #fff;
    border: 1px solid #2E334D;
    border-radius: 8px;
    background: #1f2635;
}

.furni-fiche-panier svg { width: 14px; height: 14px; display: block; }
.furni-fiche-panier:hover { border-color: #3c90e6; }

.furni-fiche-basculer {
    padding: 0;
    cursor: pointer;
    color: #98a0ab;
    font-size: 10px;
    text-align: left;
    border: 0;
    background: none;
}

.furni-fiche-basculer:hover { color: #fff; }

.furni-fiche-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: 6px;
}

.furni-fiche-grille[hidden] { display: none; }

.furni-fiche-champ {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border: 1px solid #2E334D;
    border-radius: 7px;
    background: rgba(21, 26, 35, .55);
    font-size: 10px;
}

.furni-fiche-champ b { color: #98a0ab; font-weight: 700; }
.furni-fiche-champ i { color: #fff; font-style: normal; font-weight: 700; }

/* Champs copiables : le retour visuel confirme la copie. */
.furni-fiche-id, .furni-fiche-code { cursor: pointer; }
.furni-fiche-code { grid-column: 1 / -1; }
.furni-fiche-champ.est-copie, .est-copie { color: #52bc48 !important; }

/* Boutons hors de la carte */
.furni-fiche-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.furni-fiche-btn {
    flex: 1 1 auto;
    padding: 7px 8px;
    cursor: pointer;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    border: 0;
    border-radius: 8px;
    background: #3c4560;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22);
    transition: filter .15s ease, transform .1s ease;
}

.furni-fiche-btn[hidden] { display: none; }
.furni-fiche-btn:hover { filter: brightness(1.1); }
.furni-fiche-btn:active { transform: translateY(1px); }
.furni-fiche-btn-danger { background: var(--hrp-red); }
.furni-fiche-btn-vert { background: #46a34a; }

/* ---------- Fiche joueur (HTML dans components/hotel/infostand/joueur.php) ---------- */
.joueur-fiche {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 8500;
    width: 226px;
    /* Visible : l'infobulle des badges deborde de la carte. */
    overflow: visible;
    font-family: Poppins, 'Segoe UI', sans-serif;
    background: #10141dcc;
    border: 2px solid #2E334D;
    border-radius: 11px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
    animation: furni-fiche-entree .18s ease-out both;
}

.joueur-fiche[hidden] { display: none; }

.joueur-fiche-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 8px 12px;
    background: rgba(21, 26, 35, .6);
    border-bottom: 1px solid #2E334D;
    /* La carte ne rogne plus : l'en-tete arrondit ses propres coins. */
    border-radius: 9px 9px 0 0;
}

.joueur-fiche-pseudo {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.joueur-fiche-fermer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    padding: 0;
    cursor: pointer;
    color: #fff;
    border: 0;
    border-radius: 7px;
    background: var(--hrp-red);
}

.joueur-fiche-fermer svg { width: 13px; height: 13px; display: block; }

.joueur-fiche-corps {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px;
}

.joueur-fiche-haut {
    display: flex;
    gap: 9px;
}

.joueur-fiche-avatar {
    display: flex;
    position: relative;
    align-items: flex-end;
    justify-content: center;
    /* Taille native du fond : 67x170, on n'y touche pas. */
    width: 67px;
    height: 170px;
    flex: 0 0 auto;
    overflow: hidden;
    cursor: pointer;
    border-radius: 9px;
    background-color: rgba(0, 0, 0, .22);
    background-image: url('../img/profil/defaut.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    image-rendering: pixelated;
}

/* L'avatar se pose au bas du decor, comme sur un fond de profil. */
/* Cible l'avatar seul : sinon la regle etirerait aussi les fleches. */
.joueur-fiche-avatar > img[data-joueur="avatar"] {
    /* Laisse la place aux fleches en bas du cadre. */
    margin-bottom: 28px;
    margin-right: 9px;
    /* Seul le personnage est agrandi, le decor garde sa taille. */
    height: 130px;
    width: auto;
    image-rendering: pixelated;
}

.joueur-fiche-avatar:hover { filter: brightness(1.08); }

/* Badges : deux par ligne, comme dans l'ancienne fiche. */
/* 6 badges : 2 colonnes x 3 rangees, calees sur la hauteur du cadre (170px). */
.joueur-fiche-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 4px;
    flex: 1 1 auto;
    height: 170px;
}

.joueur-fiche-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.joueur-fiche-badge img {
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
}

/* Infobulle du badge : nom en gras, description en dessous. */
.joueur-fiche-badge-info {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: none;
    flex-direction: column;
    gap: 2px;
    width: max-content;
    max-width: 170px;
    padding: 6px 8px;
    color: #fff;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    border: 1px solid #2E334D;
    border-radius: 7px;
    background: rgba(10, 13, 20, .96);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    pointer-events: none;
}

.joueur-fiche-badge:hover .joueur-fiche-badge-info { display: flex; }
.joueur-fiche-badge-info b { font-weight: 700; }
.joueur-fiche-badge-info i { color: #c8d0dd; font-style: normal; }

.joueur-fiche-motto {
    margin: 0;
    min-height: 26px;
    padding: 6px 8px;
    color: #fff;
    font-size: 11px;
    word-break: break-word;
    border-radius: 8px;
    background: rgba(21, 26, 35, .55);
}

.joueur-fiche-score {
    color: #c8d0dd;
    font-size: 11px;
}

.joueur-fiche-score b { color: #fff; }

.joueur-fiche-groupe {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    border: 1px solid #2E334D;
    border-radius: 8px;
    background: rgba(21, 26, 35, .55);
}

.joueur-fiche-groupe[hidden] { display: none; }
.joueur-fiche-groupe:hover { border-color: var(--hrp-yellow); }
.joueur-fiche-groupe-badge { width: 25px; height: 25px; object-fit: contain; border-radius: 5px; }

.joueur-fiche-groupe-nom {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fleches de rotation du personnage, posees au bas du decor. */
.joueur-fiche-fleches {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.joueur-fiche-fleche {
    width: 22px;
    height: 18px;
    cursor: pointer;
    image-rendering: pixelated;
    transition: transform .1s ease, filter .15s ease;
}

.joueur-fiche-fleche:hover { filter: brightness(1.25); }
.joueur-fiche-fleche:active { transform: translateY(1px); }

/* ---------- Page Équipe (staff.php) ----------
   Reprend l'habillage des panneaux de l'accueil (.active-rooms-card) : carte
   sombre, titre, sous-titre et filet jaune. */
.staff-page {
    width: calc(100% - 40px);
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 30px 0 64px;
}

.staff-intro { margin-bottom: 22px; }
.staff-titre { margin: 0 0 6px; color: var(--hrp-text); font-size: 30px; font-weight: 700; }
.staff-sous-titre { margin: 0; color: var(--hrp-muted); font-size: 14px; }

/* Deux panneaux par rangee ; ceux de plus de 3 membres prennent toute la
   largeur, faute de place pour aligner leurs cartes. */
.staff-grades {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    align-items: start;
}

.staff-grade.est-large { grid-column: 1 / -1; }

.staff-grade {
    padding: 26px 28px 24px;
    border: 1px solid var(--hrp-border);
    border-radius: 14px;
    background: var(--hrp-panel);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.staff-grade-entete { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.staff-grade-badge { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.staff-grade-nom { margin: 0; color: var(--hrp-text); font-size: 26px; font-weight: 600; }

/* Filet jaune : la signature des panneaux de l'accueil. */
.staff-grade-description {
    margin: 0 0 20px;
    padding-bottom: 14px;
    color: var(--hrp-muted);
    font-size: 14px;
    line-height: 1.55;
    border-bottom: 2px solid var(--hrp-yellow);
}

.staff-grade-membres { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- Carte d'un membre ---- */
.staff-carte {
    width: 230px;
    overflow: hidden;
    border: 1px solid var(--hrp-border);
    border-radius: 12px;
    background: var(--hrp-panel-soft, rgba(255, 255, 255, .03));
    transition: transform .18s ease, border-color .18s ease;
}

.staff-carte:hover { transform: translateY(-3px); border-color: var(--hrp-yellow); }

.staff-carte-bandeau {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    background: rgba(0, 0, 0, .22);
}

.staff-carte-avatar {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 78px;
    height: 78px;
    overflow: hidden;
    border: 3px solid var(--hrp-border);
    border-radius: 50%;
    background: var(--hrp-panel);
}

.staff-carte-avatar > img[alt=""] { margin-top: -7px; image-rendering: pixelated; }

.staff-statut {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    border-radius: 6px;
}

.staff-statut.est-en-ligne { background: #52bc48; }
.staff-statut.est-hors-ligne { background: rgba(255, 255, 255, .14); }
.staff-statut img { width: 13px; height: 16px; image-rendering: pixelated; }
.staff-statut.est-hors-ligne img { filter: grayscale(1) opacity(.7); }

/* Joueur hors ligne : avatar grisé, comme sa pastille. */
.staff-statut.est-hors-ligne ~ .staff-carte-avatar img { filter: grayscale(1) opacity(.75); }

.staff-carte-corps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 46px 14px 16px;
    text-align: center;
}

.staff-carte-pseudo { color: var(--hrp-text); font-size: 15px; font-weight: 700; }

.staff-carte-motto {
    margin: 0;
    min-height: 26px;
    color: var(--hrp-muted);
    font-size: 11px;
    line-height: 1.45;
    word-break: break-word;
}

@media (max-width: 900px) {
    .staff-grades { grid-template-columns: 1fr; }
    .staff-grade { padding: 20px 18px; }
    .staff-carte { width: 100%; }
}

/* ---------- Barre de défilement ----------
   Aux couleurs du site plutôt qu'au gris par défaut du navigateur. */
* {
    /* Firefox : seules ces deux proprietes sont reconnues. */
    scrollbar-width: thin;
    scrollbar-color: var(--hrp-border) transparent;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar { width: 10px; height: 10px; }

::-webkit-scrollbar-track {
    background: var(--hrp-panel);
}

::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--hrp-border);
    /* Bordure transparente : elle affine visuellement le curseur sans réduire
       la zone cliquable. */
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover { background: #3c4560; background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--hrp-yellow); background-clip: padding-box; }

/* Angle entre les deux barres, sinon il reste blanc. */
::-webkit-scrollbar-corner { background: var(--hrp-panel); }

/* ---------- Fiche familier (HTML dans components/hotel/infostand/familier.php) ---------- */
.familier-fiche {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 8500;
    width: 288px;
    font-family: Poppins, 'Segoe UI', sans-serif;
    color: #fff;
    background: #10141dcc;
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
    border: 2px solid #2E334D;
    border-radius: 11px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: furni-fiche-entree .18s ease-out both;
}

.familier-fiche[hidden] { display: none; }

.familier-fiche-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 9px 9px 12px;
    background: rgba(21, 26, 35, .6);
    border-bottom: 1px solid #2E334D;
    border-radius: 9px 9px 0 0;
}

.familier-fiche-titre { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.familier-fiche-nom { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.familier-fiche-race { font-size: 11px; color: var(--hrp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.familier-fiche-fermer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    padding: 0;
    cursor: pointer;
    color: #fff;
    border: 0;
    border-radius: 7px;
    background: var(--hrp-red);
}

.familier-fiche-fermer svg { width: 13px; height: 13px; display: block; }

.familier-fiche-corps { display: flex; flex-direction: column; gap: 10px; padding: 11px; }
.familier-fiche-haut { display: flex; gap: 11px; }

.familier-fiche-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 90px;
    height: 90px;
    border-radius: 9px;
    background: rgba(0, 0, 0, .22);
}

.familier-fiche-avatar img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }

.familier-fiche-stats { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.familier-fiche-niveau { font-size: 12px; text-align: center; }
.familier-fiche-niveau b { color: var(--hrp-yellow); }

.familier-fiche-jauge-bloc { display: flex; flex-direction: column; gap: 2px; }
.familier-fiche-jauge-nom { font-size: 10px; color: var(--hrp-muted); }

/* Jauge : la barre remplit, le texte se lit par-dessus. */
.familier-fiche-jauge {
    position: relative;
    height: 15px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .38);
    overflow: hidden;
}

.familier-fiche-jauge-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; transition: width .25s ease; }
.familier-fiche-jauge-fill.est-bonheur { background: #28b8d8; }
.familier-fiche-jauge-fill.est-experience { background: #8b5cf6; }
.familier-fiche-jauge-fill.est-energie { background: #52bc48; }

.familier-fiche-jauge-texte {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    line-height: 15px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}

.familier-fiche-infos {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 9px;
    font-size: 12px;
    color: var(--hrp-muted);
    border-top: 1px solid #2E334D;
}

.familier-fiche-infos b { color: #fff; }
.familier-fiche-proprio { font-size: 12px; color: var(--hrp-muted); }
.familier-fiche-proprio b { color: #fff; }

.familier-fiche-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 11px 11px;
}

.familier-fiche-btn {
    flex: 1 1 auto;
    padding: 8px 10px;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 0;
    border-radius: 8px;
    background: rgba(27, 34, 49, .82);
    transition: background .15s ease;
}

.familier-fiche-btn[hidden] { display: none; }
.familier-fiche-btn:hover { background: rgba(38, 49, 73, .92); }
.familier-fiche-btn:active { transform: translateY(1px); }
.familier-fiche-btn-jaune { color: #1b2130; background: var(--hrp-yellow); }
.familier-fiche-btn-jaune:hover { filter: brightness(1.06); background: var(--hrp-yellow); }

/* Plante-monstre : les jauges classiques ne s'appliquent pas. */
.familier-fiche.est-plante .familier-fiche-jauge-bloc,
.familier-fiche.est-plante .familier-fiche-infos [data-pet="scratched"] { display: none; }

/* ---------- Panneau de dressage (HTML dans components/hotel/dressage.php) ---------- */
.dressage {
    position: fixed;
    /* Ouvre au centre ; deplacable ensuite par l'en-tete (sans saut). */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 8700;
    display: flex;
    flex-direction: column;
    width: 300px;
    max-height: 88vh;
    font-family: Poppins, 'Segoe UI', sans-serif;
    color: #fff;
    background: #10141dcc;
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
    border: 2px solid #2E334D;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
    /* Fondu seul : surtout PAS d'animation sur transform, sinon elle ecrase
       le translate(-50%,-50%) du centrage (fill both). */
    animation: dressage-entree .16s ease-out both;
}

@keyframes dressage-entree {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dressage[hidden] { display: none; }

.dressage-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 11px 11px 14px;
    background: rgba(21, 26, 35, .6);
    border-bottom: 1px solid #2E334D;
    border-radius: 10px 10px 0 0;
    /* En-tete = poignee de deplacement. */
    cursor: move;
    user-select: none;
}

.dressage.is-dragging { animation: none; }

.dressage-titre { margin: 0; font-size: 15px; font-weight: 700; }

.dressage-fermer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    padding: 0;
    cursor: pointer;
    color: #fff;
    border: 0;
    border-radius: 7px;
    background: var(--hrp-red);
}

.dressage-fermer svg { width: 13px; height: 13px; display: block; }

.dressage-pet { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }

.dressage-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: rgba(0, 0, 0, .22);
}

.dressage-avatar img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.dressage-nom { font-size: 14px; font-weight: 700; }

.dressage-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 2px 14px 16px;
    overflow-y: auto;
}

/* Ordre appris = actif (jaune de la charte). */
.dressage-ordre {
    padding: 9px 8px;
    cursor: pointer;
    color: #1b2130;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    border: 0;
    border-radius: 9px;
    background: var(--hrp-yellow);
    transition: filter .15s ease, transform .1s ease;
}

.dressage-ordre:hover { filter: brightness(1.08); }
.dressage-ordre:active { transform: translateY(1px); }

/* Ordre pas encore appris = verrouille (grise, non cliquable). */
.dressage-ordre.est-verrouille {
    cursor: not-allowed;
    color: #7c869c;
    background: rgba(40, 48, 66, .6);
}

.dressage-ordre.est-verrouille:hover { filter: none; }

/* ---------- Fiche de groupe (HTML dans components/hotel/groupe.php) ---------- */
.groupe-info {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 8700;
    display: flex;
    flex-direction: column;
    width: 340px;
    max-width: calc(100vw - 24px);
    font-family: Poppins, 'Segoe UI', sans-serif;
    color: #fff;
    background: #10141dcc;
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
    border: 2px solid #2E334D;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
    /* Fondu seul (pas de transform) pour ne pas casser le centrage. */
    animation: dressage-entree .16s ease-out both;
}

.groupe-info[hidden] { display: none; }
.groupe-info.is-dragging { animation: none; }

.groupe-info-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 11px 11px 14px;
    background: rgba(21, 26, 35, .6);
    border-bottom: 1px solid #2E334D;
    border-radius: 10px 10px 0 0;
    cursor: move;
    user-select: none;
}

.groupe-info-fenetre-titre { margin: 0; font-size: 15px; font-weight: 700; }

.groupe-info-fermer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    padding: 0;
    cursor: pointer;
    color: #fff;
    border: 0;
    border-radius: 7px;
    background: var(--hrp-red);
}

.groupe-info-fermer svg { width: 13px; height: 13px; display: block; }

.groupe-info-corps { display: flex; gap: 14px; padding: 16px 14px; }

.groupe-info-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 66px;
    height: 66px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .22);
}

.groupe-info-badge img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.groupe-info-badge img[hidden] { display: none; }

.groupe-info-texte { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.groupe-info-titre { margin: 0; font-size: 17px; font-weight: 700; word-break: break-word; }

.groupe-info-desc {
    margin: 0;
    max-height: 140px;
    overflow-y: auto;
    color: var(--hrp-muted);
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.groupe-info-actions { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 16px; }

.groupe-info-btn {
    width: 100%;
    padding: 10px;
    cursor: pointer;
    color: #1b2130;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    border: 0;
    border-radius: 9px;
    background: var(--hrp-yellow);
    transition: filter .15s ease, background .15s ease, transform .1s ease;
}

.groupe-info-btn[hidden] { display: none; }
.groupe-info-btn:hover { filter: brightness(1.08); }
.groupe-info-btn:active { transform: translateY(1px); }

/* Boutons secondaires (Voir les membres, En attente, Gestion du metier). */
.groupe-info-btn-secondaire {
    color: #fff;
    font-weight: 600;
    background: rgba(27, 34, 49, .82);
}

.groupe-info-btn-secondaire:hover { filter: none; background: rgba(38, 49, 73, .92); }

/* Bouton d'adhesion : Quitter (rouge) et En attente (inerte). */
.groupe-info-btn-danger { color: #fff; background: var(--hrp-red); }
.groupe-info-btn.est-inerte { cursor: default; color: #8a93a8; background: rgba(40, 48, 66, .7); }
.groupe-info-btn.est-inerte:hover { filter: none; }

/* ---------- Gestion du metier (HTML dans components/hotel/metier.php) ---------- */
.metier {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 8700;
    display: flex;
    flex-direction: column;
    width: 560px;
    max-width: calc(100vw - 24px);
    max-height: 88vh;
    font-family: Poppins, 'Segoe UI', sans-serif;
    color: #fff;
    background: #10141dcc;
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
    border: 2px solid #2E334D;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: dressage-entree .16s ease-out both;
}

.metier[hidden] { display: none; }
.metier.is-dragging { animation: none; }

.metier-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 12px 12px 16px;
    background: rgba(21, 26, 35, .6);
    border-bottom: 1px solid #2E334D;
    border-radius: 10px 10px 0 0;
    cursor: move;
    user-select: none;
}

.metier-titre { margin: 0; font-size: 16px; font-weight: 700; }

.metier-fermer {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex: 0 0 auto; padding: 0;
    cursor: pointer; color: #fff; border: 0; border-radius: 7px; background: var(--hrp-red);
}

.metier-fermer svg { width: 14px; height: 14px; display: block; }

.metier-corps { padding: 14px 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }

.metier-erreur { margin: 0; padding: 8px 11px; color: #ffd7d9; font-size: 12px; background: rgba(226, 59, 67, .2); border: 1px solid rgba(226, 59, 67, .5); border-radius: 8px; }
.metier-chargement { margin: 0; text-align: center; color: var(--hrp-muted); }
.metier-contenu { display: flex; flex-direction: column; gap: 14px; }

.metier-resume { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; background: rgba(21, 26, 35, .5); border-radius: 9px; }
.metier-nom { font-size: 15px; font-weight: 700; }
.metier-desc { font-size: 12px; color: var(--hrp-muted); }

.metier-sous-titre { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--hrp-muted); text-transform: uppercase; letter-spacing: .3px; }
.metier-bloc { display: flex; flex-direction: column; }
.metier-economie-option { display: grid; grid-template-columns:minmax(0, 1fr) auto auto; align-items:center; gap:10px; padding:12px; border:1px solid rgba(247,181,0,.22); border-radius:10px; background:rgba(247,181,0,.07); cursor:pointer; }
.metier-economie-option > span { min-width:0; }
.metier-economie-option strong,.metier-economie-option small { display:block; }
.metier-economie-option strong { font-size:12px; color:#f4f7ff; }
.metier-economie-option small { margin-top:4px; color:var(--hrp-muted); font-size:10px; line-height:1.4; }
.metier-economie-option input { position:absolute; opacity:0; pointer-events:none; }
.metier-economie-option i { position:relative; width:42px; height:24px; border-radius:999px; background:#4b2630; transition:.18s; }
.metier-economie-option i::after { content:''; position:absolute; top:4px; left:4px; width:16px; height:16px; border-radius:50%; background:#ff7184; transition:.18s; }
.metier-economie-option input:checked + i { background:#185136; }
.metier-economie-option input:checked + i::after { left:22px; background:#48dc7d; }
.metier-economie-option input:disabled + i { opacity:.48; }
.metier-economie-option > b { min-width:58px; color:#ff91a0; font-size:10px; text-align:right; }
.metier-economie-option input:checked ~ b { color:#72e59b; }

.metier-grades { display: flex; flex-direction: column; gap: 6px; }

.metier-grade {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; font-size: 13px;
    background: rgba(27, 34, 49, .7); border-radius: 8px;
}

.metier-grade-nom { font-weight: 600; }
.metier-grade-droite { display: flex; align-items: center; gap: 8px; }
.metier-grade-salaire { color: var(--hrp-yellow); white-space: nowrap; }
.metier-grade-edit { gap: 6px; }

.metier-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; cursor: pointer; font-size: 13px;
    color: #1b2130; border: 0; border-radius: 6px; background: var(--hrp-yellow);
}
.metier-icone-suppr { color: #fff; background: var(--hrp-red); }
.metier-icone:hover { filter: brightness(1.08); }

.metier-readonly { margin: 8px 0 0; font-size: 11px; font-style: italic; color: var(--hrp-muted); }

.metier-form { display: flex; gap: 8px; }
.metier-input {
    flex: 1 1 auto; min-width: 0; padding: 8px 10px;
    color: #fff; font-family: inherit; font-size: 13px;
    background: rgba(10, 13, 19, .6); border: 1px solid #2E334D; border-radius: 8px;
}
.metier-input-court { flex: 0 0 84px; }
.metier-input::placeholder { color: #6c7a92; }
.metier-input:focus { outline: none; border-color: var(--hrp-yellow); }

.metier-btn {
    padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700;
    border: 0; border-radius: 8px; white-space: nowrap;
    transition: filter .15s ease, transform .1s ease;
}
.metier-btn:active { transform: translateY(1px); }
.metier-btn:hover { filter: brightness(1.08); }
.metier-btn-jaune { color: #1b2130; background: var(--hrp-yellow); }
.metier-btn-rouge { color: #fff; background: var(--hrp-red); }

.metier-membres { display: flex; flex-direction: column; gap: 6px; }

.metier-membre {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; font-size: 13px;
    background: rgba(27, 34, 49, .7); border-radius: 8px;
}

.metier-membre-nom { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metier-membre-salaire { color: var(--hrp-yellow); white-space: nowrap; font-size: 12px; }

.metier-select {
    padding: 6px 8px; color: #fff; font-family: inherit; font-size: 12px;
    background: rgba(10, 13, 19, .6); border: 1px solid #2E334D; border-radius: 7px;
}
.metier-select:disabled { opacity: .55; }

.metier-admin { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--hrp-muted); cursor: pointer; white-space: nowrap; }
.metier-admin.est-proprio { cursor: default; }
.metier-admin input { accent-color: var(--hrp-yellow); }

/* ---------- Fenetre des membres (HTML dans components/hotel/membres.php) ---------- */
.membres {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 8700;
    display: flex;
    flex-direction: column;
    width: 420px;
    max-width: calc(100vw - 24px);
    max-height: 86vh;
    font-family: Poppins, 'Segoe UI', sans-serif;
    color: #fff;
    background: #10141dcc;
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
    border: 2px solid #2E334D;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: dressage-entree .16s ease-out both;
}

.membres[hidden] { display: none; }
.membres.is-dragging { animation: none; }

.membres-entete {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 12px 12px 16px;
    background: rgba(21, 26, 35, .6);
    border-bottom: 1px solid #2E334D; border-radius: 10px 10px 0 0;
    cursor: move; user-select: none;
}

.membres-titre { margin: 0; font-size: 16px; font-weight: 700; }

.membres-fermer {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex: 0 0 auto; padding: 0;
    cursor: pointer; color: #fff; border: 0; border-radius: 7px; background: var(--hrp-red);
}
.membres-fermer svg { width: 14px; height: 14px; display: block; }

.membres-corps { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; overflow: hidden; }

.membres-haut { display: flex; gap: 12px; }
.membres-badge {
    display: flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; flex: 0 0 auto; border-radius: 10px; background: rgba(0, 0, 0, .22);
}
.membres-badge img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }

.membres-filtres { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.membres-recherche, .membres-select {
    width: 100%; padding: 9px 11px;
    color: #fff; font-family: inherit; font-size: 13px;
    background: rgba(10, 13, 19, .6); border: 1px solid #2E334D; border-radius: 8px;
}
.membres-recherche::placeholder { color: #6c7a92; }
.membres-recherche:focus, .membres-select:focus { outline: none; border-color: var(--hrp-yellow); }

.membres-liste { display: flex; flex-direction: column; gap: 7px; overflow-y: auto; min-height: 90px; }

.membres-membre {
    display: flex; align-items: center; gap: 11px;
    padding: 8px 11px; background: rgba(27, 34, 49, .7); border-radius: 9px;
}
.membres-membre.est-attente { border: 1px dashed rgba(255, 196, 49, .4); }

.membres-tete { width: 42px; height: 42px; flex: 0 0 auto; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; }
.membres-tete img { image-rendering: pixelated; margin-top: -33px; }

.membres-membre-infos { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.membres-membre-nom {
    align-self: flex-start; padding: 0; cursor: pointer;
    color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; text-align: left;
    background: none; border: 0;
}
.membres-membre-nom:hover { color: var(--hrp-yellow); }
.membres-membre-date { font-size: 11px; font-style: italic; color: var(--hrp-muted); }

.membres-membre-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.membres-couronne { color: var(--hrp-yellow); font-size: 16px; }

.membres-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; cursor: pointer; font-size: 14px; line-height: 1;
    border: 0; border-radius: 7px; transition: filter .15s ease, background .15s ease;
}
.membres-btn:hover { filter: brightness(1.1); }
.membres-btn-admin { color: #8a93a8; background: rgba(40, 48, 66, .8); }
.membres-btn-admin.est-actif { color: #1b2130; background: var(--hrp-yellow); }
.membres-btn-accept { color: #fff; background: #46a34a; }
.membres-btn-kick { color: #fff; background: var(--hrp-red); }

.membres-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.membres-info { font-size: 12px; color: var(--hrp-muted); text-align: center; flex: 1 1 auto; }

.membres-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 auto; padding: 0; cursor: pointer;
    color: #fff; border: 0; border-radius: 50%; background: #2a8fb0;
    transition: filter .15s ease, opacity .15s ease;
}
.membres-page-btn svg { width: 16px; height: 16px; }
.membres-page-btn:hover { filter: brightness(1.1); }
.membres-page-btn:disabled { opacity: .4; cursor: default; }

/* ---------- Outils de salle (HTML dans components/hotel/outils_salle.php) ---------- */
.outils-salle {
    position: fixed;
    left: 12px;
    /* Au-dessus de la barre d'outils principale du client. */
    bottom: 92px;
    z-index: 8400;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    font-family: Poppins, 'Segoe UI', sans-serif;
}

.outils-salle[hidden] { display: none; }

.outils-salle-dock,
.outils-salle-info {
    background: #10141dcc;
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
    border: 2px solid #2E334D;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.outils-salle-dock { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; }

/* Popup de zoom (curseur), ouvert par la loupe, a droite du dock. */
.outils-salle-zoom {
    position: absolute;
    left: calc(100% + 8px);
    top: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    white-space: nowrap;
    background: #10141dcc;
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
    border: 1px solid #2E334D;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .35);
    z-index: 5;
}
.outils-salle-zoom[hidden] { display: none; }
.outils-salle-zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    padding: 0;
    cursor: pointer;
    color: #c8d0dd;
    font-size: 14px;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    transition: background .12s ease, color .12s ease;
}
.outils-salle-zoom-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.outils-salle-zoom-range { width: 120px; accent-color: var(--hrp-yellow); cursor: pointer; }
.outils-salle-zoom-val { min-width: 40px; color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* Le dock d'outils suit le chevron des jauges (logo hobboRP) : deplie => visible,
   replie => masque. Voir #dock-stats-toggle dans assets/js/hotel.js. */
body:not(.dock-stats-open) .outils-salle { display: none; }

.outils-salle-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    cursor: pointer;
    color: #c8d0dd;
    font-size: 17px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    transition: background .15s ease, color .15s ease;
}

.outils-salle-icone i { line-height: 1; }
.outils-salle-icone:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.outils-salle-replier:hover { color: var(--hrp-yellow); }

.outils-salle-info {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 360px;
    padding: 8px 14px;
    color: #fff;
    transition: opacity .2s ease, transform .2s ease;
}

/* Bandeau replie : on le fait disparaitre sans decaler le dock. */
.outils-salle-info.est-replie { opacity: 0; transform: translateX(-10px); pointer-events: none; visibility: hidden; }

.outils-salle-info-icone { color: var(--hrp-yellow); font-size: 15px; flex: 0 0 auto; }
.outils-salle-nom { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outils-salle-sep { width: 1px; height: 16px; flex: 0 0 auto; background: #2E334D; }

.outils-salle-proprio {
    padding: 0;
    cursor: pointer;
    color: #c8d0dd;
    font-family: inherit;
    font-size: 12px;
    white-space: nowrap;
    background: none;
    border: 0;
}

.outils-salle-proprio:hover { color: var(--hrp-yellow); }

/* ---------- Barre principale du bas (HTML dans components/hotel/barre.php) ---------- */
.barre {
    /* Barre flottante : detachee des bords (comme la barre native). */
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 8300;
    font-family: Poppins, 'Segoe UI', sans-serif;
}

.barre[hidden] { display: none; }

.barre-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 12px;
    background: #10141dcc;
    -webkit-backdrop-filter: blur(6px) saturate(160%);
    backdrop-filter: blur(6px) saturate(160%);
    border: 2px solid #2E334D;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 5, 16, .5), inset 0 1px rgba(255, 255, 255, .06);
}

.barre-zone { display: flex; align-items: center; gap: 8px; }
.barre-gauche { flex: 0 0 auto; }
.barre-centre { position: relative; flex: 1 1 auto; justify-content: center; min-width: 0; }
.barre-droite { flex: 0 0 auto; }

.barre-centre.est-indispo .barre-chat { visibility: hidden; }

/* Icones : tuiles 60x45, couleurs + glyphes d'origine (assets/img/toolbar). */
.barre-icone {
    position: relative;
    width: 60px;
    height: 45px;
    padding: 0;
    cursor: pointer;
    border: 0;
    border-radius: 12px;
    background-color: hsl(222, 24%, 45%);
    background-repeat: no-repeat;
    background-position: center;
    transition: filter .12s ease, transform .12s ease;
}

.barre-icone[hidden] { display: none; }
.barre-icone:hover { filter: brightness(1.08); transform: translateY(-2px); }
.barre-icone:active { filter: brightness(.94); transform: translateY(1px); }

.barre-ic-habbo { background-color: #93AECA; background-image: url('../img/toolbar/icons/habbo.png'); }
.barre-ic-house { background-color: #93AECA; background-image: url('../img/toolbar/icons/house.png'); }
.barre-ic-rooms { background-color: #65AF64; background-image: url('../img/toolbar/icons/rooms.png'); }
.barre-ic-catalog { background-color: #EEB80E; background-image: url('../img/toolbar/icons/catalog.png'); }
.barre-ic-inventory { background-color: #EE867B; background-image: url('../img/toolbar/icons/inventory.png'); }
.barre-ic-taxi {
    background-color: #8d79c9;
    background-image: url('../img/taxi.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 32px auto;
}

/* Carte des destinations du taxi — fenêtre HabboRP. */
.taxi-map-overlay {
    position: fixed;
    z-index: 10040;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    font-family: "Poppins", "Segoe UI", sans-serif;
}
.taxi-map-overlay[hidden] { display: none; }
.taxi-map-dialog {
    width: min(700px, calc(100vw - 28px));
    height: min(620px, calc(100vh - 28px));
    max-height: min(680px, calc(100vh - 28px));
    overflow: hidden;
    color: #fff;
    border: 2px solid #2e3a57;
    border-radius: 11px;
    background: #10151fe0;
    box-shadow: 0 24px 55px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(8px) saturate(135%);
    pointer-events: auto;
}
.taxi-map-header {
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    cursor: move;
    user-select: none;
}
.taxi-map-brand { display: flex; align-items: center; gap: 12px; }
.taxi-map-brand img { width: 126px; height: auto; }
.taxi-map-brand span { width: 1px; height: 25px; background: rgba(255,255,255,.13); }
.taxi-map-brand strong { color: #dce0e8; font-size: 14px; font-weight: 800; }
.taxi-map-hero { position: relative; height: 127px; border-bottom: 1px solid #202938; background: #202734 url('../img/download-hero-background.png') center 58% / cover no-repeat; }
.taxi-map-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.48); pointer-events: none; }
.taxi-map-filters { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; display: flex; align-items: flex-end; justify-content: center; gap: 7px; padding: 0 20px; }
.taxi-map-filters button { min-height: 39px; padding: 9px 18px; border: 1px solid #3b4658; border-bottom: 0; border-radius: 7px 7px 0 0; color: #e4e7ec; background: rgba(37,44,54,.94); box-shadow: 0 -2px 8px rgba(0,0,0,.33); font: 700 12px Poppins; cursor: pointer; }
.taxi-map-filters button.is-active { color: #171a20; border-color: #e5b600; background: #ffca18; }
.taxi-map-body { display:flex; min-height:0; height:calc(100% - 193px); flex-direction:column; padding:17px; }
.taxi-map-controls { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 12px; }
.taxi-map-controls label { display: flex; height: 42px; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #303d57; border-radius: 9px; background: rgba(8,13,22,.7); }
.taxi-map-controls label i { color: #8793a6; font-size: 18px; }
.taxi-map-controls input { width: 100%; border: 0; outline: 0; color: #fff; background: transparent; font: 500 11px Poppins; }
.taxi-map-controls input::placeholder { color: #758095; }
.taxi-map-list { display: grid; min-height:0; max-height:none; flex:1 1 auto; align-content:start; gap: 8px; overflow-y: auto; padding-right: 5px; scrollbar-width: thin; scrollbar-color: #ffc431 transparent; }
.taxi-map-list::-webkit-scrollbar { width: 5px; }
.taxi-map-list::-webkit-scrollbar-thumb { border-radius: 10px; background: #ffc431; }
.taxi-list-separator { display: flex; min-height: 18px; align-items: center; gap: 9px; color: #ffc431; font-size: 10px; font-weight: 800; }
.taxi-list-separator::before,
.taxi-list-separator::after { height: 1px; content: ""; background: rgba(255,196,49,.4); }
.taxi-list-separator::before { width: 36px; flex: 0 0 36px; }
.taxi-list-separator::after { flex: 1; }
.taxi-list-separator span { flex: 0 0 auto; }
.taxi-destination-card { display: grid; position: relative; z-index: 1; grid-template-columns: 43px minmax(0,1fr) 37px; align-items: center; gap: 10px; min-height: 62px; padding: 8px 9px; border: 1px solid #303b51; border-radius: 9px; background: rgba(29,36,49,.8); transition: border-color .15s, background .15s, box-shadow .15s; }
.taxi-destination-card:hover { z-index: 3; border-color: rgba(255,196,49,.75); background: rgba(32,40,54,.98); box-shadow: 0 7px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.035); }
.taxi-destination-icon { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(255,255,255,.035); border-radius: 8px; background: #101722; }
.taxi-destination-icon img { display: block; width: 34px; height: 34px; object-fit: contain; }
.taxi-destination-copy { display: grid; min-width: 0; align-content: center; gap: 5px; }
.taxi-destination-title { display: flex; min-width: 0; min-height: 18px; align-items: center; gap: 7px; }
.taxi-destination-title small { flex: 0 0 auto; color: #ffc431; font-size: 11px; line-height: 1; font-weight: 900; }
.taxi-destination-title strong { overflow: hidden; color: #fff; font-size: 14px; line-height: 1.25; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.taxi-destination-meta { display: flex; min-width: 0; min-height: 21px; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; color: #c5ccd8; font-size: 9px; }
.taxi-destination-meta b { display: inline-flex; box-sizing: border-box; min-width: 0; height: 21px; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 0 7px; border: 1px solid rgba(255,255,255,.055); border-radius: 5px; background: #111824; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); font-weight: 700; line-height: 1; }
.taxi-destination-meta b:first-child { color: #ffd34f; }
.taxi-destination-meta img { display: block; width: auto; max-width: 16px; height: 10px; flex: 0 0 auto; object-fit: contain; }
.taxi-favorite { display: inline-grid; width: 24px; height: 21px; flex: 0 0 24px; place-items: center; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.055); border-radius: 5px; background: #111824; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.taxi-favorite img { width: 14px; max-width: none; height: 14px; opacity: .36; filter: grayscale(1); transition: filter .15s, opacity .15s, transform .15s; }
.taxi-favorite:hover { border-color: rgba(255,196,49,.5); background: #1a2331; transform: translateY(-1px); }
.taxi-favorite:hover img { opacity: .68; }
.taxi-favorite.is-favorite { border-color: rgba(255,196,49,.34); background: rgba(255,196,49,.1); }
.taxi-favorite.is-favorite img { opacity: 1; filter: none; }
.taxi-favorite.is-favorite:hover img { transform: scale(1.08); }
.taxi-destination-card > button { display: grid; width: 37px; height: 37px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: #111824; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); cursor: pointer; }
.taxi-destination-card > button img { display: block; width: 20px; height: 20px; object-fit: contain; }
.taxi-destination-card > button:hover { background: #202938; }
.taxi-map-empty { margin: 18px 0 5px; color: #8995a8; font-size: 11px; text-align: center; }
.taxi-map-loading { display: flex; min-height: 120px; align-items: center; justify-content: center; gap: 10px; color: #9ba6b8; font-size: 11px; }
.taxi-map-loading i { width: 18px; height: 18px; border: 3px solid rgba(255,196,49,.22); border-top-color: #ffc431; border-radius: 50%; animation: taxi-map-spin .7s linear infinite; }
@keyframes taxi-map-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
    .taxi-map-hero { height: 108px; }
    .taxi-map-body { height: calc(100% - 174px); padding: 12px; }
    .taxi-map-filters { padding: 0 10px; }
    .taxi-map-filters button { min-height: 35px; flex: 1; padding-inline: 8px; }
    .taxi-map-brand img { width: 108px; }
    .taxi-destination-card { grid-template-columns: 43px minmax(0,1fr) 37px; }
}
.barre-moi-support {
    display: grid;
    place-items: center;
    color: #172238;
    background-color: #99D5DF;
    font-size: 27px;
}
.barre-moi-support.has-unanswered { animation: staffSupportPulse 1.8s ease-in-out infinite; }
.staff-support-count { color: #fff; background: var(--hrp-red); box-shadow: 0 2px 7px rgba(0, 0, 0, .4); }
.barre-ic-friends { background-color: #9180FF; background-image: url('../img/toolbar/icons/friend_all.png'); }
.barre-ic-message { background-color: #3C90E6; background-image: url('../img/toolbar/icons/message.png'); }
.barre-ic-phone {
    display: grid;
    place-items: center;
    color: #fff;
    background-color: #3c90e6;
}
.barre-ic-estate-return {
    display: grid;
    place-items: center;
    color: #172238;
    background-color: #ffc431;
}
.barre-ic-estate-return i {
    font-size: 29px;
    line-height: 1;
    filter: drop-shadow(0 2px 1px rgba(255, 255, 255, .28));
}
.barre-ic-phone i {
    font-size: 31px;
    line-height: 1;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .35));
}

/* ---------- HBPHONE ---------- */
.hbphone {
    position: fixed;
    z-index: 12100;
    right: 22px;
    bottom: 82px;
    width: min(235px, 24vw);
    aspect-ratio: 234.62 / 484.45;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .55));
    transform-origin: right bottom;
}
.hbphone:not([hidden]) {
    animation: hbphoneOpen .32s cubic-bezier(.2, .9, .25, 1.15) both;
}
.hbphone.is-closing {
    pointer-events: none;
    animation: hbphoneClose .25s cubic-bezier(.55, 0, .85, .35) both;
}
@keyframes hbphoneOpen {
    from { opacity: 0; transform: translate(22px, 38px) scale(.72); }
    to { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes hbphoneClose {
    from { opacity: 1; transform: translate(0, 0) scale(1); }
    to { opacity: 0; transform: translate(24px, 42px) scale(.68); }
}
.hbphone[hidden],
body:not(.game-mode) .hbphone,
body.hotel-disconnected .hbphone { display: none; }
body:not(.game-mode) .hbphone-message-preview,
body.hotel-disconnected .hbphone-message-preview,
body:not(.game-mode) .hbphone-notification-banner,
body.hotel-disconnected .hbphone-notification-banner { display: none !important; }
.hbphone-screen {
    position: absolute;
    z-index: 2;
    inset: 9px 12px;
    overflow: hidden;
    border-radius: clamp(13px, 2.5vw, 26px);
    clip-path: inset(0 round clamp(13px, 2.5vw, 26px));
    background: #10151d;
    filter: brightness(var(--hbphone-brightness, 1));
    transition: filter .18s ease;
}
.hbphone-screen img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}
.hbphone-wallpaper {
    position: absolute;
    z-index: 0;
    inset: 0;
}
.hbphone-view {
    position: absolute;
    z-index: 1;
    inset: 0;
    color: #fff;
    font-family: Poppins, 'Segoe UI', sans-serif;
}
.hbphone-view[hidden] { display: none; }
.hbphone-lockscreen.is-unlocking {
    z-index: 3;
    pointer-events: none;
    animation: hbphoneUnlockAway .34s cubic-bezier(.35, .05, .2, 1) both;
}
.hbphone-home.is-entering {
    animation: hbphoneHomeEnter .36s cubic-bezier(.15, .8, .2, 1) both;
}
.hbphone-home.is-locking {
    pointer-events: none;
    animation: hbphoneHomeLock .3s cubic-bezier(.45, 0, .75, .25) both;
}
.hbphone-lockscreen.is-lock-entering {
    z-index: 3;
    animation: hbphoneLockEnter .34s cubic-bezier(.15, .8, .2, 1) both;
}
.hbphone-home.is-entering .hbphone-app {
    animation: hbphoneAppEnter .34s cubic-bezier(.15, .8, .2, 1) both;
}
.hbphone-home.is-entering .hbphone-app:nth-child(2) { animation-delay: .025s; }
.hbphone-home.is-entering .hbphone-app:nth-child(3) { animation-delay: .05s; }
.hbphone-home.is-entering .hbphone-app:nth-child(4) { animation-delay: .075s; }
.hbphone-home.is-entering .hbphone-app:nth-child(5) { animation-delay: .1s; }
.hbphone-home.is-entering .hbphone-app:nth-child(6) { animation-delay: .125s; }
.hbphone-home.is-entering .hbphone-app:nth-child(7) { animation-delay: .15s; }
@keyframes hbphoneUnlockAway {
    from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    to { opacity: 0; transform: translateY(-22%) scale(1.06); filter: blur(5px); }
}
@keyframes hbphoneHomeEnter {
    from { opacity: 0; transform: scale(.92); filter: blur(5px); }
    to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes hbphoneAppEnter {
    from { opacity: 0; transform: translateY(13px) scale(.82); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hbphoneHomeLock {
    from { opacity: 1; transform: scale(1); filter: blur(0); }
    to { opacity: 0; transform: scale(.9); filter: blur(5px); }
}
@keyframes hbphoneLockEnter {
    from { opacity: 0; transform: translateY(10%) scale(.94); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.hbphone-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 18px;
    text-align: center;
    background: linear-gradient(160deg, rgba(8, 11, 20, .7), rgba(21, 10, 38, .82));
    backdrop-filter: blur(8px);
}
.hbphone-welcome-logo {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 20px;
    color: #17191f;
    background: #f3be00;
    box-shadow: 0 10px 28px rgba(243, 190, 0, .28);
}
.hbphone-welcome-logo i { font-size: 36px; }
.hbphone-welcome small { font-size: 11px; opacity: .72; }
.hbphone-welcome strong { margin-top: 2px; font-size: 26px; letter-spacing: -.8px; }
.hbphone-welcome p { margin: 18px 0 24px; font-size: 10px; line-height: 1.55; opacity: .78; }
.hbphone-welcome button {
    width: 100%;
    padding: 11px;
    border: 0;
    border-radius: 13px;
    color: #15171d;
    background: #f3be00;
    font: 700 11px Poppins, sans-serif;
    cursor: pointer;
}
.hbphone-lockscreen {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .08), rgba(0, 0, 0, .16));
}
.hbphone-no-service {
    color: #fff;
    background:
        radial-gradient(circle at 88% 4%, rgba(255, 196, 0, .13), transparent 30%),
        #0c0e1b;
}
.hbphone-no-service .hbphone-jaune-error { inset: 30px 10px 32px; }
.hbphone-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 15px 0;
    font-size: 9px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}
.hbphone-status span { display: flex; align-items: center; gap: 3px; }
.hbphone-status .hbphone-network { gap: 3px; }
.hbphone-status .hbphone-network i { order: 1; }
.hbphone-status .hbphone-network em { order: 2; }
.hbphone-status .hbphone-network small { order: 3; }
.hbphone-status .hbphone-status-right { gap: 5px; }
.hbphone-status em { margin-right: 1px; font-size: 8px; font-style: normal; font-weight: 700; }
.hbphone-status small { font-size: 7px; font-weight: 800; }
.hbphone-status i { font-size: 11px; }
.hbphone-status b {
    padding: 1px 3px;
    border-radius: 3px;
    color: #222;
    background: #fff;
    font-size: 7px;
}
.hbphone-lock-clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 48px;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .65);
}
.hbphone-lock-clock time { font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: -2px; }
.hbphone-lock-clock span { margin-top: 7px; font-size: 11px; text-transform: capitalize; }
.hbphone-lock-notifications {
    position: absolute;
    z-index: 3;
    top: 147px;
    bottom: 61px;
    left: 13px;
    right: 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y proximity;
    scrollbar-width: none;
}
.hbphone-lock-notifications[hidden] { display: none; }
.hbphone-lock-notifications::-webkit-scrollbar { display: none; }
.hbphone-lock-notification {
    flex: 0 0 49px;
    min-height: 49px;
    box-sizing: border-box;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    color: #fff;
    background: rgba(25,27,40,.68);
    backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform .15s ease, background .15s ease;
}
.hbphone-lock-notification:hover { background: rgba(35,38,54,.82); transform: translateY(-1px); }
.hbphone-lock-notification:active { transform: scale(.985); }
.hbphone-lock-notification > i,
.hbphone-lock-notification > img {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 9px;
}
.hbphone-lock-notification > i {
    display: grid;
    place-items: center;
    color: #171717;
    background: #ffc400;
    font-size: 17px;
}
.hbphone-lock-notification > img {
    object-fit: contain;
    image-rendering: pixelated;
    background: linear-gradient(145deg, #f4c400, #e06e31);
}
.hbphone-lock-notification > span { min-width: 0; flex: 1; }
.hbphone-lock-notification strong,
.hbphone-lock-notification small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hbphone-lock-notification strong { font-size: 9px; }
.hbphone-lock-notification small { margin-top: 2px; color: rgba(255,255,255,.72); font-size: 8px; }
.hbphone-lock-notification time { align-self: flex-start; color: rgba(255,255,255,.52); font-size: 7px; }
.hbphone-message-preview {
    position: fixed;
    z-index: 12150;
    right: 20px;
    bottom: 82px;
    width: min(310px, calc(100vw - 28px));
    min-height: 70px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    cursor: pointer;
    opacity: 0;
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    background: rgba(18,21,31,.9);
    backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
    transform: translateY(18px) scale(.96);
    transition: opacity .2s ease, transform .28s cubic-bezier(.2,.85,.2,1);
}
.hbphone-message-preview.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
.hbphone-message-preview img {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 12px;
    background: linear-gradient(145deg, #f4c400, #e06e31);
}
.hbphone-message-preview span { min-width: 0; flex: 1; }
.hbphone-message-preview strong,
.hbphone-message-preview small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hbphone-message-preview strong { font-size: 12px; }
.hbphone-message-preview small { margin-top: 4px; color: rgba(255,255,255,.7); font-size: 10px; }
.hbphone-message-preview time { align-self: flex-start; color: rgba(255,255,255,.5); font-size: 8px; }
.hbphone-notification-banner {
    --hbphone-banner-offset: 0px;
    position: absolute;
    z-index: 80;
    top: 25px;
    left: 10px;
    right: 10px;
    min-height: 48px;
    box-sizing: border-box;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    cursor: pointer;
    touch-action: none;
    opacity: 0;
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 13px;
    background: rgba(21,23,35,.9);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 8px 22px rgba(0,0,0,.38);
    transform: translateY(calc(-70px + var(--hbphone-banner-offset)));
    transition: opacity .18s ease, transform .28s cubic-bezier(.2,.85,.2,1);
}
.hbphone-notification-banner.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(var(--hbphone-banner-offset));
}
.hbphone-notification-banner.is-dismissing {
    transform: translateY(-70px);
}
.hbphone-notification-banner img {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 9px;
    background: linear-gradient(145deg, #f4c400, #e06e31);
}
.hbphone-notification-banner span { min-width: 0; flex: 1; }
.hbphone-notification-banner strong,
.hbphone-notification-banner small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hbphone-notification-banner strong { font-size: 9px; }
.hbphone-notification-banner small {
    margin-top: 2px;
    color: rgba(255,255,255,.72);
    font-size: 8px;
}
.hbphone-notification-banner time {
    align-self: flex-start;
    color: rgba(255,255,255,.52);
    font-size: 7px;
}
.hbphone-unlock {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
    touch-action: none;
    user-select: none;
}
.hbphone-unlock span,
.hbphone-home-bar {
    width: 72px;
    height: 5px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.hbphone-unlock small { font-size: 8px; text-shadow: 0 1px 3px #000; }
.hbphone-lockscreen.is-dragging { transition: none; }
.hbphone-lockscreen.is-drag-reset {
    transition: transform .22s ease, opacity .22s ease;
}
.hbphone-home { background: rgba(4, 6, 12, .08); }
.hbphone-apps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px 9px;
    padding: 30px 13px 50px;
}
.hbphone-app {
    min-width: 0;
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    font: 500 7px Poppins, sans-serif;
    text-shadow: 0 1px 3px #000;
    cursor: pointer;
}
.hbphone-app img {
    width: 42px;
    height: 42px;
    margin: 0 auto 4px;
    border-radius: 11px;
    object-fit: contain;
}
.hbphone-app span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hbphone-app.is-unavailable {
    cursor: not-allowed;
    opacity: .48;
    filter: grayscale(1);
}
.hbphone-app.is-unavailable img { filter: grayscale(1) brightness(.8); }
.hbphone-settings {
    background: rgba(12, 16, 25, .94);
    backdrop-filter: blur(9px);
}
.hbphone-settings > .hbphone-app-status {
    height: 25px;
    padding: 10px 15px 0;
}
.hbphone-settings.is-app-entering {
    animation: hbphoneAppScreenIn .3s cubic-bezier(.2, .8, .2, 1) both;
}
.hbphone-settings.is-app-leaving {
    pointer-events: none;
    animation: hbphoneAppScreenOut .24s cubic-bezier(.4, 0, .8, .25) both;
}
@keyframes hbphoneAppScreenIn {
    from { opacity: 0; transform: translateX(24%) scale(.97); filter: blur(3px); }
    to { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
}
@keyframes hbphoneAppScreenOut {
    from { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
    to { opacity: 0; transform: translateX(24%) scale(.97); filter: blur(3px); }
}
.hbphone-settings-header {
    display: flex;
    align-items: center;
    height: 45px;
    padding: 10px 13px 5px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.hbphone-settings-header strong { font-size: 13px; }
.hbphone-settings-content {
    height: calc(100% - 67px);
    padding: 10px 9px 22px;
    overflow-y: auto;
    scrollbar-width: none;
}
.hbphone-settings-content::-webkit-scrollbar { display: none; }
.hbphone-settings-panel.is-panel-entering {
    animation: hbphoneSettingsPanelIn .25s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes hbphoneSettingsPanelIn {
    from { opacity: 0; transform: translateX(13px); }
    to { opacity: 1; transform: translateX(0); }
}
.hbphone-settings-groups {
    overflow: hidden;
    margin-bottom: 11px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 11px;
    background: rgba(255, 255, 255, .055);
}
.hbphone-settings-groups button {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) 13px;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 9px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.hbphone-settings-groups button:last-child { border-bottom: 0; }
.hbphone-settings-groups button > i:first-child {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    color: #161922;
    background: #f3be00;
    font-size: 16px;
}
.hbphone-settings-groups button > i:last-child { font-size: 11px; opacity: .45; }
.hbphone-settings-groups button.is-premium-locked {
    cursor: not-allowed;
    opacity: .5;
}
.hbphone-settings-groups button.is-premium-locked > i:last-child::before {
    content: "\eb1e";
}
.hbphone-settings-groups span { min-width: 0; }
.hbphone-settings-groups strong,
.hbphone-settings-groups small { display: block; }
.hbphone-settings-groups strong { font-size: 10px; }
.hbphone-settings-groups small {
    margin-top: 1px;
    overflow: hidden;
    font-size: 8px;
    opacity: .52;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hbphone-settings-upcoming button {
    cursor: not-allowed;
    opacity: .42;
}
.hbphone-settings-about {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 11px;
    background: rgba(255, 255, 255, .055);
}
.hbphone-settings-about div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: 9px;
}
.hbphone-settings-about div:last-child { border-bottom: 0; }
.hbphone-settings-about span { opacity: .6; }
.hbphone-settings-about strong {
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hbphone-settings fieldset {
    margin: 0 0 11px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 11px;
    background: rgba(255, 255, 255, .055);
}
.hbphone-settings legend {
    padding: 0 5px;
    color: #f3be00;
    font-size: 10px;
    font-weight: 700;
}
.hbphone-wallpaper-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 7px;
    margin-bottom: 9px;
}
.hbphone-wallpaper-list label { min-width: 0; cursor: pointer; }
.hbphone-wallpaper-list input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.hbphone-wallpaper-list img {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    border: 2px solid transparent;
    border-radius: 8px;
    object-fit: cover;
}
.hbphone-wallpaper-list input:checked + img {
    border-color: #f3be00;
    box-shadow: 0 0 0 2px rgba(243, 190, 0, .2);
}
.hbphone-wallpaper-list span {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    font-size: 8px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hbphone.is-ui-large .hbphone-status {
    padding: 16px 19px 0;
    font-size: 11px;
}
.hbphone.is-ui-large .hbphone-status em { font-size: 10px; }
.hbphone.is-ui-large .hbphone-status i { font-size: 13px; }
.hbphone.is-ui-large .hbphone-lock-clock time { font-size: 58px; }
.hbphone.is-ui-large .hbphone-lock-clock span { font-size: 13px; }
.hbphone.is-ui-large .hbphone-unlock small { font-size: 10px; }
.hbphone.is-ui-large .hbphone-apps {
    gap: 19px 12px;
    padding: 38px 17px 56px;
}
.hbphone.is-ui-large .hbphone-app { font-size: 9px; }
.hbphone.is-ui-large .hbphone-app img {
    width: 51px;
    height: 51px;
    margin-bottom: 6px;
    border-radius: 13px;
}
.hbphone.is-ui-large .hbphone-settings-header {
    height: 54px;
    padding: 14px 17px 7px;
}
.hbphone.is-ui-large .hbphone-settings-header strong { font-size: 16px; }
.hbphone.is-ui-large .hbphone-settings-content {
    height: calc(100% - 54px);
    padding: 14px 13px 29px;
}
.hbphone.is-ui-large .hbphone-settings-groups { margin-bottom: 15px; border-radius: 14px; }
.hbphone.is-ui-large .hbphone-settings-groups button {
    grid-template-columns: 34px minmax(0, 1fr) 15px;
    gap: 9px;
    padding: 12px;
}
.hbphone.is-ui-large .hbphone-settings-groups button > i:first-child {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 19px;
}
.hbphone.is-ui-large .hbphone-settings-groups strong { font-size: 12px; }
.hbphone.is-ui-large .hbphone-settings-groups small { margin-top: 2px; font-size: 9px; }
.hbphone.is-ui-large .hbphone-settings fieldset { padding: 13px; border-radius: 14px; }
.hbphone.is-ui-large .hbphone-settings legend { font-size: 12px; }
.hbphone.is-ui-large .hbphone-wallpaper-list { gap: 18px 9px; margin-bottom: 14px; }
.hbphone.is-ui-large .hbphone-wallpaper-list span { margin-top: 4px; font-size: 9px; }
.hbphone.is-ui-large .hbphone-settings-field span,
.hbphone.is-ui-large .hbphone-color-field span,
.hbphone.is-ui-large .hbphone-scale-field span { font-size: 11px; }
.hbphone.is-ui-large .hbphone-settings-field > input { padding: 9px; font-size: 11px; }
.hbphone.is-ui-large .hbphone-settings-save { padding: 11px; font-size: 12px; }
.hbphone.is-ui-large .hbphone-settings-feedback { padding-top: 7px; font-size: 10px; }
.hbphone.is-ui-large .hbphone-settings-about div { padding: 14px 13px; font-size: 11px; }
.hbphone.is-ui-large .hbphone-security-card { padding: 23px 15px; }
.hbphone.is-ui-large .hbphone-security-card > i { font-size: 45px; }
.hbphone.is-ui-large .hbphone-security-card > strong { font-size: 15px; }
.hbphone.is-ui-large .hbphone-security-card p,
.hbphone.is-ui-large .hbphone-switch { font-size: 11px; }
.hbphone.is-ui-large .hbphone-security-card > button { padding: 10px; font-size: 11px; }
.hbphone.is-ui-large .hbphone-pin-unlock { padding-inline: 31px; }
.hbphone.is-ui-large .hbphone-pin-unlock > strong { font-size: 14px; }
.hbphone.is-ui-large .hbphone-pin-pad button {
    width: 60px;
    height: 60px;
}
.hbphone.is-ui-large .hbphone-pin-pad button span { font-size: 21px; }
.hbphone.is-ui-small .hbphone-app img { width: 36px; height: 36px; }
.hbphone.is-ui-small .hbphone-app { font-size: 6px; }
.hbphone-settings-field span,
.hbphone-color-field span {
    font-size: 9px;
    font-weight: 600;
}
.hbphone-settings-field > input {
    width: 100%;
    margin-top: 4px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 7px;
    color: #fff;
    background: rgba(0, 0, 0, .28);
    font-size: 9px;
}
.hbphone-color-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 5px 0;
}
.hbphone-color-field input {
    width: 38px;
    height: 25px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
}
.hbphone-scale-field {
    display: block;
    margin-top: 10px;
}
.hbphone-scale-field span {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
}
.hbphone-scale-field input {
    width: 100%;
    margin-top: 7px;
    accent-color: #f3be00;
}
.hbphone-security-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 11px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 12px;
    background: rgba(255, 255, 255, .055);
    text-align: center;
}
.hbphone-security-card > i {
    color: #f3be00;
    font-size: 38px;
}
.hbphone-security-card > strong { margin-top: 8px; font-size: 13px; }
.hbphone-security-card p { font-size: 9px; line-height: 1.5; opacity: .65; }
.hbphone-security-card > input {
    width: 100%;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
    color: #fff;
    background: rgba(0, 0, 0, .25);
    font-size: 15px;
    letter-spacing: 8px;
    text-align: center;
}
.hbphone-security-card > button {
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    border: 0;
    border-radius: 8px;
    color: #191b21;
    background: #f3be00;
    font: 700 9px Poppins, sans-serif;
    cursor: pointer;
}
.hbphone-security-card > button.is-danger { color: #fff; background: #b72a2a; }
.hbphone-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 12px 0;
    font-size: 9px;
}
.hbphone-switch input { position: absolute; opacity: 0; }
.hbphone-switch i {
    position: relative;
    width: 34px;
    height: 19px;
    border-radius: 20px;
    background: #555;
    transition: background .2s;
}
.hbphone-switch i::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s;
}
.hbphone-switch input:checked + i { background: #35bd57; }
.hbphone-switch input:checked + i::after { transform: translateX(15px); }
.hbphone-pin-unlock {
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 14px;
    background: linear-gradient(160deg, rgba(48, 8, 70, .62), rgba(124, 16, 96, .48));
    backdrop-filter: blur(15px) brightness(.72);
}
.hbphone-pin-unlock.is-pin-entering {
    animation: hbphonePinEnter .34s cubic-bezier(.18, .82, .2, 1) both;
}
.hbphone-pin-unlock.is-pin-leaving {
    pointer-events: none;
    animation: hbphonePinLeave .26s cubic-bezier(.45, 0, .8, .25) both;
}
.hbphone-pin-unlock.is-pin-error {
    animation: hbphonePinError .32s ease;
}
@keyframes hbphonePinEnter {
    from { opacity: 0; transform: translateY(14%) scale(.94); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes hbphonePinLeave {
    from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    to { opacity: 0; transform: translateY(10%) scale(.96); filter: blur(4px); }
}
@keyframes hbphonePinError {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}
.hbphone-pin-unlock > i { color: #fff; font-size: 15px; }
.hbphone-pin-unlock > strong { margin-top: 29px; font-size: 12px; font-weight: 500; }
.hbphone-pin-dots { display: flex; gap: 11px; margin: 10px 0 28px; }
.hbphone-pin-dots i {
    width: 7px;
    height: 7px;
    border: 1px solid #fff;
    border-radius: 50%;
}
.hbphone-pin-dots i.is-filled { background: #fff; }
.hbphone-pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px 5px;
    width: 100%;
}
.hbphone-pin-pad button {
    width: 51px;
    height: 51px;
    justify-self: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    font-family: Poppins, sans-serif;
    cursor: pointer;
}
.hbphone-pin-pad button span { display: block; font-size: 18px; line-height: 19px; }
.hbphone-pin-pad button small { display: block; min-height: 7px; font-size: 6px; letter-spacing: 1px; }
.hbphone-pin-pad button[data-hbphone-pin-cancel] {
    border-radius: 0;
    background: transparent;
    font-size: 7px;
}
.hbphone-pin-pad button[data-hbphone-pin-delete] { background: transparent; font-size: 16px; }
.hbphone-pin-unlock > small { min-height: 14px; margin-top: 8px; color: #ff7373; font-size: 7px; }
.hbphone-lockscreen.is-face-scanning::after {
    content: "Reconnaissance…";
    position: absolute;
    left: 50%;
    top: 58%;
    padding: 7px 12px;
    border-radius: 12px;
    color: #fff;
    background: rgba(0, 0, 0, .6);
    font-size: 8px;
    transform: translate(-50%, -50%);
    animation: hbphoneFacePulse .65s ease infinite alternate;
}
@keyframes hbphoneFacePulse {
    from { opacity: .55; transform: translate(-50%, -50%) scale(.96); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}
.hbphone-settings-save {
    width: 100%;
    padding: 8px;
    border: 0;
    border-radius: 9px;
    color: #1a1c22;
    background: #f3be00;
    font: 700 10px Poppins, sans-serif;
    cursor: pointer;
}
.hbphone-settings-feedback {
    display: block;
    min-height: 13px;
    padding-top: 5px;
    font-size: 8px;
    text-align: center;
    opacity: .8;
}
.hbphone-settings-sound-hint {
    margin: 10px 0 0;
    color: rgba(255,255,255,.55);
    font-size: 8px;
    line-height: 1.45;
}
.hbphone-home-bar.hbphone-settings-home-bar {
    z-index: 4;
}
.hbphone-home-bar {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    cursor: pointer;
}
.hbphone-frame {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.hbphone-physical {
    position: absolute;
    z-index: 4;
    width: 16px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0;
    background: transparent;
}
.hbphone-physical-action { left: -6px; top: 16.5%; height: 8%; }
.hbphone-physical-up { left: -6px; top: 25%; height: 8.5%; }
.hbphone-physical-down { left: -6px; top: 34.2%; height: 8.5%; }
.hbphone-physical-power { right: -6px; top: 26.8%; height: 12%; }
.hbphone-physical:focus-visible {
    opacity: .28;
    outline: 2px solid #fff;
}
.hbphone-physical:active { opacity: .18; }
.hbphone-physical-action:active,
.hbphone-physical-up:active,
.hbphone-physical-down:active { transform: translateX(2px); }
.hbphone-physical-power:active { transform: translateX(-2px); }
.hbphone-app { position: relative; }
.hbphone-app-notification,
.hbphone-dock-notification {
    position: absolute;
    z-index: 8;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: #eb3342;
    font-size: 7px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    animation: hbphoneNotificationIn .25s cubic-bezier(.2,.9,.25,1.3) both;
}
.hbphone-app-notification {
    top: -3px;
    right: 2px;
}
.hbphone-dock-notification {
    top: -5px;
    right: -5px;
}
.hbphone-app-notification[hidden],
.hbphone-dock-notification[hidden] { display: none; }
@keyframes hbphoneNotificationIn {
    from { opacity: 0; transform: scale(.45); }
    to { opacity: 1; transform: scale(1); }
}
.hbphone-volume-hud {
    position: absolute;
    z-index: 12;
    top: 27%;
    left: 18px;
    width: 31px;
    height: 116px;
    padding: 8px 6px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    opacity: 0;
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 16px;
    background: rgba(18,20,30,.78);
    backdrop-filter: blur(12px) saturate(150%);
    box-shadow: 0 8px 25px rgba(0,0,0,.35);
    transform: translateX(-15px) scale(.92);
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.hbphone-volume-hud.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.hbphone-volume-hud > i { font-size: 12px; }
.hbphone-volume-hud > div {
    position: relative;
    width: 7px;
    flex: 1;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255,255,255,.2);
}
.hbphone-volume-hud > div span {
    position: absolute;
    inset: auto 0 0;
    height: 70%;
    border-radius: inherit;
    background: #fff;
    transition: height .18s cubic-bezier(.2,.8,.2,1);
}
.hbphone-volume-hud > b {
    font-size: 7px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Applications Messages et Contacts du HBPHONE. */
.hbphone-native-app {
    z-index: 5;
    padding: 0 10px 24px;
    color: #f7f8ff;
    background: rgba(12, 14, 27, .94);
    backdrop-filter: blur(16px);
}
.hbphone-native-app > .hbphone-app-status {
    height: 25px;
    padding: 10px 5px 0;
}
.hbphone-native-app.is-app-entering { animation: hbphoneAppScreenIn .3s cubic-bezier(.2, .8, .2, 1) both; }
.hbphone-native-app.is-app-leaving { animation: hbphoneAppScreenOut .24s cubic-bezier(.4, 0, .8, .25) both; }
.hbphone-native-header {
    position: relative;
    z-index: 7;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    border-bottom: 1px solid rgba(255,255,255,.11);
}
.hbphone-messages:has(.hbphone-thread-screen:not([hidden])) .hbphone-native-header { height: 59px; }
.hbphone-native-header strong { font-size: 17px; letter-spacing: -.45px; }
.hbphone-native-header button {
    width: 27px;
    height: 27px;
    padding: 0;
    border: 0;
    color: #ffc400;
    background: transparent;
    font-size: 17px;
    cursor: pointer;
}
.hbphone-thread-back {
    justify-content: flex-start;
    font-size: 23px !important;
}
.hbphone-thread-avatar-head {
    position: absolute;
    left: 50%;
    top: 3px;
    width: 76px;
    height: 51px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transform: translateX(-50%);
}
.hbphone-thread-avatar-head > button {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    color: inherit;
    background: rgba(255,255,255,.12);
    cursor: pointer;
}
.hbphone-thread-avatar-head img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    image-rendering: pixelated;
}
.hbphone-thread-avatar-head small {
    position: static;
    width: 88px;
    margin-top: 4px;
    overflow: hidden;
    color: #fff;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 700;
    line-height: 11px;
    z-index: 2;
}
.hbphone-native-search {
    height: 29px;
    margin: 3px 3px 8px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.08);
}
.hbphone-native-search i { font-size: 11px; }
.hbphone-native-search input {
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font: inherit;
    font-size: 10px;
}
.hbphone-native-search input::placeholder { color: rgba(255,255,255,.42); }
.hbphone-call-tabs {
    height: 29px;
    margin: 3px 3px 7px;
    padding: 3px;
    display: flex;
    gap: 3px;
    border-radius: 9px;
    background: rgba(255,255,255,.07);
}
.hbphone-call-tabs button {
    flex: 1;
    border: 0;
    border-radius: 7px;
    color: rgba(255,255,255,.52);
    background: transparent;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
}
.hbphone-call-tabs button.is-active {
    color: #171717;
    background: #ffc400;
    box-shadow: 0 2px 7px rgba(0,0,0,.22);
}
.hbphone-calls .hbphone-contact-list { height: calc(100% - 106px); }
.hbphone-calls .hbphone-native-search:not([hidden]) ~ .hbphone-contact-list:not([hidden]) {
    height: calc(100% - 143px);
}
.hbphone-call-history-entry time {
    color: rgba(255,255,255,.42);
    font-size: 7px;
    font-variant-numeric: tabular-nums;
}
.hbphone-call-history-entry > .ti-phone {
    color: rgba(255,255,255,.8);
    font-size: 14px;
}
.hbphone-call-history-entry .hbphone-contact-copy small i {
    margin-right: 2px;
    color: #52bc48;
}
.hbphone-call-history-entry.is-missed .hbphone-contact-copy strong,
.hbphone-call-history-entry.is-missed .hbphone-contact-copy small,
.hbphone-call-history-entry.is-missed .hbphone-contact-copy small i {
    color: #ff565f;
}
.hbphone-conversations,
.hbphone-contact-list {
    height: calc(100% - 76px);
    overflow-y: auto;
    scrollbar-width: none;
}
.hbphone-conversations::-webkit-scrollbar,
.hbphone-contact-list::-webkit-scrollbar,
.hbphone-thread-messages::-webkit-scrollbar { display: none; }
.hbphone-conversation,
.hbphone-contact {
    width: 100%;
    min-height: 51px;
    padding: 7px 5px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #fff;
    text-align: left;
    background: transparent;
    cursor: pointer;
}
.hbphone-conversation-swipe {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.08);
    touch-action: pan-y;
}
.hbphone-conversation-swipe .hbphone-conversation,
.hbphone-conversation-swipe .hbphone-contact {
    position: relative;
    z-index: 2;
    border-bottom: 0;
    background: #0c0e1b;
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.hbphone-conversation-swipe.is-swiped .hbphone-conversation,
.hbphone-conversation-swipe.is-swiped .hbphone-contact { transform: translateX(-58px); }
.hbphone-conversation-delete {
    position: absolute;
    z-index: 1;
    inset: 0 0 0 auto;
    width: 58px;
    border: 0;
    color: #fff;
    background: #df2e39;
    font-size: 17px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
}
.hbphone-conversation-swipe.is-swiped .hbphone-conversation-delete {
    opacity: 1;
    pointer-events: auto;
}
.hbphone-conversation-swipe .hbphone-conversation:hover,
.hbphone-conversation-swipe .hbphone-contact:hover {
    background: #0c0e1b;
}
.hbphone-group-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #181818;
    background: #ffc400;
    font-size: 18px;
}
.hbphone-group-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.hbphone-create-group {
    width: calc(100% - 6px);
    margin: 0 3px 5px;
    padding: 7px;
    border: 0;
    border-radius: 8px;
    color: #171717;
    background: #ffc400;
    font-size: 9px;
    font-weight: 700;
}
.hbphone-create-group.is-premium-locked {
    color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.08);
    cursor: not-allowed;
}
.hbphone-create-group.is-premium-locked i::before { content: "\eb1e"; }
.hbphone-group-creator {
    position: absolute;
    z-index: 15;
    inset: 48px 10px 24px;
    padding: 12px;
    color: #fff;
    border-radius: 12px;
    background: #111421;
}
.hbphone-group-creator[hidden] { display: none; }
.hbphone-group-creator > strong { display: block; margin-bottom: 8px; font-size: 13px; }
.hbphone-group-creator > p { margin: 0 0 10px; color: #9296a8; font-size: 9px; line-height: 1.4; }
.hbphone-compose-group-name { display: grid !important; gap: 5px; margin-bottom: 8px; color: #aeb2c0; font-size: 9px; font-weight: 700; }
.hbphone-compose-group-name[hidden] { display: none !important; }
.hbphone-compose-group-name input { width: 100%; padding: 9px; border: 1px solid #34384a; border-radius: 8px; color: #fff; background: #202331; font-size: 10px; }
.hbphone-group-creator > div { max-height: 250px; margin: 8px 0; overflow-y: auto; }
.hbphone-group-creator > div label { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-bottom: 1px solid #252938; font-size: 10px; }
.hbphone-group-creator > div label img { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; background: #d99f00; }
.hbphone-group-creator > div label input { accent-color: #ffc400; }
.hbphone-group-creator footer { display: flex; gap: 6px; }
.hbphone-group-creator footer button { flex: 1; padding: 8px; border: 0; border-radius: 8px; font-size: 9px; font-weight: 700; }
.hbphone-group-creator footer button:last-child { color: #171717; background: #ffc400; }
.hbphone-group-creator footer button:disabled { cursor: not-allowed; opacity: .45; }

.hbphone-group-details {
    position: absolute;
    z-index: 12;
    inset: 25px 6px 12px;
    padding: 10px;
    overflow-y: auto;
    color: #fff;
    border-radius: 20px;
    background: #0d0d1d;
    animation: hbphone-app-enter .24s ease both;
}
.hbphone-group-details[hidden] { display: none; }
.hbphone-group-details > header { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; margin-bottom: 12px; }
.hbphone-group-details > header button { display: grid; width: 28px; height: 28px; padding: 0; place-items: center; color: #ffc400; border: 0; border-radius: 50%; background: #202333; }
.hbphone-group-details > header strong { grid-column: 2; text-align: center; font-size: 13px; }
.hbphone-group-details-identity { display: flex; flex-direction: column; align-items: center; margin-bottom: 14px; }
.hbphone-group-details-identity > span { display: grid; width: 68px; height: 68px; margin-bottom: 7px; place-items: center; overflow: hidden; color: #171717; border-radius: 50%; background: #ffc400; font-size: 27px; }
.hbphone-group-details-identity img { width: 100%; height: 100%; object-fit: cover; }
.hbphone-group-details-identity strong { font-size: 15px; }
.hbphone-group-details-identity small { color: #8d91a3; font-size: 9px; }
.hbphone-group-details form,
.hbphone-group-details > section { margin-bottom: 10px; padding: 10px; border: 1px solid #303446; border-radius: 12px; background: #171928; }
.hbphone-group-details form label { display: grid; gap: 6px; color: #b4b7c5; font-size: 9px; font-weight: 700; }
.hbphone-group-details form input,
.hbphone-group-details form select { width: 100%; padding: 9px; color: #fff; border: 1px solid #35394b; border-radius: 8px; outline: none; background: #202332; font-size: 9px; }
.hbphone-group-details form select option { color: #fff; background: #202332; }
.hbphone-group-details form button { width: 100%; margin-top: 8px; padding: 9px; color: #151515; border: 0; border-radius: 8px; background: #ffc400; font-size: 9px; font-weight: 800; }
.hbphone-group-details form button:disabled { cursor: not-allowed; opacity: .45; }
.hbphone-group-details > section > strong { display: block; margin-bottom: 5px; font-size: 10px; }
.hbphone-group-details article { display: flex; min-height: 40px; align-items: center; gap: 8px; border-bottom: 1px solid #292d3e; }
.hbphone-group-details article:last-child { border-bottom: 0; }
.hbphone-group-details article img { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; background: #d99f00; }
.hbphone-group-details article span { display: grid; flex: 1; }
.hbphone-group-details article strong { font-size: 10px; }
.hbphone-group-details article small { color: #ffc400; font-size: 8px; }
.hbphone-group-details article button { display: grid; width: 28px; height: 28px; padding: 0; place-items: center; color: #ff6262; border: 1px solid #63313a; border-radius: 8px; background: #281820; }
.hbphone-group-delete { display: flex; width: 100%; min-height: 36px; margin: 4px 0 10px; align-items: center; justify-content: center; gap: 6px; color: #ff6262; border: 1px solid #74313c; border-radius: 10px; background: #28141c; font-size: 9px; font-weight: 800; }
.hbphone-group-delete[hidden] { display: none; }
.hbphone-group-delete.is-confirming { color: #fff; border-color: #e52635; background: #d71929; }
.hbphone-group-delete:disabled { cursor: wait; opacity: .55; }
.hbphone-group-details-feedback { display: block; color: #8d91a3; text-align: center; font-size: 8px; }
.hbphone-conversation:hover,
.hbphone-contact:hover { background: rgba(255,255,255,.055); }
.hbphone-contact-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(145deg, #f4c400, #e06e31);
}
.hbphone-contact-avatar img {
    position: absolute;
    top: -11px;
    left: 50%;
    width: 50px;
    height: auto;
    max-width: none;
    transform: translateX(-50%);
    image-rendering: pixelated;
}
.hbphone-contact-copy { min-width: 0; flex: 1; }
.hbphone-contact-copy strong,
.hbphone-contact-copy small { display: block; }
.hbphone-contact-copy strong { font-size: 11px; }
.hbphone-contact-copy small {
    margin-top: 2px;
    overflow: hidden;
    color: rgba(255,255,255,.52);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hbphone-conversation-time { color: rgba(255,255,255,.38); font-size: 7px; }
.hbphone-unread {
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #141414;
    background: #ffc400;
    font-size: 7px;
    font-weight: 800;
}
.hbphone-native-empty {
    margin: 42px 12px;
    color: rgba(255,255,255,.48);
    text-align: center;
    font-size: 9px;
}
.hbphone-thread-screen {
    position: absolute;
    inset: 87px 10px 24px;
    display: flex;
    flex-direction: column;
}
.hbphone-thread-screen[hidden] { display: none; }
.hbphone-thread-messages {
    flex: 1;
    min-height: 0;
    padding: 9px 2px;
    overflow-y: auto;
    scrollbar-width: none;
}
.hbphone-message-row { display: flex; margin: 4px 0; }
.hbphone-message-row.is-mine { justify-content: flex-end; }
.hbphone-message-bubble {
    max-width: 82%;
    padding: 9px 11px;
    border-radius: 15px 15px 15px 5px;
    color: #111;
    background: #e7e8ed;
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.hbphone-message-row.is-mine .hbphone-message-bubble {
    border-radius: 15px 15px 5px 15px;
    color: #111;
    background: #ffc400;
}
.hbphone-message-row.is-failed .hbphone-message-bubble {
    color: #ffdadd;
    border: 1px solid rgba(239,67,78,.72);
    background: rgba(116,25,34,.82);
    box-shadow: 0 5px 15px rgba(100,10,20,.2);
}
.hbphone-message-row.is-failed .hbphone-message-bubble > small {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 3px;
    color: #ff8f97;
    font-size: 7px;
    font-weight: 700;
    line-height: 1.2;
}
.hbphone-message-row.is-failed .hbphone-message-bubble > small i { font-size: 9px; }
.hbphone-message-bubble time {
    display: inline;
    opacity: .48;
    font-size: 7px;
}
.hbphone-message-bubble footer {
    min-height: 10px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
}
.hbphone-message-receipt {
    color: rgba(17,17,17,.48);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 1;
}
.hbphone-message-receipt.is-read { color: #24964c; }
.hbphone-message-compose {
    height: 39px;
    flex: 0 0 39px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.hbphone-message-compose input {
    min-width: 0;
    height: 33px;
    flex: 1;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
    outline: 0;
    color: #fff;
    background: rgba(255,255,255,.08);
    font-size: 11px;
}
.hbphone-message-compose button {
    width: 33px;
    height: 33px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #111;
    background: #ffc400;
    font-size: 15px;
    cursor: pointer;
}
.hbphone-native-home-bar { z-index: 6; }
.hbphone-jaune-app {
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 6%, rgba(255,196,0,.16), transparent 30%),
        #0c0e1b;
}
.hbphone-jaune-loading,
.hbphone-jaune-error {
    position: absolute;
    inset: 22px 10px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hbphone-jaune-loading[hidden],
.hbphone-jaune-error[hidden],
.hbphone-jaune-content[hidden] { display: none; }
.hbphone-jaune-loading img {
    width: 66px;
    height: 66px;
    border-radius: 17px;
    box-shadow: 0 12px 30px rgba(255,196,0,.2);
    animation: hbphoneJauneLogoIn .48s cubic-bezier(.2,.9,.25,1.25) both;
}
.hbphone-jaune-loading strong { margin-top: 11px; font-size: 18px; }
.hbphone-jaune-loading > span {
    width: 82px;
    height: 4px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 5px;
    background: rgba(255,255,255,.12);
}
.hbphone-jaune-loading > span i {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: #ffc400;
    animation: hbphoneJauneLoading .75s ease-in-out infinite alternate;
}
.hbphone-jaune-loading small { margin-top: 9px; color: rgba(255,255,255,.55); font-size: 8px; }
@keyframes hbphoneJauneLogoIn {
    from { opacity: 0; transform: scale(.72) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes hbphoneJauneLoading {
    from { transform: translateX(-5px); }
    to { transform: translateX(54px); }
}
.hbphone-jaune-content {
    height: calc(100% - 22px);
    padding: 10px 4px 30px;
    overflow-y: auto;
    scrollbar-width: none;
    animation: hbphoneJauneContentIn .34s cubic-bezier(.2,.8,.2,1) both;
}
.hbphone-jaune-content::-webkit-scrollbar { display: none; }
@keyframes hbphoneJauneContentIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.hbphone-jaune-content > header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 3px 3px 11px;
}
.hbphone-jaune-content > header img { width: 38px; height: 38px; border-radius: 10px; }
.hbphone-jaune-content > header strong,
.hbphone-jaune-content > header small { display: block; }
.hbphone-jaune-content > header strong { font-size: 15px; }
.hbphone-jaune-content > header small { margin-top: 1px; color: rgba(255,255,255,.55); font-size: 8px; }
.hbphone-jaune-plan {
    padding: 16px;
    border-radius: 16px;
    color: #171717;
    background: linear-gradient(145deg, #ffd238, #f4b900);
    box-shadow: 0 12px 28px rgba(255,196,0,.16);
}
.hbphone-jaune-plan small,
.hbphone-jaune-plan strong,
.hbphone-jaune-plan span { display: block; }
.hbphone-jaune-plan small { font-size: 8px; font-weight: 700; opacity: .65; }
.hbphone-jaune-plan strong { margin-top: 5px; font-size: 20px; line-height: 1.1; }
.hbphone-jaune-plan span { margin-top: 12px; font-size: 8px; }
.hbphone-jaune-plan span b { font-size: 13px; }
.hbphone-jaune-usage {
    margin-top: 10px;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 15px;
    background: rgba(255,255,255,.045);
}
.hbphone-jaune-usage h2 { margin: 0 0 11px; font-size: 11px; }
.hbphone-jaune-usage article { display: flex; align-items: center; gap: 9px; }
.hbphone-jaune-usage article + article { margin-top: 13px; }
.hbphone-jaune-usage article > i {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: 0 0 31px;
    border-radius: 10px;
    color: #171717;
    background: #ffc400;
    font-size: 16px;
}
.hbphone-jaune-usage article > div { min-width: 0; flex: 1; }
.hbphone-jaune-usage article span { display: flex; justify-content: space-between; gap: 6px; font-size: 8px; }
.hbphone-jaune-usage article span b { color: rgba(255,255,255,.62); font-weight: 600; }
.hbphone-jaune-usage progress {
    width: 100%;
    height: 5px;
    margin-top: 6px;
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    appearance: none;
}
.hbphone-jaune-usage progress::-webkit-progress-bar { background: rgba(255,255,255,.12); }
.hbphone-jaune-usage progress::-webkit-progress-value { border-radius: 6px; background: #ffc400; }
.hbphone-jaune-usage progress::-moz-progress-bar { border-radius: 6px; background: #ffc400; }
.hbphone-jaune-usage progress.is-unlimited::-webkit-progress-value { background: #42c856; }
.hbphone-jaune-usage article.is-limit-reached span b { color: #ff5b66; }
.hbphone-jaune-usage article.is-limit-reached progress::-webkit-progress-value { background: #ed3442; }
.hbphone-jaune-usage article.is-limit-reached progress::-moz-progress-bar { background: #ed3442; }
.hbphone-jaune-payment {
    margin-top: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 14px;
    background: rgba(255,255,255,.045);
}
.hbphone-jaune-payment > i { color: #ffc400; font-size: 20px; }
.hbphone-jaune-payment small,
.hbphone-jaune-payment strong { display: block; }
.hbphone-jaune-payment small { color: rgba(255,255,255,.52); font-size: 7px; }
.hbphone-jaune-payment strong { margin-top: 3px; font-size: 9px; text-transform: capitalize; }
.hbphone-jaune-notification-modal {
    position: absolute;
    z-index: 18;
    inset: 22px 0 0;
    padding: 14px;
    display: grid;
    place-items: center;
    background: rgba(5,7,14,.62);
    backdrop-filter: blur(7px);
    animation: hbphoneJauneModalBackdrop .2s ease both;
}
.hbphone-jaune-notification-modal[hidden] { display: none; }
.hbphone-jaune-notification-modal > div {
    width: 100%;
    padding: 18px 15px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-align: center;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    background: #161a28;
    box-shadow: 0 18px 45px rgba(0,0,0,.5);
    animation: hbphoneJauneModalIn .34s cubic-bezier(.2,.9,.25,1.2) both;
}
.hbphone-jaune-notification-modal img { width: 50px; height: 50px; border-radius: 13px; }
.hbphone-jaune-notification-modal small { margin-top: 8px; color: #ffc400; font-size: 8px; font-weight: 800; }
.hbphone-jaune-notification-modal strong { margin-top: 7px; font-size: 15px; line-height: 1.2; }
.hbphone-jaune-notification-modal p { margin: 8px 0 0; color: rgba(255,255,255,.74); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.hbphone-jaune-notification-modal time { margin-top: 9px; color: rgba(255,255,255,.4); font-size: 7px; }
.hbphone-jaune-notification-modal button {
    width: 100%;
    margin-top: 15px;
    padding: 9px;
    color: #171717;
    border: 0;
    border-radius: 9px;
    background: #ffc400;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}
@keyframes hbphoneJauneModalBackdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes hbphoneJauneModalIn {
    from { opacity: 0; transform: translateY(12px) scale(.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.hbphone-jaune-error { padding: 20px; }
.hbphone-jaune-error > i { color: #ffc400; font-size: 40px; }
.hbphone-jaune-error strong { margin-top: 10px; font-size: 14px; }
.hbphone-jaune-error small { max-width: 170px; margin-top: 7px; color: rgba(255,255,255,.55); font-size: 8px; line-height: 1.45; }

/* Golden Duck Bank — application HBPhone */
.hbphone-bank-app {
    overflow: hidden;
    color: #f7f8fb;
    font-family: Poppins, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 84% 4%, rgba(255, 196, 0, .16), transparent 29%),
        linear-gradient(165deg, #171d29, #090d14 72%);
}
.hbphone-bank-loading,
.hbphone-bank-account-choice,
.hbphone-bank-error {
    position: absolute;
    inset: 22px 10px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.hbphone-bank-loading[hidden],
.hbphone-bank-account-choice[hidden],
.hbphone-bank-error[hidden],
.hbphone-bank-content[hidden],
.hbphone-bank-panel[hidden] {
    display: none;
}
.hbphone-bank-loading img {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(255, 196, 0, .18);
    animation: hbphoneBankLogoIn .48s cubic-bezier(.2, .9, .25, 1.2) both;
}
.hbphone-bank-loading strong {
    max-width: 175px;
    margin-top: 13px;
    font-size: 16px;
    line-height: 1.2;
}
.hbphone-bank-loading > span {
    width: 92px;
    height: 4px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .11);
}
.hbphone-bank-loading > span i {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: #ffc400;
    animation: hbphoneBankLoading .75s ease-in-out infinite alternate;
}
.hbphone-bank-loading small {
    margin-top: 9px;
    color: rgba(255, 255, 255, .52);
    font-size: 10px;
}
.hbphone-bank-account-choice {
    padding: 14px;
    justify-content: flex-start;
    overflow-y: auto;
}
.hbphone-bank-account-choice > i {
    display: grid;
    width: 47px;
    height: 47px;
    margin-top: 22px;
    place-items: center;
    color: #ffc400;
    font-size: 26px;
    border: 1px solid rgba(255, 196, 0, .3);
    border-radius: 15px;
    background: rgba(255, 196, 0, .08);
}
.hbphone-bank-account-choice > strong {
    margin-top: 11px;
    font-size: 16px;
}
.hbphone-bank-account-choice > small {
    max-width: 185px;
    margin-top: 4px;
    color: #8f99aa;
    font-size: 10px;
    line-height: 1.4;
}
.hbphone-bank-account-choice > div {
    display: grid;
    width: 100%;
    margin-top: 16px;
    gap: 7px;
}
.hbphone-bank-account-choice > div > button {
    display: grid;
    width: 100%;
    min-height: 57px;
    padding: 8px 9px;
    grid-template-columns: 31px minmax(0, 1fr) 15px;
    align-items: center;
    gap: 8px;
    color: #f6f8fc;
    font-family: Poppins, "Segoe UI", sans-serif;
    text-align: left;
    cursor: pointer;
    border: 1px solid rgba(75, 91, 129, .62);
    border-radius: 11px;
    background: rgba(26, 35, 51, .72);
}
.hbphone-bank-account-choice > div > button > i:first-child {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    color: #ffc400;
    font-size: 17px;
    border-radius: 9px;
    background: rgba(255, 196, 0, .1);
}
.hbphone-bank-account-choice button > span {
    min-width: 0;
}
.hbphone-bank-account-choice button strong,
.hbphone-bank-account-choice button small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hbphone-bank-account-choice button strong { font-size: 14px; }
.hbphone-bank-account-choice button small {
    margin-top: 2px;
    color: #8e99ab;
    font-size: 11px;
}
.hbphone-bank-account-choice button > i:last-child {
    color: #727e91;
    font-size: 14px;
}
@keyframes hbphoneBankLogoIn {
    from { opacity: 0; transform: translateY(8px) scale(.72); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hbphoneBankLoading {
    from { transform: translateX(-5px); }
    to { transform: translateX(60px); }
}
.hbphone-bank-content {
    display: flex;
    height: calc(100% - 22px);
    padding: 6px 4px 27px;
    flex-direction: column;
    animation: hbphoneJauneContentIn .32s cubic-bezier(.2, .8, .2, 1) both;
}
.hbphone-bank-header {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 7px;
    padding: 0 3px 7px;
}
.hbphone-bank-header > img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
}
.hbphone-bank-header > span {
    min-width: 0;
    flex: 1;
}
.hbphone-bank-header strong,
.hbphone-bank-header small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hbphone-bank-header strong { font-size: 13px; }
.hbphone-bank-header small {
    margin-top: 2px;
    color: rgba(255, 255, 255, .52);
    font-size: 9px;
}
.hbphone-bank-header button {
    display: grid;
    width: 27px;
    height: 27px;
    padding: 0;
    place-items: center;
    color: #ffc400;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 9px;
    background: rgba(255, 255, 255, .055);
}
.hbphone-bank-header button.is-loading i {
    animation: hbphoneBankRefresh .65s linear infinite;
}
@keyframes hbphoneBankRefresh { to { transform: rotate(360deg); } }
.hbphone-bank-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background: rgba(5, 9, 16, .42);
}
.hbphone-bank-tabs button {
    display: flex;
    min-width: 0;
    min-height: 34px;
    padding: 4px 2px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1px;
    color: #8e98aa;
    font-family: Poppins, "Segoe UI", sans-serif;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    border: 0;
    border-radius: 7px;
    background: transparent;
}
.hbphone-bank-tabs button i { font-size: 13px; }
.hbphone-bank-tabs button.is-active {
    color: #151515;
    background: #ffc400;
    box-shadow: 0 4px 12px rgba(255, 196, 0, .18);
}
.hbphone-bank-tabs button:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.hbphone-bank-panels {
    min-height: 0;
    margin-top: 6px;
    flex: 1;
}
.hbphone-bank-panel {
    height: 100%;
    padding-right: 1px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.hbphone-bank-panel::-webkit-scrollbar { display: none; }
.hbphone-bank-card {
    position: relative;
    min-height: 133px;
    padding: 13px;
    overflow: hidden;
    color: #fff;
    border: 1px solid rgba(255, 196, 0, .48);
    border-radius: 15px;
    background:
        radial-gradient(circle at 93% 82%, rgba(255, 196, 0, .17), transparent 42%),
        linear-gradient(145deg, #252b34, #111720);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}
.hbphone-bank-card::after {
    position: absolute;
    right: -24px;
    bottom: -55px;
    width: 125px;
    height: 125px;
    content: "";
    border: 18px solid rgba(255, 196, 0, .07);
    border-radius: 50%;
}
.hbphone-bank-card > header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 800;
}
.hbphone-bank-card > header i {
    width: 26px;
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(145deg, #ffe165, #e3a900);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}
.hbphone-bank-card > small {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 18px;
    color: rgba(255, 255, 255, .5);
    font-size: 9px;
}
.hbphone-bank-card > strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 1px;
    color: #ffc400;
    font-size: 25px;
    line-height: 1.15;
}
.hbphone-bank-card > strong b {
    font-size: 10px;
    font-weight: 700;
}
.hbphone-bank-card > footer {
    position: relative;
    z-index: 1;
    display: flex;
    margin-top: 13px;
    justify-content: space-between;
    color: rgba(255, 255, 255, .67);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .25px;
}
.hbphone-bank-card.is-negative > strong { color: #ff5e6a; }
.hbphone-bank-status-message {
    margin: 7px 0 0;
    padding: 8px;
    color: #ffb0b6;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    border: 1px solid rgba(255, 74, 89, .35);
    border-radius: 9px;
    background: rgba(121, 25, 36, .24);
}
.hbphone-bank-recent {
    margin-top: 8px;
}
.hbphone-bank-recent > header {
    display: flex;
    margin-bottom: 5px;
    padding: 0 2px;
    align-items: center;
    justify-content: space-between;
}
.hbphone-bank-recent > header strong { font-size: 11px; }
.hbphone-bank-recent > header button {
    padding: 0;
    color: #ffc400;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    border: 0;
    background: transparent;
}
.hbphone-bank-panel-title {
    padding: 4px 3px 9px;
}
.hbphone-bank-panel-title strong,
.hbphone-bank-panel-title small {
    display: block;
}
.hbphone-bank-panel-title strong { font-size: 14px; }
.hbphone-bank-panel-title small {
    margin-top: 2px;
    color: rgba(255, 255, 255, .5);
    font-size: 9px;
}
.hbphone-bank-transaction {
    display: grid;
    min-height: 48px;
    margin-bottom: 5px;
    padding: 8px;
    grid-template-columns: 29px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    background: rgba(255, 255, 255, .042);
}
.hbphone-bank-transaction.is-compact {
    min-height: 43px;
    padding: 6px 7px;
}
.hbphone-bank-transaction > i {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 9px;
    font-size: 14px;
}
.hbphone-bank-transaction > i.is-in {
    color: #54df88;
    background: rgba(45, 166, 97, .16);
}
.hbphone-bank-transaction > i.is-out {
    color: #ff6875;
    background: rgba(197, 49, 64, .16);
}
.hbphone-bank-transaction > span {
    min-width: 0;
}
.hbphone-bank-transaction strong,
.hbphone-bank-transaction small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hbphone-bank-transaction strong { font-size: 10px; }
.hbphone-bank-transaction small {
    margin-top: 2px;
    color: rgba(255, 255, 255, .43);
    font-size: 8px;
    text-transform: capitalize;
}
.hbphone-bank-transaction > b {
    font-size: 10px;
    white-space: nowrap;
}
.hbphone-bank-transaction > b.is-in { color: #54df88; }
.hbphone-bank-transaction > b.is-out { color: #ff6875; }
.hbphone-bank-empty {
    margin: 20px 5px;
    color: rgba(255, 255, 255, .45);
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}
.hbphone-bank-transfer {
    display: flex;
    padding: 11px;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 13px;
    background: rgba(255, 255, 255, .04);
}
.hbphone-bank-beneficiaries {
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.hbphone-bank-beneficiaries > header {
    display: flex;
    margin-bottom: 6px;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
}
.hbphone-bank-beneficiaries > header > span {
    color: #e2e6ee;
    font-size: 11px;
    font-weight: 700;
}
.hbphone-bank-beneficiaries > header > button {
    padding: 4px 6px;
    color: #ffc400;
    font-family: Poppins, "Segoe UI", sans-serif;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(255, 196, 0, .28);
    border-radius: 7px;
    background: rgba(255, 196, 0, .08);
}
.hbphone-bank-beneficiaries > header > button:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.hbphone-bank-beneficiaries > div {
    display: grid;
    max-height: 108px;
    overflow-y: auto;
    gap: 5px;
}
.hbphone-bank-beneficiaries article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 25px;
    gap: 4px;
}
.hbphone-bank-beneficiaries article > button {
    min-width: 0;
    color: #f2f5fa;
    cursor: pointer;
    border: 1px solid rgba(75, 91, 129, .48);
    border-radius: 7px;
    background: rgba(21, 30, 45, .72);
}
.hbphone-bank-beneficiaries article > button:first-child {
    display: grid;
    padding: 5px 6px;
    grid-template-columns: 21px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    text-align: left;
}
.hbphone-bank-beneficiaries article > button:first-child > i {
    color: #ffc400;
    font-size: 14px;
}
.hbphone-bank-beneficiaries article span,
.hbphone-bank-beneficiaries article strong,
.hbphone-bank-beneficiaries article small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hbphone-bank-beneficiaries article strong { font-size: 10px; }
.hbphone-bank-beneficiaries article small {
    margin-top: 1px;
    color: #8994a7;
    font-size: 8px;
}
.hbphone-bank-beneficiaries article > button:last-child {
    padding: 0;
    color: #ff7783;
}
.hbphone-bank-beneficiaries > small {
    display: block;
    padding: 4px 1px 0;
    color: #7f8a9d;
    font-size: 9px;
}
.hbphone-bank-beneficiaries > small[hidden] { display: none; }
.hbphone-bank-transfer label + label { margin-top: 10px; }
.hbphone-bank-transfer label > span {
    display: block;
    margin-bottom: 5px;
    color: #b7bfcd;
    font-size: 10px;
    font-weight: 700;
}
.hbphone-bank-transfer label > div {
    display: flex;
    height: 39px;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    border: 1px solid rgba(93, 111, 151, .65);
    border-radius: 9px;
    background: rgba(12, 18, 29, .72);
}
.hbphone-bank-transfer label i {
    color: #ffc400;
    font-size: 15px;
}
.hbphone-bank-transfer input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    color: #fff;
    font-family: Poppins, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 700;
    border: 0;
    outline: 0;
    background: transparent;
}
.hbphone-bank-transfer input::placeholder { color: #626d81; }
.hbphone-bank-transfer > small {
    margin-top: 9px;
    color: #8994a7;
    font-size: 9px;
}
.hbphone-bank-transfer > small b { color: #ffc400; }
.hbphone-bank-transfer > button {
    min-height: 38px;
    margin-top: 12px;
    color: #171717;
    font-family: Poppins, "Segoe UI", sans-serif;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    border: 0;
    border-radius: 9px;
    background: #ffc400;
    box-shadow: 0 7px 18px rgba(255, 196, 0, .16);
}
.hbphone-bank-transfer > button:disabled {
    opacity: .55;
    cursor: wait;
}
.hbphone-bank-transfer > p {
    min-height: 24px;
    margin: 8px 0 0;
    font-size: 9px;
    line-height: 1.4;
    text-align: center;
}
.hbphone-bank-transfer > p.is-error { color: #ff7a85; }
.hbphone-bank-transfer > p.is-success { color: #54df88; }
.hbphone-bank-error {
    padding: 18px;
}
.hbphone-bank-error > i {
    color: #ffc400;
    font-size: 42px;
}
.hbphone-bank-error strong {
    margin-top: 10px;
    font-size: 14px;
}
.hbphone-bank-error small {
    max-width: 175px;
    margin-top: 7px;
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
    line-height: 1.5;
}
.hbphone-bank-error button {
    min-width: 110px;
    min-height: 34px;
    margin-top: 14px;
    color: #171717;
    font-family: Poppins, "Segoe UI", sans-serif;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    border: 0;
    border-radius: 9px;
    background: #ffc400;
}
.hbphone.is-ui-large .hbphone-native-header strong { font-size: 20px; }
.hbphone.is-ui-large .hbphone-contact-copy strong { font-size: 13px; }
.hbphone.is-ui-large .hbphone-contact-copy small,
.hbphone.is-ui-large .hbphone-native-search input { font-size: 10px; }
.hbphone.is-ui-large .hbphone-message-bubble { font-size: 13px; }
.hbphone.is-ui-large .hbphone-message-compose input { font-size: 12px; }
.hbphone.is-ui-large .hbphone-thread-avatar-head small { font-size: 11px; }

.hbphone-contact-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hbphone-contact-card {
    height: calc(100% - 70px);
    padding: 17px 9px 25px;
    overflow-y: auto;
    text-align: center;
    scrollbar-width: none;
}
.hbphone-contact-card::-webkit-scrollbar { display: none; }
.hbphone-contact-card-avatar {
    width: 78px;
    height: 78px;
    margin: 0 auto 8px;
    display: block;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(145deg, #f5c400, #e16f32);
}
.hbphone-contact-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}
.hbphone-contact-card > strong,
.hbphone-contact-card > small { display: block; }
.hbphone-contact-card > strong { font-size: 17px; }
.hbphone-contact-card > small {
    min-height: 15px;
    margin-top: 2px;
    color: rgba(255,255,255,.5);
    font-size: 9px;
}
.hbphone-contact-quick-actions {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin: 13px auto 17px;
}
.hbphone-contact-message-action {
    width: 68px;
    margin: 0;
    padding: 8px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border: 0;
    border-radius: 11px;
    color: #171717;
    background: #ffc400;
    cursor: pointer;
}
.hbphone-contact-message-action i { font-size: 20px; }
.hbphone-contact-message-action span { font-size: 8px; font-weight: 700; }
.hbphone-contact-rename {
    padding: 11px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 12px;
    text-align: left;
    background: rgba(255,255,255,.045);
    animation: hbphoneContactEditIn .24s cubic-bezier(.2,.8,.2,1) both;
}
.hbphone-contact-rename[hidden],
.hbphone-contact-delete[hidden] { display: none; }
@keyframes hbphoneContactEditIn {
    from { opacity: 0; transform: translateY(-7px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.hbphone-contact-rename label {
    display: block;
    margin-bottom: 6px;
    font-size: 9px;
    font-weight: 700;
}
.hbphone-contact-rename div { display: flex; gap: 5px; }
.hbphone-contact-rename input {
    min-width: 0;
    height: 31px;
    flex: 1;
    padding: 0 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    outline: 0;
    color: #fff;
    background: rgba(255,255,255,.07);
    font-size: 9px;
}
.hbphone-contact-rename button {
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    color: #171717;
    background: #ffc400;
    font-size: 8px;
    font-weight: 700;
    cursor: pointer;
}
.hbphone-contact-delete {
    width: 100%;
    margin-top: 10px;
    padding: 9px;
    border: 1px solid rgba(255,74,74,.35);
    border-radius: 9px;
    color: #ff6868;
    background: rgba(190,35,35,.12);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    animation: hbphoneContactEditIn .28s .04s cubic-bezier(.2,.8,.2,1) both;
}
.hbphone-contact-feedback {
    min-height: 14px;
    margin: 6px 0 0;
    color: rgba(255,255,255,.55);
    font-size: 8px;
}
.hbphone.is-ui-large .hbphone-contact-card > strong { font-size: 20px; }
.hbphone.is-ui-large .hbphone-contact-card > small,
.hbphone.is-ui-large .hbphone-contact-rename label,
.hbphone.is-ui-large .hbphone-contact-delete { font-size: 11px; }

.hbphone-confirm {
    position: absolute;
    z-index: 30;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: inherit;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(5px);
}
.hbphone-confirm[hidden] { display: none; }
.hbphone-confirm-box {
    width: 100%;
    padding: 15px 12px 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    color: #fff;
    text-align: center;
    background: rgba(25,27,40,.98);
    box-shadow: 0 12px 35px rgba(0,0,0,.45);
    animation: hbphoneContactEditIn .2s ease both;
}
.hbphone-confirm-box strong { font-size: 12px; }
.hbphone-confirm-box p { margin: 8px 0 14px; font-size: 9px; color: rgba(255,255,255,.65); }
.hbphone-confirm-box div { display: flex; gap: 7px; }
.hbphone-confirm-box button {
    flex: 1;
    padding: 8px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: #3b4052;
    font-size: 9px;
    font-weight: 700;
}
.hbphone-confirm-box button.is-danger { background: #d82c35; }

.hbphone-call-person {
    padding-top: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hbphone-call-person > span {
    width: 76px;
    height: 76px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(145deg,#f5c400,#df6d31);
}
.hbphone-call-person img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.hbphone-call-person strong { margin-top: 12px; font-size: 17px; }
.hbphone-call-person small { margin-top: 4px; color: rgba(255,255,255,.58); font-size: 9px; }
.hbphone-call-person time { margin-top: 5px; font-size: 10px; }
.hbphone-call-controls {
    margin: 40px 20px 0;
    padding: 14px;
    display: flex;
    justify-content: center;
    gap: 26px;
    border-radius: 18px;
    background: rgba(255,255,255,.1);
}
.hbphone-call-controls button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: 0;
    color: #fff;
    background: transparent;
}
.hbphone-call-controls i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    font-size: 19px;
}
.hbphone-call-controls button.is-active i { color: #111; background: #fff; }
.hbphone-call-controls span { font-size: 8px; }
.hbphone-call-end,
.hbphone-call-incoming-actions button {
    position: absolute;
    bottom: 48px;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #ef4048;
    font-size: 23px;
}
.hbphone-call-end { left: 50%; transform: translateX(-50%); }
.hbphone-call-incoming-actions {
    position: absolute;
    right: 38px;
    bottom: 48px;
    left: 38px;
    display: flex;
    justify-content: space-between;
}
.hbphone-call-incoming-actions[hidden] { display: none; }
.hbphone-call-incoming-actions button { position: static; }
.hbphone-call-incoming-actions .accept { background: #37bd58; }
.hbphone-call-screen.is-incoming .hbphone-call-end { display: none; }
.hbphone-call-screen.is-incoming .hbphone-call-controls,
.hbphone-call-screen.is-incoming [data-hbphone-call-duration] { visibility: hidden; }

/* Boutons "Moi" (garde-robe / parametres) affiches a la place des 2 icones
   voisines quand on clique sur l'avatar. */
.barre-moi { background-size: 30px auto; }
.barre-moi-garderobe { background-color: #99D5DF; background-image: url('../img/toolbar/icons/me-menu/clothing.png'); }
.barre-moi-parametres { background-color: #99D5DF; background-image: url('../img/toolbar/icons/me-menu/cog.png'); }
.barre-moi-support { background-color: #99D5DF; background-image: url('../img/toolbar/icons/me-menu/helper-tool.png'); }
.barre-moi-admin { background-color: #99D5DF; background-image: url('../img/toolbar/icons/modtools.png'); }

.barre-compteur {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    color: #1b2130;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border-radius: 999px;
    background: var(--hrp-yellow);
}

@keyframes staffSupportPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 196, 49, .38); }
    50% { box-shadow: 0 0 0 7px rgba(255, 196, 49, 0); }
}

/* ---------- Support staff dans le client ---------- */
.staff-support-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 8700;
    width: min(920px, calc(100vw - 30px));
    height: min(650px, calc(100vh - 120px));
    overflow: hidden;
    color: #f5f7fb;
    font-family: Poppins, 'Segoe UI', sans-serif;
    background: rgba(24, 28, 36, .88);
    border: 2px solid #2E334D;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(3px) saturate(150%);
    backdrop-filter: blur(3px) saturate(150%);
    transform: translate(-50%, -50%);
}
.staff-support-panel[hidden] { display: none; }
body:not(.game-mode) .staff-support-panel { display: none !important; }
.staff-support-header {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 10px 18px;
    cursor: move;
    background: rgba(21, 26, 35, .72);
    border-bottom: 1px solid #2E334D;
}
.staff-support-header > div { display: flex; flex-direction: column; }
.staff-support-header strong { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.staff-support-header strong i { color: var(--hrp-yellow); }
.staff-support-header small { color: #aeb6c4; font-size: 10px; }
.staff-support-close {
    width: 32px;
    height: 32px;
    padding: 0;
    color: #fff;
    cursor: pointer;
    background: var(--hrp-red);
    border: 0;
    border-radius: 8px;
    font-size: 21px;
    line-height: 1;
}
.staff-support-body { height: calc(100% - 64px); display: grid; grid-template-columns: 310px 1fr; }
.staff-support-sidebar { min-width: 0; overflow: hidden; background: rgba(16, 20, 29, .74); border-right: 1px solid #2E334D; }
.staff-support-sidebar-title {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 15px;
    border-bottom: 1px solid #2E334D;
}
.staff-support-sidebar-title button {
    width: 30px;
    height: 30px;
    color: #cbd6e5;
    cursor: pointer;
    background: rgba(153, 213, 223, .17);
    border: 0;
    border-radius: 7px;
}
.staff-support-list { height: calc(100% - 48px); padding: 8px; overflow-y: auto; }
.staff-support-ticket {
    width: 100%;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px;
    color: #fff;
    cursor: pointer;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
}
.staff-support-ticket:hover, .staff-support-ticket.is-active { background: rgba(153, 213, 223, .1); border-color: rgba(153, 213, 223, .32); }
.staff-support-ticket.is-unanswered { background: rgba(255, 196, 49, .07); }
.staff-support-ticket-icon {
    position: relative;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #172238;
    background: transparent;
    border: 0;
    border-radius: 9px;
    font-size: 18px;
}
.staff-support-ticket-icon img {
    position: absolute;
    top: -28px;
    left: 50%;
    width: 64px;
    height: 110px;
    object-fit: contain;
    image-rendering: pixelated;
    transform: translateX(-50%);
}
.staff-support-ticket-copy { min-width: 0; display: flex; flex-direction: column; }
.staff-support-ticket-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.staff-support-ticket-copy small { overflow: hidden; color: #91a3bc; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.staff-support-new, .staff-support-status {
    padding: 4px 6px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}
.staff-support-new {
    min-width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    color: #211700;
    background: linear-gradient(180deg, #ffe06c 0%, #ffc431 58%, #f0a900 100%);
    border: 2px solid #151b27;
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .68),
        0 2px 0 #8e6100,
        0 3px 7px rgba(0, 0, 0, .28);
    font-size: 9px;
    line-height: 1;
    text-shadow: 0 1px rgba(255, 255, 255, .3);
}
.staff-support-ticket.is-unanswered:hover .staff-support-new,
.staff-support-ticket.is-active .staff-support-new {
    filter: brightness(1.07);
    transform: translateY(-1px);
}
.staff-support-status { color: #b8c5d8; background: #2b364a; }
.staff-support-status.is-open { color: #ffd260; background: rgba(255, 196, 49, .13); }
.staff-support-status.is-answered { color: #72df87; background: rgba(52, 181, 80, .14); }
.staff-support-detail { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: rgba(25, 30, 40, .64); }
.staff-support-placeholder {
    height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 25px;
    color: #91a3bc;
    text-align: center;
}
.staff-support-placeholder > i { color: var(--hrp-yellow); font-size: 38px; }
.staff-support-placeholder span { max-width: 330px; font-size: 11px; }
.staff-support-ticket-head {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 16px;
    border-bottom: 1px solid #2E334D;
}
.staff-support-ticket-head h3 { margin: 2px 0 0; font-size: 16px; }
.staff-support-ticket-head small { color: #91a3bc; font-size: 9px; }
.staff-support-messages { flex: 1 1 auto; min-height: 0; padding: 12px 14px; overflow-y: auto; }
.staff-support-message {
    max-width: 86%;
    margin: 0 0 10px;
    padding: 10px 12px;
    background: rgba(46, 51, 77, .72);
    border: 1px solid #3b425d;
    border-radius: 10px 10px 10px 3px;
}
.staff-support-message.is-staff { margin-left: auto; background: rgba(255, 196, 49, .09); border-color: rgba(255, 196, 49, .32); border-radius: 10px 10px 3px 10px; }
.staff-support-message header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.staff-support-message header strong { font-size: 10px; }
.staff-support-message header small { color: #91a3bc; font-size: 8px; }
.staff-support-message p { margin: 7px 0 0; color: #e8edf5; font-size: 11px; line-height: 1.5; }
.staff-support-reply { padding: 10px 14px 12px; background: rgba(16, 20, 29, .72); border-top: 1px solid #2E334D; }
.staff-support-reply textarea {
    width: 100%;
    height: 72px;
    resize: none;
    padding: 9px 11px;
    color: #fff;
    outline: none;
    background: rgba(12, 16, 23, .78);
    border: 1px solid #3b425d;
    border-radius: 8px;
    font: 11px Poppins, sans-serif;
}
.staff-support-reply textarea:focus { border-color: var(--hrp-yellow); }
.staff-support-reply > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.staff-support-primary, .staff-support-secondary {
    padding: 8px 12px;
    color: #fff;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    font: 700 10px Poppins, sans-serif;
}
.staff-support-primary { color: #172238; background: var(--hrp-yellow); }
.staff-support-secondary { background: #2b384e; }
.staff-support-empty { padding: 18px 8px; color: #91a3bc; font-size: 10px; text-align: center; }
.staff-support-spin { animation: staffSupportSpin .8s linear infinite; }
@keyframes staffSupportSpin { to { transform: rotate(360deg); } }
@media (max-width: 680px) {
    .staff-support-body { grid-template-columns: 220px 1fr; }
}

/* ---------- Fenêtre de signalement d'un joueur ---------- */
.report-player-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 8800;
    width: min(460px, calc(100vw - 24px));
    overflow: hidden;
    color: #fff;
    font-family: Poppins, 'Segoe UI', sans-serif;
    background: rgba(24, 28, 36, .9);
    border: 2px solid #2E334D;
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(4px) saturate(150%);
    backdrop-filter: blur(4px) saturate(150%);
    transform: translate(-50%, -50%);
}
.report-player-panel[hidden] { display: none; }
.report-player-header {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 11px 10px 16px;
    cursor: move;
    background: rgba(21, 26, 35, .74);
    border-bottom: 1px solid #2E334D;
}
.report-player-header strong { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.report-player-header strong i { color: var(--hrp-yellow); font-size: 18px; }
.report-player-header button {
    width: 30px;
    height: 30px;
    padding: 0;
    color: #fff;
    cursor: pointer;
    background: var(--hrp-red);
    border: 0;
    border-radius: 8px;
    font-size: 20px;
    line-height: 1;
}
.report-player-form { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.report-player-form label { color: #e9edf4; font-size: 10px; font-weight: 700; }
.report-player-form input,
.report-player-form textarea {
    width: 100%;
    padding: 10px 11px;
    color: #fff;
    outline: none;
    background: rgba(12, 16, 23, .78);
    border: 1px solid #3b425d;
    border-radius: 8px;
    font: 11px Poppins, sans-serif;
}
.report-player-form input[readonly] { color: #bfc9d8; background: rgba(31, 38, 51, .72); }
.report-player-form textarea { height: 125px; resize: none; }
.report-player-form textarea:focus { border-color: var(--hrp-yellow); box-shadow: 0 0 0 2px rgba(255, 196, 49, .09); }
.report-player-form > small { color: #ff7777; font-size: 9px; }
.report-player-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 5px; }
.report-player-actions button {
    padding: 9px 14px;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    font: 700 10px Poppins, sans-serif;
}
.report-player-cancel { color: #fff; background: #344158; }
.report-player-submit { color: #1e1700; background: var(--hrp-yellow); }
.report-player-submit:disabled { cursor: wait; opacity: .6; }

.report-player-success {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 8850;
    width: min(430px, calc(100vw - 24px));
    overflow: hidden;
    color: #fff;
    font-family: Poppins, 'Segoe UI', sans-serif;
    background: rgba(24, 28, 36, .94);
    border: 2px solid #2E334D;
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .5), inset 0 1px rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(4px) saturate(150%);
    backdrop-filter: blur(4px) saturate(150%);
    transform: translate(-50%, -50%);
}
.report-player-success[hidden] { display: none; }
.report-player-success-header {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 11px 10px 16px;
    cursor: move;
    background: rgba(21, 26, 35, .74);
    border-bottom: 1px solid #2E334D;
}
.report-player-success-header strong { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.report-player-success-header strong i { color: #63d978; font-size: 18px; }
.report-player-success-header button {
    width: 30px;
    height: 30px;
    padding: 0;
    color: #fff;
    cursor: pointer;
    background: var(--hrp-red);
    border: 0;
    border-radius: 8px;
    font-size: 20px;
    line-height: 1;
}
.report-player-success-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 18px 12px;
}
.report-player-success-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    color: #102316;
    background: linear-gradient(180deg, #79e68c, #42be59);
    border-radius: 50%;
    box-shadow: inset 0 1px rgba(255, 255, 255, .55), 0 4px 12px rgba(45, 180, 72, .22);
    font-size: 24px;
}
.report-player-success-body > div > strong { font-size: 13px; }
.report-player-success-body p { margin: 5px 0 7px; color: #aeb6c4; font-size: 10px; line-height: 1.55; }
.report-player-success-body small { color: var(--hrp-yellow); font-size: 10px; font-weight: 800; }
.report-player-success footer { display: flex; justify-content: flex-end; padding: 0 18px 16px; }
.report-player-success footer button {
    padding: 9px 14px;
    color: #1e1700;
    cursor: pointer;
    background: var(--hrp-yellow);
    border: 0;
    border-radius: 8px;
    font: 700 10px Poppins, sans-serif;
}

/* ============================================================
   Mini administration
   ============================================================ */
.admin-page {
    width: calc(100% - 40px);
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 38px 0 64px;
}
body.site-leaving:not(.client-fullscreen) main {
    filter: blur(2px);
    opacity: .75;
    transition: filter .18s ease, opacity .18s ease;
}
.client-loading-recovery { position:fixed; right:24px; bottom:24px; z-index:100000; width:min(360px,calc(100vw - 32px)); }
.client-loading-recovery[hidden] { display:none!important; }
.client-loading-recovery > div { display:grid; grid-template-columns:minmax(0,1fr); gap:3px; align-items:center; padding:16px; color:#fff; border:1px solid rgba(255,196,49,.45); border-radius:12px; background:rgba(24,32,47,.96); box-shadow:0 16px 40px rgba(0,0,0,.45); backdrop-filter:blur(8px); }
.client-loading-recovery strong { font-size:14px; }
.client-loading-recovery span { color:var(--hrp-muted); font-size:11px; }
.client-loading-recovery button { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:7px; margin-top:10px; padding:10px 14px; color:#172238; border:0; border-radius:8px; background:var(--hrp-yellow); font:700 12px Poppins,sans-serif; cursor:pointer; }
.client-loading-recovery button:hover { filter:brightness(1.08); }

/* Pendant le chargement Nitro, seul le logo du dock reste au-dessus du loader. */
body.game-mode.client-loading #hotel-layer > :not(.header-hotel-wrapper):not(.ModuleClient) { visibility:hidden!important;pointer-events:none!important; }
body.game-mode.client-loading .header-hotel-wrapper > :not(.header-hotel-dock) { display:none!important; }
body.game-mode.client-loading .header-hotel-dock > :not(.header-hotel-item-logo) { display:none!important; }
body.game-mode.client-loading .header-hotel-item-logo > :not(.header-hotel-icon-logo) { display:none!important; }
.admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.admin-stats article { min-width: 0; display: flex; align-items: center; gap: 14px; padding: 20px; background: var(--hrp-panel-soft); border: 1px solid var(--hrp-border); border-radius: 13px; box-shadow: 0 10px 28px rgba(0, 0, 0, .1); }
.admin-stats article > span { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 48px; color: #172238; background: var(--hrp-yellow); border-radius: 11px; font-size: 23px; }
.admin-stats article.has-alert > span { background: var(--hrp-yellow); }
.admin-stats article > div { min-width: 0; display: flex; flex-direction: column; }
.admin-stats strong { color: #fff; font-size: 24px; line-height: 1.1; }
.admin-stats small { overflow: hidden; color: var(--hrp-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .7fr); gap: 18px; align-items: start; }
.admin-column { display: grid; gap: 18px; }
.admin-dashboard-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.admin-dashboard-panel { height: 390px; min-width: 0; display: flex; flex-direction: column; }
.admin-dashboard-panel > header { flex: 0 0 auto; }
.admin-dashboard-panel > .admin-activity-list,
.admin-dashboard-panel > .admin-staff-list,
.admin-dashboard-panel > .admin-online-players {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-color: #3a465c transparent;
    scrollbar-width: thin;
}
.admin-online-players {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-content: start;
    justify-content: start;
    gap: 10px 4px;
    padding: 12px 14px 90px;
}
.admin-online-players > .admin-empty { grid-column:1/-1; display:flex; min-height:112px; align-items:center; justify-content:center; margin:8px 0 0; padding:24px; color:var(--hrp-muted); border:1px dashed rgba(153,213,223,.2); border-radius:11px; background:rgba(13,19,29,.18); font-size:12px; line-height:1.5; text-align:center; }
.admin-online-player {
    position: relative;
    z-index: 1;
    width: 58px;
    min-width: 0;
    height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    justify-self: center;
    cursor: pointer;
    color: var(--hrp-muted);
    text-decoration: none;
    outline: 0;
    transition: transform .15s ease, color .15s ease;
}
.admin-online-player:hover,.admin-online-player:focus { color:#fff; transform:translateY(-2px); }
.admin-online-player.is-staff { color:var(--hrp-yellow); }
.admin-online-player .online-player-name { font-size:11px; line-height:16px; }
.admin-online-tooltip {
    position: absolute;
    z-index: 10;
    top: calc(100% + 9px);
    left: 50%;
    width: 170px;
    display: flex;
    flex-direction: column;
    padding: 9px 11px;
    color: #fff;
    pointer-events: none;
    background: #111722;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    box-shadow: 0 9px 22px rgba(0, 0, 0, .3);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -4px);
    transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
.admin-online-tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    border: 6px solid transparent;
    border-bottom-color: #111722;
    transform: translateX(-50%);
}
.admin-online-tooltip strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.admin-online-tooltip small { color: var(--hrp-yellow); font-size: 12px; }
.admin-online-tooltip em { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--hrp-muted); font-size: 12px; font-style: normal; }
.admin-online-player:hover,
.admin-online-player:focus { z-index: 20; }
.admin-online-player:hover .admin-online-tooltip,
.admin-online-player:focus .admin-online-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}
.admin-online-player:nth-child(6n + 1) .admin-online-tooltip { left: -4px; transform: translateY(-4px); }
.admin-online-player:nth-child(6n + 1) .admin-online-tooltip::before { left: 32px; }
.admin-online-player:nth-child(6n) .admin-online-tooltip { right: -4px; left: auto; transform: translateY(-4px); }
.admin-online-player:nth-child(6n) .admin-online-tooltip::before { right: 32px; left: auto; transform: none; }
.admin-online-player:nth-child(6n + 1):hover .admin-online-tooltip,
.admin-online-player:nth-child(6n + 1):focus .admin-online-tooltip,
.admin-online-player:nth-child(6n):hover .admin-online-tooltip,
.admin-online-player:nth-child(6n):focus .admin-online-tooltip { transform: translateY(0); }
.admin-activity-list { padding: 5px 16px 10px; }
.admin-activity-item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; padding: 7px 0; }
.admin-activity-item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 39px;
    bottom: -4px;
    left: 16px;
    border-left: 1px dashed rgba(153, 213, 223, .22);
}
.admin-activity-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--hrp-yellow); border: 1px dashed rgba(153, 213, 223, .3); border-radius: 50%; font-size: 15px; }
.admin-activity-item > div { min-width: 0; }
.admin-activity-item header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-activity-item strong { overflow: hidden; color: #fff; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.admin-activity-item time { flex: 0 0 auto; color: var(--hrp-muted); font-size: 13px; }
.admin-activity-item small { display: block; margin-top: 0; color: var(--hrp-yellow); font-size: 14px; line-height: 1.3; }
.admin-activity-item p { display: flex; align-items: center; gap: 6px; margin: 1px 0 0; color: #dce4ef; font-size: 16px; font-weight: 700; line-height: 1.2; }
.admin-player-profile-link { display: inline-flex; align-items: center; gap: 6px; color: #dce4ef; border-radius: 7px; transition: color .14s ease, background .14s ease; }
.admin-player-profile-link:hover,
.admin-player-profile-link:focus { color: var(--hrp-yellow); }
.admin-activity-item p img {
    flex: 0 0 auto;
    image-rendering: pixelated;
}
.admin-card { overflow: hidden; background: var(--hrp-panel-soft); border: 1px solid var(--hrp-border); border-radius: 13px; }
.admin-card > header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--hrp-border); }
.admin-card > header h2 { margin: 0; color: #fff; font-size: 18px; }
.admin-card > header p { margin: 3px 0 0; color: var(--hrp-muted); font-size: 11px; }
.admin-card > header > i { color: var(--hrp-yellow); font-size: 25px; }
.admin-user-list { padding: 8px 16px 16px; }
.admin-user-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 66px; border-bottom: 1px solid rgba(255,255,255,.055); }
.admin-user-row:last-child { border-bottom: 0; }
.admin-user-row img, .admin-staff-list img {
    width: 52px;
    height: auto;
    flex: 0 0 auto;
    image-rendering: pixelated;
}
.admin-user-row > span, .admin-staff-list span { min-width: 0; display: flex; flex-direction: column; }
.admin-user-row strong, .admin-staff-list strong { color: #fff; font-size: 13px; }
.admin-user-row small, .admin-staff-list small { color: var(--hrp-muted); font-size: 10px; }
.admin-user-row em { padding: 5px 8px; color: #9da9ba; background: #293348; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 800; }
.admin-user-row em.is-online { color: #72df87; background: rgba(52, 181, 80, .14); }
.admin-staff-list { padding: 6px 16px 10px; }
.admin-staff-list > div { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.admin-empty { margin: 10px 0 4px; color: var(--hrp-muted); font-size: 11px; }
.admin-shortcuts > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; }
.admin-shortcuts a { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 15px 7px; color: #dce4ef; background: var(--hrp-panel); border: 1px solid var(--hrp-border); border-radius: 10px; font-size: 11px; font-weight: 700; }
.admin-shortcuts a:hover { color: #fff; border-color: rgba(255, 196, 49, .42); }
.admin-shortcuts a i { color: var(--hrp-yellow); font-size: 22px; }
.admin-flash {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 13px 16px;
    border: 1px solid;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 600;
}
.admin-flash.is-success { color: #82e794; background: rgba(52,181,80,.1); border-color: rgba(52,181,80,.28); }
.admin-flash.is-error { color: #ff8585; background: rgba(208,20,20,.1); border-color: rgba(208,20,20,.28); }
.admin-chart-card { margin-bottom: 18px; }
.admin-chart-wrap { position: relative; height: 310px; padding: 20px; }
.admin-chart-header-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}
.admin-chart-header-actions label { color: var(--hrp-muted); font-size: 10px; font-weight: 700; }
.admin-chart-header-actions select {
    padding: 9px 32px 9px 11px;
    color: #fff;
    background: var(--hrp-panel);
    border: 1px solid var(--hrp-border);
    border-radius: 8px;
    outline: 0;
    font: 600 10px Poppins, sans-serif;
}
.admin-chart-header-actions > i {
    margin-left: 5px;
    color: var(--hrp-yellow);
    font-size: 25px;
}

/* Administration : typographie lisible sur toutes les vues. */
.admin-page {
    font-size: 16px;
    line-height: 1.5;
}
.admin-page .admin-stats small,
.admin-page .admin-card > header p,
.admin-page .admin-empty,
.admin-page .admin-shortcuts a,
.admin-page .admin-flash,
.admin-page .admin-session-history > header p,
.admin-page .admin-user-summary > p,
.admin-page .admin-user-summary dt,
.admin-page .admin-user-tabs a,
.admin-page .admin-edit-actions > a,
.admin-page .admin-search input,
.admin-page .admin-search button,
.admin-page .admin-primary-button,
.admin-page .admin-table,
.admin-page .admin-list-footer form label,
.admin-page .admin-list-footer nav span,
.admin-page .admin-form-grid label > span,
.admin-page .admin-form-grid input,
.admin-page .admin-form-grid textarea,
.admin-page .admin-form-grid select,
.admin-page .admin-edit-form footer > a,
.admin-page .admin-table-menu nav a {
    font-size: 16px;
}
.admin-page .admin-user-row strong,
.admin-page .admin-staff-list strong,
.admin-page .admin-table-user strong {
    font-size: 16px;
}
.admin-page .admin-user-row small,
.admin-page .admin-staff-list small,
.admin-page .admin-table-user small,
.admin-page .admin-user-summary dd,
.admin-page .admin-form-grid label > span small,
.admin-page .admin-chart-header-actions label {
    font-size: 14px;
}
.admin-page .admin-user-row em,
.admin-page .admin-rank-badge,
.admin-page .admin-status,
.admin-page .admin-table th {
    font-size: 13px;
}
.admin-page .admin-chart-header-actions select,
.admin-page .admin-list-footer select {
    font-size: 14px;
}
.admin-session-history { margin-top: 4px; border-top: 1px solid var(--hrp-border); }
.admin-session-history > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--hrp-border);
}
.admin-session-history > header h2 { margin: 0; color: #fff; font-size: 16px; }
.admin-session-history > header p { margin: 3px 0 0; color: var(--hrp-muted); font-size: 10px; }
.admin-session-history > header > i { color: var(--hrp-yellow); font-size: 24px; }
.admin-history-scroll { overflow: auto; scrollbar-color: #3a465c transparent; scrollbar-width: thin; }
.admin-game-history-scroll { max-height: 322px; }
.admin-site-history-scroll { max-height: 410px; }
.admin-history-scroll .admin-table thead { position: sticky; z-index: 2; top: 0; }
.admin-login-ip,
.admin-user-agent { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.admin-login-ip { color: #72df87; }
.admin-user-agent { max-width: 280px; overflow: hidden; color: #dce4ef; text-overflow: ellipsis; }
.admin-login-ip i,
.admin-user-agent i { color: var(--hrp-yellow); }
.admin-user-edit-layout { display: grid; grid-template-columns: 285px minmax(0,1fr); gap: 18px; align-items: start; }
.admin-user-summary { position: sticky; top: 92px; padding: 24px 20px; text-align: center; }
.admin-summary-avatar { width: 132px; height: 132px; margin: 0 auto 14px; overflow: hidden; background: linear-gradient(145deg, rgba(255,196,49,.18), rgba(153,213,223,.1)); border: 1px solid rgba(255,196,49,.28); border-radius: 50%; }
.admin-summary-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; transform: scale(1.42) translateY(7px); }
.admin-user-summary > h2 { margin: 0; color: #fff; font-size: 20px; }
.admin-user-summary > p { margin: 4px 0 22px; overflow: hidden; color: var(--hrp-muted); font-size: 10px; text-overflow: ellipsis; }
.admin-user-summary dl { margin: 0; text-align: left; }
.admin-user-summary dl > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px dashed rgba(255,255,255,.08); }
.admin-user-summary dl > div:last-child { border-bottom: 0; }
.admin-user-summary dt { color: #fff; font-size: 10px; font-weight: 700; }
.admin-user-summary dd { margin: 0; color: var(--hrp-muted); font-size: 9px; text-align: right; }
.admin-user-edit-content { display: grid; gap: 18px; min-width: 0; }
.admin-user-edit-content .admin-card { min-width: 0; }
.admin-user-tabs { display: flex; gap: 22px; overflow-x: auto; border-bottom: 1px solid var(--hrp-border); }
.admin-user-tabs a { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 11px 2px 12px; color: var(--hrp-muted); border-bottom: 2px solid transparent; font-size: 12px; font-weight: 700; }
.admin-user-tabs a:hover { color: #fff; }
.admin-user-tabs a.active { color: var(--hrp-yellow); border-bottom-color: var(--hrp-yellow); }
.admin-user-support { min-height: 620px; display: grid; grid-template-columns: 310px minmax(0, 1fr); }
.admin-support-ticket-list { min-width: 0; border-right: 1px solid var(--hrp-border); }
.admin-support-ticket-list > header,
.admin-support-conversation > header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--hrp-border); }
.admin-support-ticket-list > header h2,
.admin-support-conversation > header h2 { margin: 0; color: #fff; font-size: 18px; }
.admin-support-ticket-list > header p,
.admin-support-conversation > header small { margin: 3px 0 0; color: var(--hrp-muted); font-size: 13px; }
.admin-support-ticket-list > header > i { color: var(--hrp-yellow); font-size: 23px; }
.admin-support-ticket-list nav { max-height: 540px; overflow-y: auto; padding: 8px; scrollbar-color: #3a465c transparent; scrollbar-width: thin; }
.admin-support-ticket-list nav > a { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 11px; color: #dce4ef; border: 1px solid transparent; border-radius: 9px; }
.admin-support-ticket-list nav > a:hover { background: rgba(255,255,255,.035); }
.admin-support-ticket-list nav > a.active { background: rgba(255,196,49,.08); border-color: rgba(255,196,49,.35); }
.admin-support-ticket-list nav > a > span { min-width: 0; display: flex; flex-direction: column; }
.admin-global-support { grid-template-columns: 360px minmax(0, 1fr); min-height: 680px; }
.admin-global-support .admin-support-ticket-list nav { max-height: 598px; }
.admin-global-support .admin-support-conversation { height: 680px; }
.admin-global-support .admin-support-messages { max-height: none; }
.admin-global-support .admin-support-reply { margin-top: auto; }
.admin-support-ticket-avatar {
    flex: 0 0 36px;
    width: 100%;
    height: auto;
    object-fit: contain;
    image-rendering: pixelated;
}
.admin-ticket-pending {
    display: grid;
    place-items: center;
    flex: 0 0 23px;
    min-width: 23px;
    height: 23px;
    padding: 0 5px;
    color: #171d28;
    background: var(--hrp-yellow);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

/* =========================
   Paramètres du compte
   ========================= */
.account-settings-page { min-height: 100vh; color: var(--hrp-text); background: var(--hrp-bg); }
.settings-main { width: min(1320px, calc(100% - 40px)); min-height: calc(100vh - 170px); margin: 0 auto; padding: 38px 0 54px; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.settings-heading small { display: inline-flex; align-items: center; gap: 7px; color: var(--hrp-yellow); font-size: 12px; font-weight: 800; }
.settings-heading h1 { margin: 5px 0 0; color: #fff; font-size: 32px; }
.settings-heading p { margin: 4px 0 0; color: var(--hrp-muted); font-size: 16px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.settings-card { overflow: hidden; background: var(--hrp-panel-soft); border: 1px solid var(--hrp-border); border-radius: 13px; }
.settings-card > header { display: flex; align-items: center; gap: 13px; min-height: 82px; padding: 16px 20px; border-bottom: 1px solid var(--hrp-border); }
.settings-card > header > span { display: grid; place-items: center; flex: 0 0 43px; width: 43px; height: 43px; color: #171d28; background: var(--hrp-yellow); border-radius: 11px; font-size: 21px; }
.settings-card > header h2 { margin: 0; color: #fff; font-size: 19px; }
.settings-card > header p { margin: 3px 0 0; color: var(--hrp-muted); font-size: 14px; }
.settings-card-body { padding: 20px; }
.settings-form { display: grid; gap: 17px; }
.settings-card-body > .settings-form { margin-top: 18px; }
.settings-fields-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-field { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.settings-field > span { color: #fff; font-size: 15px; font-weight: 700; }
.settings-field input {
    width: 100%;
    height: 48px;
    padding: 0 13px;
    color: #fff;
    background: #171e2c;
    border: 1px solid var(--hrp-border);
    border-radius: 9px;
    outline: 0;
    font: 500 16px Poppins, sans-serif;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.settings-field input:focus { border-color: rgba(255,196,49,.7); box-shadow: 0 0 0 3px rgba(255,196,49,.08); }
.settings-field input[readonly] { color: #9aa8bc; background: rgba(13,19,29,.32); cursor: not-allowed; }
.settings-field small { color: var(--hrp-muted); font-size: 12px; }
.settings-oauth-card { grid-column: 1 / -1; }
.settings-oauth-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.settings-oauth-row { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 13px; min-height: 82px; padding: 13px; background: rgba(14,20,31,.42); border: 1px solid var(--hrp-border); border-radius: 11px; }
.settings-oauth-icon,.admin-oauth-icon { display: grid; place-items: center; width: 44px; height: 44px; color: #171d28; background: var(--hrp-yellow); border-radius: 10px; font-size: 22px; }
.settings-oauth-row > div,.admin-oauth-row > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.settings-oauth-row strong,.admin-oauth-row strong { color: #fff; font-size: 15px; }
.settings-oauth-row small,.settings-oauth-row em,.admin-oauth-row small,.admin-oauth-row em { overflow: hidden; color: var(--hrp-muted); font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.settings-oauth-button,.settings-oauth-primary,.admin-oauth-primary,.admin-oauth-unlink { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 12px; color: #151b25; background: var(--hrp-yellow); border: 0; border-radius: 9px; font-size: 12px; font-weight: 800; }
.settings-oauth-button,
.settings-oauth-button:visited,
.settings-oauth-button:hover,
.settings-oauth-button:focus { color: #151b25 !important; text-decoration: none; }
.settings-oauth-button.is-danger,
.settings-oauth-button.is-danger:visited,
.settings-oauth-button.is-danger:hover,
.settings-oauth-button.is-danger:focus,
.admin-oauth-unlink {
    color: #fff !important;
    background: #d72f36;
    box-shadow: 0 6px 16px rgba(215,47,54,.2);
}
.settings-oauth-button.is-danger:hover,
.admin-oauth-unlink:hover { background: #eb3b42; }
.settings-oauth-primary,.admin-oauth-primary { color: var(--hrp-yellow); background: rgba(255,196,49,.12); }

/* Notifications globales */
.hrp-toast-stack {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2147483000;
    display: flex;
    width: min(390px, calc(100vw - 28px));
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
}
.game-mode .hrp-toast-stack {
    bottom: calc(76px + env(safe-area-inset-bottom));
}
.hrp-toast {
    --toast-color: #ffc431;
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0,1fr) 30px;
    align-items: center;
    min-height: 66px;
    overflow: hidden;
    color: #fff;
    background: rgba(22,29,42,.96);
    border: 1px solid color-mix(in srgb,var(--toast-color) 55%,transparent);
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(0,0,0,.34);
    backdrop-filter: blur(14px);
    pointer-events: auto;
    animation: hrp-toast-in .32s cubic-bezier(.2,.8,.2,1) both;
}
.hrp-toast.is-error { --toast-color: #ef4545; background: rgba(191,45,48,.96); }
.hrp-toast.is-success { --toast-color: #38b85a; }
.hrp-toast.is-info { --toast-color: #ffc431; }
.hrp-toast.is-leaving { animation: hrp-toast-out .25s ease forwards; }
.hrp-toast-figure {
    position: relative;
    align-self: stretch;
    overflow: hidden;
}
.hrp-toast-figure img {
    position: absolute;
    bottom: -32px;;
    object-fit: contain;
    image-rendering: pixelated;
}
.hrp-toast-copy { min-width: 0; padding: 13px 8px 13px 2px; }
.hrp-toast-copy strong { display: block; color: #fff; font-size: 14px; line-height: 1.35; }
.hrp-toast-copy small { display: block; margin-top: 2px; color: rgba(255,255,255,.76); font-size: 11px; }
.hrp-toast-close {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    padding: 0;
    color: rgba(255,255,255,.8);
    background: transparent;
    border: 0;
    border-radius: 7px;
}
.hrp-toast-close:hover { color: #fff; background: rgba(255,255,255,.1); }
.hrp-toast-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--toast-color);
    transform-origin: left;
    animation: hrp-toast-progress var(--toast-duration,4500ms) linear forwards;
}
.hrp-toast.is-paused .hrp-toast-progress { animation-play-state: paused; }
@keyframes hrp-toast-in {
    from { opacity: 0; transform: translate3d(28px,12px,0) scale(.97); }
    to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes hrp-toast-out {
    to { opacity: 0; transform: translate3d(32px,0,0) scale(.96); }
}
@keyframes hrp-toast-progress { to { transform: scaleX(0); } }
@media (max-width: 600px) {
    .hrp-toast-stack { right: 14px; bottom: 14px; left: 14px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .hrp-toast,.hrp-toast.is-leaving { animation-duration: .01ms; }
}
.settings-form footer { display: flex; justify-content: flex-end; padding-top: 2px; }
.settings-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    color: #171d28;
    background: var(--hrp-yellow);
    border: 0;
    border-radius: 9px;
    font: 800 14px Poppins, sans-serif;
    cursor: pointer;
}
.settings-primary-button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.settings-primary-button:disabled { opacity: .6; cursor: wait; transform: none; }
.settings-preferences-card { grid-column: 1 / -1; }
.settings-switch-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 82px; padding: 15px 17px; background: rgba(13,19,29,.3); border: 1px solid var(--hrp-border); border-radius: 10px; cursor: pointer; }
.settings-switch-row > span { display: flex; min-width: 0; flex-direction: column; }
.settings-switch-row strong { color: #fff; font-size: 15px; }
.settings-switch-row small { margin-top: 3px; color: var(--hrp-muted); font-size: 13px; line-height: 1.4; }
.settings-switch-row input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.settings-switch-row > i { position: relative; flex: 0 0 48px; width: 48px; height: 27px; background: #3a4559; border-radius: 999px; transition: background .2s ease; }
.settings-switch-row > i::after { position: absolute; top: 4px; left: 4px; width: 19px; height: 19px; content: ""; background: #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: transform .2s ease; }
.settings-switch-row input:checked + i { background: #35ae4f; }
.settings-switch-row input:checked + i::after { transform: translateX(21px); }
.settings-history-card { grid-column: 1 / -1; }
.settings-history-scroll { max-height: 390px; overflow: auto; scrollbar-color: #3a465c transparent; scrollbar-width: thin; }
.settings-history-scroll table { width: 100%; border-collapse: collapse; }
.settings-history-scroll th { position: sticky; z-index: 1; top: 0; padding: 13px 18px; color: #9eacc0; background: #222b3d; font-size: 12px; text-align: left; text-transform: uppercase; }
.settings-history-scroll td { padding: 14px 18px; color: #dce5f1; border-top: 1px solid var(--hrp-border); font-size: 14px; }
.settings-history-scroll tbody tr:hover { background: rgba(255,255,255,.02); }
.settings-empty { color: var(--hrp-muted) !important; text-align: center; }
.settings-flash,
.settings-ajax-notice { display: flex; align-items: center; gap: 8px; margin-bottom: 17px; padding: 12px 15px; border: 1px solid; border-radius: 10px; font-size: 14px; font-weight: 600; }
.settings-ajax-notice { position: fixed; z-index: 12000; top: 88px; right: 22px; max-width: min(390px, calc(100% - 44px)); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.settings-flash.is-success,.settings-ajax-notice.is-success { color: #8aeb9c; background: #173325; border-color: rgba(82,204,105,.35); }
.settings-flash.is-error,.settings-ajax-notice.is-error { color: #ff9a9a; background: #3a1d25; border-color: rgba(235,79,79,.35); }

@media (max-width: 800px) {
    .settings-main { width: min(100% - 24px, 680px); padding-top: 25px; }
    .settings-grid,.settings-switch-list { grid-template-columns: 1fr; }
    .settings-preferences-card,.settings-history-card { grid-column: auto; }
    .settings-history-scroll table { min-width: 760px; }
}
@media (max-width: 520px) {
    .settings-oauth-list { grid-template-columns: 1fr; }
    .settings-oauth-row,.admin-oauth-row { grid-template-columns: 42px minmax(0,1fr); }
    .settings-oauth-row > :last-child,.admin-oauth-row > :last-child { grid-column: 1 / -1; }
    .settings-heading h1 { font-size: 27px; }
    .settings-heading p { font-size: 14px; }
    .settings-fields-row { grid-template-columns: 1fr; }
    .settings-card-body { padding: 16px; }
    .settings-card > header { padding: 14px 16px; }
    .settings-primary-button { width: 100%; }
}
.admin-support-ticket-list nav strong { overflow: hidden; color: #fff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.admin-support-ticket-list nav small { color: var(--hrp-muted); font-size: 11px; }
.admin-ticket-status { flex: 0 0 auto; padding: 5px 7px; color: #9da9ba; background: #293348; border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 800; }
.admin-ticket-status.is-open { color: #ffc431; background: rgba(255,196,49,.13); }
.admin-ticket-status.is-answered { color: #72df87; background: rgba(52,181,80,.14); }
.admin-support-conversation { min-width: 0; display: flex; flex-direction: column; }
.admin-support-conversation > header form select { padding: 8px 30px 8px 10px; color: #fff; background: var(--hrp-panel); border: 1px solid var(--hrp-border); border-radius: 8px; font: 600 13px Poppins,sans-serif; }
.admin-support-messages { min-height: 0; max-height: 405px; display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; overflow-y: auto; padding: 16px; scrollbar-color: #3a465c transparent; scrollbar-width: thin; }
.admin-support-messages article { width: min(82%, 620px); padding: 11px 13px; background: #293348; border: 1px solid rgba(153,213,223,.15); border-radius: 10px; }
.admin-support-messages article.is-staff { align-self: flex-end; background: rgba(255,196,49,.09); border-color: rgba(255,196,49,.32); }
.admin-support-messages article header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-support-messages article strong { color: #fff; font-size: 13px; }
.admin-support-messages article time { color: var(--hrp-muted); font-size: 11px; }
.admin-support-messages article p { margin: 7px 0 0; color: #e5ebf4; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.admin-support-reply { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--hrp-border); }
.admin-support-reply textarea { min-height: 78px; padding: 11px 12px; color: #fff; background: #151c29; border: 1px solid var(--hrp-border); border-radius: 9px; resize: vertical; font: 500 14px Poppins,sans-serif; }
.admin-support-reply button { align-self: end; }
.admin-support-empty { min-height: 460px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--hrp-muted); text-align: center; }
.admin-support-empty i { color: var(--hrp-yellow); font-size: 36px; }
.admin-support-empty p { margin: 0; font-size: 14px; }
.admin-user-information-form { overflow: hidden; }
.admin-oauth-card { overflow: hidden; }
.admin-oauth-card > header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--hrp-border); }
.admin-oauth-card > header h2 { margin: 0; color: #fff; font-size: 18px; }
.admin-oauth-card > header p { margin: 3px 0 0; color: var(--hrp-muted); font-size: 14px; }
.admin-oauth-card > header > i { color: var(--hrp-yellow); font-size: 23px; }
.admin-oauth-list { display: grid; gap: 10px; padding: 16px 20px 20px; }
.admin-oauth-row { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 12px; background: rgba(14,20,31,.35); border: 1px solid var(--hrp-border); border-radius: 11px; }
.admin-user-information-form .admin-form-grid { padding-bottom: 18px; }
.admin-edit-form footer.admin-card-actions {
    display: flex;
    justify-content: flex-end;
    padding: 14px 20px;
    background: rgba(14, 20, 31, .22);
    border-top: 1px solid var(--hrp-border);
}
.admin-card-actions .admin-primary-button { min-width: 145px; justify-content: center; }

/* Support d'un joueur : vraie disposition de messagerie, plus compacte et lisible. */
.admin-user-support {
    position: relative;
    min-height: 570px;
    grid-template-columns: 285px minmax(0, 1fr);
    overflow: hidden;
    transition: opacity .18s ease, border-color .18s ease;
}
.admin-user-support.is-loading { opacity: .68; pointer-events: none; }
.admin-user-support.is-loading::after {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: calc(285px + (100% - 285px) / 2);
    width: 24px;
    height: 24px;
    margin: -12px;
    content: "";
    border: 3px solid rgba(255,255,255,.18);
    border-top-color: var(--hrp-yellow);
    border-radius: 50%;
    animation: admin-support-spin .65s linear infinite;
}
.admin-user-support.has-error { border-color: rgba(220, 62, 62, .7); }
@keyframes admin-support-spin { to { transform: rotate(360deg); } }
.admin-support-ticket-list { background: rgba(13, 19, 29, .14); }
.admin-support-ticket-list > header,
.admin-support-conversation > header {
    min-height: 82px;
    padding: 16px 18px;
}
.admin-support-ticket-list nav {
    max-height: 488px;
    padding: 10px;
}
.admin-support-ticket-list nav > a {
    min-height: 62px;
    margin-bottom: 5px;
    padding: 10px 11px;
    border-radius: 10px;
}
.admin-support-ticket-list nav > a:last-child { margin-bottom: 0; }
.admin-support-ticket-list nav > a.active {
    background: linear-gradient(90deg, rgba(255,196,49,.11), rgba(255,196,49,.045));
}
.admin-support-ticket-list nav strong { font-size: 13px; }
.admin-support-ticket-list nav small { margin-top: 2px; font-size: 11px; }
.admin-support-conversation > header {
    background: rgba(13, 19, 29, .12);
}
.admin-support-conversation > header form select {
    min-width: 125px;
    height: 40px;
}
.admin-support-messages {
    max-height: 370px;
    gap: 12px;
    padding: 18px;
    background: rgba(12, 18, 28, .08);
}
.admin-support-messages article {
    width: min(76%, 590px);
    padding: 12px 14px;
    border-radius: 12px 12px 12px 4px;
    box-shadow: 0 4px 14px rgba(5, 9, 16, .08);
}
.admin-support-messages article.is-staff {
    border-radius: 12px 12px 4px 12px;
}
.admin-support-messages article p { margin-top: 8px; }
.admin-support-reply {
    align-items: end;
    padding: 14px 18px 16px;
    background: rgba(13, 19, 29, .16);
}
.admin-support-reply textarea {
    min-height: 82px;
    max-height: 180px;
}
.admin-support-reply .admin-primary-button {
    min-height: 44px;
    justify-content: center;
}
.admin-edit-actions { position: sticky; bottom: 12px; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px; background: rgba(31,38,53,.94); border: 1px solid var(--hrp-border); border-radius: 11px; backdrop-filter: blur(8px); }
.admin-edit-actions > a { color: var(--hrp-muted); font-size: 11px; }
.admin-list-header { flex-wrap: wrap; }
.admin-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: min(100%, 440px);
    padding-left: 12px;
    background: var(--hrp-panel);
    border: 1px solid var(--hrp-border);
    border-radius: 9px;
}
.admin-search i { color: var(--hrp-muted); }
.admin-search input {
    min-width: 0;
    flex: 1;
    padding: 10px 0;
    color: #fff;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 11px;
}
.admin-search button, .admin-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 14px;
    color: #172238;
    background: var(--hrp-yellow);
    border: 0;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
}
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; color: #dce4ef; font-size: 11px; }
.admin-table th { padding: 12px 16px; color: var(--hrp-muted); background: rgba(0,0,0,.08); font-size: 9px; text-align: left; text-transform: uppercase; white-space: nowrap; }
.admin-table th > a { display: inline-flex; align-items: center; gap: 5px; color: inherit; }
.admin-table th > a:hover { color: var(--hrp-yellow); }
.admin-table td { padding: 11px 16px; border-top: 1px solid rgba(255,255,255,.055); white-space: nowrap; }
.admin-table-user { display: flex; align-items: center; gap: 10px; }
.admin-table-user img { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.admin-table-user > span { display: flex; min-width: 0; flex-direction: column; }
.admin-table-user strong { color: #fff; font-size: 12px; }
.admin-table-user small { max-width: 210px; overflow: hidden; color: var(--hrp-muted); font-size: 9px; text-overflow: ellipsis; }
.admin-user-id { color: var(--hrp-muted); font-weight: 700; }
.admin-rank-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; color: var(--rank-color); background: color-mix(in srgb, var(--rank-color) 13%, transparent); border: 1px solid color-mix(in srgb, var(--rank-color) 22%, transparent); border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.admin-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; color: #9da9ba; background: #293348; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 800; }
.admin-status.is-online { color: #72df87; background: rgba(52,181,80,.14); }
.admin-playtime { display: inline-flex; align-items: center; gap: 5px; color: #99d5df; font-weight: 700; white-space: nowrap; }
.admin-edit-link { display: inline-flex; align-items: center; gap: 5px; color: var(--hrp-yellow); font-weight: 700; }
.admin-users-table tbody tr { transition: background .15s ease; }
.admin-users-table tbody tr:hover { background: rgba(255,255,255,.025); }
.admin-list-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-top: 1px solid var(--hrp-border); }
.admin-list-footer form label { display: flex; align-items: center; gap: 7px; color: var(--hrp-muted); font-size: 10px; }
.admin-list-footer select { padding: 7px 28px 7px 9px; color: #fff; background: var(--hrp-panel); border: 1px solid var(--hrp-border); border-radius: 7px; font: 600 10px Poppins,sans-serif; }
.admin-list-footer nav { display: flex; align-items: center; gap: 9px; }
.admin-list-footer nav span { color: var(--hrp-muted); font-size: 10px; }
.admin-list-footer nav a { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--hrp-panel); border: 1px solid var(--hrp-border); border-radius: 7px; }
.admin-list-footer nav a:hover { color: #172238; background: var(--hrp-yellow); }
.admin-list-footer nav a.disabled { opacity: .35; pointer-events: none; }
.admin-user-picker > div { padding: 20px; }
.admin-edit-identity { display: flex; align-items: center; gap: 12px; }
.admin-edit-identity img { width: 50px; height: 50px; object-fit: contain; image-rendering: pixelated; }
.admin-edit-identity span { min-width: 0; }
.admin-edit-form .admin-form-grid, .admin-roleplay-row .admin-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 20px;
}
.admin-form-grid label { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.admin-form-grid label.is-wide { grid-column: 1 / -1; }
.admin-form-grid label > span { color: #fff; font-size: 10px; font-weight: 700; }
.admin-form-grid label > span small { margin-left: 4px; color: var(--hrp-muted); font-size: 8px; font-weight: 500; }
.admin-form-grid input, .admin-form-grid textarea, .admin-form-grid select {
    width: 100%;
    padding: 11px 12px;
    color: #fff;
    background: var(--hrp-panel);
    border: 1px solid var(--hrp-border);
    border-radius: 8px;
    outline: 0;
    font: 500 11px Poppins, sans-serif;
}
.admin-form-grid select { cursor: pointer; }
.admin-form-grid input:focus, .admin-form-grid textarea:focus, .admin-form-grid select:focus { border-color: rgba(255,196,49,.65); }
.admin-form-grid input[readonly] { color: #78869b; background: rgba(0,0,0,.12); }
.admin-form-grid textarea { min-height: 90px; resize: vertical; }
.admin-weapons-form > header { border-bottom: 1px solid var(--hrp-border); }
.admin-weapons-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:20px; }
.admin-weapon-card { overflow:hidden; border:1px solid rgba(128,151,190,.18); border-radius:14px; background:linear-gradient(145deg,rgba(32,44,64,.88),rgba(20,29,44,.94)); box-shadow:0 10px 28px rgba(0,0,0,.13); }
.admin-weapon-card > header { display:flex; align-items:center; gap:14px; padding:16px 18px; border-bottom:1px solid rgba(128,151,190,.14); background:linear-gradient(90deg,rgba(255,196,49,.07),transparent 65%); }
.admin-weapon-icon { display:grid; width:58px; height:58px; flex:0 0 58px; place-items:center; border:1px solid rgba(255,196,49,.3); border-radius:12px; background:rgba(8,14,24,.55); image-rendering:pixelated; }
.admin-weapon-icon img { max-width:48px; max-height:42px; }
.admin-weapon-card h3 { margin:0 0 4px; color:#fff; font-size:18px; }
.admin-weapon-card header p { margin:0; color:var(--hrp-muted); font-size:11px; }
.admin-weapon-card fieldset { margin:0; padding:14px 18px 17px; border:0; border-bottom:1px solid rgba(128,151,190,.12); }
.admin-weapon-card fieldset:last-child { border-bottom:0; }
.admin-weapon-card legend { padding:0; color:#aebbd0; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.admin-weapon-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.admin-weapon-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.admin-weapon-card label { display:flex; min-width:0; flex-direction:column; gap:6px; }
.admin-weapon-card label > span { display:flex; align-items:center; gap:6px; color:#e7edf7; font-size:10px; font-weight:700; }
.admin-weapon-card label > span i { color:#ffc431; font-size:14px; }
.admin-weapon-card label > div { display:flex; overflow:hidden; align-items:center; border:1px solid rgba(113,137,178,.24); border-radius:8px; background:rgba(8,14,25,.42); transition:border-color .15s,box-shadow .15s; }
.admin-weapon-card label > div:focus-within { border-color:rgba(255,196,49,.65); box-shadow:0 0 0 3px rgba(255,196,49,.08); }
.admin-weapon-card input { width:100%; min-width:0; padding:10px 11px; border:0!important; outline:0; color:#fff; background:transparent!important; font:700 12px inherit; }
.admin-weapon-card label b { padding-right:10px; color:#78869b; font-size:9px; font-weight:700; }
.admin-weapon-card .admin-weapon-bonus-toggle { grid-column:1/-1; display:flex; flex-direction:row; align-items:center; justify-content:space-between; min-height:42px; padding:0 11px; border:1px solid rgba(113,137,178,.24); border-radius:8px; cursor:pointer; background:rgba(8,14,25,.42); }
.admin-weapon-card .admin-weapon-bonus-toggle input[type="checkbox"] { position:absolute; width:1px; height:1px; padding:0; opacity:0; pointer-events:none; }
.admin-weapon-card .admin-weapon-bonus-toggle > i { position:relative; width:48px; height:26px; flex:0 0 48px; border-radius:999px; background:#4b5870; transition:background .18s ease,box-shadow .18s ease; }
.admin-weapon-card .admin-weapon-bonus-toggle > i::after { content:""; position:absolute; top:4px; left:4px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.28); transition:transform .18s ease; }
.admin-weapon-card .admin-weapon-bonus-toggle input[type="checkbox"]:checked + i { background:#36b568; }
.admin-weapon-card .admin-weapon-bonus-toggle input[type="checkbox"]:checked + i::after { transform:translateX(22px); }
.admin-weapon-card .admin-weapon-bonus-toggle input[type="checkbox"]:focus + i { box-shadow:0 0 0 3px rgba(255,196,49,.22); }
@media (max-width:900px){.admin-weapons-grid{grid-template-columns:1fr}.admin-weapon-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.admin-weapons-grid{padding:12px}.admin-weapon-stats,.admin-weapon-options{grid-template-columns:1fr}}
.admin-edit-form footer, .admin-roleplay-row footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 20px 20px; }
.admin-edit-form footer > a { color: var(--hrp-muted); font-size: 11px; }
.admin-settings-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.admin-registration-codes { display: grid; gap: 18px; }
.admin-registration-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:20px; }
.admin-registration-settings footer { display:flex; justify-content:flex-end; padding:0 20px 20px; }
.admin-registration-toggle { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:82px; padding:15px 17px; border:1px solid var(--hrp-border); border-radius:10px; background:rgba(13,19,29,.3); cursor:pointer; }
.admin-registration-toggle > span { display:flex; min-width:0; flex-direction:column; }
.admin-registration-toggle strong { color:#fff; font-size:13px; }
.admin-registration-toggle small { margin-top:3px; color:var(--hrp-muted); font-size:10px; line-height:1.45; }
.admin-registration-toggle input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.admin-registration-toggle > i { position:relative; flex:0 0 48px; width:48px; height:27px; border-radius:999px; background:#3a4559; transition:background .2s ease,box-shadow .2s ease; }
.admin-registration-toggle > i::after { position:absolute; top:4px; left:4px; width:19px; height:19px; content:""; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.3); transition:transform .2s ease; }
.admin-registration-toggle input:checked + i { background:#35ae4f; }
.admin-registration-toggle input:checked + i::after { transform:translateX(21px); }
.admin-registration-toggle input:focus + i { box-shadow:0 0 0 3px rgba(255,196,49,.22); }
.admin-code-top-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.admin-code-current-body { display: flex; flex-direction: column; gap: 8px; padding: 22px; }
.admin-code-current-body span,.admin-code-current-body small { color: var(--hrp-muted); font-size: 10px; }
.admin-code-current-body strong { color: var(--hrp-yellow); font-size: 34px; letter-spacing: 8px; }
.admin-code-current > form,.admin-code-create form > footer { padding: 0 22px 22px; }
.admin-code-create .admin-form-grid { padding: 22px; }
.admin-code-value { color: var(--hrp-yellow); font-size: 14px; letter-spacing: 2px; }
.admin-code-toggle { padding: 7px 10px; color: #fff; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; background: rgba(255,255,255,.05); font: inherit; cursor: pointer; }
.admin-code-toggle:hover { border-color: var(--hrp-yellow); color: var(--hrp-yellow); }
.admin-code-actions { display: flex; align-items: center; gap: 7px; }
.admin-code-actions button { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; padding: 0; white-space: nowrap; }
.admin-code-delete { padding: 7px 10px; color: #ff8a8a; border: 1px solid rgba(255,90,90,.25); border-radius: 7px; background: rgba(255,70,70,.08); font: inherit; cursor: pointer; }
.admin-code-delete:hover { color: #fff; border-color: #e75252; background: #b73838; }
@media (max-width: 760px) { .admin-code-top-grid,.admin-registration-settings-grid { grid-template-columns: 1fr; } }
.admin-table-menu nav { display: flex; flex-direction: column; gap: 3px; padding: 10px; }
.admin-table-menu nav a { display: flex; align-items: center; gap: 8px; padding: 10px; color: var(--hrp-muted); border-radius: 8px; font-size: 10px; font-weight: 700; }
.admin-table-menu nav a:hover { color: #fff; background: rgba(255,255,255,.04); }
.admin-table-menu nav a.active { color: #172238; background: var(--hrp-yellow); }
.admin-roleplay-rows { padding: 12px; }
.admin-roleplay-row { margin-bottom: 8px; overflow: hidden; background: rgba(0,0,0,.09); border: 1px solid var(--hrp-border); border-radius: 10px; }
.admin-roleplay-row summary { display: grid; grid-template-columns: 60px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 13px 15px; color: #fff; cursor: pointer; list-style: none; font-size: 11px; }
.admin-roleplay-row summary::-webkit-details-marker { display: none; }
.admin-roleplay-row summary strong { color: var(--hrp-yellow); }
.admin-roleplay-row summary i { color: var(--hrp-muted); transition: transform .2s ease; }
.admin-roleplay-row[open] summary { border-bottom: 1px solid var(--hrp-border); }
.admin-roleplay-row[open] summary i { transform: rotate(180deg); }

/* Administration - economie centralisee */
.admin-economy {
    display: grid;
    gap: 18px;
    font-family: Poppins, "Segoe UI", sans-serif;
}
.admin-economy-hero {
    background:
        radial-gradient(circle at 86% 18%, rgba(255,196,49,.14), transparent 28%),
        var(--hrp-panel-soft);
}
.admin-economy-hero > header small {
    display: block;
    margin-bottom: 4px;
    color: var(--hrp-yellow);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
}
.admin-economy-hero > header h2 { font-size: 24px; }
.admin-economy-hero > header p {
    max-width: 760px;
    font-size: 14px;
    line-height: 1.55;
}
.admin-economy-jump {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 20px 20px;
}
.admin-economy-jump a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 10px 14px;
    color: #f4f7fb;
    background: rgba(8,13,22,.48);
    border: 1px solid var(--hrp-border);
    border-radius: 11px;
    font-size: 15px;
    font-weight: 800;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.admin-economy-jump a:hover,
.admin-economy-jump a:focus {
    background: rgba(255,196,49,.08);
    border-color: rgba(255,196,49,.55);
    transform: translateY(-1px);
}
.admin-economy-jump img,
.admin-economy-title > img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex: 0 0 auto;
    border-radius: 9px;
}
.admin-economy-jump a > .ti,
.admin-economy-plant-icon {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    flex: 0 0 auto;
    color: #8ee49d;
    background: rgba(76, 185, 97, .16);
    border-radius: 9px;
    font-size: 22px;
}
.admin-economy-service { scroll-margin-top: 95px; }
.admin-economy-service > header { min-height: 88px; }
.admin-economy-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.admin-economy-title h2 { font-size: 20px; }
.admin-economy-title p { font-size: 14px; }
.admin-economy-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 7px 10px;
    color: #7be794;
    background: rgba(52,181,80,.11);
    border: 1px solid rgba(52,181,80,.25);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}
.admin-economy-form {
    display: grid;
    gap: 14px;
    padding: 18px 20px 20px;
}
.admin-economy-section {
    overflow: hidden;
    background: rgba(8,13,22,.35);
    border: 1px solid var(--hrp-border);
    border-radius: 12px;
}
.admin-economy-section > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--hrp-border);
}
.admin-economy-section > header h3 {
    margin: 0;
    color: #fff;
    font-size: 17px;
}
.admin-economy-section > header p {
    margin: 3px 0 0;
    color: var(--hrp-muted);
    font-size: 14px;
}
.admin-economy-section > header > i {
    color: var(--hrp-yellow);
    font-size: 26px;
}
.admin-economy-form-grid,
.admin-economy-products,
.admin-economy-plans {
    display: grid;
    gap: 12px;
    padding: 14px;
}
.admin-economy-form-grid,
.admin-economy-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-economy-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-economy-form label,
.admin-economy-form fieldset {
    min-width: 0;
}
.admin-economy-form-grid > label,
.admin-economy-products fieldset,
.admin-economy-plans fieldset {
    display: grid;
    gap: 8px;
    padding: 14px;
    background: rgba(28,38,56,.62);
    border: 1px solid rgba(116,139,176,.3);
    border-radius: 10px;
}
.admin-economy-products fieldset,
.admin-economy-plans fieldset {
    margin: 0;
}
.admin-economy-products fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-economy-products legend,
.admin-economy-plans legend {
    padding: 0 5px;
    color: var(--hrp-yellow);
    font-size: 15px;
    font-weight: 800;
}
.admin-economy-products legend {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 0 2px;
}
.admin-economy-products label,
.admin-economy-plans label {
    display: grid;
    align-content: end;
    gap: 7px;
}
.admin-economy-form label > span,
.admin-economy-products label > span,
.admin-economy-plans label > span {
    color: #eaf0f8;
    font-size: 14px;
    font-weight: 700;
}
.admin-economy-form-grid > label > small {
    min-height: 21px;
    color: var(--hrp-muted);
    font-size: 13px;
    line-height: 1.45;
}
.admin-economy-form input[type="number"],
.admin-economy-form input[type="time"],
.admin-economy-form select {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    color: #fff;
    background: #111a2a;
    border: 1px solid #405273;
    border-radius: 8px;
    outline: 0;
    font: 600 14px Poppins, "Segoe UI", sans-serif;
}
.admin-economy-form input:focus,
.admin-economy-form select:focus {
    border-color: var(--hrp-yellow);
    box-shadow: 0 0 0 3px rgba(255,196,49,.1);
}
.admin-economy-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}
.admin-economy-input b {
    color: var(--hrp-yellow);
    font-size: 14px;
    white-space: nowrap;
}
.admin-economy-input select[name="harvest_unit"],
.admin-economy-input select[name="dry_death_unit"],
.admin-economy-input select[name="dark_death_unit"] {
    width: 120px;
    color: var(--hrp-yellow);
}
.admin-economy-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 16px;
    cursor: pointer;
    background: rgba(28,38,56,.62);
    border: 1px solid rgba(116,139,176,.3);
    border-radius: 11px;
}
.admin-economy-switch > span {
    display: grid;
    gap: 3px;
}
.admin-economy-switch strong {
    color: #fff;
    font-size: 15px;
}
.admin-economy-switch small {
    color: var(--hrp-muted);
    font-size: 13px;
}
.admin-economy-switch input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.admin-economy-switch > i {
    position: relative;
    width: 48px;
    height: 26px;
    flex: 0 0 48px;
    background: #4b5870;
    border-radius: 999px;
    transition: background .18s ease;
}
.admin-economy-switch > i::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,.28);
    transition: transform .18s ease;
}
.admin-economy-switch input[type="checkbox"]:checked + i { background: #36b568; }
.admin-economy-switch input[type="checkbox"]:checked + i::after { transform: translateX(22px); }
.admin-economy-switch input[type="checkbox"]:focus + i { box-shadow: 0 0 0 3px rgba(255,196,49,.22); }
.admin-market-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
}
#economy-market .admin-economy-section > .admin-economy-switch { margin: 14px; }
#economy-armory .admin-economy-section > .admin-economy-switch { margin: 14px; }
#economy-armory .admin-economy-section > .admin-economy-switch + .admin-economy-switch { margin-top: -4px; }
.admin-market-setting-item {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(145px, .7fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 84px;
    padding: 13px;
    background: rgba(24, 37, 58, .82);
    border: 1px solid rgba(82, 112, 156, .52);
    border-radius: 11px;
}
.admin-market-setting-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 11px;
}
.admin-market-setting-identity img {
    width: 46px;
    height: 46px;
    padding: 6px;
    flex: 0 0 46px;
    object-fit: contain;
    background: rgba(7, 15, 28, .65);
    border-radius: 8px;
}
.admin-market-setting-identity span,
.admin-market-minimum { display: grid; gap: 3px; }
.admin-market-setting-identity strong { color: #fff; font-size: 14px; }
.admin-market-setting-identity small,
.admin-market-minimum > span,
.admin-market-toggle span { color: var(--hrp-muted); font-size: 11px; }
.admin-market-toggle {
    display: grid;
    justify-items: center;
    gap: 4px;
    cursor: pointer;
}
.admin-market-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.admin-market-toggle i {
    position: relative;
    display: block;
    width: 42px;
    height: 23px;
    background: #4b5870;
    border-radius: 999px;
    transition: background .18s ease;
}
.admin-market-toggle i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    background: #fff;
    border-radius: 50%;
    transition: transform .18s ease;
}
.admin-market-toggle input:checked + i { background: #36b568; }
.admin-market-toggle input:checked + i::after { transform: translateX(19px); }
.admin-market-toggle input:focus + i { box-shadow: 0 0 0 3px rgba(255,196,49,.22); }

/* Administration — gestion centralisée des permissions par grade. */
.admin-permissions { display: grid; gap: 16px; }
.admin-permissions-hero > header > div > small { color: #ffc431; font-size: 9px; line-height: 1; font-weight: 900; letter-spacing: .12em; }
.admin-permissions-hero > header > div > h2 { margin-top: 5px; }
.admin-permission-ranks { display: flex; gap: 8px; padding: 14px 16px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #ffc431 transparent; }
.admin-permission-ranks a { display: flex; min-width: 126px; height: 48px; align-items: center; gap: 9px; padding: 0 11px; color: #aeb8c8; text-decoration: none; border: 1px solid #303b51; border-radius: 9px; background: #111824; transition: border-color .15s, background .15s, transform .15s; }
.admin-permission-ranks a:hover { border-color: color-mix(in srgb, var(--rank-color) 65%, #303b51); transform: translateY(-1px); }
.admin-permission-ranks a > span { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; color: var(--rank-color); font-size: 10px; font-weight: 900; border: 1px solid color-mix(in srgb, var(--rank-color) 42%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--rank-color) 10%, transparent); }
.admin-permission-ranks a strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.admin-permission-ranks a.is-active { color: #171d27; border-color: #ffc431; background: #ffc431; box-shadow: 0 5px 16px rgba(255,196,49,.18); }
.admin-permission-ranks a.is-active > span { color: #171d27; border-color: rgba(23,29,39,.25); background: rgba(23,29,39,.1); }
.admin-permission-rank-management { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-top: 1px solid #303b51; background: rgba(12,18,28,.48); }
.admin-permission-rank-management > span { display: grid; grid-template-columns: 34px auto; align-items: center; gap: 1px 10px; }
.admin-permission-rank-management > span > i { grid-row: 1 / 3; color: #ffc431; font-size: 25px; }
.admin-permission-rank-management strong { color: #fff; font-size: 16px; }
.admin-permission-rank-management small { color: #aab3c2; font-size: 14px; }
.admin-permission-rank-management em { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; color: #8995a8; font-size: 12px; font-style: normal; border: 1px solid #303b51; border-radius: 7px; background: #111824; }

.admin-rank-editor > header p { font-size: 14px !important; }
.admin-rank-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 16px; }
.admin-rank-fields > label { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.admin-rank-fields > label.is-wide { grid-column: 1 / -1; }
.admin-rank-fields label > span,
.admin-rank-automatic label > span { color: #fff; font-size: 16px; font-weight: 800; }
.admin-rank-fields label > small { min-height: 22px; color: #aab3c2; font-size: 14px; line-height: 1.35; }
.admin-rank-fields input,
.admin-rank-fields textarea,
.admin-rank-automatic input { width: 100%; min-width: 0; padding: 11px 12px; color: #fff; font: 500 16px Poppins,sans-serif; border: 1px solid #303d57; border-radius: 8px; outline: 0; background: #0b111b; }
.admin-rank-fields textarea { resize: vertical; line-height: 1.5; }
.admin-rank-fields input:focus,
.admin-rank-fields textarea:focus,
.admin-rank-automatic input:focus { border-color: #ffc431; box-shadow: 0 0 0 2px rgba(255,196,49,.08); }
.admin-rank-fields input[readonly] { color: #7f8a9d; cursor: not-allowed; background: #151c28; }
.admin-rank-color { display: flex; align-items: center; gap: 8px; }
.admin-rank-fields .admin-rank-color-picker { width: 44px; height: 44px; flex: 0 0 44px; padding: 3px; cursor: pointer; border: 1px solid #44516a; border-radius: 8px; background: #111824; }
.admin-rank-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.admin-rank-color-picker::-webkit-color-swatch { border: 0; border-radius: 5px; }
.admin-rank-color-picker::-moz-color-swatch { border: 0; border-radius: 5px; }
.admin-rank-fields .admin-rank-color-value { flex: 1 1 auto; }
.admin-rank-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0 16px 16px; }
.admin-rank-options > label { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #303b51; border-radius: 9px; background: #111824; cursor: pointer; }
.admin-rank-options > label > span { display: flex; flex-direction: column; gap: 3px; }
.admin-rank-options strong { color: #fff; font-size: 16px; }
.admin-rank-options small { color: #aab3c2; font-size: 14px; line-height: 1.4; }
.admin-rank-options input { position: absolute; opacity: 0; pointer-events: none; }
.admin-rank-options label > i { position: relative; width: 48px; height: 26px; flex: 0 0 48px; border-radius: 20px; background: #313b4d; transition: background .15s; }
.admin-rank-options label > i::after { position: absolute; content: ''; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.admin-rank-options input:checked + i { background: #43bd70; }
.admin-rank-options input:checked + i::after { transform: translateX(22px); }
.admin-rank-automatic { margin: 0 16px 16px; overflow: hidden; border: 1px solid #303b51; border-radius: 10px; background: rgba(12,18,28,.52); }
.admin-rank-automatic > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid #303b51; }
.admin-rank-automatic h3 { margin: 0; color: #fff; font-size: 16px; }
.admin-rank-automatic p { margin: 3px 0 0; color: #aab3c2; font-size: 14px; }
.admin-rank-automatic > header > i { color: #ffc431; font-size: 22px; }
.admin-rank-automatic > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 12px; }
.admin-rank-automatic label { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.admin-rank-editor > footer { display: flex; justify-content: flex-end; padding: 13px 16px; border-top: 1px solid #303b51; }

.admin-permissions-editor > header > div { display: flex; align-items: center; gap: 11px; }
.admin-permissions-rank-number { display: grid; width: 42px; height: 42px; place-items: center; color: #171d27; font-size: 14px; font-weight: 900; border-radius: 9px; background: #ffc431; }
.admin-permissions-editor > header > div > span:last-child { display: grid; gap: 1px; }
.admin-permissions-editor > header h2 { font-size: 16px; }
.admin-permissions-editor > header p { margin: 0; }
.admin-permissions-search { display: flex; width: min(330px, 42vw); height: 42px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #303d57; border-radius: 9px; background: #0b111b; }
.admin-permissions-search i { color: #8490a4; font-size: 17px; }
.admin-permissions-search input { width: 100%; min-width: 0; color: #fff; font: 500 14px Poppins, sans-serif; border: 0; outline: 0; background: transparent; }
.admin-permissions-search input::placeholder { color: #707d91; }
.admin-permissions-search:focus-within { border-color: #ffc431; }
.admin-permissions-groups { display: grid; gap: 14px; padding: 16px; }
.admin-permission-group { overflow: hidden; border: 1px solid #303b51; border-radius: 10px; background: rgba(12,18,28,.52); }
.admin-permission-group[hidden] { display: none; }
.admin-permission-group > header { display: flex; min-height: 46px; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid #303b51; background: rgba(29,36,49,.72); }
.admin-permission-group > header span { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 16px; }
.admin-permission-group > header i { color: #ffc431; font-size: 17px; }
.admin-permission-group > header em { padding: 3px 7px; color: #ffc431; font-size: 9px; font-style: normal; font-weight: 900; border-radius: 5px; background: rgba(255,196,49,.1); }
.admin-permission-list { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 9px; }
.admin-permission-item { display: grid; min-width: 0; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; min-height: 128px; padding: 15px; border: 1px solid #293448; border-radius: 9px; background: #111824; }
.admin-permission-item[hidden] { display: none; }
.admin-permission-copy { display: grid; min-width: 0; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 3px 7px; }
.admin-permission-copy > strong { overflow: hidden; color: #fff; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.admin-permission-copy code { justify-self: start; padding: 3px 7px; color: #ffc431; font: 700 11px/1.3 monospace; border-radius: 4px; background: rgba(255,196,49,.08); }
.admin-permission-copy p { grid-column: 1 / -1; margin: 6px 0 0; color: #aab3c2; font-size: 14px; line-height: 1.55; }
.admin-permission-state { display: flex; align-items: stretch; padding: 0; overflow: hidden; border: 1px solid #303b51; border-radius: 7px; }
.admin-permission-state label { display: block; position: relative; cursor: pointer; }
.admin-permission-state input { position: absolute; opacity: 0; pointer-events: none; }
.admin-permission-state span { display: flex; min-width: 112px; height: 44px; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; overflow: hidden; color: #8f9aad; font-size: 14px; font-weight: 800; border-left: 1px solid #303b51; background: #0c131f; transition: color .15s, background .15s; }
.admin-permission-state label:first-child span { border-left: 0; }
.admin-permission-state span i { font-size: 17px; }
.admin-permission-state input[value="0"]:checked + span { color: #fff; background: #bd150b; }
.admin-permission-state input[value="1"]:checked + span { color: #142019; background: #43bd70; }
.admin-permission-state input[value="2"]:checked + span { color: #171d27; background: #ffc431; }
.admin-permission-state input:focus-visible + span { box-shadow: inset 0 0 0 2px #fff; }
.admin-permissions-editor > footer { display: flex; position: sticky; z-index: 2; bottom: 0; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-top: 1px solid #303b51; background: rgba(15,20,30,.97); }
.admin-permissions-editor > footer > span { display: inline-flex; align-items: center; gap: 6px; color: #8995a8; font-size: 9px; }
.admin-permissions-editor > footer > span i { color: #ffc431; font-size: 15px; }
.admin-permission-autosave { display: inline-flex; align-items: center; gap: 7px; color: #8e9bae; font-size: 10px; font-style: normal; font-weight: 700; }
.admin-permission-autosave i { font-size: 16px; }
.admin-permission-autosave.is-saving { color: #ffc431; }
.admin-permission-autosave.is-saving i { animation: spin 1s linear infinite; }
.admin-permission-autosave.is-saved { color: #4bc780; }
.admin-permission-autosave.is-error { color: #ff6b6b; }
.admin-permissions-empty { display: grid; min-height: 160px; place-items: center; align-content: center; gap: 7px; margin: 0; color: #8995a8; font-size: 11px; }
.admin-permissions-empty i { color: #ffc431; font-size: 26px; }

@media (max-width: 1050px) {
    .admin-permission-list { grid-template-columns: 1fr; }
    .admin-rank-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-rank-automatic > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 650px) {
    .admin-permissions-editor > header { align-items: stretch; flex-direction: column; }
    .admin-permissions-search { width: 100%; }
    .admin-permission-item { grid-template-columns: 1fr; }
    .admin-permission-state { justify-self: stretch; }
    .admin-permission-state label { flex: 1; }
    .admin-permission-state span { width: 100%; min-width: 0; font-size: 14px; }
    .admin-permissions-editor > footer { align-items: stretch; flex-direction: column; }
    .admin-permissions-editor > footer .admin-primary-button { width: 100%; justify-content: center; }
    .admin-permission-rank-management { align-items: stretch; flex-direction: column; }
    .admin-permission-rank-management form button { width: 100%; justify-content: center; }
    .admin-rank-fields,
    .admin-rank-options,
    .admin-rank-automatic > div { grid-template-columns: 1fr; }
}
.admin-economy-form > footer {
    display: flex;
    justify-content: flex-end;
}
.admin-economy-form > footer .admin-primary-button {
    min-height: 44px;
    padding-inline: 18px;
}
@media (max-width: 850px) {
    .admin-market-settings-grid { grid-template-columns: 1fr; }
    .admin-market-setting-item { grid-template-columns: minmax(130px, 1fr) minmax(130px, .7fr) auto; }
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
    .admin-grid { grid-template-columns: 1fr; }
    .admin-dashboard-panels { grid-template-columns: 1fr; }
    .admin-settings-layout { grid-template-columns: 1fr; }
    .admin-user-edit-layout { grid-template-columns: 1fr; }
    .admin-user-summary { position: static; }
    .admin-user-support { grid-template-columns: 1fr; }
    .admin-user-support.is-loading::after { left: 50%; }
    .admin-support-ticket-list { border-right: 0; border-bottom: 1px solid var(--hrp-border); }
    .admin-support-ticket-list nav { max-height: 230px; }
    .admin-table-menu nav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
    .admin-edit-form .admin-form-grid, .admin-roleplay-row .admin-form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .admin-economy-plans { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .admin-page { width: calc(100% - 24px); padding-top: 22px; }
    .admin-stats { grid-template-columns: 1fr; }
    .admin-user-row { grid-template-columns: 42px minmax(0, 1fr); }
    .admin-user-row em { display: none; }
    .admin-chart-wrap { height: 260px; padding: 12px; }
    .admin-chart-card > header { align-items: flex-start; flex-direction: column; }
    .admin-chart-header-actions { width: 100%; }
    .admin-chart-header-actions select { flex: 1; }
    .admin-support-reply { grid-template-columns: 1fr; }
    .admin-support-messages article { width: 94%; }
    .admin-search { min-width: 100%; }
    .admin-table-menu nav, .admin-edit-form .admin-form-grid, .admin-roleplay-row .admin-form-grid { grid-template-columns: 1fr; }
    .admin-roleplay-row .admin-form-grid { padding: 14px; }
    .admin-form-grid label.is-wide { grid-column: auto; }
    .admin-summary-avatar { width: 108px; height: 108px; }
    .admin-list-footer { align-items: stretch; flex-direction: column; }
    .admin-list-footer nav { justify-content: space-between; }
    .admin-economy-jump,
    .admin-economy-form-grid,
    .admin-economy-products { grid-template-columns: 1fr; }
    .admin-economy-service > header {
        align-items: flex-start;
        flex-direction: column;
    }
    .admin-economy-live { align-self: flex-start; }
    .admin-economy-form { padding: 14px; }
    .admin-economy-section > header { align-items: flex-start; }
    .admin-economy-products fieldset { grid-template-columns: 1fr; }
    .admin-economy-switch { align-items: flex-start; }
    .admin-economy-form > footer .admin-primary-button { width: 100%; }
}

/* Avatar (menu Moi) : meme tuile, on montre la tete/torse. */
.barre-avatar {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 60px;
    height: 45px;
    padding: 0;
    overflow: visible;
    cursor: pointer;
    border: 0;
    border-radius: 12px;
    background-color: #99D5DF;
    transition: filter .12s ease, transform .12s ease;
}
.avatar-support-count { z-index: 3; }

.barre-avatar:hover { filter: brightness(1.08); transform: translateY(-2px); }
.barre-avatar-crop {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    border-radius: inherit;
}
.barre-avatar img {
    flex: 0 0 auto;
    margin-top: -35px;
    image-rendering: pixelated;
    pointer-events: none;
}
/* Mode "Moi" actif : anneau jaune autour de l'avatar. */
.barre-avatar.est-actif { box-shadow: 0 0 0 2px var(--hrp-yellow); }

/* Menu "Moi" au-dessus de l'avatar */
.barre-me {
    position: absolute;
    left: 14px;
    bottom: 68px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 190px;
    padding: 6px;
    background: #10141df2;
    -webkit-backdrop-filter: blur(6px) saturate(160%);
    backdrop-filter: blur(6px) saturate(160%);
    border: 2px solid #2E334D;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
    animation: dressage-entree .14s ease-out both;
}

.barre-me[hidden] { display: none; }

.barre-me-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    border: 0;
    border-radius: 8px;
    background: transparent;
}

.barre-me-item[hidden] { display: none; }
.barre-me-item:hover { background: rgba(38, 49, 73, .9); }

/* Glyphes du menu Moi (memes images que l'origine). */
.barre-me-ic { flex: 0 0 auto; width: 26px; height: 26px; background-repeat: no-repeat; background-position: center; }
.barre-me-ic-profile { background-image: url('../img/toolbar/icons/me-menu/profile.png'); }
.barre-me-ic-rooms { background-image: url('../img/toolbar/icons/me-menu/my-rooms.png'); }
.barre-me-ic-clothing { background-image: url('../img/toolbar/icons/me-menu/clothing.png'); }
.barre-me-ic-settings { background-image: url('../img/toolbar/icons/me-menu/cog.png'); }
.barre-me-ic-helper { background-image: url('../img/toolbar/icons/me-menu/helper-tool.png'); }

/* Saisie de chat */
.barre-chat {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 560px;
    padding: 6px 8px 6px 14px;
    background: rgba(10, 13, 19, .7);
    border: 1px solid #2E334D;
    border-radius: 12px;
}

/* Bouton "style de bulle" dans la saisie : montre le style courant (border-image). */
.barre-chat-style {
    flex: 0 0 auto;
    width: 34px;
    height: 22px;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border-style: solid;
    border-color: transparent;
    border-image-slice: 17 6 6 29 fill;
    border-image-width: 17px 6px 6px 29px;
    border-image-repeat: stretch;
    image-rendering: pixelated;
    transition: filter .15s ease;
}
.barre-chat-style:hover { filter: brightness(1.15); }

/* Panneau du selecteur de style, au-dessus de la barre (DA verre + blur). */
.barre-styles {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    width: 360px;
    max-width: calc(100vw - 24px);
    max-height: 260px;
    padding: 12px;
    background: #10141dcc;
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
    border: 1px solid #2E334D;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    z-index: 30;
}
.barre-styles[hidden] { display: none; }
.barre-styles-titre {
    margin-bottom: 8px;
    color: var(--hrp-yellow);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.barre-styles-grille {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    overflow-y: auto;
    padding-right: 4px;
}
.barre-style-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 3px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
    transition: background .12s ease, border-color .12s ease;
}
.barre-style-cell:hover { background: rgba(255, 255, 255, .08); }
.barre-style-cell.est-actif { border-color: var(--hrp-yellow); background: rgba(255, 200, 0, .12); }

/* Apercu de bulle (rendu 9-slice comme dans le client). */
.barre-style-apercu {
    width: 46px;
    height: 24px;
    border-style: solid;
    border-color: transparent;
    border-image-slice: 17 6 6 29 fill;
    border-image-width: 17px 6px 6px 29px;
    border-image-repeat: stretch;
    image-rendering: pixelated;
}
.bulle-st-0{border-image-source:url('../img/chatbubbles/bubble_0_transparent.png')}
.bulle-st-1{border-image-source:url('../img/chatbubbles/bubble_1.png')}
.bulle-st-2,.bulle-st-31{border-image-source:url('../img/chatbubbles/bubble_2.png')}
.bulle-st-3{border-image-source:url('../img/chatbubbles/bubble_3.png')}
.bulle-st-4{border-image-source:url('../img/chatbubbles/bubble_4.png')}
.bulle-st-5{border-image-source:url('../img/chatbubbles/bubble_5.png')}
.bulle-st-6{border-image-source:url('../img/chatbubbles/bubble_6.png')}
.bulle-st-7{border-image-source:url('../img/chatbubbles/bubble_7.png')}
.bulle-st-8{border-image-source:url('../img/chatbubbles/bubble_8.png')}
.bulle-st-9{border-image-source:url('../img/chatbubbles/bubble_9.png')}
.bulle-st-10{border-image-source:url('../img/chatbubbles/bubble_10.png')}
.bulle-st-11{border-image-source:url('../img/chatbubbles/bubble_11.png')}
.bulle-st-12{border-image-source:url('../img/chatbubbles/bubble_12.png')}
.bulle-st-13{border-image-source:url('../img/chatbubbles/bubble_13.png')}
.bulle-st-14{border-image-source:url('../img/chatbubbles/bubble_14.png')}
.bulle-st-15{border-image-source:url('../img/chatbubbles/bubble_15.png')}
.bulle-st-16{border-image-source:url('../img/chatbubbles/bubble_16.png')}
.bulle-st-17{border-image-source:url('../img/chatbubbles/bubble_17.png')}
.bulle-st-18{border-image-source:url('../img/chatbubbles/bubble_18.png')}
.bulle-st-19{border-image-source:url('../img/chatbubbles/bubble_19.png')}
.bulle-st-20{border-image-source:url('../img/chatbubbles/bubble_20.png')}
.bulle-st-21{border-image-source:url('../img/chatbubbles/bubble_21.png')}
.bulle-st-22{border-image-source:url('../img/chatbubbles/bubble_22.png')}
.bulle-st-23{border-image-source:url('../img/chatbubbles/bubble_23.png')}
.bulle-st-24{border-image-source:url('../img/chatbubbles/bubble_24.png')}
.bulle-st-25{border-image-source:url('../img/chatbubbles/bubble_25.png')}
.bulle-st-26{border-image-source:url('../img/chatbubbles/bubble_26.png')}
.bulle-st-27{border-image-source:url('../img/chatbubbles/bubble_27.png')}
.bulle-st-28{border-image-source:url('../img/chatbubbles/bubble_28.png')}
.bulle-st-29{border-image-source:url('../img/chatbubbles/bubble_29.png')}
.bulle-st-30{border-image-source:url('../img/chatbubbles/bubble_30.png')}
.bulle-st-32{border-image-source:url('../img/chatbubbles/bubble_32.png')}
.bulle-st-33{border-image-source:url('../img/chatbubbles/bubble_33_34.png')}
.bulle-st-34{border-image-source:url('../img/chatbubbles/bubble_33_34.png')}
.bulle-st-35{border-image-source:url('../img/chatbubbles/bubble_35.png')}
.bulle-st-36{border-image-source:url('../img/chatbubbles/bubble_36.png')}
.bulle-st-37{border-image-source:url('../img/chatbubbles/bubble_37.png')}
.bulle-st-38{border-image-source:url('../img/chatbubbles/bubble_38.png')}

.barre-chat-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 4px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    background: transparent;
    border: 0;
}

.barre-chat-input::placeholder { color: #6c7a92; }
.barre-chat-input:focus { outline: none; }
.barre-chat-input:disabled { color: var(--hrp-red); }

/* Suggestions de commandes du champ de chat (composant du site). */
.chat-command-suggestions {
    position: fixed;
    z-index: 8301;
    max-height: min(310px, calc(100vh - 120px));
    overflow: hidden;
    color: #fff;
    font-family: Poppins, 'Segoe UI', sans-serif;
    border: 1px solid #343a4d;
    border-radius: 9px;
    background: rgba(25, 28, 35, .98);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(6px) saturate(145%);
    backdrop-filter: blur(6px) saturate(145%);
}

.chat-command-suggestions[hidden] { display: none; }

.chat-command-suggestions-title {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    color: #aeb4c0;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 800;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(35, 38, 47, .92);
}

.chat-command-suggestions-title kbd {
    padding: 3px 6px;
    color: #ffc431;
    font: 800 9px/1 Poppins, sans-serif;
    border: 1px solid rgba(255, 196, 49, .25);
    border-radius: 5px;
    background: rgba(255, 196, 49, .08);
}

.chat-command-suggestions-list {
    display: flex;
    max-height: 260px;
    flex-direction: column;
    gap: 5px;
    padding: 7px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ffc431 transparent;
}

.chat-command-suggestions-list::-webkit-scrollbar { width: 5px; }
.chat-command-suggestions-list::-webkit-scrollbar-thumb { border-radius: 10px; background: #ffc431; }

.chat-command-suggestion {
    display: flex;
    width: 100%;
    min-height: 58px;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    color: #fff;
    text-align: left;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .04);
    border-radius: 7px;
    background: #2d3038;
    transition: border-color .12s ease, background-color .12s ease;
}

.chat-command-suggestion:hover,
.chat-command-suggestion.is-selected {
    border-color: #ffc431;
    background: #393c45;
    box-shadow: inset 3px 0 0 #ffc431;
}

.chat-command-suggestion-icon {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    color: #323640;
    font: 900 18px/1 Arial, sans-serif;
    border-radius: 5px;
    background: #c5c8d0;
}

.chat-command-suggestion.is-selected .chat-command-suggestion-icon { color: #1c2330; background: #ffc431; }

.chat-command-suggestion-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
}

.chat-command-suggestion-copy strong {
    display: flex;
    overflow: hidden;
    align-items: center;
    gap: 6px;
    color: #f3f4f7;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-command-suggestion.is-selected .chat-command-suggestion-copy strong { color: #ffc431; }

.chat-command-argument {
    display: inline-flex;
    min-width: 0;
    padding: 3px 7px;
    overflow: hidden;
    align-items: center;
    color: #d8dce5;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    text-overflow: ellipsis;
    border: 1px solid #555b69;
    border-radius: 4px;
    background: #292c34;
}

.chat-command-suggestion.is-selected .chat-command-argument { color: #d8dce5; }

.chat-command-argument.is-active {
    color: #171b23 !important;
    border-color: #ffc431;
    background: #ffc431;
    box-shadow: 0 0 0 2px rgba(255, 196, 49, .15);
}

.chat-command-suggestion-details {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.chat-command-suggestion-details small {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: #aeb4c0;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-command-suggestion-details em {
    flex: 0 0 auto;
    padding: 3px 7px;
    color: #ffc431;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    font-style: normal;
    white-space: nowrap;
    border: 1px solid rgba(255, 196, 49, .24);
    border-radius: 5px;
    background: rgba(255, 196, 49, .08);
}

.chat-command-suggestion.is-selected .chat-command-suggestion-details em {
    color: #1c2330;
    border-color: #ffc431;
    background: #ffc431;
}

.barre-chat-mic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    padding: 0;
    cursor: pointer;
    color: #c8d0dd;
    font-size: 16px;
    border: 0;
    border-radius: 9px;
    background: rgba(27, 34, 49, .8);
    transition: background .15s ease, color .15s ease;
}

.barre-chat-mic:hover { color: #fff; }
/* Micro actif : on colore juste l'icone en vert, pas toute la case. */
.barre-chat-mic.est-actif { color: #52bc48; background: rgba(27, 34, 49, .8); }
.barre-chat-mic.est-ptt { color: #ffc431; background: rgba(27, 34, 49, .8); }
.barre-chat-mic.est-parle { animation: barre-mic-pulse .8s ease-in-out infinite; }
.barre-chat-mic.est-ptt.est-parle { animation-name: barre-mic-ptt-pulse; }

@keyframes barre-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(82, 188, 72, .6); } 50% { box-shadow: 0 0 0 5px rgba(82, 188, 72, 0); } }
@keyframes barre-mic-ptt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 196, 49, .6); } 50% { box-shadow: 0 0 0 5px rgba(255, 196, 49, 0); } }

/* ---------- Barre : version mobile ----------
   Le chat passe sur sa propre ligne au-dessus, les icones se repartissent en
   dessous, et tout est reduit. (Doit venir apres les regles de base.) */
@media (max-width: 640px) {
    .barre { left: 6px; right: 6px; bottom: 6px; }

    .barre-bar {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 6px;
        padding: 6px 8px;
        border-radius: 14px;
    }

    /* Chat : une ligne pleine largeur, tout en haut. */
    .barre-centre { order: -1; flex: 1 0 100%; }
    .barre-gauche, .barre-droite { flex: 0 0 auto; }

    .barre-zone { gap: 5px; }

    /* Tuiles reduites. */
    .barre-icone,
    .barre-avatar { width: 46px; height: 35px; border-radius: 10px; }
    .barre-icone { background-size: 30px auto; }
    .barre-moi { background-size: 26px auto; }

    .barre-compteur { min-width: 15px; height: 15px; line-height: 15px; font-size: 9px; }

    /* Chat compact. */
    .barre-chat { max-width: none; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 10px; }
    .barre-chat-input { font-size: 13px; padding: 5px 4px; }
    .barre-chat-mic { width: 28px; height: 28px; font-size: 14px; }
    .barre-chat-style { width: 30px; height: 20px; }

    /* HUD du haut, reduit : logo + vie a gauche (encore plus petit pour tout
       voir), credits + groupe a droite. */
    body.game-mode .header-hotel-wrapper {
        top: 6px;
        left: 6px;
        transform: scale(.68);
        transform-origin: top left;
    }
    body.game-mode .hud-droite {
        top: 48px;
        right: 6px;
        left: auto;
        transform: scale(.8);
        transform-origin: top right;
    }

    /* Dock d'outils remonte : la barre du bas est plus haute en mobile. */
    .outils-salle { bottom: 116px; }
}

/* ---------- Menu contextuel de son avatar ----------
   HTML dans components/hotel/menu_contextuel.php, place par assets/js/hotel.js
   a partir de l'ancrage envoye par le client. */
.memenu {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 8600;
    width: 168px;
    font-family: Poppins, 'Segoe UI', sans-serif;
    /* Meme verre que la fiche joueur (transparence + flou) pour rester dans la
       meme DA. Le pied du menu est transparent et la pointe reprend ce meme
       verre, donc rien ne se superpose de facon disgracieuse. */
    background: #10141dcc;
    -webkit-backdrop-filter: blur(2px) saturate(160%);
    backdrop-filter: blur(2px) saturate(160%);
    border: 2px solid #2E334D;
    border-radius: 11px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: furni-fiche-entree .14s ease-out both;
}

.memenu[hidden] { display: none; }

.memenu-entete {
    display: block;
    width: 100%;
    padding: 7px 10px;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 0;
    border-radius: 9px 9px 0 0;
    background: rgba(21, 26, 35, .6);
}

.memenu-entete:hover { color: var(--hrp-yellow); }

.memenu-corps { padding: 6px; }
.memenu.est-replie .memenu-corps { display: none; }
.memenu.est-replie .memenu-entete { border-radius: 9px 9px 0 0; }

.memenu-liste { display: flex; flex-direction: column; gap: 4px; }
.memenu-liste[hidden] { display: none; }

.memenu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    border: 0;
    border-radius: 7px;
    /* Boutons legerement translucides : le flou du fond transparait, on garde
       la meme DA "verre" que les fiches. */
    background: rgba(27, 34, 49, .62);
}

.memenu-item[hidden] { display: none; }
.memenu-item:hover { background: rgba(38, 49, 73, .82); }
.memenu-item:active { transform: translateY(1px); }
.memenu-item img { display: block; image-rendering: pixelated; }

/* Entree reservee aux VIP : visible pour la montrer, mais inerte. */
.memenu-item.est-desactive {
    cursor: not-allowed;
    filter: brightness(.6);
}

.memenu-item.est-desactive:hover { background: rgba(27, 34, 49, .62); }

/* Onglet moderation : rouge translucide pour bien le distinguer des actions
   normales (le flou du fond transparait comme sur les autres entrees). */
.memenu-item.est-moderation { background: rgba(226, 59, 67, .26); }
.memenu-item.est-moderation:hover { background: rgba(226, 59, 67, .42); }

/* Entree du menu professionnel Jaune : couleur pleine pour qu'elle soit
   identifiable immediatement parmi les actions ordinaires. */
.memenu-item.est-travail {
    color: #171717;
    background: var(--hrp-yellow);
}

.memenu-item.est-travail:hover {
    color: #171717;
    background: #ffd83d;
}

.memenu-section-label {
    margin: 4px 3px 0;
    padding: 5px 7px;
    color: var(--hrp-yellow);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid rgba(255, 199, 0, .32);
}

.memenu-jaune-sale-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.memenu-jaune-sale-options[hidden],
.memenu-jaune-subscription[hidden] { display: none; }

.memenu-jaune-subscription {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 195, 35, .45);
    border-radius: 7px;
    background: rgba(255, 195, 35, .10);
}

.memenu-bank-account-existing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    color: #79df9c;
    border: 1px solid rgba(67, 187, 108, .42);
    border-radius: 7px;
    background: rgba(38, 124, 69, .20);
}

.memenu-bank-account-existing[hidden] {
    display: none;
}

.memenu-bank-account-existing > i {
    font-size: 18px;
}

.memenu-bank-account-existing > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.memenu-bank-account-existing strong {
    font-size: 10px;
}

.memenu-bank-account-existing small {
    color: #aeb7ca;
    font-size: 8px;
}

.memenu-jaune-subscription > strong {
    color: var(--hrp-yellow);
    font-size: 12px;
    text-align: center;
}

.memenu-jaune-subscription > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #aeb7ca;
    font-size: 10px;
}

.memenu-jaune-subscription b { color: #fff; }
.memenu-jaune-subscription em { color: #fff; font-style: normal; font-weight: 800; text-align: right; }

.memenu-item-detail {
    flex-direction: column;
    gap: 2px;
    min-height: 42px;
}

.memenu-item-detail strong {
    font-size: 12px;
    line-height: 1.1;
}

.memenu-item-detail small {
    color: #aeb7ca;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.2;
}

.jaune-sale-overlay {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    pointer-events: none;
    background: rgba(3, 7, 14, .12);
}

.jaune-sale-overlay[hidden] { display: none; }

.jaune-sale-dialog {
    width: min(510px, calc(100vw - 28px));
    overflow: hidden;
    color: #fff;
    font-family: "Poppins", "Segoe UI", sans-serif;
    font-size: 14px;
    pointer-events: auto;
    border: 2px solid #2e3a5b;
    border-radius: 11px;
    background: rgba(14, 20, 31, .94);
    backdrop-filter: blur(11px);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .52);
}

.jaune-sale-dialog header {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 62px;
    padding: 10px 15px 10px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(12, 19, 31, .38);
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.jaune-sale-dialog.is-dragging header { cursor: grabbing; }

.jaune-sale-logo { display: block; width: 126px; height: auto; }
.jaune-sale-dialog header strong { color: #d9deea; font-size: 13px; font-weight: 800; }
.jaune-sale-close {
    width: 29px;
    height: 29px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #c41414;
    color: #fff;
    font: 500 25px/27px Arial, sans-serif;
    cursor: pointer;
}

.jaune-sale-content {
    padding: 18px 18px 14px;
    text-align: left;
}

.jaune-sale-content p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
}

.jaune-sale-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    color: #ffc400;
    font-weight: 900;
    line-height: inherit;
    vertical-align: -2px;
}
.jaune-sale-price::before {
    content: '';
    width: 14px;
    height: 14px;
    background: url('../img/icons/credit.png') center / contain no-repeat;
}
.jaune-sale-order {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    margin-top: 15px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;
    background: rgba(5, 11, 21, .72);
}
.jaune-sale-order img,
.jaune-sale-order > i {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    object-fit: cover;
}
.jaune-sale-order > i { display: grid; place-items: center; color: #ffc400; font-size: 17px; }
.jaune-sale-order small {
    color: #c7cedc;
    font-size: 12px;
    font-weight: 600;
}

.jaune-sale-dialog footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 18px 18px;
}

.jaune-sale-dialog footer button {
    min-height: 41px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.jaune-sale-cancel { background: var(--hrp-red); }
.jaune-sale-cancel:hover { background: var(--hrp-red-hover); }
.jaune-sale-accept { background: var(--hrp-green); }
.jaune-sale-accept:hover { background: var(--hrp-green-hover); }
.jaune-sale-dialog footer button:disabled { cursor: wait; opacity: .55; }

/* Entree a coche (permissions du familier) : petite case qui se remplit en
   jaune quand l'option est active. */
.memenu-item[data-menu-coche]::before {
    content: '';
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border: 1.5px solid #4a5573;
    border-radius: 3px;
    background: transparent;
    transition: background .12s ease, border-color .12s ease;
}

.memenu-item.est-coche::before { background: var(--hrp-yellow); border-color: var(--hrp-yellow); }

/* En-tete d'un familier : pas de profil, donc rien de cliquable. */
.memenu-entete-inerte { cursor: default; }
.memenu-entete-inerte:hover { color: #fff; }

/* Les entrees qui ouvrent un sous-menu, et celle qui en revient : chevrons
   Tabler (webfont "tabler-icons" chargee dans head.php). */
.memenu-item.est-sous-menu::after,
.memenu-item.est-retour::before {
    font-family: "tabler-icons";
    font-size: 16px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.memenu-item.est-sous-menu::after { content: "\ea61"; } /* ti-chevron-right */
.memenu-item.est-retour::before { content: "\ea60"; }   /* ti-chevron-left */

.memenu-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

.memenu-grille .memenu-item { padding: 6px 0; min-height: 28px; }

.memenu-replier {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 22px;
    padding: 0;
    cursor: pointer;
    border: 0;
    border-radius: 0 0 9px 9px;
    /* Transparent : la barre se fond dans le corps opaque, plus de bloc
       distinct en bas. Seul le chevron reste visible. */
    background: transparent;
    transition: background .15s ease;
}

.memenu-replier:hover { background: rgba(255, 196, 49, .16); }

/* Pas de pointe sous le menu : avec le verre + flou elle rejurait toujours au
   bas. Comme les fiches (meme DA), le menu reste un simple panneau de verre. */

/* Chevron bien lisible : plus grand, clair, et jaune au survol. */
.memenu-replier::after {
    content: '';
    width: 11px;
    height: 11px;
    transform: translateY(-3px) rotate(45deg);
    border: 2px solid #dfe6f2;
    border-top: 0;
    border-left: 0;
    transition: border-color .15s ease;
}

.memenu-replier:hover::after { border-color: var(--hrp-yellow); }

/* Menu replie : la fleche pointe vers le haut pour rouvrir. */
.memenu.est-replie .memenu-replier::after { transform: translateY(3px) rotate(-135deg); }

/* Fiches du jeu (mobi, joueur) : elles vivent dans client.php, donc au-dessus
   du calque du site. On ne les montre qu'en mode jeu, comme le dock. */
/* ---------- Parametres (dessine par le site) ----------
   HTML dans components/hotel/parametres.php, bridge UserSettingsView. */
.parametres {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 8600;
    width: min(620px, calc(100vw - 28px));
    height: min(620px, calc(100vh - 28px));
    max-height: calc(100vh - 28px);
    max-width: calc(100vw - 24px);
    color: #fff;
    font-family: Poppins, 'Segoe UI', sans-serif;
    background: rgba(15, 20, 30, .94);
    -webkit-backdrop-filter: blur(8px) saturate(135%);
    backdrop-filter: blur(8px) saturate(135%);
    border: 2px solid #2E334D;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
    overflow: hidden;
}
.parametres[hidden] { display: none; }

.parametres-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 66px;
    padding: 10px 15px 10px 18px;
    cursor: move;
    background: rgba(21, 26, 35, .6);
    border-bottom: 1px solid #2E334D;
}
.parametres-marque { display: flex; align-items: center; gap: 12px; }
.parametres-marque img { display: block; width: 126px; height: auto; }
.parametres-titre { color: #dce0e8; font-size: 14px; font-weight: 800; }
.parametres-fermer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    padding: 0;
    cursor: pointer;
    color: #fff;
    border: 0;
    border-radius: 7px;
    background: var(--hrp-red);
}
.parametres-fermer svg { width: 14px; height: 14px; display: block; }
.parametres-fermer:hover { background: var(--hrp-red-hover); }

.parametres-hero { position: relative; height: 127px; border-bottom: 1px solid #202938; background: #202734 url('../img/download-hero-background.png') center 58% / cover no-repeat; }
.parametres-hero::before { position: absolute; inset: 0; content: ""; background: rgba(0,0,0,.48); pointer-events: none; }
.parametres-onglets { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; display: flex; align-items: flex-end; justify-content: center; gap: 7px; padding: 0 20px; }
.parametres-onglets button { min-width: 94px; min-height: 39px; padding: 9px 18px; border: 1px solid #3b4658; border-bottom: 0; border-radius: 7px 7px 0 0; color: #e4e7ec; background: rgba(37,44,54,.94); box-shadow: 0 -2px 8px rgba(0,0,0,.33); font: 700 12px Poppins; cursor: pointer; }
.parametres-onglets button.is-active { color: #171a20; border-color: #e5b600; background: #ffca18; }
.parametres-onglets button:disabled { color: #687386; border-color: #303847; background: rgba(27,32,41,.84); box-shadow: none; cursor: not-allowed; filter: grayscale(1); }

.parametres-corps { height: calc(100% - 193px); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 17px 12px 17px 17px; scrollbar-color: #ffc431 transparent; scrollbar-width: thin; }
.parametres-corps::-webkit-scrollbar { width: 5px; }
.parametres-corps::-webkit-scrollbar-track { background: transparent; }
.parametres-corps::-webkit-scrollbar-thumb { border-radius: 10px; background: #ffc431; }
.parametres-panneau { display: flex; flex-direction: column; gap: 10px; }
.parametres-panneau[hidden] { display: none; }
.parametres-section-titre { display: flex; align-items: center; gap: 9px; margin: 2px 0 1px; color: #ffc431; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.parametres-section-titre:not(:first-child) { margin-top: 9px; }
.parametres-section-titre::after { height: 1px; flex: 1; content: ""; background: rgba(255,196,49,.3); }

.parametres-case { display: flex; min-height: 43px; align-items: center; gap: 11px; margin: 0; padding: 9px 11px; border: 1px solid #303b51; border-radius: 9px; background: rgba(29,36,49,.8); cursor: pointer; font-size: 12px; transition: border-color .15s, background .15s; }
.parametres-case:hover { border-color: rgba(255,196,49,.55); background: rgba(32,40,54,.98); }
.parametres-case input[type="checkbox"] {
    appearance: none;
    position: relative;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
    border: 1px solid #3c445c;
    border-radius: 5px;
    background: rgba(10, 13, 19, .7);
    transition: background-color .15s ease, border-color .15s ease;
}
.parametres-case input[type="checkbox"]:checked { border-color: var(--hrp-yellow); background: var(--hrp-yellow); }
.parametres-case input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 5px;
    width: 4px;
    height: 9px;
    border: solid #151515;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.parametres-case:hover input[type="checkbox"]:not(:checked) { border-color: var(--hrp-yellow); }

.parametres-volume { display: flex; flex-direction: column; gap: 7px; padding: 12px 13px; border: 1px solid #303b51; border-radius: 9px; background: rgba(29,36,49,.8); }
.parametres-volume-nom { font-size: 13px; font-weight: 600; }
.parametres-volume-ligne { display: flex; align-items: center; gap: 8px; }
.parametres-volume-ligne i { color: var(--hrp-muted); font-size: 16px; flex: 0 0 auto; }
.parametres-volume-ligne input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--hrp-yellow); cursor: pointer; }
.parametres-volume output { color: #ffc431; font-weight: 800; }
.parametres-voice-options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.parametres-voice-options .parametres-case { min-width: 0; }
.parametres-voice-options .parametres-case span { line-height: 1.3; }
.parametres-touche-ligne { display: grid; grid-template-columns: minmax(0,1fr) 32px; gap: 7px; }
.parametres-touche { display: flex; min-height: 43px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 9px 8px 12px; border: 1px solid #303b51; border-radius: 9px; color: #fff; background: rgba(29,36,49,.8); font: 600 11px Poppins; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.parametres-touche:hover,
.parametres-touche.is-capturing { border-color: rgba(255,196,49,.7); background: rgba(32,40,54,.98); }
.parametres-touche b { display: grid; min-width: 42px; height: 27px; place-items: center; padding: 0 7px; border: 1px solid #3b4658; border-radius: 6px; color: #ffc431; background: #111824; font-size: 11px; }
.parametres-touche.is-capturing b { color: #171a20; border-color: #ffc431; background: #ffc431; }
.parametres-touche-retirer { display: grid; width: 32px; min-height: 43px; place-items: center; padding: 0; border: 1px solid rgba(210,25,18,.65); border-radius: 9px; color: #ff756f; background: rgba(210,25,18,.12); font: 800 19px/1 Poppins; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.parametres-touche-retirer:hover { color: #fff; border-color: #d21912; background: #d21912; }
@media (max-width: 600px) {
    .parametres-hero { height: 108px; }
    .parametres-marque img { width: 108px; }
    .parametres-onglets { padding: 0 10px; }
    .parametres-onglets button { min-width: 0; min-height: 35px; flex: 1; padding-inline: 8px; }
    .parametres-corps { height: calc(100% - 174px); padding: 12px 8px 12px 12px; }
    .parametres-voice-options { grid-template-columns: 1fr; }
}

body:not(.game-mode) .furni-fiche,
body:not(.game-mode) .joueur-fiche,
body:not(.game-mode) .familier-fiche,
body:not(.game-mode) .dressage,
body:not(.game-mode) .groupe-info,
body:not(.game-mode) .metier,
body:not(.game-mode) .membres,
body:not(.game-mode) .outils-salle,
body:not(.game-mode) .parametres,
body:not(.game-mode) .barre,
body:not(.game-mode) .memenu {
    display: none;
}

/* ---------- Page Entreprises (jobs.php) ----------
   Meme habillage que les panneaux de l'accueil et de la page Equipe. */
.jobs-page {
    width: calc(100% - 40px);
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 30px 0 64px;
}

.jobs-intro { margin-bottom: 22px; }
.jobs-titre { margin: 0 0 6px; color: var(--hrp-text); font-size: 30px; font-weight: 700; }
.jobs-sous-titre { margin: 0; color: var(--hrp-muted); font-size: 14px; }
.jobs-vide { color: var(--hrp-muted); font-style: italic; }

.jobs-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    align-items: start;
}

.jobs-carte {
    padding: 22px 24px 20px;
    border: 1px solid var(--hrp-border);
    border-radius: 14px;
    background: var(--hrp-panel);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    transition: border-color .18s ease, transform .18s ease;
}

.jobs-carte:hover { border-color: var(--hrp-yellow); transform: translateY(-2px); }

.jobs-carte-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.jobs-carte-titre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jobs-carte-titre h2 { margin: 0; color: var(--hrp-text); font-size: 22px; font-weight: 600; }
.jobs-carte-badge { width: 42px; height: 42px; object-fit: contain; }

/* Pastille d'effectif, dans le jaune de la charte. */
.jobs-statut {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    color: var(--hrp-yellow);
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    background: rgba(255, 196, 49, .14);
}

.jobs-carte-description {
    margin: 10px 0 16px;
    padding-bottom: 14px;
    color: var(--hrp-muted);
    font-size: 13px;
    line-height: 1.55;
    border-bottom: 2px solid var(--hrp-yellow);
}

.jobs-carte-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.jobs-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    border: 0;
    border-radius: 9px;
    transition: filter .15s ease, transform .1s ease;
}

.jobs-btn-principal { color: #1b2130; background: var(--hrp-yellow); }
.jobs-btn:hover { filter: brightness(1.08); }
.jobs-btn:active { transform: translateY(1px); }

.jobs-carte-lieu {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--hrp-muted);
    font-size: 12px;
}

@media (max-width: 900px) {
    .jobs-grille { grid-template-columns: 1fr; }
}

/* ---------- Fiche d'une entreprise (job.php) ---------- */
.job-page {
    width: calc(100% - 40px);
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 24px 0 64px;
}

.job-retour {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    color: var(--hrp-muted);
    font-size: 13px;
}

.job-retour:hover { color: var(--hrp-yellow); }

.job-colonnes {
    display: grid;
    grid-template-columns: 300px 1fr 300px;
    gap: 18px;
    align-items: start;
}

.job-bloc {
    padding: 20px 22px;
    border: 1px solid var(--hrp-border);
    border-radius: 14px;
    background: var(--hrp-panel);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.job-bloc-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.job-nom { margin: 0 0 4px; color: var(--hrp-text); font-size: 22px; font-weight: 700; }
.job-description { margin: 0; color: var(--hrp-muted); font-size: 12px; line-height: 1.5; }
.job-badge { width: 42px; height: 42px; flex: 0 0 auto; object-fit: contain; }

/* Tableau d'informations, une ligne par donnée. */
.job-infos { margin: 16px 0 0; padding: 0; list-style: none; }

.job-infos li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--hrp-border);
    font-size: 12px;
}

.job-infos span { color: var(--hrp-muted); }

.job-infos b {
    padding: 3px 10px;
    color: var(--hrp-text);
    font-size: 11px;
    border-radius: 6px;
    background: var(--hrp-panel-soft);
}

.job-btn-large { width: 100%; margin-top: 16px; justify-content: center; }

/* ---- Grades ---- */
.job-grades { display: flex; flex-direction: column; gap: 14px; }

.job-grade-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.job-grade-entete h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--hrp-text); font-size: 17px; font-weight: 600; }
.job-grade-entete i { color: var(--hrp-yellow); font-size: 15px; }

/* Salaire du grade, dans le jaune de la charte. */
.job-salaire {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    color: var(--hrp-yellow);
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    background: rgba(255, 196, 49, .14);
}

.job-salaire img { width: 14px; height: 14px; image-rendering: pixelated; }

.job-membres { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.job-membres-vide { margin: 12px 0 0; color: var(--hrp-muted); font-size: 12px; font-style: italic; }

.job-membre {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 116px;
    padding: 26px 8px 12px;
    border: 1px solid var(--hrp-border);
    border-radius: 10px;
    background: var(--hrp-panel-soft);
}

.job-membre-etat {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 5px;
}

.job-membre-etat.est-en-ligne { background: #52bc48; }
.job-membre-etat.est-hors-ligne { background: rgba(255, 255, 255, .14); }

.job-membre-avatar { display: flex; align-items: flex-start; justify-content: center; width: 64px; height: 74px; overflow: hidden; }
.job-membre-avatar img { margin-top: -8px; image-rendering: pixelated; }
.job-membre-etat.est-hors-ligne ~ .job-membre-avatar img { filter: grayscale(1) opacity(.75); }
.job-membre-nom { color: var(--hrp-text); font-size: 12px; font-weight: 700; }

/* ---- Journal ---- */
.job-journal-titre { margin: 0 0 14px; color: var(--hrp-text); font-size: 16px; font-weight: 600; }
.job-table { width: 100%; border-collapse: collapse; font-size: 12px; }

.job-table th {
    padding: 8px 6px;
    color: var(--hrp-muted);
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid var(--hrp-yellow);
}

.job-table td { padding: 8px 6px; color: var(--hrp-text); border-bottom: 1px solid var(--hrp-border); }
.job-action { font-weight: 700; }
.job-action-promu, .job-action-embauche { color: #52bc48; }
.job-action-retrograde, .job-action-renvoye { color: #e23b43; }

@media (max-width: 1200px) {
    .job-colonnes { grid-template-columns: 1fr; }
}

/* Bouton secondaire des cartes entreprise. */
.jobs-btn-secondaire {
    color: var(--hrp-text);
    border: 1px solid var(--hrp-border);
    background: var(--hrp-panel-soft);
}

.jobs-btn-secondaire:hover { border-color: var(--hrp-yellow); }

/* ---------- Forum communautaire ---------- */
.forum-page {
    width: calc(100% - 40px);
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 30px 0 64px;
}

.forum-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.forum-hero h1 { margin: 5px 0 5px; color: var(--hrp-text); font-size: 30px; font-weight: 700; }
.forum-hero p { max-width: 820px; margin: 0; color: var(--hrp-muted); font-size: 14px; }
.forum-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--hrp-yellow) !important; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.forum-moderator, .forum-restricted { display: inline-flex; align-items: center; gap: 5px; color: var(--hrp-yellow); font-size: 11px; font-weight: 700; }
.forum-moderator { padding: 7px 11px; border-radius: 999px; background: rgba(255, 196, 49, .12); white-space: nowrap; }

.forum-alert, .forum-locked, .forum-empty {
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid var(--hrp-border);
    border-radius: 10px;
    color: var(--hrp-muted);
    background: var(--hrp-panel);
}
.forum-alert { display: flex; gap: 8px; color: #ffcf66; border-color: rgba(255, 196, 49, .35); }
.forum-locked { display: flex; align-items: center; gap: 8px; }
.forum-empty { text-align: center; }

.forum-breadcrumb { display: flex; align-items: center; gap: 6px; margin: -8px 0 16px; color: var(--hrp-muted); font-size: 12px; }
.forum-breadcrumb a:hover { color: var(--hrp-yellow); }
.forum-breadcrumb i { font-size: 13px; }

.forum-categories, .forum-topic-list { display: grid; gap: 10px; }
.forum-category, .forum-topic-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid var(--hrp-border);
    border-radius: 12px;
    background: var(--hrp-panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    transition: border-color .15s ease, transform .15s ease;
}
.forum-category:hover, .forum-topic-row:hover { border-color: var(--hrp-yellow); transform: translateY(-1px); }
.forum-category-icon, .forum-topic-icon {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 11px;
    color: #1b2130;
    background: var(--hrp-yellow);
    font-size: 23px;
}
.forum-topic-icon { flex-basis: 38px; width: 38px; height: 38px; font-size: 18px; }
.forum-category-main, .forum-topic-main { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 3px; }
.forum-category-main strong, .forum-topic-main strong { overflow: hidden; color: var(--hrp-text); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.forum-category-main small, .forum-topic-main small { overflow: hidden; color: var(--hrp-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.forum-category-stat, .forum-topic-stat { display: flex; flex: 0 0 65px; flex-direction: column; align-items: center; color: var(--hrp-text); }
.forum-category-stat small, .forum-topic-stat small { color: var(--hrp-muted); font-size: 10px; }
.forum-category-last { flex: 0 0 115px; color: var(--hrp-muted); font-size: 11px; text-align: right; }
.forum-chevron { color: var(--hrp-muted); }

.forum-tools { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.forum-topic-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.forum-topic-actions .forum-tools { margin-bottom: 0; }
.forum-tools form { margin: 0; }
.forum-tools button {
    padding: 7px 10px;
    border: 1px solid var(--hrp-border);
    border-radius: 8px;
    color: var(--hrp-text);
    background: var(--hrp-panel);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.forum-tools button:hover { border-color: var(--hrp-yellow); }
.forum-tools button.is-danger { color: #ff7777; }
.forum-tool-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border: 1px solid var(--hrp-border);
    border-radius: 8px;
    color: var(--hrp-text) !important;
    background: var(--hrp-panel);
    font-size: 12px;
    font-weight: 600;
}
.forum-tool-link:hover { border-color: var(--hrp-yellow); }
.forum-draft-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 196, 49, .35);
    border-radius: 10px;
    color: var(--hrp-muted);
    background: rgba(255, 196, 49, .08);
    font-size: 12px;
}
.forum-draft-notice i, .forum-draft-notice strong { color: var(--hrp-yellow); }
.forum-draft-badge {
    display: inline-block;
    padding: 2px 6px;
    margin-left: 5px;
    border-radius: 999px;
    color: var(--hrp-yellow);
    background: rgba(255, 196, 49, .14);
    font-size: 9px;
    vertical-align: 2px;
}

.forum-message {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid var(--hrp-border);
    border-radius: 12px;
    background: var(--hrp-panel);
}
.forum-message aside { display: flex; flex-direction: column; align-items: center; padding: 18px 12px; background: rgba(12, 17, 27, .28); }
.forum-message aside > img { width: 64px; height: 64px; margin-bottom: 7px; object-fit: contain; image-rendering: pixelated; }
.forum-message aside strong { max-width: 115px; overflow: hidden; color: var(--hrp-text); font-size: 13px; text-overflow: ellipsis; }
.forum-message aside span { color: var(--hrp-yellow); font-size: 10px; }
.forum-author-role { display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin-top: 2px; text-align: center; }
.forum-author-role.is-staff { padding: 3px 6px; border-radius: 999px; background: rgba(255, 196, 49, .12); }
.forum-author-role img { width: 16px; height: 16px; object-fit: contain; image-rendering: pixelated; }
.forum-message-body { min-width: 0; padding: 16px 18px 20px; }
.forum-message-meta { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 14px; color: var(--hrp-muted); font-size: 11px; border-bottom: 1px solid var(--hrp-border); }
.forum-message-text { color: var(--hrp-text); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.forum-post-actions { display: inline-flex; align-items: center; gap: 10px; }
.forum-post-actions form { margin: 0; }
.forum-post-actions a, .forum-post-actions button { color: var(--hrp-muted); font: inherit; font-weight: 600; }
.forum-post-actions a:hover { color: var(--hrp-yellow); }
.forum-post-actions button { padding: 0; border: 0; background: transparent; cursor: pointer; }
.forum-post-actions button:hover { color: #ff7777; }
.forum-edit-post { display: grid; gap: 9px; }
.forum-edit-post textarea { min-height: 110px; padding: 10px 12px; border: 1px solid var(--hrp-border); border-radius: 8px; outline: 0; color: var(--hrp-text); background: #171d2a; font: inherit; font-size: 13px; resize: vertical; }
.forum-edit-post textarea:focus { border-color: var(--hrp-yellow); }
.forum-edit-post > div { display: flex; align-items: center; gap: 12px; }
.forum-edit-post > div > a { color: var(--hrp-muted); font-size: 12px; }
.forum-replies h2, .forum-form h2 { margin: 24px 0 12px; color: var(--hrp-text); font-size: 18px; }

.forum-form {
    display: grid;
    gap: 8px;
    padding: 18px;
    margin-top: 20px;
    border: 1px solid var(--hrp-border);
    border-radius: 12px;
    background: var(--hrp-panel);
}
.forum-form label { color: var(--hrp-text); font-size: 12px; font-weight: 700; }
.forum-form input, .forum-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--hrp-border);
    border-radius: 8px;
    outline: 0;
    color: var(--hrp-text);
    background: #171d2a;
    font: inherit;
    font-size: 13px;
}
.forum-form input:focus, .forum-form textarea:focus { border-color: var(--hrp-yellow); }
.forum-form textarea { min-height: 150px; resize: vertical; }
.forum-primary {
    justify-self: start;
    padding: 9px 15px;
    margin-top: 4px;
    border: 0;
    border-radius: 8px;
    color: #1b2130;
    background: var(--hrp-yellow);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.forum-primary:hover { filter: brightness(1.08); }
.forum-secondary {
    padding: 9px 15px;
    border: 1px solid var(--hrp-border);
    border-radius: 8px;
    color: var(--hrp-text);
    background: #171d2a;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.forum-secondary:hover { border-color: var(--hrp-yellow); }
.forum-form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.forum-form-actions .forum-primary { justify-self: auto; margin-top: 0; }
.forum-form-actions > a { color: var(--hrp-muted); font-size: 12px; }
.forum-topic-edit { padding: 0; margin: 0; border: 0; background: transparent; }
.forum-rich-content p { margin: 0 0 12px; }
.forum-rich-content p:last-child { margin-bottom: 0; }
.forum-rich-content h2, .forum-rich-content h3 { margin: 18px 0 8px; color: var(--hrp-text); }
.forum-rich-content ul, .forum-rich-content ol { padding-left: 24px; }
.forum-rich-content blockquote { padding: 10px 14px; margin: 12px 0; border-left: 3px solid var(--hrp-yellow); color: var(--hrp-muted); background: rgba(255, 255, 255, .025); }
.forum-rich-content a { color: var(--hrp-yellow); text-decoration: underline; }
.tox-tinymce { border-color: var(--hrp-border) !important; border-radius: 8px !important; }

/* ---------- Centre de support ---------- */
.support-page {
    width: calc(100% - 40px);
    max-width: var(--site-width);
    min-height: 560px;
    margin: 0 auto;
    padding: 30px 0 64px;
}
.support-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.support-hero h1 { margin: 0 0 5px; color: var(--hrp-text); font-size: 30px; font-weight: 700; }
.support-hero p { margin: 0; color: var(--hrp-muted); font-size: 14px; }
.support-staff-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; color: var(--hrp-yellow); background: rgba(255, 196, 49, .12); font-size: 11px; font-weight: 700; }
.support-alert, .support-empty, .support-closed { padding: 14px 16px; border: 1px solid var(--hrp-border); border-radius: 10px; color: var(--hrp-muted); background: var(--hrp-panel); }
.support-alert { display: flex; gap: 8px; margin-bottom: 16px; color: #ffcf66; border-color: rgba(255, 196, 49, .35); }
.support-closed { display: flex; align-items: center; gap: 7px; margin-top: 14px; }
.support-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(330px, .75fr); align-items: start; gap: 18px; }
.support-form, .support-list, .support-ticket-head {
    padding: 20px;
    border: 1px solid var(--hrp-border);
    border-radius: 13px;
    background: var(--hrp-panel);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.support-form { display: grid; gap: 9px; }
.support-form h2, .support-list h2, .support-ticket-head h2 { margin: 0; color: var(--hrp-text); font-size: 18px; font-weight: 700; }
.support-form > p { margin: -3px 0 8px; color: var(--hrp-muted); font-size: 12px; }
.support-form label { color: var(--hrp-text); font-size: 12px; font-weight: 700; }
.support-form-row { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 10px; }
.support-form-row > div { display: grid; gap: 7px; }
.support-form input, .support-form select {
    width: 100%;
    min-height: 43px;
    padding: 9px 12px;
    border: 1px solid var(--hrp-border);
    border-radius: 8px;
    outline: 0;
    color: var(--hrp-text);
    background: #171d2a;
    font: inherit;
    font-size: 13px;
}
.support-form input:focus, .support-form select:focus { border-color: var(--hrp-yellow); }
.support-primary {
    justify-self: end;
    padding: 10px 16px;
    margin-top: 3px;
    border: 0;
    border-radius: 8px;
    color: #1b2130;
    background: var(--hrp-yellow);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.support-primary:hover { filter: brightness(1.08); }
.support-list { display: grid; gap: 9px; padding: 15px; }
.support-list-title { display: flex; align-items: center; justify-content: space-between; padding: 3px 3px 9px; border-bottom: 1px solid var(--hrp-border); }
.support-list-title p { margin: 2px 0 0; color: var(--hrp-muted); font-size: 10px; }
.support-list-title > i { color: var(--hrp-yellow); font-size: 25px; }
.support-ticket-row { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px; border: 1px solid transparent; border-radius: 9px; background: rgba(255, 255, 255, .025); }
.support-ticket-row:hover { border-color: var(--hrp-yellow); }
.support-ticket-row > span:nth-child(2) { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.support-ticket-row strong { overflow: hidden; color: var(--hrp-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.support-ticket-row small { overflow: hidden; color: var(--hrp-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.support-ticket-subject { display: flex; align-items: center; min-width: 0; gap: 6px; }
.support-ticket-subject strong { flex: 0 1 auto; min-width: 0; }
.support-ticket-unread {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    color: #fff;
    background: var(--hrp-red);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}
.support-ticket-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; color: #1b2130; background: var(--hrp-yellow); }
.support-status { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.support-status.is-open { color: #ffcf66; background: rgba(255, 196, 49, .13); }
.support-status.is-answered { color: #64d475; background: rgba(73, 200, 87, .13); }
.support-status.is-closed { color: #929bab; background: rgba(146, 155, 171, .13); }
.support-breadcrumb { display: flex; align-items: center; gap: 6px; margin: -8px 0 14px; color: var(--hrp-muted); font-size: 11px; }
.support-breadcrumb a:hover { color: var(--hrp-yellow); }
.support-ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.support-ticket-head h2 { margin: 5px 0 3px; font-size: 21px; }
.support-ticket-head p { margin: 0; color: var(--hrp-muted); font-size: 11px; }
.support-category { color: var(--hrp-yellow); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.support-status-actions { display: flex; justify-content: flex-end; gap: 7px; margin-bottom: 10px; }
.support-status-actions form { margin: 0; }
.support-status-actions button { padding: 7px 10px; border: 1px solid var(--hrp-border); border-radius: 8px; color: var(--hrp-text); background: var(--hrp-panel); font-size: 11px; font-weight: 700; cursor: pointer; }
.support-status-actions button:hover { border-color: var(--hrp-yellow); }
.support-conversation { display: grid; gap: 10px; }
.support-message { display: grid; grid-template-columns: 125px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--hrp-border); border-radius: 12px; background: var(--hrp-panel); }
.support-message.is-staff { border-color: rgba(255, 196, 49, .32); }
.support-message aside { display: flex; flex-direction: column; align-items: center; padding: 15px 10px; background: rgba(12, 17, 27, .28); }
.support-message aside img { width: 55px; height: 55px; object-fit: contain; image-rendering: pixelated; }
.support-message aside strong { max-width: 100px; overflow: hidden; color: var(--hrp-text); font-size: 12px; text-overflow: ellipsis; }
.support-message aside span { color: var(--hrp-yellow); font-size: 9px; }
.support-message > div { min-width: 0; padding: 14px 17px 18px; }
.support-message > div > small { display: block; padding-bottom: 9px; margin-bottom: 12px; color: var(--hrp-muted); font-size: 10px; border-bottom: 1px solid var(--hrp-border); }
.support-message-content { color: var(--hrp-text); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.support-message-content p { margin: 0 0 10px; }
.support-message-content p:last-child { margin-bottom: 0; }
.support-message-content a { color: var(--hrp-yellow); text-decoration: underline; }
.support-message + .support-form, .support-conversation + .support-form { margin-top: 16px; }

@media (max-width: 900px) {
    .support-grid { grid-template-columns: 1fr; }
    .support-list { order: -1; }
}
@media (max-width: 600px) {
    .support-page { width: calc(100% - 24px); padding-top: 22px; }
    .support-hero { flex-direction: column; }
    .support-hero h1 { font-size: 24px; }
    .support-form-row { grid-template-columns: 1fr; }
    .support-ticket-head { align-items: flex-start; flex-direction: column; }
    .support-message { grid-template-columns: 80px minmax(0, 1fr); }
    .support-message aside { padding: 12px 6px; }
    .support-message aside img { width: 45px; height: 45px; }
    .support-message aside strong { max-width: 67px; font-size: 10px; }
    .support-primary { justify-self: stretch; }
}

@media (max-width: 760px) {
    .forum-page { width: calc(100% - 24px); padding-top: 22px; }
    .forum-hero { flex-direction: column; }
    .forum-hero h1 { font-size: 24px; }
    .forum-category, .forum-topic-row { gap: 10px; padding: 13px; }
    .forum-category-stat, .forum-category-last, .forum-topic-stat, .forum-restricted { display: none; }
    .forum-message { grid-template-columns: 82px minmax(0, 1fr); }
    .forum-message aside { padding: 14px 7px; }
    .forum-message aside > img { width: 50px; height: 50px; }
    .forum-message aside strong { max-width: 68px; font-size: 11px; }
    .forum-message-body { padding: 13px; }
    .forum-tools, .forum-topic-actions { flex-wrap: wrap; justify-content: flex-start; }
}
.jobs-carte-actions { flex-wrap: wrap; }
/* Sono de pièce (sound_machine) */
/* ---------- Boombox / Diffusion de la piece (DA verre + blur) ---------- */
.sound-machine-modal { position: fixed; inset: 0; z-index: 10020; pointer-events: none; font-family: Poppins, 'Segoe UI', sans-serif; }

.sound-machine-window {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(620px, calc(100vw - 28px));
    height: min(700px, calc(100vh - 28px));
    max-height: min(700px, calc(100vh - 28px));
    overflow: hidden;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    color: #fff;
    background: rgba(15, 20, 30, .96);
    border: 2px solid #2e3a57;
    border-radius: 11px;
    box-shadow: 0 24px 55px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(8px) saturate(135%);
    backdrop-filter: blur(8px) saturate(135%);
}
.sound-machine-modal [hidden] { display: none !important; }

.sound-machine-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 66px;
    padding: 10px 15px 10px 18px;
    cursor: move;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    user-select: none;
}
.sound-machine-brand { display: flex; align-items: center; gap: 12px; }
.sound-machine-brand img { display: block; width: 126px; height: auto; }
.sound-machine-brand strong { color: #dce0e8; font-size: 14px; font-weight: 800; }
.sound-machine-header button {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    padding: 0;
    cursor: pointer;
    color: #fff;
    border: 0;
    border-radius: 6px;
    background: #bd150b;
}
.sound-machine-header button:hover { background: #dd1d11; }

.sound-machine-body { display: flex; height: calc(100% - 66px); min-height: 0; flex-direction: column; gap: 12px; padding: 17px; overflow: hidden; }

.sound-machine-now,
.sound-machine-form,
.sound-machine-controls,
.sound-machine-queue {
    padding: 13px 14px;
    background: rgba(29, 36, 49, .8);
    border: 1px solid #303b51;
    border-radius: 10px;
}
.sound-machine-now { display: flex; align-items: center; gap: 13px; border-color: rgba(255, 196, 49, .22); background: rgba(255, 196, 49, .07); }
.sound-machine-now-icon { display: grid; position: relative; width: 86px; height: 58px; flex: 0 0 86px; place-items: center; overflow: hidden; color: #ffc431 !important; font-size: 27px !important; border-radius: 9px; background: rgba(255, 196, 49, .12); }
.sound-machine-now-icon > * { grid-area: 1 / 1; }
.sound-machine-now-icon > img { width: 100%; height: 100%; object-fit: cover; }
.sound-machine-now-icon > img[hidden],
.sound-machine-now-icon > i[hidden] { display: none; }
.sound-machine-now > div { display: grid; min-width: 0; gap: 2px; }
.sound-machine-now strong { overflow: hidden; color: #fff; font-size: 15px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.sound-machine-now span,
.sound-machine-now small,
.sound-machine-form label,
.sound-machine-controls label { color: #9ca7b9; font-size: 11px; }
.sound-machine-now small { color: #ffc431; }
.sound-machine-now #sound-machine-requester { display: flex; width: fit-content; align-items: center; gap: 7px; margin-top: 4px; padding: 3px 9px 3px 4px; color: #dce0e8; font-size: 10px; font-weight: 700; border: 1px solid rgba(255, 255, 255, .055); border-radius: 20px; background: #111824; }
.sound-machine-now #sound-machine-requester[hidden] { display: none; }
.sound-machine-now #sound-machine-requester img { width: 24px; height: 24px; object-fit: cover; border-radius: 50%; background: rgba(255, 196, 49, .12); }
.sound-machine-queue h3 { display: flex; align-items: center; justify-content: space-between; margin: 0; color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.sound-machine-queue h3 span { display: inline-flex; align-items: center; gap: 7px; }
.sound-machine-queue h3 i { color: #ffc431; font-size: 17px; }
.sound-machine-queue h3 small { padding: 3px 7px; color: #ffc431; font-size: 9px; border-radius: 5px; background: rgba(255, 196, 49, .1); }

.sound-machine-form > label { display: flex; flex-direction: column; gap: 2px; }
.sound-machine-form > label strong { color: #fff; font-size: 13px; font-weight: 800; }
.sound-machine-form > label small { color: #8f9bad; font-size: 10px; }
.sound-machine-form > div { display: flex; gap: 8px; margin-top: 7px; }
.sound-machine-url-field { display: flex; min-width: 0; height: 42px; flex: 1; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #303d57; border-radius: 9px; background: rgba(8, 13, 22, .72); }
.sound-machine-url-field i { color: #ffc431; font-size: 18px; }
.sound-machine-form input {
    min-width: 0;
    flex: 1;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 0;
    font: 500 11px Poppins, sans-serif;
}
.sound-machine-url-field:focus-within { border-color: #ffc431; box-shadow: 0 0 0 2px rgba(255, 196, 49, .08); }
.sound-machine-form input:focus { outline: none; }
.sound-machine-form input::placeholder { color: #758095; }
.sound-machine-form p { min-height: 0; margin: 5px 0 0; color: #ff8a8a; font-size: 10px; }
.sound-machine-form p:empty { display: none; }

.sound-machine-form button,
.sound-machine-controls button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    color: #171d27;
    font: 800 11px Poppins, sans-serif;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    background: #ffc431;
    transition: filter .15s ease, transform .15s ease;
}
.sound-machine-form button:hover,
.sound-machine-controls button:hover { filter: brightness(1.08); transform: translateY(-1px); }

.sound-machine-controls > label { display: flex; align-items: center; justify-content: space-between; }
.sound-machine-controls > label span { display: inline-flex; align-items: center; gap: 6px; color: #dce0e8; font-weight: 700; }
.sound-machine-controls > label i { color: #ffc431; font-size: 16px; }
.sound-machine-controls output { padding: 3px 7px; color: #ffc431; font-weight: 800; border-radius: 5px; background: rgba(255, 196, 49, .1); }
.sound-machine-controls input[type="range"] { width: 100%; margin-top: 10px; accent-color: #ffc431; }
.sound-machine-controls > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.sound-machine-controls > div button { width: 100%; min-width: 0; padding-inline: 8px; white-space: nowrap; }
.sound-machine-controls button { color: #dce0e8; border: 1px solid #303d57; background: #171e2a; }
.sound-machine-controls #sound-machine-enable { color: #171d27; border-color: #ffc431; background: #ffc431; }
.sound-machine-controls #sound-machine-clear { color: #ff8d86; border-color: rgba(189, 21, 11, .45); background: rgba(189, 21, 11, .14); }
.sound-machine-controls #sound-machine-everyone { line-height: 1.25; white-space: normal; }
.sound-machine-controls #sound-machine-everyone.is-active { color: #171d27; border-color: #43bd70; background: #43bd70; }

.sound-machine-queue { display: flex; min-height: 165px; flex: 1 1 auto; flex-direction: column; overflow: hidden; }
.sound-machine-queue ol { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: 7px; margin: 10px 0 0; padding: 0 5px 0 0; overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: #ffc431 transparent; }
.sound-machine-queue ol::-webkit-scrollbar { width: 5px; }
.sound-machine-queue ol::-webkit-scrollbar-thumb { border-radius: 10px; background: #ffc431; }
.sound-machine-queue li {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    flex: 0 0 auto;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 8px;
    background: #111824;
    border: 1px solid #303b51;
}
.sound-machine-queue-thumbnail { display: block; width: 72px; height: 44px; object-fit: cover; border-radius: 6px; background: #0a0f18; }
.sound-machine-queue-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 5px; }
.sound-machine-queue li strong { overflow: hidden; color: #fff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sound-machine-queue li span { display: inline-flex; width: fit-content; align-items: center; gap: 5px; color: #cbd1dc; font-size: 9px; white-space: nowrap; }
.sound-machine-queue li span img { width: 20px; height: 20px; object-fit: cover; border-radius: 50%; background: rgba(255, 196, 49, .1); }
.sound-machine-queue-remove { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; color: #ff8d86; border: 1px solid rgba(189, 21, 11, .42); border-radius: 7px; background: rgba(189, 21, 11, .13); cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.sound-machine-queue-remove:hover { color: #fff; border-color: #bd150b; background: #bd150b; }
.sound-machine-queue .sound-machine-queue-empty { display: flex; min-height: 74px; flex-direction: column; justify-content: center; gap: 6px; color: #778397; border-style: dashed; background: rgba(8, 13, 22, .42); }
.sound-machine-queue .sound-machine-queue-empty i { color: #ffc431; font-size: 21px; opacity: .75; }
.sound-machine-queue .sound-machine-queue-empty span { color: #8995a8; font-size: 10px; font-weight: 600; }

#sound-machine-player { position: fixed; left: -10px; bottom: -10px; width: 1px; height: 1px; opacity: .01; pointer-events: none; }

@media (max-width: 600px) {
    .sound-machine-window { top: 12px; left: 12px; transform: none; }
    .sound-machine-form > div { flex-direction: column; }
}
.jaune-workstation {
    position: fixed;
    z-index: 12050;
    inset: 50% auto auto 50%;
    display: flex;
    width: min(760px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    flex-direction: column;
    overflow: hidden;
    color: #f8fafc;
    font-family: "Poppins", "Segoe UI", sans-serif;
    font-size: 14px;
    background: rgba(16, 20, 29, .96);
    border: 2px solid #2e334d;
    border-radius: 11px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(2px) saturate(150%);
    transform: translate(-50%, -50%);
}
.jaune-workstation[hidden] { display: none; }
body:not(.game-mode) .jaune-workstation,
body:not(.game-mode) .jaune-sale-overlay,
body.hotel-disconnected .jaune-workstation,
body.hotel-disconnected .jaune-sale-overlay {
    display: none !important;
}
.jaune-workstation-confirm {
    position: absolute;
    z-index: 4;
    inset: 43px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border-radius: 0 0 9px 9px;
    background: rgba(8, 12, 20, .72);
}
.jaune-workstation-confirm[hidden] { display: none; }
.jaune-workstation-confirm-box {
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: 8px 9px;
    width: min(390px, 100%);
    padding: 15px;
    border: 1px solid #3a4660;
    border-radius: 9px;
    background: #1b2332;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.jaune-workstation-confirm-box > strong { align-self: center; color: #fff; font-size: 14px; }
.jaune-workstation-confirm-box > p {
    grid-column: 1 / -1;
    margin: 4px 0 8px;
    color: #aab5c9;
    font-size: 14px;
    line-height: 1.45;
}
.jaune-workstation-confirm-box > div {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: 7px;
}
.jaune-workstation-confirm-box button {
    min-height: 31px;
    padding: 0 10px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    border: 0;
    border-radius: 6px;
    background: #3b4965;
}
.jaune-workstation-confirm-box button.is-danger { background: #c91f1f; }
.jaune-workstation > header {
    display: flex; align-items: center; justify-content: space-between;
    flex: 0 0 auto;
    min-height: 42px; padding: 6px 8px 6px 12px;
    background: #20293b; border-bottom: 1px solid #303b53;
    cursor: grab; user-select: none; touch-action: none;
}
.jaune-workstation.is-dragging > header { cursor: grabbing; }
.jaune-workstation-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.jaune-workstation-title strong { font-size: 16px; line-height: 1; }
.jaune-workstation-title small { overflow: hidden; color: #aab3c4; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.jaune-workstation-dot { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; background: #ffc323; box-shadow: 0 0 8px rgba(255,195,35,.45); }
.jaune-workstation header button {
    width: 28px; height: 28px; flex: 0 0 28px; color: #fff; font-size: 20px; line-height: 1;
    background: #c91f1f; border: 0; border-radius: 7px; cursor: pointer;
}
.jaune-workstation-body {
    min-height: 0;
    max-height: calc(100vh - 70px);
    flex: 1 1 auto;
    padding: 12px 14px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.jaune-tabs { display: flex; gap: 6px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #303b53; }
.jaune-tabs button {
    min-height: 30px; padding: 0 13px; color: #aab3c4;
    font-family: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer; border: 1px solid #34415a; border-radius: 7px; background: #1b2332;
}
.jaune-tabs button:hover { color: #fff; border-color: #52627e; }
.jaune-tabs button.is-active { color: #171717; border-color: #ffc323; background: #ffc323; }
.jaune-tab-panel[hidden] { display: none; }
.jaune-notification-form {
    padding: 14px;
    border: 1px solid #34415a;
    border-radius: 10px;
    background: #1b2332;
}
.jaune-notification-form > div strong,
.jaune-notification-form > div small { display: block; }
.jaune-notification-form > div strong { font-size: 14px; }
.jaune-notification-form > div small { margin-top: 3px; color: #929db2; font-size: 14px; }
.jaune-notification-form label { margin-top: 11px; display: block; }
.jaune-notification-form label > span { margin-bottom: 5px; display: block; color: #bac3d3; font-size: 14px; font-weight: 700; }
.jaune-notification-form input,
.jaune-notification-form textarea {
    width: 100%;
    padding: 9px 10px;
    color: #fff;
    border: 1px solid #3b4861;
    border-radius: 7px;
    outline: 0;
    background: #111827;
    font: inherit;
    font-size: 14px;
    resize: vertical;
}
.jaune-notification-form input:focus,
.jaune-notification-form textarea:focus { border-color: #ffc323; box-shadow: 0 0 0 2px rgba(255,195,35,.12); }
.jaune-notification-form footer { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jaune-notification-form footer small { color: #aab3c4; font-size: 14px; }
.jaune-notification-form footer button {
    padding: 9px 13px;
    color: #171717;
    border: 0;
    border-radius: 7px;
    background: #ffc323;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}
.jaune-notification-form footer button:disabled { opacity: .55; cursor: wait; }
.jaune-notification-history { margin-top: 10px; max-height: 210px; overflow-y: auto; }
.jaune-notification-history article {
    padding: 10px;
    display: flex;
    gap: 9px;
    border-bottom: 1px solid #303b53;
}
.jaune-notification-history article > i { color: #ffc323; font-size: 18px; }
.jaune-notification-history article span { min-width: 0; }
.jaune-notification-history article strong { font-size: 14px; }
.jaune-notification-history article p { margin: 3px 0; color: #c4ccda; font-size: 14px; }
.jaune-notification-history article small { color: #7f8aa0; font-size: 14px; }
.jaune-workstation-subtitle { margin: 0 0 12px; color: #aab3c4; font-size: 14px; font-weight: 700; }
.jaune-dashboard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jaune-workstation-summary {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; padding: 10px 12px; background: #1b2332;
    border: 1px solid #34415a; border-radius: 8px;
}
.jaune-workstation-summary span { font-size: 14px; font-weight: 700; }
.jaune-workstation-summary strong { color: #ffc323; font-size: 19px; }
.jaune-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jaune-plan { overflow: hidden; padding: 11px; background: #1b2332; border: 1px solid #34415a; border-radius: 8px; }
.jaune-plan-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.jaune-plan h3 { margin: 0; font-size: 14px; }
.jaune-plan-title strong { color: #ffc323; font-size: 14px; white-space: nowrap; }
.jaune-plan p, .jaune-plan footer { display: flex; justify-content: space-between; margin: 5px 0; color: #aab5c9; font-size: 14px; }
.jaune-plan p b, .jaune-plan footer b { color: #fff; }
.jaune-plan footer { margin: 10px -11px -11px; padding: 9px 11px; background: rgba(0,0,0,.16); }
.jaune-users { display: flex; flex-direction: column; gap: 8px; }
.jaune-scroll-area {
    max-height: min(390px, calc(100vh - 220px));
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: #52627e #171e2b;
}
.jaune-scroll-area::-webkit-scrollbar { width: 7px; }
.jaune-scroll-area::-webkit-scrollbar-track { border-radius: 7px; background: #171e2b; }
.jaune-scroll-area::-webkit-scrollbar-thumb { border-radius: 7px; background: #52627e; }
.jaune-scroll-area::-webkit-scrollbar-thumb:hover { background: #ffc323; }
.jaune-client-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    padding: 0 10px;
    min-height: 34px;
    border: 1px solid #34415a;
    border-radius: 7px;
    background: #171e2b;
}
.jaune-client-search span { color: #ffc323; font-size: 20px; line-height: 1; }
.jaune-client-search input {
    width: 100%;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    border: 0;
    outline: 0;
    background: transparent;
}
.jaune-client-search input::placeholder { color: #7f8ba1; }
.jaune-logs-scroll { max-height: min(390px, calc(100vh - 260px)); }
.jaune-user {
    display: grid; grid-template-columns: 52px minmax(125px, 1fr) minmax(180px, auto);
    align-items: center; gap: 10px; padding: 9px 10px;
    border: 1px solid #34415a; border-radius: 8px; background: #1b2332;
}
.jaune-user-avatar {
    width: 48px; height: 48px; overflow: hidden; border-radius: 7px;
    background: #111722; border: 1px solid #34415a;
}
.jaune-user-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.jaune-user-info { min-width: 0; }
.jaune-user-info strong { display: block; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.jaune-user-info span, .jaune-user-info small { display: block; margin-top: 2px; color: #aab5c9; font-size: 14px; }
.jaune-user-info span { color: #ffc323; font-weight: 800; }
.jaune-user-usage {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 5px;
    margin: 7px 0 5px;
}
.jaune-user-usage small {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 7px;
    border: 1px solid #303b53;
    border-radius: 5px;
    background: rgba(0, 0, 0, .12);
}
.jaune-user-usage b { color: #fff; }
.jaune-user-usage em { color: #aab5c9; font-style: normal; text-align: right; }
.jaune-user-actions { display: flex; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.jaune-user-actions button {
    min-height: 27px; padding: 0 9px; color: #fff;
    font-family: inherit; font-size: 14px; font-weight: 800;
    cursor: pointer; border: 0; border-radius: 6px; background: #3b4965;
}
.jaune-user-actions button[data-jaune-sub-action="upgrade"] { color: #171717; background: #ffc323; }
.jaune-user-actions button[data-jaune-sub-action="cancel"] { background: #c91f1f; }
.jaune-user-actions button:disabled { cursor: wait; opacity: .55; }
.jaune-logs-summary { margin-bottom: 8px; padding: 9px 11px; color: #aab5c9; font-size: 14px; border-radius: 7px; background: #1b2332; }
.jaune-logs-summary strong { color: #ffc323; }
.jaune-logs { display: flex; flex-direction: column; gap: 5px; }
.jaune-log {
    display: grid;
    grid-template-columns: minmax(115px, 1.05fr) minmax(90px, .8fr) minmax(100px, .9fr) minmax(155px, 1.45fr) minmax(80px, .7fr);
    align-items: center; gap: 8px; padding: 8px 10px;
    color: #aab5c9; font-size: 14px; border: 1px solid #303b53; border-radius: 7px; background: #171e2b;
}
.jaune-log strong { color: #fff; font-size: 14px; }
.jaune-log-seller { color: #ffc323; font-weight: 800; }
.jaune-log-amount { color: #4dcc62; font-weight: 800; text-align: right; }
.jaune-log-amount.is-failed { color: #e25359; }
.jaune-log-header {
    margin-bottom: 5px;
    padding-top: 6px;
    padding-bottom: 6px;
    color: #7f8ba1;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: #20293b;
}
.jaune-log-header span:last-child { text-align: right; }
.jaune-empty { margin: 22px 0; color: #8993a8; font-size: 14px; text-align: center; }
.jaune-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.jaune-settings-intro,
.jaune-settings-section > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 195, 35, .55);
    border-radius: 9px;
    background: rgba(61, 53, 25, .28);
}
.jaune-settings-intro > span,
.jaune-settings-section > header > span,
.jaune-settings-switch > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}
.jaune-settings-intro strong,
.jaune-settings-section > header strong,
.jaune-settings-switch strong {
    color: #fff;
    font-size: 15px;
}
.jaune-settings-intro small,
.jaune-settings-section > header small,
.jaune-settings-switch small {
    color: #aab5c9;
    font-size: 14px;
    line-height: 1.4;
}
.jaune-settings-intro > i,
.jaune-settings-section > header > i {
    flex: 0 0 auto;
    color: #ffc323;
    font-size: 27px;
}
.jaune-settings-section {
    overflow: hidden;
    border: 1px solid #34415a;
    border-radius: 10px;
    background: rgba(27, 35, 50, .72);
}
.jaune-settings-section > header {
    border: 0;
    border-bottom: 1px solid #34415a;
    border-radius: 0;
    background: rgba(16, 23, 36, .48);
}
.jaune-settings-phone-grid,
.jaune-settings-plan-grid,
.jaune-settings-billing {
    display: grid;
    gap: 9px;
    padding: 10px;
}
.jaune-settings-phone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jaune-settings-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.jaune-settings-billing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jaune-settings-product,
.jaune-settings-plan-grid > article {
    min-width: 0;
    padding: 11px;
    border: 1px solid #34415a;
    border-radius: 8px;
    background: rgba(17, 24, 38, .68);
}
.jaune-settings-product > strong,
.jaune-settings-plan-grid > article > strong {
    display: block;
    margin-bottom: 9px;
    color: #ffc323;
    font-size: 15px;
}
.jaune-settings label:not(.jaune-settings-switch) {
    display: block;
    min-width: 0;
    margin-top: 8px;
}
.jaune-settings label:not(.jaune-settings-switch) > span {
    display: block;
    margin: 0 0 5px;
    color: #b8c1d1;
    font-size: 14px;
    font-weight: 700;
}
.jaune-settings label > div {
    display: flex;
    align-items: center;
    gap: 8px;
}
.jaune-settings input[type="number"],
.jaune-settings input[type="time"],
.jaune-settings select {
    width: 100%;
    min-width: 0;
    height: 39px;
    padding: 0 10px;
    color: #fff;
    font-family: "Poppins", "Segoe UI", sans-serif;
    font-size: 14px;
    border: 1px solid #3b4861;
    border-radius: 7px;
    outline: 0;
    background: #111827;
}
.jaune-settings input:focus,
.jaune-settings select:focus {
    border-color: #ffc323;
    box-shadow: 0 0 0 2px rgba(255, 195, 35, .13);
}
.jaune-settings label > div b {
    flex: 0 0 auto;
    color: #ffc323;
    font-size: 14px;
}
.jaune-settings-product > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 10px 0 0;
    padding-top: 9px;
    color: #aab5c9;
    font-size: 14px;
    border-top: 1px solid #303b53;
}
.jaune-settings-product > p strong {
    color: #52d680;
    font-size: 14px;
}
.jaune-settings-product > p strong.is-negative {
    color: #ff6875;
}
.jaune-settings-switch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 10px 10px;
    padding: 11px 12px;
    cursor: pointer;
    border: 1px solid #34415a;
    border-radius: 8px;
    background: rgba(17, 24, 38, .68);
}
.jaune-settings-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}
.jaune-settings-switch > i {
    position: relative;
    width: 46px;
    height: 25px;
    flex: 0 0 46px;
    border-radius: 999px;
    background: #39455b;
    transition: background .14s ease;
}
.jaune-settings-switch > i::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    content: "";
    border-radius: 50%;
    background: #fff;
    transition: transform .14s ease;
}
.jaune-settings-switch input:checked + i {
    background: #35ae65;
}
.jaune-settings-switch input:focus-visible + i {
    outline: 2px solid #ffc323;
    outline-offset: 2px;
}
.jaune-settings-switch input:checked + i::after {
    transform: translateX(21px);
}
.jaune-settings > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.jaune-settings > footer small {
    color: #aab5c9;
    font-size: 14px;
}
.jaune-settings > footer small.is-error {
    color: #ff7b86;
}
.jaune-settings > footer button {
    min-height: 42px;
    padding: 0 16px;
    color: #171717;
    font-family: "Poppins", "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    border: 0;
    border-radius: 8px;
    background: #ffc323;
}
.jaune-settings > footer button:disabled {
    opacity: .58;
    cursor: wait;
}
@media (max-width: 680px) {
    .jaune-workstation { max-height: calc(100vh - 24px); overflow: hidden; }
    .jaune-tabs { flex-wrap: wrap; }
    .jaune-tabs button { flex: 1 1 calc(50% - 6px); }
    .jaune-plan-grid { grid-template-columns: 1fr; }
    .jaune-dashboard-stats { grid-template-columns: 1fr; }
    .jaune-settings-phone-grid,
    .jaune-settings-plan-grid,
    .jaune-settings-billing {
        grid-template-columns: 1fr;
    }
    .jaune-settings > footer {
        align-items: stretch;
        flex-direction: column;
    }
    .jaune-settings > footer button {
        width: 100%;
    }
    .jaune-user { grid-template-columns: 46px 1fr; }
    .jaune-user-usage { grid-template-columns: 1fr; }
    .jaune-user-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .jaune-log-header { display: none; }
    .jaune-log:not(.jaune-log-header) {
        grid-template-columns: 1fr;
        gap: 5px;
    }
    .jaune-log:not(.jaune-log-header) > [data-label] {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
    }
    .jaune-log:not(.jaune-log-header) > [data-label]::before {
        content: attr(data-label);
        color: #7f8ba1;
        font-weight: 700;
        text-align: left;
    }
}

/* ============================================================
   Poste professionnel Golden Duck Bank
   ============================================================ */
.bank-workstation[hidden],
.bank-workstation [hidden] {
    display: none !important;
}

/* Casiers Golden Duck Bank — entête inspirée de la carte Taxi et cases RP. */
.bank-locker[hidden],.bank-locker [hidden],#bank-locker-sale[hidden]{display:none!important}
.bank-locker,.bank-locker *{font-family:"Poppins","Segoe UI",sans-serif}
.bank-locker{
    position:fixed;
    z-index:10520;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:min(760px,calc(100vw - 30px));
    color:#eaf0fa;
    background:#10151fe0;
    backdrop-filter: blur(4px);
    border:2px solid #344766;
    border-radius:13px;
    box-shadow:0 18px 55px #000b;
    overflow:hidden
}
.bank-locker-header{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 17px 0 18px;cursor:move;border-bottom:1px solid #1d2939}.bank-locker-brand{display:flex;align-items:center;gap:12px}.bank-locker-brand img{display:block;width:126px;height:auto}.bank-locker-brand strong{color:#dce0e8;font-size:14px;font-weight:800}.bank-locker-header button{width:29px;height:29px;border:0;border-radius:7px;color:#fff;background:#c81712;font-size:20px}
.bank-locker-hero{position:relative;height:127px;border-bottom:1px solid #202938;background:#202734 url('../img/banque_banner.png') center/cover no-repeat}.bank-locker-hero::before{position:absolute;inset:0;content:"";background:rgba(0,0,0,.48);pointer-events:none}.bank-locker-tabs{position:absolute;z-index:1;right:0;bottom:0;left:0;display:flex;align-items:flex-end;justify-content:center;gap:7px;padding:0 20px}.bank-locker-tabs button{min-width:94px;min-height:39px;padding:9px 18px;border:1px solid #3b4658;border-bottom:0;border-radius:7px 7px 0 0;color:#e4e7ec;background:rgba(37,44,54,.94);box-shadow:0 -2px 8px rgba(0,0,0,.33);font:700 12px Poppins;cursor:pointer}.bank-locker-tabs button.is-active{color:#171a20;border-color:#e5b600;background:#ffca18}
.bank-locker-body{display:grid;grid-template-columns:1fr 56px 1fr;gap:10px;padding:18px}.bank-locker-body>section{min-width:0;border:1px solid #2b3a52;border-radius:10px;background:#172131;padding:12px}.bank-locker-body>section>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}.bank-locker-body>section>header span{display:flex;align-items:center;gap:7px;color:#ffc400}.bank-locker-body>section>header small{font-size:10px;color:#8997ac}.bank-locker-body>section>p{text-align:center;color:#77859b;font-size:11px;margin:9px 0 0}
.bank-locker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;min-height:239px;padding:6px;border:1px dashed transparent;border-radius:8px;transition:.15s}.bank-locker-grid.is-over{border-color:#ffc400;background:#ffc40010}.bank-locker-slot,.bank-locker-item{position:relative;height:70px;border:1px solid #3a4b65;border-radius:6px;background:#1d293b}.bank-locker-item{padding:3px;color:#fff;cursor:grab}.bank-locker-item.is-dragging{opacity:.4}.bank-locker-item>span{height:43px;display:flex;align-items:center;justify-content:center}.bank-locker-item img{max-width:42px;max-height:42px;}.bank-locker-item>b{position:absolute;right:4px;top:2px;font-size:10px;text-shadow:1px 1px #000}.bank-locker-item>small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;color:#b9c4d4}.bank-locker-transfer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#ffc400}.bank-locker-transfer i{font-size:26px}.bank-locker-transfer small{writing-mode:vertical-rl;color:#7f8da2;font-size:9px}.bank-locker-feedback{margin:0 18px 15px;padding:8px;border-radius:6px;background:#47202a;color:#ff9aad}.bank-locker-admin-items{color:#9aa8bb!important;font-size:11px!important}.bank-workstation-account-actions .is-danger{background:#4a1924!important;color:#ff91a5!important}
#bank-locker-sale,#bank-locker-sale *{font-family:"Poppins","Segoe UI",sans-serif}body:not(.game-mode) #bank-locker-sale{display:none!important}#bank-locker-sale .vending-purchase-dialog{width:min(560px,calc(100vw - 28px));overflow:hidden;border:2px solid #2e334d;border-radius:11px;background:rgba(16,20,29,.94);box-shadow:0 18px 45px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06);-webkit-backdrop-filter:blur(6px) saturate(145%);backdrop-filter:blur(6px) saturate(145%)}#bank-locker-sale .reboot-header{min-height:62px;padding:10px 15px 10px 18px;border-bottom:1px solid rgba(255,255,255,.07)}#bank-locker-sale .reboot-brand{display:flex;align-items:center;gap:11px}#bank-locker-sale .reboot-brand img{display:block;width:126px;height:auto}#bank-locker-sale .reboot-brand strong{color:#d9dce3;font-size:13px;font-weight:700}#bank-locker-sale .reboot-content{display:block;padding:20px;text-align:left}#bank-locker-sale .reboot-message{display:flex;width:100%;min-height:0;margin:0 0 15px;padding:0;color:#d8dbe2;font-size:12px;line-height:1.55;font-weight:500;text-align:left}#bank-locker-sale .bank-locker-sale-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.bank-locker-quantity{position:fixed;z-index:10530;inset:0;background:transparent;font-family:"Poppins","Segoe UI",sans-serif}.bank-locker-quantity[hidden]{display:none}.bank-locker-quantity form{position:fixed;display:grid;grid-template-columns:76px 31px;grid-template-areas:'title title' 'input confirm' 'back back';gap:4px;width:129px;box-sizing:border-box;padding:5px;border:1px solid #46536b;border-radius:7px;background:#182132;box-shadow:0 8px 22px rgba(0,0,0,.48);color:#fff}.bank-locker-quantity strong{grid-area:title;font-size:10px;white-space:nowrap}.bank-locker-quantity input{grid-area:input;width:76px;height:31px;box-sizing:border-box;padding:6px;border:1px solid #ffc431;border-radius:5px;outline:0;background:#101827;color:#fff;font:700 12px/1 Poppins,sans-serif}.bank-locker-quantity button{border:0;border-radius:5px;color:#aeb9ca;background:transparent;font-size:9px;font-weight:800;cursor:pointer}.bank-locker-quantity button[type="submit"]{grid-area:confirm;width:31px;height:31px;padding:0;color:#192132;background:#ffc431;font-size:0}.bank-locker-quantity button[type="submit"]::after{content:'\2713';font-size:13px}.bank-locker-quantity [data-locker-quantity-cancel]{grid-area:back;display:flex;align-items:center;gap:4px;justify-self:start;padding:2px 5px}.bank-locker-quantity [data-locker-quantity-cancel]:hover{width:100%;justify-self:stretch;color:#192132;background:#ffc431}
#bank-locker-context-menu{z-index:10540}
@media(max-width:650px){.bank-locker-body{grid-template-columns:1fr}.bank-locker-transfer{height:30px;flex-direction:row}.bank-locker-transfer small{writing-mode:horizontal-tb}.bank-locker-grid{min-height:160px}.bank-locker-slot,.bank-locker-item{height:62px}}

.bank-workstation {
    position: fixed;
    z-index: 79;
    top: 50%;
    left: 50%;
    display: flex;
    width: 660px;
    height: min(680px, calc(100vh - 64px));
    max-width: calc(100vw - 32px);
    max-height: 680px;
    flex-direction: column;
    overflow: hidden;
    color: #f5f7fb;
    border: 2px solid rgba(74, 86, 125, .78);
    border-radius: 15px;
    background: rgba(12, 19, 30, .76);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .68), inset 0 1px 0 rgba(255,255,255,.045);
    transform: translate(-50%, -50%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
    font-family: "Poppins", "Segoe UI", sans-serif;
}

.bank-workstation-loader {
    position: absolute;
    z-index: 20;
    top:193px;
    right:0;
    bottom:0;
    left:0;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #f5f7fb;
    background: radial-gradient(circle at 50% 38%,rgba(47,61,84,.78),rgba(8,13,22,.96) 58%),rgba(8,13,22,.94);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}

.bank-workstation.is-loading .bank-workstation-loader { display:flex; }
.bank-workstation-loader::before { position:absolute;inset:0;content:"";opacity:.2;background:linear-gradient(115deg,transparent 25%,rgba(255,196,0,.16) 48%,transparent 70%);animation:bank-loader-glow 1.5s ease-in-out infinite; }
.bank-workstation-loader-brand { position:relative;display:flex;align-items:center;gap:16px;margin-top:-50px; }
.bank-workstation-loader-brand > img { width:68px;height:68px;padding:10px;border:1px solid rgba(255,196,0,.35);border-radius:16px;background:rgba(5,10,17,.72);box-shadow:0 12px 32px rgba(0,0,0,.36),0 0 25px rgba(255,196,0,.08); }
.bank-workstation-loader-brand > div { display:flex;flex-direction:column; }
.bank-workstation-loader-brand strong { font-size:25px;line-height:1.15;letter-spacing:-.5px; }
.bank-workstation-loader-brand strong span { color:#ffc400; }
.bank-workstation-loader-brand small { margin-top:4px;color:#8491a6;font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase; }
.bank-workstation-loader-status { position:absolute;right:34px;bottom:30px;left:34px; }
.bank-workstation-loader-status > span { display:block;margin-bottom:9px;color:#adb7c8;font-size:10px;font-weight:700; }
.bank-workstation-loader-status > div { height:5px;overflow:hidden;border-radius:999px;background:rgba(78,92,116,.38);box-shadow:inset 0 1px 2px rgba(0,0,0,.45); }
.bank-workstation-loader-status i { display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#eeb700,#ffd53c);box-shadow:0 0 12px rgba(255,196,0,.6);animation:bank-loader-progress 1.45s cubic-bezier(.2,.7,.2,1) forwards; }
.bank-workstation.is-loading > .bank-workstation-body { visibility:hidden; }
.bank-workstation.is-loading .bank-workstation-tabs { visibility:hidden; }
@keyframes bank-loader-progress { 0%{width:0} 35%{width:38%} 72%{width:76%} 100%{width:100%} }
@keyframes bank-loader-glow { 0%,100%{transform:translateX(-35%);opacity:.08} 50%{transform:translateX(35%);opacity:.24} }

.bank-workstation *,
.bank-workstation *::before,
.bank-workstation *::after {
    box-sizing: border-box;
}

.bank-workstation button,
.bank-workstation input,
.bank-workstation textarea,
.bank-workstation select,
.bank-workstation strong,
.bank-workstation b,
.bank-workstation time {
    font-family: "Poppins", "Segoe UI", sans-serif;
}

.bank-workstation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 62px;
    padding: 10px 13px 10px 17px;
    border-bottom: 1px solid rgba(105, 118, 157, .38);
    background: rgba(12, 18, 29, .72);
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.bank-workstation.is-dragging .bank-workstation-header {
    cursor: grabbing;
}

.bank-workstation-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.bank-workstation-title > img {
    display:block;
    width:126px;
    height:auto;
}

.bank-workstation-title strong {
    color:#dce0e8;
    font-family:"Poppins","Segoe UI",sans-serif;
    font-size:14px;
    font-weight:800;
}

.bank-workstation-header > button {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    padding: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    border: 0;
    border-radius: 7px;
    background: #df2935;
    box-shadow: inset 0 -2px 0 rgba(115, 4, 14, .35);
    cursor: pointer;
}

.bank-workstation-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px;
    background: linear-gradient(180deg,rgba(19,29,45,.54),rgba(10,17,27,.42));
    scrollbar-color: #687286 rgba(12, 18, 28, .58);
    scrollbar-width: thin;
}

.bank-workstation-hero {
    position:relative;
    flex:0 0 127px;
    min-height:127px;
    overflow:hidden;
    border-bottom:1px solid #202938;
    background:#202734 url('../img/banque_banner.png') center/cover no-repeat;
}

.bank-workstation-hero::before {
    position:absolute;
    inset:0;
    content:"";
    background:rgba(0,0,0,.48);
    pointer-events:none;
}

.bank-workstation-body::-webkit-scrollbar {
    width: 9px;
}

.bank-workstation-body::-webkit-scrollbar-track {
    border-radius: 8px;
    background: rgba(12, 18, 28, .58);
}

.bank-workstation-body::-webkit-scrollbar-thumb {
    border: 2px solid rgba(12, 18, 28, .58);
    border-radius: 8px;
    background: #687286;
}

.bank-workstation.is-account-detail {
    width: 660px;
    height: min(680px, calc(100vh - 64px));
}

.bank-workstation.is-account-detail .bank-workstation-header {
    flex: 0 0 auto;
}

.bank-workstation.is-account-detail .bank-workstation-body {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

.bank-workstation-tabs {
    position:absolute;
    z-index:1;
    right:0;
    bottom:0;
    left:0;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:5px;
    margin:0;
    padding:0 12px;
    border:0;
    border-radius:0;
    background:transparent;
}

.bank-workstation-tabs.can-configure {
    grid-template-columns:none;
}

.bank-workstation-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 6px;
    min-width: 0;
    min-width:94px;
    height:41px;
    padding:0 10px;
    color: #aeb8ca;
    font-size: 11px;
    font-weight: 800;
    border:1px solid #3b4658;
    border-bottom:0;
    border-radius:7px 7px 0 0;
    background:rgba(37,44,54,.94);
    box-shadow:0 -2px 8px rgba(0,0,0,.33);
    cursor: pointer;
    white-space: nowrap;
}

.bank-workstation-tabs button i {
    margin: 0;
    font-size: 16px;
    line-height: 1;
}

.bank-workstation-tabs button.is-active {
    color: #1c2330;
    background: linear-gradient(180deg, #ffd33f, #ffc400);
    box-shadow: 0 4px 12px rgba(255, 196, 0, .15);
}

.bank-workstation-feedback {
    margin: 0 0 10px;
    padding: 9px 11px;
    color: #9eebba;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid rgba(66, 194, 112, .38);
    border-radius: 8px;
    background: rgba(39, 130, 75, .22);
}

.bank-workstation-feedback.is-error {
    color: #ff9ca5;
    border-color: rgba(229, 61, 74, .4);
    background: rgba(151, 37, 48, .23);
}

.bank-workstation-panel {
    min-width: 0;
}

.bank-workstation:not(.is-account-detail) .bank-workstation-body {
    display: flex;
    flex-direction: column;
}

.bank-workstation:not(.is-account-detail) .bank-workstation-panel:not([hidden]) {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.bank-workstation-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 13px 15px;
    border: 1px solid rgba(202, 165, 23, .48);
    border-radius: 11px;
    background:
        linear-gradient(115deg, rgba(52, 62, 83, .46), rgba(22, 29, 42, .34));
}

.bank-workstation-welcome > span {
    display: flex;
    flex-direction: column;
}

.bank-workstation-welcome small {
    color: #9aa5b8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.bank-workstation-welcome strong {
    margin-top: 2px;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 19px;
}

.bank-workstation-welcome > i {
    color: #ffc400;
    font-size: 30px;
}

.bank-workstation-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.bank-workstation-stats article {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    min-width: 0;
    padding: 13px 11px;
    border: 1px solid rgba(72, 86, 124, .58);
    border-radius: 10px;
    background: rgba(25, 37, 56, .72);
}

.bank-workstation-stats article > i {
    grid-row: 1 / 3;
    color: #ffc400;
    font-size: 21px;
}

.bank-workstation-stats article > span {
    overflow: hidden;
    color: #929eb2;
    font-size: 9px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-workstation-stats article > strong {
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 16px;
    white-space: nowrap;
}

.bank-workstation-volume {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 9px;
    padding: 15px;
    border: 1px solid rgba(72, 86, 124, .58);
    border-radius: 10px;
    background: rgba(22, 30, 45, .34);
}

.bank-workstation-volume span {
    color: #aeb7c7;
    font-size: 11px;
    font-weight: 700;
}

.bank-workstation-volume strong {
    color: #ffc400;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 20px;
}

.bank-workstation-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    padding: 0 11px;
    border: 1px solid rgba(72, 89, 131, .68);
    border-radius: 9px;
    background: rgba(24, 34, 52, .58);
}

.bank-workstation-search i {
    color: #8d9ab0;
    font-size: 17px;
}

.bank-workstation-search input {
    flex: 1;
    height: 41px;
    min-width: 0;
    color: #fff;
    border: 0;
    outline: 0;
    background: transparent;
}

.bank-workstation-search input::placeholder {
    color: #7f8a9e;
}

.bank-workstation-account-list,
.bank-workstation-transactions,
.bank-workstation-business-list {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overflow: auto;
    padding-right: 3px;
}

.bank-workstation-settings {
    gap: 10px;
    overflow-y: auto;
    padding-right: 3px;
}

.bank-workstation-notifications {
    min-height: 0;
    gap: 10px;
}

.bank-workstation-notifications .bank-workstation-notification-history {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    margin-top: 0;
    padding-right: 3px;
    scrollbar-color: #687286 rgba(12, 18, 28, .58);
    scrollbar-width: thin;
}

.bank-workstation-settings-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border: 1px solid rgba(202, 165, 23, .48);
    border-radius: 11px;
    background: linear-gradient(115deg, rgba(52, 62, 83, .46), rgba(22, 29, 42, .34));
}

.bank-workstation-settings-intro > span {
    display: flex;
    flex-direction: column;
}

.bank-workstation-settings-intro strong {
    font-size: 16px;
}

.bank-workstation-settings-intro small {
    color: #9ca8bb;
    font-size: 12px;
}

.bank-workstation-settings-intro > i {
    color: #ffc400;
    font-size: 28px;
}

.bank-workstation-settings form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.bank-workstation-settings form > label:not(.bank-workstation-setting-switch) {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(72, 86, 124, .58);
    border-radius: 10px;
    background: rgba(22, 30, 45, .40);
}

.bank-workstation-settings form > label > span {
    color: #b5bfd0;
    font-size: 12px;
    font-weight: 700;
}

.bank-workstation-settings form > label > div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.bank-workstation-settings form input[type="number"] {
    width: 100%;
    height: 39px;
    min-width: 0;
    padding: 0 10px;
    color: #fff;
    font-size: 14px;
    border: 1px solid rgba(74, 91, 134, .72);
    border-radius: 8px;
    outline: none;
    background: rgba(25, 35, 53, .68);
}

.bank-workstation-settings form label b {
    color: #ffc400;
    font-size: 11px;
    white-space: nowrap;
}

.bank-workstation-setting-switch {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px;
    border: 1px solid rgba(72, 86, 124, .58);
    border-radius: 10px;
    background: rgba(22, 30, 45, .40);
    cursor: pointer;
}

.bank-workstation-setting-switch > span {
    display: flex;
    flex-direction: column;
}

.bank-workstation-setting-switch small {
    color: #8f9bad;
    font-size: 11px;
}

.bank-workstation-setting-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bank-workstation-setting-switch > i {
    position: relative;
    width: 47px;
    height: 25px;
    flex: 0 0 47px;
    border-radius: 25px;
    background: #414b60;
    transition: background .16s ease;
}

.bank-workstation-setting-switch > i::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    content: "";
    border-radius: 50%;
    background: #fff;
    transition: transform .16s ease;
}

.bank-workstation-setting-switch input:checked + i {
    background: #3da967;
}

.bank-workstation-setting-switch input:checked + i::after {
    transform: translateX(22px);
}

.bank-workstation-settings form > button {
    grid-column: 1 / -1;
    height: 42px;
    color: #1c2330;
    font-size: 13px;
    font-weight: 800;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(180deg, #ffd33f, #ffc400);
    cursor: pointer;
}

.bank-workstation-account {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
    padding: 10px;
    border: 1px solid rgba(71, 85, 122, .56);
    border-radius: 10px;
    background: rgba(21, 29, 43, .43);
}

.bank-workstation-account.is-suspended {
    border-color: rgba(197, 62, 73, .5);
    background: rgba(70, 27, 34, .30);
}

.bank-workstation-account.is-business {
    border-color: rgba(210, 170, 20, .55);
    background: rgba(66, 56, 22, .25);
}

.bank-workstation-account.is-business > img {
    padding: 8px;
    border-radius: 10px;
    background: rgba(7, 11, 18, .72);
}

.bank-workstation-account.is-business .bank-workstation-status {
    color: #ffd451;
    background: rgba(210, 165, 20, .18);
}

.bank-workstation-account.is-bank-banned {
    border-color: rgba(236, 137, 44, .62);
    background: rgba(92, 49, 20, .32);
}

.bank-workstation-account.is-bank-banned .bank-workstation-status {
    color: #ffb35f;
    background: rgba(213, 106, 31, .2);
}

.bank-workstation-account.is-closed {
    opacity: .78;
    border-color: rgba(224, 66, 78, .68);
    background: rgba(83, 25, 33, .38);
}

.bank-workstation-account > img {
    width: 43px;
    height: 43px;
    object-fit: contain;
    image-rendering: pixelated;
}

.bank-workstation-account-main {
    min-width: 0;
}

.bank-workstation-account-main > div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.bank-workstation-account-main > div > strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-workstation-status {
    padding: 2px 6px;
    color: #66df91;
    font-size: 8px;
    font-weight: 800;
    border-radius: 10px;
    background: rgba(53, 165, 94, .18);
    text-transform: uppercase;
}

.is-suspended .bank-workstation-status {
    color: #ff727e;
    background: rgba(199, 53, 66, .18);
}

.bank-workstation-account-number {
    display: block;
    margin-top: 2px;
    color: #8995a9;
    font-size: 9px;
}

.bank-workstation-account-main p {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 13px;
    margin: 7px 0 0;
    color: #96a1b4;
    font-size: 9px;
}

.bank-workstation-account-main p b {
    color: #dce2ec;
}

.bank-workstation-account-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bank-workstation-account-actions button {
    min-width: 126px;
    height: 29px;
    padding: 0 9px;
    color: #dfe4ed;
    font-size: 9px;
    font-weight: 800;
    border: 1px solid rgba(74, 91, 134, .68);
    border-radius: 7px;
    background: rgba(39, 51, 75, .68);
    cursor: pointer;
}

.bank-workstation-account-actions [data-bank-account-view] {
    color: #202631;
    border-color: #ffc400;
    background: #ffc400;
    box-shadow: inset 0 -2px 0 rgba(152, 107, 0, .28);
}

.bank-workstation-account-actions [data-bank-staff-action="toggle_account"] {
    color: #ff929b;
    border-color: rgba(205, 60, 73, .42);
    background: rgba(135, 35, 45, .26);
}

.bank-workstation-account-actions [data-bank-staff-action="toggle_account"].is-reactivate {
    color: #77e49c;
    border-color: rgba(64, 187, 107, .4);
    background: rgba(38, 124, 69, .25);
}

.bank-workstation-account-actions button:disabled {
    opacity: .45;
    cursor: wait;
}

.bank-workstation-transaction-head,
.bank-workstation-transaction {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr .65fr .9fr;
    align-items: center;
    gap: 9px;
}

.bank-workstation-transaction-head {
    padding: 7px 10px;
    color: #7f8ba0;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.bank-workstation-transaction {
    min-height: 45px;
    margin-bottom: 5px;
    padding: 7px 10px;
    border: 1px solid rgba(69, 82, 117, .48);
    border-radius: 8px;
    background: rgba(21, 29, 43, .40);
    font-size: 10px;
}

.bank-workstation-transaction-user {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.bank-workstation-transaction-user strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-workstation-transaction-user small,
.bank-workstation-transaction time {
    color: #8995a9;
    font-size: 8px;
}

.bank-workstation-transaction-label {
    color: #cbd2df;
}

.bank-workstation-transaction-amount.is-in {
    color: #51dc82;
}

.bank-workstation-transaction-amount.is-out {
    color: #ff5d6a;
}

.bank-workstation-account-detail {
    min-width: 0;
}

.bank-workstation-detail-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-bottom: 9px;
    padding: 4px;
    border: 1px solid rgba(76, 91, 132, .64);
    border-radius: 10px;
    background: rgba(15, 22, 35, .32);
}

.bank-workstation-detail-tabs button {
    height: 35px;
    color: #aeb8ca;
    font-size: 11px;
    font-weight: 800;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.bank-workstation-detail-tabs button.is-active {
    color: #1c2330;
    background: linear-gradient(180deg, #ffd33f, #ffc400);
}

.bank-workstation-detail-tabs button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.bank-workstation-lockers-panel{display:flex;flex-direction:column;gap:9px}.bank-workstation-lockers-list{display:grid;gap:10px}.bank-workstation-locker{overflow:hidden;border:1px solid #303b51;border-radius:10px;background:rgba(27,36,51,.88)}.bank-workstation-locker>header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #303b51;background:rgba(15,22,35,.55)}.bank-workstation-locker>header>span{display:flex;align-items:center;gap:7px}.bank-workstation-locker>header i{color:#ffc431}.bank-workstation-locker>header strong{font-size:12px}.bank-workstation-locker>header small{color:#8f9baf;font-size:9px}.bank-workstation-locker-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:9px}.bank-workstation-locker-items article{position:relative;display:grid;grid-template-columns:45px minmax(0,1fr);align-items:center;gap:8px;min-height:58px;padding:6px 28px 6px 7px;border:1px solid #34435c;border-radius:8px;background:#151e2b}.bank-workstation-locker-items article>span{display:grid;width:43px;height:43px;place-items:center;border-radius:6px;background:#0d1521}.bank-workstation-locker-items img{max-width:39px;max-height:39px;image-rendering:pixelated}.bank-workstation-locker-items article>div{display:flex;min-width:0;flex-direction:column}.bank-workstation-locker-items strong,.bank-workstation-locker-items small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bank-workstation-locker-items strong{font-size:9px}.bank-workstation-locker-items small{margin-top:2px;color:#7f8ca1;font-size:7px}.bank-workstation-locker-items b{position:absolute;right:7px;top:7px;color:#ffc431;font-size:10px}.bank-workstation-locker-empty{padding:24px;color:#7f8ca1;font-size:10px;text-align:center}@media(max-width:760px){.bank-workstation-locker-items{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bank-workstation-lockers-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid rgba(255,196,49,.42);border-radius:10px;background:rgba(255,196,49,.06)}.bank-workstation-lockers-toolbar>span{display:flex;flex-direction:column}.bank-workstation-lockers-toolbar strong{font-size:12px}.bank-workstation-lockers-toolbar small{color:#8f9baf;font-size:8px}.bank-workstation-lockers-toolbar button,.bank-workstation-locker>header button{display:flex;align-items:center;justify-content:center;gap:5px;border:0;border-radius:7px;cursor:pointer}.bank-workstation-lockers-toolbar button{min-height:34px;padding:0 11px;color:#171d25;background:#ffc431;font-size:9px;font-weight:800}.bank-workstation-locker>header aside{display:flex;align-items:center;gap:9px}.bank-workstation-locker>header button{height:27px;padding:0 8px;color:#ff94a4;background:#4a1924;font-size:8px;font-weight:800}.bank-workstation-locker>header button i{color:inherit}.bank-workstation-lockers-toolbar button:disabled,.bank-workstation-locker>header button:disabled{opacity:.55;cursor:wait}

.bank-workstation-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}

.bank-workstation-detail-header > button {
    height: 32px;
    padding: 0 11px;
    color: #e4e9f2;
    font-size: 10px;
    font-weight: 800;
    border: 1px solid rgba(79, 95, 139, .72);
    border-radius: 8px;
    background: rgba(35, 46, 68, .66);
    cursor: pointer;
}

.bank-workstation-detail-header > span {
    color: #929eb2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.bank-workstation-detail-identity {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    margin-bottom: 9px;
    padding: 12px 15px;
    border: 1px solid rgba(202, 165, 23, .48);
    border-radius: 11px;
    background:
        linear-gradient(115deg, rgba(52, 62, 83, .48), rgba(22, 29, 42, .34));
}

.bank-workstation-detail-identity > img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    image-rendering: pixelated;
}

.bank-workstation-detail-identity > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.bank-workstation-detail-identity > div > span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bank-workstation-detail-identity strong {
    overflow: hidden;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-workstation-detail-identity em {
    padding: 3px 7px;
    color: #66df91;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    border-radius: 10px;
    background: rgba(53, 165, 94, .18);
    text-transform: uppercase;
}

.bank-workstation-detail-identity em.is-suspended {
    color: #ff727e;
    background: rgba(199, 53, 66, .18);
}

.bank-workstation-detail-identity small {
    color: #9aa5b8;
    font-size: 9px;
}

.bank-workstation-detail-identity > i {
    color: rgba(255, 196, 0, .82);
    font-size: 38px;
}

.bank-workstation-detail-balances {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-bottom: 7px;
}

.bank-workstation-detail-balances.is-business {
    grid-template-columns: 1fr 1fr;
}

.bank-workstation-detail-balances article {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid rgba(72, 86, 124, .58);
    border-radius: 9px;
    background: rgba(22, 30, 45, .40);
}

.bank-workstation-detail-balances article > span {
    color: #919db1;
    font-size: 8px;
    font-weight: 700;
}

.bank-workstation-detail-balances article > strong {
    overflow: hidden;
    color: #f1f4f8;
    font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-workstation-detail-balances article:first-child > strong,
.bank-workstation-detail-balances article:nth-child(3) > strong {
    color: #ffc400;
}

.bank-workstation-detail-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.bank-workstation-detail-summary > span {
    padding: 7px 8px;
    color: #929eb2;
    font-size: 8px;
    border: 1px solid rgba(67, 80, 114, .43);
    border-radius: 7px;
    background: rgba(17, 24, 36, .34);
    white-space: nowrap;
}

.bank-workstation-detail-summary i {
    color: #ffc400;
}

.bank-workstation-detail-summary b {
    display: block;
    margin-top: 3px;
    color: #e6ebf3;
    font-size: 10px;
}

.bank-workstation-detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 9px;
}

.bank-workstation-detail-actions button {
    height: 34px;
    color: #dfe4ed;
    font-size: 9px;
    font-weight: 800;
    border: 1px solid rgba(74, 91, 134, .68);
    border-radius: 8px;
    background: rgba(39, 51, 75, .68);
    cursor: pointer;
}

.bank-workstation-detail-actions [data-bank-staff-action="toggle_account"] {
    color: #ff929b;
    border-color: rgba(205, 60, 73, .42);
    background: rgba(135, 35, 45, .26);
}

.bank-workstation-detail-actions [data-bank-staff-action="toggle_account"].is-reactivate {
    color: #77e49c;
    border-color: rgba(64, 187, 107, .4);
    background: rgba(38, 124, 69, .25);
}

.bank-workstation-detail-actions .is-close-account {
    grid-column: 1 / -1;
    color: #ff8f99;
    border-color: rgba(222, 55, 70, .55);
    background: rgba(129, 27, 39, .35);
}

.bank-workstation-detail-actions .is-bank-ban {
    color: #ffc06c;
    border-color: rgba(226, 137, 45, .5);
    background: rgba(132, 73, 24, .3);
}

.bank-workstation-detail-actions .is-bank-ban.is-lift {
    color: #77e49c;
    border-color: rgba(64, 187, 107, .4);
    background: rgba(38, 124, 69, .25);
}

.bank-workstation-detail-actions button:disabled {
    opacity: .45;
    cursor: wait;
}

.bank-workstation-detail-chart {
    margin-bottom: 10px;
    padding: 10px 11px 8px;
    border: 1px solid rgba(72, 86, 124, .58);
    border-radius: 10px;
    background: rgba(20, 28, 42, .48);
}

.bank-workstation-detail-chart > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.bank-workstation-detail-chart > header > span {
    display: flex;
    flex-direction: column;
}

.bank-workstation-detail-chart strong {
    font-size: 11px;
}

.bank-workstation-detail-chart small {
    color: #8995a9;
    font-size: 8px;
}

.bank-workstation-detail-chart > header > i {
    color: #ffc400;
    font-size: 20px;
}

.bank-workstation-detail-chart > div {
    position: relative;
    height: 230px;
}

.bank-workstation-detail-history-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 2px 3px 4px;
}

.bank-workstation-detail-history-title strong {
    font-size: 11px;
}

.bank-workstation-detail-history-title small {
    color: #8591a5;
    font-size: 8px;
}

.bank-workstation-detail-transaction-head,
.bank-workstation-detail-transaction {
    display: grid;
    grid-template-columns: 1fr 1.2fr .8fr .85fr;
    align-items: center;
    gap: 8px;
}

.bank-workstation-detail-transaction-head {
    padding: 5px 9px;
    color: #7f8ba0;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.bank-workstation-detail-transactions {
    max-height: 176px;
    overflow: auto;
    padding-right: 3px;
    scrollbar-color: #687286 rgba(12, 18, 28, .46);
    scrollbar-width: thin;
}

.bank-workstation-detail-transactions::-webkit-scrollbar {
    width: 8px;
}

.bank-workstation-detail-transactions::-webkit-scrollbar-track {
    border-radius: 7px;
    background: rgba(12, 18, 28, .46);
}

.bank-workstation-detail-transactions::-webkit-scrollbar-thumb {
    border: 2px solid rgba(12, 18, 28, .46);
    border-radius: 7px;
    background: #687286;
}

.bank-workstation-detail-transaction {
    min-height: 39px;
    margin-bottom: 4px;
    padding: 6px 9px;
    color: #cbd2df;
    font-size: 9px;
    border: 1px solid rgba(69, 82, 117, .48);
    border-radius: 8px;
    background: rgba(21, 29, 43, .40);
}

.bank-workstation-detail-transaction > span {
    min-width: 0;
    overflow: visible;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.bank-workstation-detail-transaction > strong,
.bank-workstation-detail-transaction > time {
    white-space: nowrap;
}

.bank-workstation-detail-transaction > span:nth-child(2),
.bank-workstation-detail-transaction time {
    color: #8995a9;
    font-size: 8px;
}

.bank-workstation-detail-transaction strong.is-in {
    color: #51dc82;
}

.bank-workstation-detail-transaction strong.is-out {
    color: #ff5d6a;
}

.bank-workstation-credit-panel {
    min-width: 0;
}

.bank-workstation-transfer-panel {
    min-width: 0;
}

.bank-workstation-transfer-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid rgba(202, 165, 23, .48);
    border-radius: 11px;
    background: linear-gradient(115deg, rgba(52, 62, 83, .48), rgba(22, 29, 42, .34));
}

.bank-workstation-transfer-intro > span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bank-workstation-transfer-intro strong {
    font-size: 18px;
}

.bank-workstation-transfer-intro small,
.bank-workstation-transfer-help {
    color: #9aa5b8;
}

.bank-workstation-transfer-intro > i {
    color: #ffc400;
    font-size: 31px;
}

.bank-workstation-transfer-panel form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 15px;
    border: 1px solid rgba(72, 86, 124, .58);
    border-radius: 11px;
    background: rgba(22, 30, 45, .4);
}

.bank-workstation-transfer-panel form label > span {
    display: block;
    margin: 0 0 7px 2px;
    color: #b4bdcd;
    font-weight: 700;
}

.bank-workstation-transfer-panel form label > div {
    position: relative;
}

.bank-workstation-transfer-panel form input {
    width: 100%;
    height: 43px;
    padding: 0 11px;
    color: #fff;
    border: 1px solid rgba(74, 91, 134, .68);
    border-radius: 8px;
    outline: 0;
    background: rgba(25, 35, 53, .62);
}

.bank-workstation-transfer-panel form label > div input {
    padding-right: 64px;
}

.bank-workstation-transfer-panel form label > div b {
    position: absolute;
    top: 50%;
    right: 10px;
    color: #8995a9;
    transform: translateY(-50%);
    pointer-events: none;
}

.bank-workstation-transfer-panel form > button {
    grid-column: 1 / -1;
    height: 42px;
    color: #1c2330;
    font-weight: 800;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffd33f, #ffc400);
    cursor: pointer;
}

.bank-workstation-transfer-panel form > button:disabled {
    opacity: .45;
    cursor: wait;
}

.bank-workstation-transfer-help {
    margin: 12px 3px 0;
    line-height: 1.5;
}

.bank-workstation-credit-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid rgba(202, 165, 23, .48);
    border-radius: 11px;
    background: linear-gradient(115deg, rgba(52, 62, 83, .48), rgba(22, 29, 42, .34));
}

.bank-workstation-credit-intro > span {
    display: flex;
    flex-direction: column;
}

.bank-workstation-credit-intro strong {
    font-size: 16px;
}

.bank-workstation-credit-intro small {
    margin-top: 2px;
    color: #9aa5b8;
    font-size: 10px;
}

.bank-workstation-credit-intro > i {
    color: #ffc400;
    font-size: 31px;
}

.bank-workstation-credit-panel form {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.bank-workstation-credit-panel form label > span {
    display: block;
    margin: 0 0 5px 2px;
    color: #9aa5b8;
    font-size: 9px;
    font-weight: 700;
}

.bank-workstation-credit-panel form label > div {
    position: relative;
}

.bank-workstation-credit-panel form input {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    color: #fff;
    border: 1px solid rgba(74, 91, 134, .68);
    border-radius: 8px;
    outline: 0;
    background: rgba(25, 35, 53, .62);
}

.bank-workstation-credit-panel form label > div input {
    padding-right: 66px;
}

.bank-workstation-credit-panel form label > div b {
    position: absolute;
    top: 50%;
    right: 9px;
    color: #8995a9;
    font-size: 9px;
    transform: translateY(-50%);
    pointer-events: none;
}

.bank-workstation-credit-panel form > button {
    grid-column: 1 / -1;
    height: 38px;
    color: #1c2330;
    font-size: 11px;
    font-weight: 800;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffd33f, #ffc400);
    cursor: pointer;
}

.bank-workstation-credit-panel form > button:disabled {
    opacity: .45;
    cursor: wait;
}

.bank-workstation-credit-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 9px 0 13px;
}

.bank-workstation-credit-preview > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    color: #9aa5b8;
    font-size: 9px;
    border: 1px solid rgba(72, 86, 124, .58);
    border-radius: 8px;
    background: rgba(22, 30, 45, .4);
}

.bank-workstation-credit-preview strong {
    color: #ffc400;
    font-size: 11px;
}

.bank-workstation-credit-history-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 6px;
}

.bank-workstation-credit-history-title strong {
    font-size: 12px;
}

.bank-workstation-credit-history-title small {
    color: #8995a9;
    font-size: 9px;
}

.bank-workstation-credit-list {
    display: grid;
    gap: 6px;
}

.bank-workstation-credit-item {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr auto;
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid rgba(69, 82, 117, .48);
    border-radius: 8px;
    background: rgba(21, 29, 43, .4);
}

.bank-workstation-credit-item > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.bank-workstation-credit-item small {
    overflow: hidden;
    color: #8995a9;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-workstation-credit-item strong {
    font-size: 10px;
}

.bank-workstation-credit-item em {
    padding: 4px 7px;
    color: #ffc400;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    border-radius: 10px;
    background: rgba(201, 159, 20, .17);
    text-transform: uppercase;
}

.bank-workstation-credit-state {
    align-items: flex-end;
    gap: 5px;
}

.bank-workstation-credit-state button {
    height: 30px;
    padding: 0 10px;
    color: #ff9aa4;
    font-weight: 800;
    border: 1px solid rgba(224, 70, 82, .55);
    border-radius: 7px;
    background: rgba(135, 35, 45, .32);
    cursor: pointer;
}

.bank-workstation-credit-state button:disabled {
    opacity: .45;
    cursor: wait;
}

.bank-workstation-credit-item.is-active em {
    color: #65dc91;
    background: rgba(53, 165, 94, .18);
}

.bank-workstation-credit-item.is-refused em,
.bank-workstation-credit-item.is-expired em,
.bank-workstation-credit-item.is-cancelled em {
    color: #ff818c;
    background: rgba(199, 53, 66, .18);
}

.bank-workstation-empty {
    margin: 35px 0;
    color: #8995a9;
    font-size: 11px;
    text-align: center;
}

.bank-workstation-confirm {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(6, 9, 15, .48);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.bank-workstation-confirm > div {
    width: 330px;
    max-width: 100%;
    padding: 21px;
    text-align: center;
    border: 1px solid rgba(80, 96, 139, .75);
    border-radius: 12px;
    background: rgba(24, 32, 47, .88);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .4);
}

.bank-workstation-confirm > div > i {
    color: #ffc400;
    font-size: 30px;
}

.bank-workstation-confirm strong {
    display: block;
    margin-top: 7px;
}

.bank-workstation-confirm p {
    margin: 8px 0 17px;
    color: #aab4c5;
    font-size: 11px;
    line-height: 1.45;
}

.bank-workstation-pin-choice {
    display: block;
    margin: -5px 0 17px;
    text-align: left;
}

.bank-workstation-pin-choice > span {
    display: block;
    margin-bottom: 6px;
    color: #dce2ec;
    font-size: 14px;
    font-weight: 700;
}

.bank-workstation-pin-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.bank-workstation-pin-boxes input {
    width: 100%;
    height: 52px;
    min-width: 0;
    padding: 0;
    color: #fff;
    font-size: 23px !important;
    font-weight: 800;
    letter-spacing: 0;
    text-align: center;
    border: 1px solid rgba(83, 103, 153, .85);
    border-radius: 9px;
    outline: 0;
    background: rgba(18, 27, 44, .85);
}

.bank-workstation-pin-boxes input:focus {
    border-color: #ffc400;
    box-shadow: 0 0 0 3px rgba(255, 196, 0, .13);
}

.bank-workstation-pin-choice small {
    display: none;
    margin-top: 6px;
    color: #ff8e98;
    font-size: 14px;
}

.bank-workstation-pin-choice small.is-visible {
    display: block;
}

.bank-workstation-confirm footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.bank-workstation-confirm button {
    height: 35px;
    color: #dbe1eb;
    font-size: 10px;
    font-weight: 800;
    border: 1px solid rgba(75, 91, 133, .68);
    border-radius: 8px;
    background: rgba(39, 51, 75, .72);
    cursor: pointer;
}

.bank-workstation-confirm [data-bank-workstation-confirm-yes] {
    color: #1b222d;
    border-color: #ffc400;
    background: #ffc400;
}

/* Lisibilité homogène sur toutes les vues du poste bancaire. */
.bank-workstation :where(
    button,
    input,
    textarea,
    select,
    strong,
    b,
    small,
    span,
    p,
    em,
    time,
    label
) {
    font-size: 14px !important;
}

.bank-workstation-title strong {
    font-size: 22px !important;
}

.bank-workstation-header > button {
    font-size: 20px !important;
}

.bank-workstation-title small {
    font-size: 14px;
}

.bank-workstation-tabs button {
    font-size: 14px;
}

.bank-workstation-feedback,
.bank-workstation-search input {
    font-size: 14px;
}

.bank-workstation-welcome small,
.bank-workstation-stats article > span,
.bank-workstation-account-number,
.bank-workstation-account-main p {
    font-size: 14px;
}

.bank-workstation-welcome strong {
    font-size: 20px !important;
}

.bank-workstation-stats article > strong {
    font-size: 17px !important;
}

.bank-workstation-volume span {
    font-size: 14px;
}

.bank-workstation-volume strong {
    font-size: 21px !important;
}

.bank-workstation-account-main > div > strong {
    font-size: 14px;
}

.bank-workstation-status,
.bank-workstation-transaction-head,
.bank-workstation-detail-transaction-head {
    font-size: 14px;
}

.bank-workstation-account-actions button,
.bank-workstation-detail-actions button,
.bank-workstation-detail-header > button {
    font-size: 14px;
}

.bank-workstation-transaction {
    min-height: 52px;
    font-size: 14px;
}

.bank-workstation-transaction-user small,
.bank-workstation-transaction time {
    font-size: 14px;
}

.bank-workstation-detail-header > span,
.bank-workstation-detail-identity small {
    font-size: 14px;
}

.bank-workstation-detail-identity strong {
    font-size: 22px !important;
}

.bank-workstation-detail-identity em,
.bank-workstation-detail-balances article > span {
    font-size: 14px;
}

.bank-workstation-detail-balances article > strong {
    font-size: 15px !important;
}

.bank-workstation-detail-summary > span {
    font-size: 14px;
}

.bank-workstation-detail-summary b,
.bank-workstation-detail-chart strong,
.bank-workstation-detail-history-title strong {
    font-size: 14px;
}

.bank-workstation-detail-chart small,
.bank-workstation-detail-history-title small,
.bank-workstation-detail-transaction > span:nth-child(2),
.bank-workstation-detail-transaction time {
    font-size: 14px;
}

.bank-workstation-detail-transaction {
    min-height: 48px;
    font-size: 14px;
}

.bank-workstation-empty {
    font-size: 14px;
}

.bank-workstation :where(
    button,
    input,
    textarea,
    select,
    strong,
    b,
    small,
    span,
    p,
    em,
    time
) {
    font-family: "Poppins", "Segoe UI", sans-serif;
}

@media (max-width: 760px) {
    .bank-workstation,
    .bank-workstation.is-account-detail {
        top: max(91px, calc(42px + env(safe-area-inset-top))) !important;
        right: 6px !important;
        bottom: max(224px, calc(88px + env(safe-area-inset-bottom))) !important;
        left: 6px !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        border-radius: 12px;
        transform: none !important;
    }
    .bank-workstation-header {
        min-height: 56px;
        padding: 8px 10px;
    }
    .bank-workstation-title {
        min-width: 0;
        gap: 8px;
    }
    .bank-workstation-title > img {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }
    .bank-workstation-title > span {
        min-width: 0;
    }
    .bank-workstation-title strong {
        overflow: hidden;
        font-size: 19px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bank-workstation-title small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bank-workstation-body,
    .bank-workstation.is-account-detail .bank-workstation-body {
        padding: 8px;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-gutter: auto;
        overscroll-behavior: contain;
    }
    .bank-workstation-tabs,
    .bank-workstation-tabs.can-configure {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .bank-workstation-tabs.can-configure > button {
        grid-column: auto;
    }
    .bank-workstation-tabs:not(.can-configure) > button:nth-child(5) {
        grid-column: 1 / -1;
    }
    .bank-workstation-tabs button {
        height: 46px;
        white-space: nowrap;
    }
    .bank-workstation-settings form {
        grid-template-columns: 1fr;
    }
    .bank-workstation-setting-switch,
    .bank-workstation-settings form > button {
        grid-column: 1;
    }
    .bank-workstation-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .bank-workstation-stats article {
        grid-template-columns: 25px minmax(0, 1fr);
        padding: 10px 8px;
    }
    .bank-workstation-volume {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
    .bank-workstation-account {
        grid-template-columns: 43px minmax(0, 1fr);
    }
    .bank-workstation-account-actions {
        grid-column: 1 / -1;
        flex-direction: row;
    }
    .bank-workstation-account-actions button {
        flex: 1;
    }
    .bank-workstation-detail-balances,
    .bank-workstation-detail-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    .bank-workstation-detail-header {
        align-items: flex-start;
        gap: 8px;
    }
    .bank-workstation-detail-header > span {
        max-width: 45%;
        text-align: right;
    }
    .bank-workstation-detail-tabs button {
        min-width: 0;
        padding-inline: 3px;
    }
    .bank-workstation-detail-identity {
        grid-template-columns: 52px minmax(0, 1fr) 32px;
        gap: 8px;
        padding: 10px;
    }
    .bank-workstation-detail-identity > img {
        width: 50px;
        height: 50px;
    }
    .bank-workstation-detail-identity > div > span {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
    .bank-workstation-detail-identity strong {
        max-width: 100%;
        font-size: 19px !important;
    }
    .bank-workstation-detail-identity > i {
        font-size: 31px;
    }
    .bank-workstation-detail-actions {
        grid-template-columns: 1fr;
    }
    .bank-workstation-detail-actions .is-close-account {
        grid-column: 1;
    }
    .bank-workstation-detail-actions button {
        height: auto;
        min-height: 42px;
        padding: 8px;
    }
    .bank-workstation-detail-chart {
        padding: 8px 6px 6px;
    }
    .bank-workstation-detail-chart > header {
        padding-inline: 3px;
    }
    .bank-workstation-detail-chart > div {
        height: 270px;
    }
    .bank-workstation-detail-history-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
    .bank-workstation-detail-transaction-head {
        display: none;
    }
    .bank-workstation-detail-transactions {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
    .bank-workstation-detail-transaction {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 3px 10px;
        padding: 9px;
    }
    .bank-workstation-detail-transaction > [data-detail-operation],
    .bank-workstation-detail-transaction > [data-detail-correspondent] {
        grid-column: 1;
    }
    .bank-workstation-detail-transaction > strong {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }
    .bank-workstation-detail-transaction > time {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }
    .bank-workstation-credit-panel form {
        grid-template-columns: 1fr;
    }
    .bank-workstation-transfer-panel form {
        grid-template-columns: 1fr;
    }
    .bank-workstation-credit-preview {
        grid-template-columns: 1fr;
    }
    .bank-workstation-credit-item {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 10px;
    }
    .bank-workstation-credit-state {
        align-items: flex-start;
    }
    .bank-workstation-transaction-head {
        display: none;
    }
    .bank-workstation-transaction {
        grid-template-columns: 1fr auto;
    }
    .bank-workstation-transaction-label,
    .bank-workstation-transaction time {
        text-align: right;
    }
    .bank-workstation-confirm {
        position: fixed;
        padding: 10px;
    }
    .bank-workstation-confirm > div {
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
    }
}

@media (max-width: 390px) {
    .bank-workstation-tabs.can-configure {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .bank-workstation-tabs.can-configure > button {
        grid-column: auto;
    }
    .bank-workstation-detail-tabs button i {
        display: none;
    }
    .bank-workstation-detail-balances,
    .bank-workstation-detail-summary {
        grid-template-columns: 1fr;
    }
    .bank-workstation-detail-identity {
        grid-template-columns: 46px minmax(0, 1fr);
    }
    .bank-workstation-detail-identity > img {
        width: 44px;
        height: 44px;
    }
    .bank-workstation-detail-identity > i {
        display: none;
    }
    .bank-workstation-detail-chart > div {
        height: 300px;
    }
}
/* Interface de plantation */
body.hide-system-ath #weed-plant-panel,
body.hide-system-ath #water-reservoir-indicators,
body.hide-system-ath #energy-battery-indicators,
body.hide-system-ath #credit-miner-indicators {
    display: none !important;
}

/* Aucun panneau métier ni ATH ne doit recouvrir l'écran de déconnexion. */
body.hotel-disconnected #weed-plant-panel,
body.hotel-disconnected #water-reservoir-panel,
body.hotel-disconnected #water-reservoir-indicators,
body.hotel-disconnected #plant-computer-panel,
body.hotel-disconnected #credit-miner-panel,
body.hotel-disconnected #credit-miner-indicators,
body.hotel-disconnected #energy-battery-panel,
body.hotel-disconnected #energy-battery-indicators {
    display: none !important;
}

body.nitro-menu-open #weed-plant-panel,
body.nitro-menu-open #water-reservoir-panel,
body.nitro-menu-open #water-reservoir-indicators,
body.nitro-menu-open #plant-computer-panel,
body.nitro-menu-open #credit-miner-panel,
body.nitro-menu-open #credit-miner-indicators,
body.nitro-menu-open #energy-battery-panel,
body.nitro-menu-open #energy-battery-indicators,
body.nitro-menu-open #miner-computer-panel {
    display: none !important;
}

#weed-plant-panel {
    position: fixed;
    z-index: 45;
    width: 210px;
    padding: 12px 14px;
    color: #f5f7fb;
    font: 100 14px / 1.15 "Poppins", "Segoe UI", sans-serif;
    border: 2px solid rgba(74, 86, 125, .78);
    border-radius: 12px;
    background: rgba(17, 23, 34, .38);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .045);
    -webkit-backdrop-filter: blur(5px) saturate(140%);
    backdrop-filter: blur(5px) saturate(140%);
    pointer-events: none;
}

#weed-plant-panel[hidden] {
    display: none;
}

#weed-plant-panel .weed-client-title {
    color: #76db8a;
    font-size: 16px;
    font-weight: 600;
}

#weed-plant-panel .weed-client-stage {
    margin: 2px 0 9px;
    color: #dfe4ee;
    font-weight: 400;
}

#weed-plant-panel .weed-client-row {
    display: grid;
    grid-template-columns: 86px 1fr;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    font-weight: 500;
}

#weed-plant-panel .weed-client-meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

#weed-plant-panel .weed-client-segment {
    height: 9px;
    border: 1px solid rgba(225, 235, 228, .25);
    border-radius: 1px;
    background: rgba(229, 236, 231, .13);
}

#weed-plant-panel .weed-client-segment.filled {
    border-color: currentColor;
    background: currentColor;
    box-shadow: 0 0 5px currentColor;
}

#weed-client-water-meter {
    color: #39bde8;
}

#weed-client-light-meter {
    color: #f4c900;
}

#weed-client-progress-meter {
    color: #f4f4f4;
}

#weed-plant-panel .weed-client-timer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 8px;
    color: #cbd3e2;
    font-weight: 400;
    border-top: 1px solid rgba(74, 86, 125, .58);
}

#weed-client-timer {
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

#weed-plant-panel .weed-client-destroy {
    width: 100%;
    margin-top: 10px;
    padding: 9px 12px;
    color: #fff;
    background: #df2935;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 7px;
    cursor: pointer;
    pointer-events: auto;
    font: 600 13px Poppins, "Segoe UI", sans-serif;
}

#weed-plant-panel .weed-client-destroy:hover {
    background: #ef3340;
}

#weed-plant-panel .weed-client-destroy:disabled {
    opacity: .55;
    cursor: wait;
}

/* Réservoir automatique des plantations */
#water-reservoir-indicators {
    position: fixed;
    inset: 0;
    z-index: 44;
    pointer-events: none;
}

.water-reservoir-indicator {
    position: fixed;
    width: 42px;
    height: 8px;
    padding: 2px;
    border: 1px solid rgba(104, 205, 239, .75);
    border-radius: 5px;
    background: rgba(11, 20, 31, .9);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .55);
}

.water-reservoir-indicator > span {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(75, 101, 119, .45);
}

.water-reservoir-indicator > span > b {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #39bde8;
    box-shadow: 0 0 5px rgba(57, 189, 232, .85);
    transition: width .25s ease;
}

.water-reservoir-indicator > i {
    display: none;
}

.water-reservoir-indicator.is-empty {
    width: 24px;
    height: 24px;
    padding: 0;
    color: #ef3d48;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    border-color: rgba(239, 61, 72, .8);
    border-radius: 50%;
}

.water-reservoir-indicator.is-empty > span {
    display: none;
}

.water-reservoir-indicator.is-empty > i {
    display: block;
}

#water-reservoir-panel {
    position: fixed;
    z-index: 46;
    width: 280px;
    padding: 14px;
    color: #f5f7fb;
    font: 500 13px/1.3 "Poppins", "Segoe UI", sans-serif;
    border: 2px solid rgba(74, 86, 125, .78);
    border-radius: 12px;
    background: rgba(17, 23, 34, .58);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .045);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
    backdrop-filter: blur(7px) saturate(140%);
}

#water-reservoir-panel[hidden] {
    display: none;
}

.water-reservoir-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #47c9f3;
    font-size: 16px;
    font-weight: 650;
}

#water-reservoir-panel > p {
    margin: 5px 0 12px;
    color: #cbd3e2;
    font-size: 12px;
    font-weight: 400;
}

.water-reservoir-level,
.water-reservoir-stock {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.water-reservoir-level strong,
.water-reservoir-stock strong {
    color: #fff;
}

.water-reservoir-track {
    height: 12px;
    margin-top: 6px;
    overflow: hidden;
    border: 1px solid rgba(225, 235, 245, .25);
    border-radius: 3px;
    background: rgba(229, 236, 245, .12);
}

.water-reservoir-track i {
    display: block;
    width: 0;
    height: 100%;
    background: #39bde8;
    box-shadow: 0 0 8px #39bde8;
    transition: width .25s ease;
}

#water-reservoir-form {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 7px;
    margin-top: 12px;
}

#water-reservoir-form input,
#water-reservoir-form button,
#water-reservoir-all {
    min-height: 36px;
    border: 1px solid rgba(89, 106, 151, .8);
    border-radius: 7px;
    font: 600 12px "Poppins", "Segoe UI", sans-serif;
}

#water-reservoir-form input {
    min-width: 0;
    padding: 0 9px;
    color: #fff;
    background: rgba(9, 15, 25, .72);
}

#water-reservoir-form button,
#water-reservoir-all {
    color: #fff;
    cursor: pointer;
    background: #1fa8d2;
}

#water-reservoir-all {
    width: 100%;
    margin-top: 7px;
    background: rgba(65, 78, 112, .7);
}

#water-reservoir-form button:hover {
    background: #28bce8;
}

#water-reservoir-all:hover {
    background: rgba(81, 97, 139, .85);
}

#water-reservoir-form button:disabled,
#water-reservoir-all:disabled {
    opacity: .45;
    cursor: not-allowed;
}

#water-reservoir-message {
    display: block;
    min-height: 16px;
    margin-top: 7px;
    color: #9fe3f8;
    font-weight: 400;
}

#plant-computer-panel {
    position: fixed;
    top: 72px;
    left: 50%;
    z-index: 90;
    transform: translateX(-50%);
}

#plant-computer-panel[hidden] { display: none; }

.plant-computer-window {
    width: min(540px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 90px));
    overflow: hidden;
    color: #f6f7fb;
    font: 500 14px/1.3 "Poppins", "Segoe UI", sans-serif;
    border: 1px solid #35466d;
    border-radius: 9px;
    background: rgba(13, 20, 34, .94);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .68);
}

.plant-computer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(120, 143, 190, .24);
    background: rgba(31, 42, 65, .92);
    cursor: move;
    user-select: none;
}

.plant-computer-header span { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.plant-computer-header i { color: #f4c900; font-size: 17px; }
.plant-computer-header button {
    width: 25px; height: 25px; color: #fff; font-size: 18px; border: 0;
    border-radius: 6px; background: #d9252a; cursor: pointer;
}

.plant-computer-summary {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 7px;
    padding: 9px 10px;
}

.plant-computer-summary > span {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 9px; border: 1px solid #33425f; border-radius: 7px;
    background: rgba(23, 32, 51, .82);
}
.plant-computer-summary small { color: #aeb8cc; }
.plant-computer-summary strong { color: #76db8a; font-size: 15px; }
.plant-computer-summary button, .plant-computer-harvest {
    padding: 0 11px; color: #fff; font: 600 11px "Poppins", sans-serif;
    border: 0; border-radius: 8px; background: #3eab51; cursor: pointer;
}

.plant-computer-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    max-height: 390px;
    padding: 1px 10px 10px;
    overflow: auto;
}

.plant-computer-card {
    padding: 9px; border: 1px solid #33425f; border-radius: 7px;
    background: rgba(19, 28, 45, .86);
}
.plant-computer-card.is-mature { border-color: rgba(91, 211, 113, .62); }
.plant-computer-card-head { display: flex; justify-content: space-between; gap: 10px; }
.plant-computer-card-head span { display: flex; flex-direction: column; }
.plant-computer-card-head small { margin-top: 2px; color: #929eb4; font-weight: 400; }
.plant-computer-card-head em { color: #f4c900; font-size: 10px; font-style: normal; }
.plant-computer-card.is-mature .plant-computer-card-head em { color: #76db8a; }
.plant-computer-card.is-dead .plant-computer-card-head em { color: #ef6469; }

.plant-computer-metrics {
    display: grid; gap: 4px; margin-top: 7px;
}
.plant-computer-metrics > span { display: grid; grid-template-columns: 65px 1fr; align-items: center; gap: 8px; }
.plant-computer-metrics small { color: #aeb8cc; }
.plant-computer-metrics b { font-weight: 600; }
.plant-computer-metrics .is-ok { color: #76db8a; }
.plant-computer-metrics .is-off { color: #ef6469; }
.plant-computer-meter {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
}
.plant-computer-meter i {
    height: 8px;
    border: 1px solid rgba(220, 230, 239, .22);
    border-radius: 1px;
    background: rgba(220, 230, 239, .1);
}
.plant-computer-meter.is-water i.is-filled {
    border-color: #39bde8;
    background: #39bde8;
    box-shadow: 0 0 5px rgba(57, 189, 232, .7);
}
.plant-computer-meter.is-light i.is-filled {
    border-color: #f4c900;
    background: #f4c900;
    box-shadow: 0 0 5px rgba(244, 201, 0, .7);
}
.plant-computer-meter.is-progress i.is-filled {
    border-color: #f4f4f4;
    background: #f4f4f4;
    box-shadow: 0 0 5px rgba(255, 255, 255, .55);
}
.plant-computer-metrics > .plant-computer-time {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    padding-top: 5px;
    border-top: 1px solid rgba(255,255,255,.09);
}
.plant-computer-progress {
    height: 5px; margin: 7px 0; overflow: hidden; border-radius: 5px;
    background: rgba(255,255,255,.12);
}
.plant-computer-progress i { display: block; height: 100%; background: #f4c900; }
.plant-computer-harvest { width: 100%; min-height: 29px; margin-top: 7px; }
.plant-computer-harvest:disabled { color: #8f99ab; background: #29344a; cursor: default; }
.plant-computer-empty, .plant-computer-message { display: block; margin: 4px 10px 10px; color: #aeb8cc; text-align: center; }

@media (max-width: 650px) {
    .plant-computer-summary, .plant-computer-list { grid-template-columns: 1fr; }
    .plant-computer-summary button { min-height: 40px; }
}

/* Maquette du mineur de crédits */
#energy-battery-panel{position:fixed;z-index:46;left:50%;top:50%;transform:translate(-50%,-50%);font-family:"Poppins","Segoe UI",sans-serif;color:#f5f7fb}.energy-battery-window{width:370px;border:1px solid #3d4d70;border-radius:10px;background:rgba(13,21,36,.97);box-shadow:0 12px 34px #0009;overflow:hidden}.energy-battery-window>header{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#202c45;cursor:move}.energy-battery-window>header>span{display:grid;place-items:center;width:31px;height:31px;border-radius:7px;background:#ffc800;color:#172036;font-size:19px}.energy-battery-window>header div{display:flex;flex:1;flex-direction:column}.energy-battery-window>header strong{font-size:13px}.energy-battery-window>header small{color:#a8b2c5;font-size:9px}.energy-battery-window>header button{width:27px;height:27px;border:0;border-radius:6px;background:#df2632;color:white;font-size:19px}.energy-battery-body{padding:12px}.energy-battery-gauge{position:relative;height:64px;border:1px solid #394762;border-radius:8px;background:#111a2b;overflow:hidden}.energy-battery-gauge>i{position:absolute;left:0;bottom:0;height:5px;background:#ffc800;box-shadow:0 0 9px #ffc800}.energy-battery-gauge>div{position:relative;z-index:1;display:flex;height:100%;align-items:center;justify-content:center;flex-direction:column}.energy-battery-gauge span{font-size:23px;font-weight:700}.energy-battery-gauge small{color:#9ea9bc;font-size:9px}.energy-battery-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.energy-battery-stats article{display:flex;flex-direction:column;padding:8px;border:1px solid #33415c;border-radius:7px;background:#172236}.energy-battery-stats small{font-size:9px;color:#99a6ba}.energy-battery-stats strong{font-size:11px}.energy-battery-invoice{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid #354159}.energy-battery-invoice span{display:flex;flex-direction:column}.energy-battery-invoice strong{font-size:11px}.energy-battery-invoice small{font-size:8px;color:#9ba7bb}.energy-battery-invoice em{font-size:9px;color:#ffc800;font-style:normal}.energy-battery-actions{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:6px;margin-top:8px}.energy-battery-actions button{padding:8px 4px;border:0;border-radius:6px;background:#35ad55;color:white;font:600 9px Poppins}.energy-battery-actions button:disabled{opacity:.55}#energy-battery-panel[hidden]{display:none}
#credit-miner-panel {
    position: fixed;
    z-index: 48;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font: 500 13px/1.25 "Poppins", "Segoe UI", sans-serif;
}
#credit-miner-panel[hidden] { display: none; }
.credit-miner-window {
    width: 390px;
    overflow: hidden;
    color: #f4f7fb;
    border: 1px solid #384a70;
    border-radius: 11px;
    background: rgba(10, 17, 29, .96);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .62), inset 0 1px rgba(255,255,255,.04);
}
.credit-miner-header {
    display: grid;
    grid-template-columns: 38px 1fr auto 30px;
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 8px 10px 8px 13px;
    cursor: move;
    border-bottom: 1px solid #30415f;
    background: #1d2941;
}
.credit-miner-header-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #ffd31a;
    font-size: 21px;
    border: 1px solid rgba(255,211,26,.35);
    border-radius: 8px;
    background: rgba(255,211,26,.09);
}
.credit-miner-header div { display: flex; flex-direction: column; }
.credit-miner-header strong { font-size: 15px; font-weight: 650; }
.credit-miner-header small { margin-top: 2px; color: #98a7c1; font-size: 10px; font-weight: 400; }
.credit-miner-demo {
    padding: 3px 6px;
    color: #ffd31a;
    font-size: 9px;
    border: 1px solid rgba(255,211,26,.3);
    border-radius: 5px;
    background: rgba(255,211,26,.08);
}
#credit-miner-close {
    width: 29px;
    height: 29px;
    padding: 0;
    color: #fff;
    font-size: 20px;
    line-height: 26px;
    cursor: pointer;
    border: 0;
    border-radius: 7px;
    background: #df2832;
}
.credit-miner-body { padding: 14px; }
.credit-miner-status {
    display: grid;
    grid-template-columns: 50px 1fr 39px;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border: 1px solid rgba(87,108,148,.48);
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(28,40,64,.9), rgba(14,23,39,.9));
}
.credit-miner-orbit {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #ffd31a;
    font-size: 25px;
    border: 1px solid rgba(255,211,26,.35);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,211,26,.17), transparent 67%);
}
.credit-miner-status > div { display: flex; flex-direction: column; }
.credit-miner-status small { color: #98a7c1; font-size: 10px; }
.credit-miner-status strong { margin: 2px 0; font-size: 16px; }
.credit-miner-status em { color: #76db8a; font-size: 10px; font-style: normal; }
.credit-miner-status em i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #76db8a; }
#credit-miner-power {
    width: 38px;
    height: 38px;
    color: #0d1728;
    cursor: pointer;
    border: 0;
    border-radius: 9px;
    background: #ffd31a;
}
.credit-miner-balance { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.credit-miner-balance > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 10px;
    border: 1px solid rgba(73,92,128,.5);
    border-radius: 7px;
    background: rgba(25,36,57,.72);
}
.credit-miner-balance small { color: #a7b2c6; font-size: 10px; }
.credit-miner-balance strong { color: #fff; font-size: 13px; }
.credit-miner-balance strong i { color: #ffd31a; }
.credit-miner-progress { height: 5px; margin: 10px 0; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.1); }
.credit-miner-progress i { display: block; width: 0; height: 100%; background: #ffd31a; transition: width .35s ease; }
.credit-miner-window.is-active .credit-miner-progress i { width: 38%; box-shadow: 0 0 8px #ffd31a; }
.credit-miner-window.is-active .credit-miner-orbit { animation: minerPulse 1.2s infinite alternate; }
@keyframes minerPulse { to { box-shadow: 0 0 14px rgba(255,211,26,.5); } }
.credit-miner-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.credit-miner-metrics article {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px;
    border: 1px solid rgba(66,84,117,.45);
    border-radius: 7px;
    background: rgba(22,32,51,.68);
}
.credit-miner-metrics article > i { color: #ffd31a; font-size: 18px; }
.credit-miner-metrics article span { display: flex; flex-direction: column; }
.credit-miner-metrics small { color: #919fb7; font-size: 9px; }
.credit-miner-metrics strong { margin-top: 1px; font-size: 11px; font-weight: 600; }
.credit-miner-grid-setting{position:relative}.credit-miner-grid-setting>[data-miner-grid]{position:absolute;right:7px;width:28px;height:15px;padding:0;border:0;border-radius:10px;background:#526077;cursor:pointer}.credit-miner-grid-setting>[data-miner-grid]::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff;transition:.18s}.credit-miner-grid-setting>[data-miner-grid].is-on{background:#35ad55}.credit-miner-grid-setting>[data-miner-grid].is-on::after{left:15px}
.credit-miner-actions { display: grid; grid-template-columns: 1fr 42px; gap: 7px; margin-top: 10px; }
.credit-miner-actions button {
    min-height: 38px;
    color: #101827;
    font: 600 11px "Poppins", sans-serif;
    cursor: pointer;
    border: 0;
    border-radius: 7px;
    background: #ffd31a;
}
.credit-miner-actions button:disabled { color: #7f899b; cursor: default; background: #28344a; }
.credit-miner-actions button:last-child { color: #dfe5ef; background: #303d57; }
.credit-miner-body > p { margin: 9px 0 0; color: #8491a7; font-size: 9px; text-align: center; }

/* Une batterie pleine ne peut plus recevoir de recharge. */
.energy-battery-actions button:disabled {
    opacity: 1;
    color: #929caf;
    cursor: not-allowed;
    background: #465168;
    box-shadow: none;
    filter: saturate(0);
}

#energy-battery-indicators,
#credit-miner-indicators {
    position: fixed;
    inset: 0;
    z-index: 44;
    pointer-events: none;
}

.energy-battery-room-indicator {
    position: fixed;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 58px;
    padding: 3px 5px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 5px;
    background: rgba(12, 20, 32, .9);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .65);
    margin-top: 55px;
}

.energy-battery-room-indicator > span {
    height: 5px;
    flex: 1;
    overflow: hidden;
    border-radius: 3px;
    background: #303a48;
}

.energy-battery-room-indicator > span > b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #39c96b;
    box-shadow: 0 0 5px #39c96b;
    transition: width .2s ease, background .2s ease;
}

.energy-battery-room-indicator > em {
    min-width: 19px;
    color: #f4f6fa;
    font: 600 7px/1 Poppins, sans-serif;
    text-align: right;
    font-style: normal;
}

.energy-battery-room-indicator.is-yellow > span > b {
    background: #ffc800;
    box-shadow: 0 0 5px #ffc800;
}

.energy-battery-room-indicator.is-red > span > b {
    background: #ee3442;
    box-shadow: 0 0 6px #ee3442;
}

.credit-miner-room-indicator {
    position: fixed;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 7px;
    color: #fff;
    border-radius: 6px;
    background: rgba(12, 20, 32, .92);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .65);
    font: 500 8px / 1 Poppins, sans-serif;
    white-space: nowrap;
    margin-top: 70px;
}

.credit-miner-room-indicator > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #39c96b;
    box-shadow: 0 0 6px #39c96b;
}

.credit-miner-room-indicator > strong { color: #69e994; font-size: 10px; }
.credit-miner-room-indicator > span { color: #aeb8c8; }
.credit-miner-room-indicator.is-off { display: none; }
.credit-miner-room-indicator.is-off > i { background: #778195; box-shadow: none; }
.credit-miner-room-indicator.is-off > strong { color: #b0b8c6; }
.energy-battery-room-indicator,
.credit-miner-room-indicator { transition: opacity .08s ease; }
.energy-battery-room-indicator.is-behind-avatar,
.credit-miner-room-indicator.is-behind-avatar { opacity: 0; }

.credit-miner-level {
    margin: 9px 0;
    padding: 9px;
    border: 1px solid #34435f;
    border-radius: 8px;
    background: rgba(15, 26, 44, .72);
}
.credit-miner-level > header { display: flex; align-items: center; justify-content: space-between; }
.credit-miner-level > header span { display: flex; flex-direction: column; }
.credit-miner-level > header small { color: #919db1; font-size: 8px; }
.credit-miner-level > header strong { color: #fff; font-size: 13px; }
.credit-miner-level > header em { padding: 3px 6px; color: #ffc800; border: 1px solid #665a23; border-radius: 9px; background: #2b2a1e; font-size: 7px; font-style: normal; }
.credit-miner-xp { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; margin-top: 7px; }
.credit-miner-xp > span { height: 6px; overflow: hidden; border-radius: 4px; background: #303b50; }
.credit-miner-xp > span > i { display: block; height: 100%; border-radius: inherit; background: #ffc800; box-shadow: 0 0 5px #ffc800; }
.credit-miner-xp > small { color: #aeb8c8; font-size: 7px; }
.credit-miner-upgrade-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.credit-miner-upgrade-preview > span { display: flex; flex-direction: column; padding: 6px; border-radius: 5px; background: #19263b; }
.credit-miner-upgrade-preview small { color: #8e9caf; font-size: 7px; }
.credit-miner-upgrade-preview strong { color: #dfe6ef; font-size: 8px; }
.credit-miner-level > button { width: 100%; margin-top: 7px; padding: 7px; color: #172036; border: 0; border-radius: 6px; background: #ffc800; font: 600 9px Poppins, sans-serif; }
.credit-miner-level > button:disabled { color: #7f899b; cursor: not-allowed; background: #2b374d; }

#miner-computer-panel{position:fixed;z-index:49;left:50%;top:50%;transform:translate(-50%,-50%);font:500 11px/1.25 Poppins,sans-serif;color:#eef2f8}#miner-computer-panel[hidden]{display:none}.miner-computer-window{width:650px;max-height:78vh;overflow:hidden;border:1px solid #3b4d70;border-radius:11px;background:rgba(10,17,30,.97);box-shadow:0 15px 40px #000b}.miner-computer-window>header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#1e2a43;cursor:move}.miner-computer-window>header span{display:flex;align-items:center;gap:9px;font-size:15px}.miner-computer-window>header i{color:#ffc800;font-size:19px}.miner-computer-window>header button{width:28px;height:28px;border:0;border-radius:7px;background:#df2833;color:#fff;font-size:20px}.miner-computer-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:11px}.miner-computer-summary article{display:flex;flex-direction:column;padding:8px 10px;border:1px solid #33425e;border-radius:7px;background:#172238}.miner-computer-summary small,.miner-computer-card small{color:#8f9db2;font-size:8px}.miner-computer-summary strong{margin-top:2px;color:#69e994;font-size:13px}.miner-computer-chart{height:145px;margin:0 11px;padding:8px;border:1px solid #303f59;border-radius:8px;background:#111a2a}.miner-computer-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 11px 7px}.miner-computer-toolbar strong{font-size:12px}.miner-computer-toolbar button,.miner-computer-card button{padding:7px 10px;border:0;border-radius:6px;background:#35ad55;color:#fff;font:600 9px Poppins;cursor:pointer}.miner-computer-toolbar button:disabled,.miner-computer-card button:disabled{cursor:not-allowed;background:#2c384e;color:#8792a5}.miner-computer-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:285px;overflow:auto;padding:4px 11px 11px}.miner-computer-card{padding:9px;border:1px solid #34425c;border-radius:8px;background:#152036}.miner-computer-card.is-active{border-color:#28764a}.miner-computer-card>header{display:flex;justify-content:space-between}.miner-computer-card>header span{display:flex;flex-direction:column}.miner-computer-card>header em{color:#ee626b;font-size:8px;font-style:normal}.miner-computer-card.is-active>header em{color:#65df91}.miner-computer-card>div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:8px 0}.miner-computer-card>div span{display:flex;flex-direction:column}.miner-computer-card b{font-size:9px}.miner-computer-card button{width:100%;background:#ffc800;color:#172036}.miner-computer-feedback{display:block;min-height:16px;padding:0 11px 9px;color:#9eabbf;text-align:center}body.hotel-disconnected #miner-computer-panel{display:none!important}@media(max-width:720px){.miner-computer-window{width:94vw}.miner-computer-summary,.miner-computer-list{grid-template-columns:1fr 1fr}.miner-computer-card>div{grid-template-columns:1fr}}
.miner-computer-card>footer{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}.miner-computer-card>footer button{width:100%;padding:7px 4px;border:0;border-radius:6px;font:600 7px Poppins;cursor:pointer}.miner-computer-card>footer [data-mc-one]{background:#35ad55;color:#fff}.miner-computer-card>footer [data-mc-grid]{background:#59657a;color:#fff}.miner-computer-card>footer [data-mc-grid].is-on{background:#278a47}.miner-computer-card>footer [data-mc-upgrade]{background:#ffc800;color:#172036}.miner-computer-card>footer button:disabled{cursor:not-allowed;background:#2c384e;color:#8792a5}
.miner-computer-batteries{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:170px;overflow:auto;padding:4px 11px 11px}.miner-computer-battery{padding:9px;border:1px solid #37465f;border-radius:8px;background:#152036}.miner-computer-battery header{display:flex;align-items:center;justify-content:space-between}.miner-computer-battery header span{display:flex;flex-direction:column}.miner-computer-battery header em{color:#ffc800;font-size:10px;font-style:normal}.miner-computer-battery>div{height:6px;margin:8px 0;overflow:hidden;border-radius:5px;background:#303b50}.miner-computer-battery>div i{display:block;height:100%;border-radius:inherit;background:#39c96b;box-shadow:0 0 5px #39c96b}.miner-computer-battery footer{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:5px}.miner-computer-battery button{padding:6px 3px;border:0;border-radius:5px;background:#35ad55;color:#fff;font:600 8px Poppins;cursor:pointer}.miner-computer-battery button:disabled{cursor:not-allowed;background:#2c384e;color:#8792a5}.miner-computer-toolbar>small{color:#8f9db2;font-size:8px}
.miner-computer-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 11px 0}.miner-computer-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border:1px solid #33425e;border-radius:7px;background:#131e31;color:#9da9bc;font:600 10px Poppins;cursor:pointer}.miner-computer-tabs button i{font-size:14px}.miner-computer-tabs button.is-active{border-color:#ffc800;background:#ffc800;color:#172036}.miner-computer-window [data-mc-view][hidden]{display:none!important}.miner-computer-window [data-mc-view="miners"] .miner-computer-list,.miner-computer-window [data-mc-view="batteries"] .miner-computer-batteries{max-height:calc(78vh - 150px)}

/* Ajustements de dimensions du marché et du panier séparé. */
.market-layout{grid-template-columns:minmax(0,1fr)!important}.market-cart-floating{width:330px!important;max-height:520px!important}.market-cart-floating .market-cart{max-height:465px!important}.market-cart-floating .market-cart>div:nth-child(2){max-height:310px!important}.market-cart-floating .market-cart article{grid-template-columns:44px 1fr 28px!important;gap:9px!important;padding:9px!important}.market-cart-floating .market-cart article img{width:42px!important;height:42px!important}.market-cart-floating .market-cart article strong{font-size:11px!important}.market-cart-floating .market-cart article small{font-size:9px!important}.market-cart-floating .market-cart>footer{padding:13px!important}.market-cart-floating .market-cart>footer span{font-size:12px!important}.market-cart-floating .market-cart>footer button{padding:10px!important;font-size:10px!important}

.market-cart-header-icon{display:grid!important;place-items:center;width:34px;height:34px;border-radius:9px;background:#ffc900;color:#172032!important;font-size:18px!important}

#market-panel .market-window:has(.market-admin-list){width:min(1040px,calc(100vw - 40px))!important;max-height:min(760px,calc(100vh - 30px))!important}.market-admin-list{gap:10px!important;padding:0 18px 18px!important}.market-admin-head,.market-admin-row{grid-template-columns:minmax(240px,1.6fr) 125px 115px 120px 115px 135px!important;gap:13px!important}.market-admin-head{padding:10px 15px!important;font-size:10px!important}.market-admin-row{min-height:72px;padding:12px 15px!important;border-radius:10px!important}.market-admin-product{gap:13px!important}.market-admin-product img{width:52px!important;height:52px!important}.market-admin-product strong{font-size:14px!important}.market-admin-product small{margin-top:5px!important;font-size:9px!important}.market-admin-row>label{gap:6px!important;font-size:9px!important}.market-admin-row input[type=number]{height:38px!important;padding:0 10px!important;font-size:12px!important}.market-admin-row label b{font-size:10px!important}.market-admin-visible i{width:38px!important;height:21px!important}.market-admin-visible i:after{width:17px!important;height:17px!important}.market-admin-visible input:checked+i:after{transform:translateX(17px)!important}.market-admin-visible span{font-size:9px!important}.market-admin-row>button{height:40px!important;font-size:10px!important}.market-admin-row input:disabled{opacity:.45;cursor:not-allowed}

#market-cart-panel{width:430px!important;max-height:620px!important;border-radius:12px!important}#market-cart-panel>header{padding:14px 16px!important}#market-cart-panel>header span{gap:11px!important;font-size:17px!important}#market-cart-panel>header button{width:32px!important;height:32px!important;font-size:21px!important}.market-cart-header-icon{width:42px!important;height:42px!important;font-size:22px!important}.market-cart-floating .market-cart{max-height:555px!important}.market-cart-floating .market-cart-count{padding:11px 15px!important;font-size:12px!important}.market-cart-floating .market-cart>div:nth-child(2){max-height:390px!important;padding:8px 14px!important}.market-cart-floating .market-cart article{grid-template-columns:58px 1fr 32px!important;gap:13px!important;padding:12px 6px!important}.market-cart-floating .market-cart article img{width:54px!important;height:54px!important}.market-cart-floating .market-cart article strong{font-size:14px!important}.market-cart-floating .market-cart article small{margin-top:4px;font-size:11px!important}.market-cart-floating .market-cart article button{font-size:22px!important}.market-cart-floating .market-cart>footer{padding:16px!important}.market-cart-floating .market-cart>footer span{font-size:15px!important}.market-cart-floating .market-cart>footer span strong{font-size:16px!important}.market-cart-floating .market-cart>footer small{font-size:10px!important}.market-cart-floating .market-cart>footer button{padding:12px!important;font-size:12px!important}

.market-admin-head,.market-admin-row{grid-template-columns:minmax(280px,2fr) 150px 150px 135px 125px!important;gap:18px!important}.market-admin-head{padding:12px 18px!important}.market-admin-row{min-height:76px;padding:13px 18px!important}.market-admin-row>label{justify-content:center!important;align-self:stretch}.market-admin-number>div{width:100%!important}.market-admin-row input[type=number]{width:100%!important;height:42px!important;border-radius:7px!important;font-size:13px!important}.market-admin-row label b{min-width:25px!important;font-size:11px!important}.market-admin-visible{align-items:center!important;justify-content:center!important;gap:7px!important}.market-admin-visible span{min-width:55px;text-align:center;font-size:10px!important}.market-admin-product small em{font-style:normal;color:#68dc8d}.market-admin-product small em.is-saving{color:#ffc900}.market-admin-product small em.is-error{color:#ff6872}.market-admin-row.is-hidden .market-admin-product,.market-admin-row.is-hidden .market-admin-number{opacity:.68}@media(max-width:900px){.market-admin-head,.market-admin-row{grid-template-columns:minmax(220px,1.5fr) 120px 120px 110px 100px!important;gap:10px!important}}

#market-cart-panel{width:min(430px,calc(100vw - 16px))!important;max-height:calc(100vh - 16px)!important}@media(max-width:520px){#market-cart-panel>header{padding:10px 12px!important}.market-cart-header-icon{width:36px!important;height:36px!important}.market-cart-floating .market-cart>div:nth-child(2){max-height:calc(100vh - 245px)!important}.market-cart-floating .market-cart article{grid-template-columns:46px 1fr 28px!important}.market-cart-floating .market-cart article img{width:44px!important;height:44px!important}}

/* Zones sûres iOS : encoche, Dynamic Island et barre d'état. */
html.is-ios {
    --hrp-ios-safe-top: env(safe-area-inset-top, 0px);
    --hrp-ios-safe-right: env(safe-area-inset-right, 0px);
    --hrp-ios-safe-left: env(safe-area-inset-left, 0px);
}

html.is-ios body.auth-page .auth-header-inner {
    padding-top: max(12px, calc(var(--hrp-ios-safe-top) + 8px));
    padding-right: max(15px, calc(var(--hrp-ios-safe-right) + 12px));
    padding-left: max(15px, calc(var(--hrp-ios-safe-left) + 12px));
}

html.is-ios body.game-mode .header-hotel-wrapper {
    top: max(8px, calc(var(--hrp-ios-safe-top) + 8px));
    left: max(8px, calc(var(--hrp-ios-safe-left) + 8px));
}

/* Toutes les pages utilisant l'en-tete partage restent sous la Dynamic Island. */
@media (max-width: 768px) {
    html.is-ios .topbar.shared-header {
        height: calc(72px + var(--hrp-ios-safe-top));
    }

    html.is-ios .topbar.shared-header .topbar-inner {
        padding-top: var(--hrp-ios-safe-top);
        padding-right: max(0px, var(--hrp-ios-safe-right));
        padding-left: max(0px, var(--hrp-ios-safe-left));
    }

    html.is-ios .topbar.shared-header .profile-dropdown {
        top: calc(78px + var(--hrp-ios-safe-top));
    }
}

/* Safari zoome automatiquement les controles dont le texte fait moins de 16 px. */
@media (max-width: 768px) {
    html.is-ios input,
    html.is-ios textarea,
    html.is-ios select,
    html.is-ios [contenteditable="true"] {
        font-size: 16px !important;
    }
}

@media (max-width: 575.98px) {
    html.is-ios .auth-login-page .auth-header-inner,
    html.is-ios .auth-register-page .auth-header-inner {
        min-height: calc(70px + var(--hrp-ios-safe-top));
        flex-wrap: nowrap;
        gap: 8px;
    }

    html.is-ios .auth-login-page .auth-logo img,
    html.is-ios .auth-register-page .auth-logo img {
        width: min(145px, 38vw);
    }

    html.is-ios .auth-login-page .auth-online,
    html.is-ios .auth-register-page .auth-online {
        min-width: 0;
        max-width: 122px;
        font-size: 10px;
        white-space: normal;
    }

    html.is-ios body.game-mode .header-hotel-wrapper {
        top: max(8px, calc(var(--hrp-ios-safe-top) + 6px));
        left: max(6px, calc(var(--hrp-ios-safe-left) + 6px));
    }

    html.is-ios body.game-mode .hud-droite {
        top: max(48px, calc(var(--hrp-ios-safe-top) + 48px));
        right: max(6px, calc(var(--hrp-ios-safe-right) + 6px));
    }
}

/* Marché RP */
#market-panel{position:fixed;inset:0;z-index:44;pointer-events:none;font-family:"Poppins","Segoe UI",sans-serif;color:#f5f7fb}
#market-panel[hidden]{display:none}#market-panel .market-window{pointer-events:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,calc(100vw - 32px));max-height:min(650px,calc(100vh - 40px));display:flex;flex-direction:column;overflow:hidden;border:1px solid #354564;border-radius:12px;background:rgba(10,18,32,.97);box-shadow:0 18px 55px rgba(0,0,0,.68)}
.market-header{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid #35435d;background:#202d48;cursor:move}.market-header-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#172032;background:#ffc900;font-size:19px}.market-header>span:nth-child(2){display:flex;flex:1;flex-direction:column}.market-header strong{font-size:16px}.market-header small{color:#9da9bd;font-size:11px;font-weight:500}.market-header button{width:30px;height:30px;border:0;border-radius:8px;color:white;background:#eb2934;font-size:22px;line-height:1;cursor:pointer}
.market-toolbar{display:flex;gap:8px;padding:11px 13px}.market-toolbar label{display:flex;flex:1;align-items:center;gap:8px;padding:0 11px;border:1px solid #34445f;border-radius:8px;background:#111c30;color:#8794a9}.market-toolbar input{width:100%;height:38px;border:0;outline:0;background:transparent;color:white;font:500 12px Poppins}.market-toolbar button{width:40px;border:0;border-radius:8px;background:#2db653;color:white;cursor:pointer}.market-feedback{margin:0 13px 9px;padding:8px 10px;border-radius:7px;background:#16243b;color:#c9d4e6;font-size:11px}.market-feedback.success{color:#72e899;background:#123522}.market-feedback.error{color:#ff8790;background:#3c1820}
.market-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 13px 13px;overflow:auto}.market-product{position:relative;display:grid;grid-template-columns:55px 1fr auto;align-items:center;gap:9px;min-height:76px;padding:9px;border:1px solid #2f405c;border-radius:9px;background:rgba(23,35,56,.92)}.market-product>img{width:48px;height:48px;object-fit:contain;border-radius:7px;background:rgba(4,10,18,.38);}.market-product-main{min-width:0}.market-product-main header{display:flex;align-items:center;gap:6px}.market-product-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.market-product-main em{padding:2px 5px;border-radius:4px;color:#ffcb22;background:#55470d;font-size:8px;font-style:normal}.market-product-main span{display:block;margin-top:5px;color:#95a2b7;font-size:10px}.market-product-buy{text-align:right}.market-product-buy b{display:block;margin-bottom:6px;color:#ffc900;font-size:13px}.market-product-buy button,.market-product-admin button{border:0;border-radius:6px;background:#31b654;color:white;font:600 10px Poppins;cursor:pointer;padding:7px 10px}.market-product button:disabled{opacity:.42;cursor:not-allowed}.market-product.is-hidden,.market-product.is-sold-out{border-color:#394253}
.market-product-admin{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr 34px;gap:7px;padding-top:8px;border-top:1px solid #2e3c54}.market-product-admin label{display:flex;align-items:center;gap:5px;color:#9eabbe;font-size:9px}.market-product-admin input[type=number]{min-width:0;width:100%;height:28px;padding:0 6px;border:1px solid #3a4b67;border-radius:5px;background:#0d1729;color:white}.market-switch input{display:none}.market-switch i{width:27px;height:15px;border-radius:12px;background:#455166}.market-switch input:checked+i{background:#31b654}.market-switch i:after{content:"";display:block;width:11px;height:11px;margin:2px;border-radius:50%;background:white;transition:.15s}.market-switch input:checked+i:after{transform:translateX(12px)}.market-product-admin button{padding:0;font-size:15px}.market-footer{padding:9px 14px;border-top:1px solid #293851;color:#8491a6;font-size:10px}.market-empty{grid-column:1/-1;display:grid;place-items:center;min-height:180px;color:#8491a6}.market-empty i{font-size:30px}.market-empty strong{font-size:13px}@media(max-width:620px){.market-products{grid-template-columns:1fr}}
.market-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;min-height:0;overflow:hidden}.market-layout>.market-products{min-height:0}.market-cart{display:flex;min-height:0;flex-direction:column;border-left:1px solid #293851;background:#111b2d}.market-cart[hidden]{display:none}.market-cart>header{display:flex;align-items:center;justify-content:space-between;padding:11px;border-bottom:1px solid #293851}.market-cart>header span{display:flex;align-items:center;gap:7px}.market-cart>header b{color:#65dc8a;font-size:9px}.market-cart>div{flex:1;overflow:auto;padding:7px}.market-cart article{display:grid;grid-template-columns:34px 1fr 22px;align-items:center;gap:6px;padding:6px;border-bottom:1px solid #27344a}.market-cart article img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}.market-cart article span{display:flex;min-width:0;flex-direction:column}.market-cart article strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.market-cart article small{color:#93a0b4;font-size:8px}.market-cart article button{border:0;background:transparent;color:#ff6b73;font-size:17px}.market-cart-empty{padding:30px 8px;color:#8491a6;text-align:center}.market-cart>footer{padding:10px;border-top:1px solid #293851}.market-cart>footer span{display:flex;justify-content:space-between;margin-bottom:8px}.market-cart>footer span strong{color:#ffc900}.market-cart>footer button{width:100%;padding:8px;border:0;border-radius:6px;background:#31b654;color:#fff;font:600 9px Poppins}.market-cart>footer small{display:block;color:#8f9bb0;font-size:8px;text-align:center}.market-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:9px 13px 0}.market-tabs button{padding:8px;border:1px solid #35455f;border-radius:7px;background:#152137;color:#aeb8c8}.market-orders{display:grid;gap:8px;overflow:auto;padding:12px}.market-orders article{padding:10px;border:1px solid #2e7048;border-radius:8px;background:#142238}.market-orders article header{display:flex;justify-content:space-between}.market-orders article header span{display:flex;flex-direction:column}.market-orders article header small,.market-orders article p{color:#95a2b7;font-size:9px}.market-orders article button{padding:7px;border:0;border-radius:6px;background:#31b654;color:#fff;font:600 9px Poppins}@media(max-width:700px){.market-layout{grid-template-columns:1fr}.market-cart{max-height:220px;border-top:1px solid #293851;border-left:0}}
.market-cart-floating{position:fixed;z-index:45;top:120px;right:24px;width:245px;max-height:430px;overflow:hidden;border:1px solid #354564;border-radius:10px;background:#111b2d;box-shadow:0 12px 35px #000a;color:#f5f7fb;font:500 10px/1.25 Poppins,sans-serif}.market-cart-floating[hidden]{display:none}.market-cart-floating>header{display:flex;align-items:center;justify-content:space-between;padding:10px 11px;border-bottom:1px solid #35435d;background:#202d48;cursor:move}.market-cart-floating>header span{display:flex;align-items:center;gap:7px;font-size:13px}.market-cart-floating>header i{color:#ffc900}.market-cart-floating>header button{width:24px;height:24px;border:0;border-radius:6px;background:#e52d37;color:#fff;font-size:17px}.market-cart-floating .market-cart{max-height:380px;border:0}.market-cart-count{padding:7px 9px!important;color:#65dc8a;font-size:9px;border-bottom:1px solid #27344a}.market-cart-floating .market-cart>div:nth-child(2){min-height:40px;max-height:230px}.market-cart-floating .market-cart article{grid-template-columns:34px 1fr 22px}
.market-cart-dock{position:relative;display:grid;place-items:center;color:#172238;background:#ffc431;box-shadow:none;cursor:pointer}
.market-cart-dock[hidden]{display:none}.market-cart-dock>i{font-size:27px;line-height:1}.market-cart-dock>span{position:absolute;top:-7px;right:-7px;display:grid;min-width:21px;height:21px;place-items:center;padding:0 4px;border:2px solid #101827;border-radius:999px;background:#ed2f3b;color:#fff;font:700 10px Poppins}
.market-cart-dock:hover{transform:translateY(-2px);filter:brightness(1.08)}
@media(max-width:620px){.market-cart-dock>i{font-size:24px}}
.market-admin-list{display:flex;min-height:0;flex-direction:column;gap:6px;overflow:auto;padding:0 13px 13px}.market-admin-head,.market-admin-row{display:grid;grid-template-columns:minmax(190px,1.55fr) 105px 95px 105px 110px;align-items:center;gap:9px}.market-admin-head{position:sticky;top:0;z-index:2;padding:7px 11px;color:#7f8da3;background:#0d1728;font-size:8px;text-transform:uppercase}.market-admin-row{padding:9px 11px;border:1px solid #30415d;border-radius:8px;background:#152137;transition:.15s}.market-admin-row.is-hidden{opacity:.62;border-color:#3a4050}.market-admin-product{display:flex;min-width:0;align-items:center;gap:9px}.market-admin-product img{width:42px;height:42px;object-fit:contain;border-radius:6px;background:#0d1728;image-rendering:pixelated}.market-admin-product>span{display:flex;min-width:0;flex-direction:column}.market-admin-product strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.market-admin-product small{margin-top:3px;color:#8492a7;font-size:7px}.market-admin-row>label{display:flex;flex-direction:column;gap:4px;color:#8c9aaf;font-size:7px}.market-admin-row>label>div{display:flex;align-items:center;gap:4px}.market-admin-row input[type=number]{box-sizing:border-box;width:100%;height:30px;padding:0 7px;border:1px solid #3b4c68;border-radius:5px;outline:0;background:#0e192b;color:#fff;font:600 9px Poppins}.market-admin-row label b{color:#ffc900;font-size:8px}.market-admin-visible{align-items:flex-start;cursor:pointer}.market-admin-visible input{display:none}.market-admin-visible i{position:relative;width:32px;height:17px;border-radius:10px;background:#465269}.market-admin-visible i:after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:.15s}.market-admin-visible input:checked+i{background:#31b654}.market-admin-visible input:checked+i:after{transform:translateX(15px)}.market-admin-visible span{color:#aab5c5}.market-admin-row>button{display:flex;align-items:center;justify-content:center;gap:5px;height:32px;border:0;border-radius:6px;background:#31b654;color:#fff;font:600 8px Poppins;cursor:pointer}.market-admin-row>button:hover{background:#3ac760}@media(max-width:760px){.market-admin-head{display:none}.market-admin-row{grid-template-columns:1fr 1fr}.market-admin-product{grid-column:1/-1}.market-admin-row>button{align-self:end}}

/* Administration du marché : onglets, statistiques et réglages serveur. */
/* Switch autonome et identique dans Produits et Réglages. */
.market-admin-visible{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;cursor:pointer}
.market-admin-visible input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.market-admin-visible i{position:relative!important;display:block!important;width:38px!important;height:21px!important;min-width:38px!important;flex:0 0 auto!important;border-radius:999px!important;background:#465269!important;transition:background .15s}
.market-admin-visible i:after{content:"";position:absolute;top:2px;left:2px;width:17px!important;height:17px!important;margin:0!important;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0006;transition:transform .15s}
.market-admin-visible input:checked+i{background:#31b654!important}
.market-admin-visible input:checked+i:after{transform:translateX(17px)!important}
.market-admin-visible span{min-width:55px;color:#aab5c5;text-align:center}
.market-admin-head,.market-admin-row{grid-template-columns:minmax(280px,2fr) 150px minmax(190px,1fr) 125px!important}
.market-admin-head>span[hidden],.market-admin-row>label[hidden]{display:none!important}
.market-stock-reserve{display:flex;align-items:center;justify-content:center;min-width:66px;height:28px;box-sizing:border-box;margin:0;padding:0 8px;border:1px solid rgba(101,220,138,.3);border-radius:6px;color:#65dc8a;background:rgba(101,220,138,.08);font-size:8px;line-height:1;white-space:nowrap}
.market-admin-row label:has(>[data-stock]){display:grid!important;grid-template-columns:minmax(64px,1fr) auto;align-items:center!important;justify-content:stretch!important;gap:8px!important}

.market-settings-list article{grid-template-columns:48px minmax(130px,1fr) 130px 115px!important}
.market-min-price{display:flex;min-width:0;flex-direction:column;gap:4px;color:#8f9db2;font-size:8px}
.market-min-price>div{display:flex;align-items:center;gap:5px}
.market-min-price input{box-sizing:border-box;width:92px;height:34px;padding:0 8px;border:1px solid #3b4c68;border-radius:6px;outline:0;background:#0e192b;color:#fff;font:600 10px Poppins}
.market-min-price input:focus{border-color:#ffc900;box-shadow:0 0 0 2px rgba(255,196,0,.12)}
.market-min-price b{color:#ffc900;font-size:9px}

/* Caisse employé : interface métier compacte et hiérarchisée. */
#market-panel .market-window.is-employee-checkout{width:min(720px,calc(100vw - 32px));max-height:min(700px,calc(100vh - 36px));border-color:#3a4c6c;background:rgba(9,17,30,.97)}
.is-employee-checkout .market-header{padding:14px 16px;background:linear-gradient(135deg,#243453,#1d2942)}
.is-employee-checkout .market-header-icon{width:42px;height:42px;border-radius:11px;font-size:22px;box-shadow:0 6px 18px rgba(255,196,0,.17)}
.is-employee-checkout .market-header strong{font-size:17px}.is-employee-checkout .market-header small{margin-top:2px;font-size:10px}
.is-employee-checkout .market-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 14px 0}
.is-employee-checkout .market-tabs button{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:9px;height:48px;padding:0 12px;border:1px solid #344764;border-radius:9px;color:#9caabd;background:#111d31;font:600 11px Poppins;text-align:left;cursor:default}
.is-employee-checkout .market-tabs button>i{display:grid;width:30px;height:30px;place-items:center;border-radius:8px;color:#98a7bd;background:#202e46;font-size:16px}
.is-employee-checkout .market-tabs button>b{display:grid;min-width:27px;height:24px;place-items:center;padding:0 6px;border-radius:7px;color:#d9e1ed;background:#293750;font-size:11px}
.is-employee-checkout .market-tabs button.is-active{border-color:rgba(255,196,0,.55);color:#fff;background:linear-gradient(135deg,rgba(255,196,0,.14),#17243a)}
.is-employee-checkout .market-tabs button.is-active>i{color:#172032;background:#ffc400}.is-employee-checkout .market-tabs button.is-active>b{color:#172032;background:#ffc400}
.is-employee-checkout .market-feedback{margin:10px 14px 0;padding:9px 12px;border:1px solid rgba(104,226,145,.2);font-weight:500}
.is-employee-checkout .market-orders{display:flex;min-height:230px;flex-direction:column;gap:10px;padding:12px 14px 15px}
.is-employee-checkout .market-order-card{overflow:hidden;padding:0;border:1px solid #344864;border-radius:11px;background:linear-gradient(145deg,#16243a,#111c2e);box-shadow:0 7px 18px rgba(0,0,0,.2)}
.is-employee-checkout .market-order-card>header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-bottom:1px solid #2d3d57;background:rgba(32,46,70,.58)}
.market-order-customer{display:flex;min-width:0;align-items:center;gap:10px}.market-order-customer>i{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border-radius:10px;color:#ffc400;background:rgba(255,196,0,.12);font-size:20px}.market-order-customer>span,.market-order-total{display:flex;min-width:0;flex-direction:column}.market-order-customer strong{font-size:13px}.market-order-customer small,.market-order-total small{margin-top:2px;color:#8998ae;font-size:8px}
.market-order-total{align-items:flex-end}.market-order-total strong{margin-top:2px;color:#ffc900;font-size:16px;white-space:nowrap}
.is-employee-checkout .market-order-card>ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0;padding:10px 12px;list-style:none}
.is-employee-checkout .market-order-card>ul li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;min-width:0;padding:7px 8px;border:1px solid #2c3c56;border-radius:8px;background:#101b2e}
.is-employee-checkout .market-order-card>ul img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}.is-employee-checkout .market-order-card>ul span{display:flex;min-width:0;flex-direction:column}.is-employee-checkout .market-order-card>ul strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.is-employee-checkout .market-order-card>ul small{margin-top:2px;color:#8997ab;font-size:8px}.is-employee-checkout .market-order-card>ul b{color:#dbe4ef;font-size:9px;white-space:nowrap}
.is-employee-checkout .market-order-card>footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-top:1px solid #2c3c55}.is-employee-checkout .market-order-card>footer>span{display:flex;align-items:center;gap:5px;color:#8291a7;font-size:8px}.is-employee-checkout .market-order-card>footer button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:180px;height:36px;padding:0 13px;border:0;border-radius:8px;color:#fff;background:linear-gradient(#3acb65,#29a94e);box-shadow:0 5px 14px rgba(38,181,83,.18);font:600 10px Poppins;cursor:pointer}.is-employee-checkout .market-order-card>footer button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.market-orders-empty{display:flex;min-height:220px;align-items:center;justify-content:center;flex-direction:column;padding:20px;color:#8c9ab0;text-align:center}.market-orders-empty>span{display:grid;width:64px;height:64px;place-items:center;margin-bottom:13px;border:1px solid #34445f;border-radius:18px;color:#ffc400;background:#16243a;font-size:31px}.market-orders-empty strong{color:#dce4ef;font-size:14px}.market-orders-empty small{max-width:330px;margin-top:7px;color:#7f8da2;font-size:9px;line-height:1.5}
@media(max-width:620px){.is-employee-checkout .market-tabs button{grid-template-columns:26px 1fr auto;padding:0 8px;font-size:9px}.is-employee-checkout .market-tabs button>i{width:26px;height:26px}.is-employee-checkout .market-order-card>ul{grid-template-columns:1fr}.is-employee-checkout .market-order-card>footer{align-items:stretch;flex-direction:column}.is-employee-checkout .market-order-card>footer button{width:100%}}

#market-panel .market-window:has(.market-admin-tabs:not([hidden])){width:min(1040px,calc(100vw - 40px));max-height:min(760px,calc(100vh - 30px))}
.market-admin-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:11px 14px 0}.market-admin-tabs[hidden]{display:none}.market-admin-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;height:40px;border:1px solid #34445f;border-radius:8px;background:#111c30;color:#9eabc0;font:600 11px Poppins;cursor:pointer}.market-admin-tabs button.is-active{color:#172032;border-color:#ffc900;background:#ffc900}.market-dashboard,.market-settings{min-height:0;overflow:auto;padding:12px 14px 16px}.market-dashboard[hidden],.market-settings[hidden]{display:none}.market-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.market-kpis article{display:flex;align-items:center;gap:11px;min-height:76px;padding:13px;border:1px solid #34445f;border-radius:9px;background:#152137}.market-kpis article>i{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:9px;color:#ffc900;background:#2b3040;font-size:20px}.market-kpis article span{display:flex;min-width:0;flex-direction:column;color:#8f9db2;font-size:9px}.market-kpis article strong{margin-top:4px;color:#69e994;font-size:17px}.market-sales-chart{margin-top:12px;padding:14px;border:1px solid #34445f;border-radius:10px;background:#111b2d}.market-sales-chart>header{display:flex;align-items:center;justify-content:space-between}.market-sales-chart>header span,.market-payroll-setting>span,.market-settings-heading>span{display:flex;flex-direction:column}.market-sales-chart>header strong{font-size:14px}.market-sales-chart>header small,.market-settings-heading small,.market-payroll-setting small{color:#8f9db2;font-size:9px}.market-sales-chart>header>i{color:#ffc900;font-size:24px}.market-chart-bars{display:grid;grid-template-columns:repeat(14,1fr);align-items:end;gap:7px;height:260px;margin-top:16px;padding-top:22px;border-bottom:1px solid #394860;background:repeating-linear-gradient(to top,transparent 0,transparent 48px,rgba(99,116,143,.16) 49px)}.market-chart-day{display:grid;grid-template-rows:18px 1fr 22px;align-items:end;height:100%;text-align:center}.market-chart-day>b{overflow:hidden;color:#92a0b5;font-size:8px}.market-chart-day>span{display:flex;align-items:flex-end;justify-content:center;height:100%}.market-chart-day>span i{display:block;width:min(26px,75%);min-height:2px;border-radius:5px 5px 0 0;background:linear-gradient(#ffe044,#ffc400)}.market-chart-day>small{padding-top:6px;color:#7f8da2;font-size:7px}.market-payroll-setting{display:grid;grid-template-columns:45px 1fr auto;align-items:center;gap:12px;padding:14px;border:1px solid rgba(255,196,0,.5);border-radius:10px;background:rgba(255,196,0,.07)}.market-payroll-setting>i{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;color:#ffc900;background:#2a3040;font-size:23px}.market-payroll-setting strong,.market-settings-heading strong{font-size:13px}.market-settings-heading{padding:17px 2px 10px}.market-settings-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.market-settings-list article{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;min-height:68px;padding:9px 11px;border:1px solid #33435e;border-radius:9px;background:#152137}.market-settings-list img{width:44px;height:44px;object-fit:contain;border-radius:6px;background:#0d1728;image-rendering:pixelated}.market-settings-list article>span{display:flex;min-width:0;flex-direction:column}.market-settings-list strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.market-settings-list small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8492a7;font-size:8px}@media(max-width:760px){.market-kpis{grid-template-columns:1fr 1fr}.market-settings-list{grid-template-columns:1fr}.market-chart-bars{gap:3px}.market-admin-tabs button{font-size:9px}}
/* ---------- Marché : nouvelle DA HabboRP ---------- */
#market-panel .market-window,
#market-cart-panel.market-cart-floating {
    border: 2px solid #2e3a55 !important;
    border-radius: 12px !important;
    color: #fff;
    background: rgba(16, 20, 29, .94) !important;
    -webkit-backdrop-filter: blur(4px) saturate(145%);
    backdrop-filter: blur(4px) saturate(145%);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .48), inset 0 1px rgba(255,255,255,.025) !important;
}
#market-panel .market-header,
#market-cart-panel > header {
    min-height: 62px;
    height: 62px;
    box-sizing: border-box;
    padding: 10px 15px 10px 18px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    background: transparent !important;
}
.market-brand,
.market-cart-brand { display: flex; min-width: 0; flex: 1; align-items: center; gap: 11px; }
.market-brand > img,
.market-cart-brand > img { width: 126px; height: auto; flex: 0 0 auto; }
.market-brand > span,
.market-cart-brand > span { display: flex; min-width: 0; flex-direction: column; padding-left: 0; border-left: 0; }
.market-brand strong,
.market-cart-brand strong { overflow: hidden; color: #fff; font-size: 15px !important; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.market-brand small,
.market-cart-brand small { margin-top: 2px; color: #9099aa !important; font-size: 9px !important; font-weight: 500; }
.market-brand small[hidden] { display: none !important; }
#market-panel .market-toolbar { gap: 9px; padding: 14px 16px 11px; }
#market-panel .market-toolbar label { min-height: 42px; border-color: #29354a; border-radius: 10px; background: rgba(8,14,24,.72); }
#market-panel .market-toolbar button { width: 42px; border-radius: 9px; background: #31ad18; }
#market-panel .market-products { gap: 10px; padding: 0 16px 16px; }
#market-panel .market-product { min-height: 82px; padding: 11px; border-color: #2d384c; border-radius: 10px; background: rgba(26,33,45,.86); }
#market-panel .market-product:hover { border-color: rgba(255,196,0,.42); background: rgba(30,38,52,.94); }
#market-panel .market-product > img { width: 52px; height: 52px; border-radius: 9px; background: rgba(8,13,21,.72); }
#market-panel .market-product-main strong { font-size: 12px; }
#market-panel .market-product-main span { color: #929bac; font-size: 9px; }
#market-panel .market-product-buy button { min-width: 62px; min-height: 31px; border-radius: 7px; background: #31ad18; }
#market-cart-panel.market-cart-floating { width: min(440px, calc(100vw - 20px)) !important; }
#market-cart-panel .market-cart { border: 0; background: transparent; }
#market-cart-panel .market-cart-count { padding: 12px 17px !important; color: #ffc400; border-color: #283246; background: rgba(8,13,22,.42); font-size: 10px !important; font-weight: 700; text-transform: uppercase; }
#market-cart-panel .market-cart > div:nth-child(2) { padding: 8px 16px !important; }
#market-cart-panel .market-cart article { margin: 7px 0; padding: 10px !important; border: 1px solid #2b364a; border-radius: 9px; background: rgba(27,35,48,.82); }
#market-cart-panel .market-cart article img { border-radius: 8px; background: #0d1420; }
#market-cart-panel .market-cart article button { width: 27px; height: 27px; padding: 0; border-radius: 6px; color: #fff; background: rgba(201,21,15,.82); line-height: 1; cursor: pointer; }
#market-cart-panel .market-cart > footer { padding: 15px 17px 17px !important; border-color: #2a3548; background: rgba(8,13,22,.38); }
#market-cart-panel .market-cart > footer > span { align-items: center; color: #a7afbd; }
#market-cart-panel .market-cart > footer > span strong { color: #ffc400; }
#market-cart-panel .market-cart > footer button { width: 100%; min-height: 40px; border-radius: 8px !important; background: #31ad18 !important; font: 700 11px Poppins !important; }
@media (max-width: 620px) {
    .market-brand > img, .market-cart-brand > img { width: 105px; }
    .market-brand > span, .market-cart-brand > span { padding-left: 10px; }
    #market-panel .market-products { grid-template-columns: 1fr; }
}

/* ---------- Patch notes : administration ---------- */
.admin-patchnotes { display:grid; grid-template-columns:minmax(320px,.9fr) minmax(420px,1.1fr); gap:18px; }
.admin-patchnotes-editor > header,.admin-patchnote-row > header { display:flex; align-items:center; gap:12px; }
.admin-patchnotes-editor > header > div,.admin-patchnote-row > header > div { flex:1; min-width:0; }
.admin-patchnotes-editor > header > i { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:#ffc400; background:#ffc4001a; font-size:23px; }
.admin-patchnotes-fields { display:grid; grid-template-columns:150px 1fr; gap:13px; padding:18px; }
.admin-patchnotes-fields label { display:flex; flex-direction:column; gap:6px; color:#d9dfec; font-size:11px; font-weight:800; }
.admin-patchnotes-fields label.is-wide,.admin-patchnotes-publish { grid-column:1/-1; }
.admin-patchnotes-fields input,.admin-patchnotes-fields textarea { width:100%; border:2px solid #2e3752; border-radius:9px; outline:0; color:#fff; background:#141922; padding:10px 12px; font:500 12px/1.5 Poppins,sans-serif; resize:vertical; }
.admin-patchnotes-fields input:focus,.admin-patchnotes-fields textarea:focus { border-color:#ffc400; }
.admin-patchnotes-fields label > small { color:#78839a; font-weight:500; }
.admin-patchnotes-publish { flex-direction:row!important; align-items:center; padding:12px; border:1px solid #2e3752; border-radius:10px; background:#141922; cursor:pointer; }
.admin-patchnotes-publish input { display:none; }
.admin-patchnotes-publish > i { width:38px; height:22px; border-radius:20px; background:#414a61; position:relative; }
.admin-patchnotes-publish > i:after { content:""; position:absolute; width:16px; height:16px; left:3px; top:3px; border-radius:50%; background:#fff; transition:.18s; }
.admin-patchnotes-publish input:checked + i { background:#4fc448; }
.admin-patchnotes-publish input:checked + i:after { transform:translateX(16px); }
.admin-patchnotes-publish span { display:flex; flex-direction:column; }
.admin-patchnotes-editor footer,.admin-patchnote-row footer { padding:0 18px 18px; display:flex; justify-content:flex-end; }
.admin-patchnotes-list { display:flex; flex-direction:column; gap:14px; }
.admin-patchnote-row { overflow:hidden; }
.admin-patchnote-row > header { padding:15px 17px; }
.admin-patch-version { padding:7px 10px; border-radius:8px; color:#141922; background:#ffc400; font-size:11px; font-weight:900; }
.admin-patchnote-row h3 { margin:0; color:#fff; font-size:14px; }
.admin-patchnote-row header p { margin:3px 0 0; color:#7f899f; font-size:10px; }
.admin-patchnote-row header em { padding:5px 8px; border-radius:6px; color:#aab2c5; background:#343b4d; font-size:8px; font-style:normal; font-weight:900; }
.admin-patchnote-row header em.is-published { color:#80e57c; background:#4fc4481c; }
.admin-patchnote-preview { max-height:190px; overflow:auto; margin:0 17px 14px; padding:12px; border-radius:9px; color:#cbd2df; background:#141922; font-size:10px; line-height:1.55; }
.admin-danger-button { border:0; border-radius:8px; padding:8px 12px; color:#fff; background:#d95f58; font-size:10px; font-weight:800; cursor:pointer; }

/* Sanctions depuis la fiche joueur */
.admin-sanctions-grid { display:grid; gap:18px; }
.admin-sanction-status > header,
.admin-sanction-form > header,
.admin-sanction-history > header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.admin-sanction-status > header > i,
.admin-sanction-form > header > i,
.admin-sanction-history > header > i { color:var(--hrp-yellow); font-size:22px; }
.admin-sanction-state { display:flex; align-items:center; gap:16px; padding:20px; }
.admin-sanction-state > div { flex:1; min-width:0; }
.admin-sanction-state strong { display:block; color:#fff; font-size:15px; }
.admin-sanction-state p { margin:4px 0; color:var(--hrp-muted); }
.admin-sanction-state small { color:#90a4c5; }
.admin-sanction-state-icon { display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; border-radius:12px; color:#35c979; background:rgba(53,201,121,.13); font-size:23px; }
.admin-sanction-status.is-banned { border-color:rgba(224,48,55,.48); }
.admin-sanction-status.is-banned .admin-sanction-state-icon { color:#ff6268; background:rgba(224,48,55,.15); }
.admin-sanction-form .admin-form-grid { padding:20px; }
.admin-sanction-form .admin-card-actions { border-top:1px solid var(--hrp-border); }
.admin-sanction-form .admin-danger-button,
.admin-sanction-state .admin-danger-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 16px; background:#cf171d; font-size:12px; }
.admin-sanction-form .admin-danger-button:hover,
.admin-sanction-state .admin-danger-button:hover { background:#e02128; }
.admin-sanction-history { overflow:hidden; }
.admin-sanction-history .admin-table td:nth-child(2) { min-width:220px; white-space:normal; }
.admin-status.is-banned { color:#ff6268; background:rgba(224,48,55,.14); }
@media (max-width:760px) {
    .admin-sanction-state { align-items:flex-start; flex-wrap:wrap; }
    .admin-sanction-state form { width:100%; }
    .admin-sanction-state .admin-danger-button { width:100%; }
}
.admin-patchnotes-lock { grid-column:1/-1; min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; filter:grayscale(.75); opacity:.72; }
.admin-patchnotes-lock > span { display:grid; place-items:center; width:76px; height:76px; border:3px solid #3b435b; border-radius:22px; color:#8d96aa; background:#141922; font-size:36px; }
.admin-patchnotes-lock h2 { margin:18px 0 6px; color:#fff; }
.admin-patchnotes-lock p { max-width:430px; color:#8b95aa; }
.admin-patchnotes-link.is-locked { color:#737b8d!important; background:#181d27!important; cursor:not-allowed; }

/* ---------- Patch notes : client ---------- */
.patch-notes-overlay { position:fixed; z-index:10040; inset:0; display:grid; place-items:center; padding:16px; pointer-events:none; background:transparent; }
.patch-notes-overlay[hidden] { display:none!important; }
.patch-notes-window { width:min(560px,calc(100vw - 28px)); max-height:min(650px,calc(100vh - 28px)); display:flex; flex-direction:column; overflow:hidden; border:2px solid #2e334d; border-radius:11px; color:#fff; pointer-events:auto; background:rgba(16,20,29,.95); box-shadow:0 18px 45px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(4px) saturate(145%); font-family:Poppins,sans-serif; }
.patch-notes-header { min-height:62px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:10px 15px 10px 18px; border-bottom:1px solid rgba(255,255,255,.07); cursor:grab; user-select:none; touch-action:none; }
.patch-notes-window.is-dragging .patch-notes-header { cursor:grabbing; }
.patch-notes-brand { display:flex; align-items:center; gap:11px; }
.patch-notes-brand img { width:126px; height:auto; }
.patch-notes-brand strong { color:#d9dce3; font-size:13px; font-weight:700; }
.patch-notes-close { display:grid; place-items:center; width:29px; height:29px; padding:0; border:0; border-radius:6px; color:#fff; background:var(--hrp-red); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); cursor:pointer; }
.patch-notes-close:hover { filter:brightness(1.12); }
.patch-notes-close svg { width:19px; height:19px; }
.patch-notes-hero { display:flex; align-items:center; gap:12px; padding:16px 18px 13px; border-bottom:1px solid rgba(255,255,255,.06); background:transparent; }
.patch-notes-version { flex:none; padding:7px 10px; border:1px solid rgba(255,196,0,.28); border-radius:7px; color:#ffc400; background:rgba(201,153,0,.18); font-size:10px; font-weight:800; }
.patch-notes-hero small { color:#4fc448; font-size:8px; font-weight:800; letter-spacing:.8px; }
.patch-notes-hero h2 { margin:3px 0 0; font-size:16px; line-height:1.3; }
.patch-notes-content { flex:1; overflow:auto; padding:15px 18px; color:#cfd5e2; scrollbar-width:thin; scrollbar-color:#c99500 transparent; }
.patch-notes-content::-webkit-scrollbar { width:7px; }
.patch-notes-content::-webkit-scrollbar-thumb { border-radius:8px; background:#c99500; }
.patch-notes-content h3 { margin:15px 0 8px; color:#ffc400; font-size:12px; letter-spacing:.3px; }
.patch-notes-content h3:first-child { margin-top:0; }
.patch-notes-block { display:flex; flex-direction:column; gap:7px; }
.patch-notes-block p { display:flex; align-items:flex-start; gap:8px; margin:0; font-size:11px; line-height:1.5; }
.patch-notes-block p i { flex:none; margin-top:2px; color:#4fc448; font-size:13px; }
.patch-notes-window > footer { flex:none; display:block; padding:13px 18px 16px; border-top:1px solid rgba(255,255,255,.07); background:transparent; }

/* ---------- Page publique des patch notes ---------- */
.patchnotes-page { min-height:100vh; color:#fff; background:#111725; }
.patchnotes-main { width:calc(100% - 32px); max-width:var(--site-width); margin:0 auto; padding:42px 0 70px; }
.patchnotes-main .site-box { width:100%; max-width:none; margin-left:0; margin-right:0; }
.patchnotes-hero { display:flex; align-items:center; justify-content:space-between; gap:30px; overflow:hidden; margin-bottom:28px; padding:38px 42px; border:1px solid #303c56; border-radius:16px; background:radial-gradient(circle at 85% 20%,rgba(255,195,0,.16),transparent 34%),linear-gradient(135deg,#1b2435,#151c2a); }
.patchnotes-hero > div { max-width:720px; }
.patchnotes-hero h1 { margin:8px 0 9px; color:#fff; font-size:42px; line-height:1; }
.patchnotes-hero p { max-width:650px; margin:0; color:#aab4c6; font-size:15px; line-height:1.7; }
.patchnotes-hero > img { width:190px; max-height:72px; object-fit:contain; }
.patchnotes-kicker { display:inline-flex; align-items:center; gap:8px; color:#ffc400; font-size:11px; font-weight:800; letter-spacing:.09em; }
.patchnotes-kicker i { font-size:18px; }
.patchnotes-history { position:relative; width:100%; display:grid; gap:18px; padding-left:38px; }
.patchnotes-history:before { position:absolute; top:11px; bottom:11px; left:12px; width:2px; content:""; background:#2d3951; }
.patchnotes-card { position:relative; padding:25px 28px 27px; border:1px solid #2b374e; border-radius:14px; background:#171e2b; box-shadow:0 9px 25px rgba(4,8,16,.16); }
.patchnotes-card.is-latest { border-color:rgba(255,196,0,.55); background:linear-gradient(135deg,rgba(255,196,0,.055),transparent 38%),#171e2b; }
.patchnotes-marker { position:absolute; top:27px; left:-38px; width:26px; height:26px; display:grid; place-items:center; border:2px solid #303d56; border-radius:50%; background:#111725; }
.patchnotes-marker span { width:9px; height:9px; border-radius:50%; background:#66738b; }
.patchnotes-card.is-latest .patchnotes-marker { border-color:#ffc400; }
.patchnotes-card.is-latest .patchnotes-marker span { background:#ffc400; box-shadow:0 0 12px rgba(255,196,0,.8); }
.patchnotes-card header { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.patchnotes-version-badge,.patchnotes-latest { display:inline-flex; align-items:center; gap:5px; min-height:28px; padding:0 11px; border-radius:7px; font-size:10px; font-weight:800; }
.patchnotes-version-badge { color:#172033; background:#ffc400; }
.patchnotes-latest { color:#78e69a; background:rgba(63,199,102,.12); border:1px solid rgba(63,199,102,.28); }
.patchnotes-card time { margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:#8491a6; font-size:11px; font-weight:600; }
.patchnotes-card h2 { margin:18px 0 16px; color:#fff; font-size:22px; }
.patchnotes-card-content { display:grid; gap:9px; }
.patchnotes-card-content p { margin:0; }
.patchnotes-card-content .is-bullet { display:flex; align-items:flex-start; gap:9px; color:#bdc6d5; font-size:13px; line-height:1.55; }
.patchnotes-card-content .is-bullet i { flex:none; margin-top:3px; color:#46c96b; font-size:15px; }
.patchnotes-card-content .is-heading { margin-top:5px; color:#fff; font-size:12px; font-weight:800; letter-spacing:.035em; }
.patchnotes-empty { padding:60px; color:#8e9aaf; text-align:center; }
.patchnotes-empty i { display:block; margin-bottom:10px; font-size:38px; }
@media(max-width:700px){.patchnotes-main{width:calc(100% - 20px);padding-top:22px}.patchnotes-hero{padding:27px 23px}.patchnotes-hero h1{font-size:32px}.patchnotes-hero>img{display:none}.patchnotes-history{padding-left:25px}.patchnotes-history:before{left:6px}.patchnotes-marker{left:-31px}.patchnotes-card{padding:21px 19px}.patchnotes-card time{width:100%;margin-left:0}.patchnotes-card h2{font-size:19px}}
.patch-notes-progress { color:#778299; font-size:10px; font-weight:800; }
.patch-notes-confirm { width:100%; min-width:0; height:40px; border:0; border-radius:8px; color:#fff; background:var(--hrp-green); box-shadow:inset 0 1px #ffffff30; font-size:11px; font-weight:800; cursor:pointer; }
.patch-notes-confirm:hover { background:var(--hrp-green-hover); }
.patch-notes-confirm:disabled { opacity:.55; }
@media(max-width:800px){.admin-patchnotes{grid-template-columns:1fr}.admin-patchnotes-fields{grid-template-columns:1fr}.admin-patchnotes-fields label.is-wide,.admin-patchnotes-publish{grid-column:auto}.patch-notes-hero{align-items:flex-start;flex-direction:column}.patch-notes-brand span{display:none}}

/* Alignement final des alertes reboot / shutdown. */
#reboot-overlay .reboot-details { align-items:stretch; }
#reboot-overlay .reboot-heading,
#reboot-overlay .reboot-message,
#reboot-overlay .reboot-requester {
    width:100%;
    margin-left:0;
    margin-right:0;
    box-sizing:border-box;
}
#reboot-overlay .reboot-heading { justify-content:flex-start; }
#reboot-overlay .reboot-message {
    padding:0 !important;
    justify-content:flex-start;
    text-align:left !important;
}
#reboot-overlay .reboot-requester { align-self:stretch; }
#reboot-overlay .reboot-countdown {
    min-width:0 !important;
    height:auto !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    color:var(--hrp-yellow) !important;
    background:transparent !important;
    box-shadow:none !important;
}

/* Annonces :ha — même présentation que reboot/shutdown, sans Frank. */
.client-alert-overlay,
.client-alert-overlay * {
    font-family: "Poppins", "Segoe UI", sans-serif;
}

.client-alert-overlay .client-hotel-alert {
    width: min(510px, calc(100vw - 28px));
    border: 2px solid #2e334d;
    border-radius: 11px;
    background: rgba(16, 20, 29, .94);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(4px) saturate(145%);
    backdrop-filter: blur(4px) saturate(145%);
}

.client-alert-overlay .reboot-header {
    min-height: 62px;
    padding: 10px 15px 10px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.client-alert-overlay .reboot-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.client-alert-overlay .reboot-brand img {
    display: block;
    width: 126px;
    height: auto;
}

.client-alert-overlay .reboot-brand strong {
    color: #d9dce3;
    font-size: 13px;
    font-weight: 700;
}

.client-alert-overlay .reboot-close {
    width: 29px;
    height: 29px;
    border-radius: 6px;
}

.client-alert-overlay .reboot-content {
    display: block;
    padding: 20px;
    text-align: left;
}

.client-alert-overlay .reboot-details {
    width: 100%;
}

.client-alert-overlay .reboot-heading {
    justify-content: flex-start;
}

.client-alert-overlay .reboot-title {
    font-size: 17px;
    line-height: 1.2;
    font-weight: 800;
}

.client-alert-overlay .reboot-message {
    display: block;
    width: 100%;
    min-height: 0;
    margin: 8px 0 15px;
    padding: 0;
    color: #d8dbe2;
    text-align: left;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 500;
}

.client-alert-overlay .reboot-requester {
    display: flex;
    min-height: 43px;
    align-items: center;
    gap: 10px;
    padding: 5px 13px;
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 13px;
    background: rgba(7, 12, 22, .64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.client-alert-overlay .reboot-requester[hidden] {
    display: none;
}

.client-alert-overlay .reboot-requester img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 50%;
    background: #202738;
}

.client-alert-overlay .reboot-requester img[hidden] {
    display: none;
}

.client-alert-overlay .reboot-requester span {
    color: #aeb4c0;
    font-size: 11px;
    font-weight: 500;
}

.client-alert-overlay .reboot-requester strong {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.client-alert-overlay .client-alert-ok {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 15px 0 0;
    padding: 10px 26px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--hrp-green);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.client-alert-overlay .client-alert-ok:hover {
    background: var(--hrp-green-hover);
}

/* Croix de fermeture commune à toutes les fenêtres HabboRP. */
:is(button[aria-label="Fermer"], .reboot-close, .patch-notes-close, .about-close, .commands-close, .staff-support-close) {
    display: inline-grid !important;
    position: relative;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    flex: 0 0 24px !important;
    place-items: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: #fff !important;
    background: var(--hrp-red) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 0 rgba(0, 0, 0, .18) !important;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, filter .15s ease, transform .15s ease;
}

:is(button[aria-label="Fermer"], .reboot-close, .patch-notes-close, .about-close, .commands-close, .staff-support-close):hover {
    background: var(--hrp-red-hover) !important;
    filter: brightness(1.06);
}

:is(button[aria-label="Fermer"], .reboot-close, .patch-notes-close, .about-close, .commands-close, .staff-support-close):active {
    transform: translateY(1px);
}

:is(button[aria-label="Fermer"], .reboot-close, .patch-notes-close, .about-close, .commands-close, .staff-support-close) svg {
    width: 19px !important;
    height: 19px !important;
    pointer-events: none;
}

:is(button[aria-label="Fermer"], .reboot-close, .patch-notes-close, .about-close, .commands-close, .staff-support-close):not(:has(svg)) {
    font-size: 0 !important;
}

:is(button[aria-label="Fermer"], .reboot-close, .patch-notes-close, .about-close, .commands-close, .staff-support-close):not(:has(svg))::before,
:is(button[aria-label="Fermer"], .reboot-close, .patch-notes-close, .about-close, .commands-close, .staff-support-close):not(:has(svg))::after {
    position: absolute;
    width: 17px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
}

:is(button[aria-label="Fermer"], .reboot-close, .patch-notes-close, .about-close, .commands-close, .staff-support-close):not(:has(svg))::before {
    transform: rotate(45deg);
}

:is(button[aria-label="Fermer"], .reboot-close, .patch-notes-close, .about-close, .commands-close, .staff-support-close):not(:has(svg))::after {
    transform: rotate(-45deg);
}

/* Le panier avait une ancienne règle avec un identifiant qui agrandissait sa
   fermeture. Elle doit rester strictement identique à la croix commune. */
#market-cart-panel button[aria-label="Fermer"],
#market-panel button[aria-label="Fermer"] {
    box-sizing: border-box !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    flex: 0 0 24px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 0 !important;
}

@media (max-width: 560px) {
    .client-alert-overlay .reboot-header {
        min-height: 58px;
        padding-left: 14px;
    }

    .client-alert-overlay .reboot-brand img {
        width: 108px;
    }

    .client-alert-overlay .reboot-brand strong {
        font-size: 10px;
    }

    .client-alert-overlay .reboot-content {
        padding: 17px 14px 15px;
    }

    .client-alert-overlay .client-alert-ok {
        width: 100%;
    }
}

/* Centre de minage — identité visuelle des fenêtres HabboRP. */
#miner-computer-panel { font-family: "Poppins", "Segoe UI", sans-serif; }
#miner-computer-panel .miner-computer-window {
    width: min(620px, calc(100vw - 28px));
    max-height: min(620px, calc(100vh - 28px));
    border: 2px solid #2e334d;
    border-radius: 11px;
    background: rgba(16,20,29,.94);
    box-shadow: 0 18px 45px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06);
    -webkit-backdrop-filter: blur(6px) saturate(145%);
    backdrop-filter: blur(6px) saturate(145%);
}
#miner-computer-panel .miner-computer-window > header {
    box-sizing: border-box;
    min-height: 62px;
    height: 62px;
    padding: 10px 15px 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(12,19,31,.38);
}
#miner-computer-panel .miner-computer-window > header span { gap: 11px; }
#miner-computer-panel .miner-computer-window > header span img { display:block; width:126px; height:auto; }
#miner-computer-panel .miner-computer-window > header span strong {
    color: #d9dce3;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
}
#miner-computer-panel .miner-computer-window > header button {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    padding: 0;
    border-radius: 6px;
    background: var(--hrp-red);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    cursor: pointer;
}
#miner-computer-panel .miner-computer-window > header button:hover { background: var(--hrp-red-hover); }
#miner-computer-panel .miner-computer-window > header button svg { width:17px; height:17px; }
#miner-computer-panel .miner-computer-tabs { gap:6px; padding:14px 16px 0; }
#miner-computer-panel .miner-computer-tabs button {
    min-height: 46px;
    padding: 0 12px;
    border-color: #303d57;
    border-radius: 9px;
    color: #929daf;
    background: rgba(8,13,22,.68);
    font: 700 10px Poppins, sans-serif;
}
#miner-computer-panel .miner-computer-tabs button.is-active {
    color: #171d27;
    border-color: var(--hrp-yellow);
    background: var(--hrp-yellow);
    box-shadow: 0 4px 12px rgba(255,196,0,.15);
}
#miner-computer-panel .miner-computer-summary { gap:8px; padding:12px 16px; }
#miner-computer-panel .miner-computer-summary article {
    min-height: 58px;
    justify-content: center;
    padding: 8px 10px;
    border-color: #303b51;
    border-radius: 9px;
    background: rgba(29,36,49,.8);
}
#miner-computer-panel .miner-computer-summary small,
#miner-computer-panel .miner-computer-card small { color:#9ca7b9; font-size:9px; }
#miner-computer-panel .miner-computer-summary strong { color:#58d989; font-size:14px; }
#miner-computer-panel .miner-computer-chart {
    height: 145px;
    margin: 0 16px 16px;
    padding: 10px;
    border-color: #303b51;
    border-radius: 9px;
    background: rgba(8,13,22,.62);
}
#miner-computer-panel .miner-computer-toolbar { padding:12px 16px 8px; }
#miner-computer-panel .miner-computer-list,
#miner-computer-panel .miner-computer-batteries {
    gap: 8px;
    padding: 4px 16px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--hrp-yellow) transparent;
}
#miner-computer-panel .miner-computer-card,
#miner-computer-panel .miner-computer-battery {
    border-color: #303b51;
    border-radius: 9px;
    background: rgba(29,36,49,.8);
}
#miner-computer-panel .miner-computer-card.is-active { border-color:rgba(48,174,91,.65); }
#miner-computer-panel .miner-computer-feedback { color:#9ca7b9; }
@media (max-width:720px) {
    #miner-computer-panel .miner-computer-window { width:min(620px, calc(100vw - 16px)); }
    #miner-computer-panel .miner-computer-window > header span img { width:112px; }
}

/* Golden Duck Bank — skin HabboRP Taxi/alertes (cascade finale). */
.bank-window { --bank-border:#34435f; --bank-surface:#1b2433; --bank-surface-soft:#111925; --bank-input:#0d1521; --bank-yellow:#ffc431; --bank-text:#f7f8fb; --bank-muted:#929db0; z-index:10060; width:500px; height:610px; border:2px solid var(--bank-border); border-radius:11px; background:rgba(16,20,29,.94); box-shadow:0 20px 55px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.06); -webkit-backdrop-filter:blur(6px) saturate(145%); backdrop-filter:blur(6px) saturate(145%); }
.bank-window-header { min-height:62px; height:62px; flex:0 0 62px; padding:10px 15px 10px 18px; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(15,19,28,.82); }
.bank-window-brand { display:flex; min-width:0; align-items:center; gap:9px; }
.bank-window-brand > img { width:32px; height:32px; padding:4px; border-radius:7px; background:rgba(23,31,43,.82); object-fit:contain; }
.bank-window-brand > strong { display:flex; align-items:center; font-family:"Roboto Condensed","Arial Narrow",sans-serif; font-size:19px; font-weight:900; letter-spacing:-.65px; text-shadow:none; }
.bank-window-brand > strong span:nth-child(2) { color:var(--bank-yellow); }
.bank-window-brand > strong span + span { margin-left:3px; }
.bank-window-brand > small { margin-left:2px; color:#d9dce3; font-size:11px; font-weight:700; }
.bank-window-header [data-bank-close] { width:29px; height:29px; border-radius:6px; background:rgba(207,32,23,.94); box-shadow:inset 0 -2px 0 rgba(99,7,5,.4),0 4px 12px rgba(0,0,0,.18); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.bank-window-body { padding:16px; background:#111823; }
.bank-pin-view { display:flex; height:100%; padding:28px 20px; flex-direction:column; align-items:center; border:1px solid #303e57; border-radius:11px; background:#141d2a; box-shadow:inset 0 1px 0 rgba(255,255,255,.025); }
.bank-pin-lock { display:grid; width:64px; height:64px; margin:1px 0 13px; place-items:center; color:var(--bank-yellow); font-size:26px; border:1px solid rgba(255,196,49,.2); border-radius:10px; background:rgba(255,196,49,.09); }
.bank-pin-view > strong { margin-bottom:9px; font-size:15px; }
.bank-pin-dots { margin-bottom:23px; }
.bank-pin-dots span { border-color:#71809a; background:#101722; }
.bank-pin-pad { grid-template-columns:repeat(3,66px); gap:9px; }
.bank-pin-pad button { height:49px; border-color:#34445f; border-radius:9px; background:#1b2638; box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 3px 7px rgba(0,0,0,.18); -webkit-backdrop-filter:none; backdrop-filter:none; }
.bank-pin-pad button:hover { color:#17202d; border-color:var(--bank-yellow); background:var(--bank-yellow); }
.bank-account-switch,.bank-wallet,.bank-change-pin-open,.bank-account-choice-layer [data-bank-account-options] > button,.bank-loan-card { border-color:#303b51; background:#1b2433; }
.bank-account-switch { border-left:3px solid var(--bank-yellow); }
.bank-tabs { gap:5px; padding:0; border:0; border-radius:0; background:transparent; }
.bank-tabs button { height:42px; color:#9aa5b7; border:1px solid #303b51; border-radius:8px; background:#182130; }
.bank-tabs button:hover:not(.is-active) { background:#202b3b; }
.bank-tabs button.is-active { color:#141a22; border-color:var(--bank-yellow); background:var(--bank-yellow); box-shadow:none; }
.bank-card { border-color:rgba(255,196,49,.42); background:linear-gradient(125deg,#24291f 0 24%,#1a2230 24% 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 7px 18px rgba(0,0,0,.2); }
.bank-loans-panel,.bank-beneficiary-book { border-color:#303b51; background:#151e2b; }
.bank-window input { border-color:#34445f; background:#0d1521; box-shadow:inset 0 1px 5px rgba(0,0,0,.22); }
.bank-amount-row button,.bank-loan-repay button:last-child { border-color:#34445f; background:#1b2638; }
.bank-operation-actions [data-bank-command="depot"],.bank-operation-actions [data-bank-command="retrait"],.bank-transfer-panel > button { color:#171d25; background:var(--bank-yellow); }
.bank-account-choice-layer,.bank-change-pin-layer { background:rgba(5,9,16,.62); -webkit-backdrop-filter:blur(9px) saturate(125%); backdrop-filter:blur(9px) saturate(125%); }
.bank-account-choice-layer > section,.bank-change-pin-layer form { border-color:#34445f; background:#151e2b; }
@media (max-width:560px) { .bank-window { width:calc(100vw - 20px); height:calc(100vh - 20px); } .bank-window-brand > small { display:none; } }

/* Poste Golden Duck Bank — même skin que Banque / Taxi / alertes. */
.bank-workstation,.bank-workstation.is-account-detail { z-index:10060; width:min(760px,calc(100vw - 28px)); border:2px solid #2e3a57; border-radius:11px; background:#10151fe0; box-shadow:0 24px 55px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05); -webkit-backdrop-filter:blur(8px) saturate(135%); backdrop-filter:blur(4px); }
.bank-workstation-header { min-height:66px; height:66px; flex:0 0 66px; padding:10px 15px 10px 18px; border-bottom:1px solid rgba(255,255,255,.07); background:transparent; }
.bank-workstation-title { gap:12px; }
.bank-workstation-title > img { display:block; width:126px; height:auto; padding:0; border-radius:0; background:transparent; }
.bank-workstation-title strong { display:block; color:#dce0e8; font:800 14px/1 Poppins,sans-serif; letter-spacing:0; }
.bank-workstation-header > button { width:29px; height:29px; border-radius:6px; background:rgba(207,32,23,.94); box-shadow:inset 0 -2px 0 rgba(99,7,5,.4),0 4px 12px rgba(0,0,0,.18); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.bank-workstation-header > button svg { width:16px; height:16px; }
.bank-workstation-body { margin-top:-1px;padding:12px 16px 16px!important; background:rgba(17,24,35,.72); }
.bank-workstation:not(.is-account-detail) .bank-workstation-panel[data-bank-workstation-panel="dashboard"] { margin-top:0!important;padding-top:0!important; }
.bank-workstation-welcome { margin-top:0!important;border-radius:11px; }
.bank-workstation-tabs,.bank-workstation-tabs.can-configure { gap:7px; padding:0 20px; border:0; background:transparent; }
.bank-workstation-tabs button { min-width:0;min-height:39px;height:39px;padding:9px 18px;color:#e4e7ec;border:1px solid #3b4658;border-bottom:0;border-radius:7px 7px 0 0;background:rgba(37,44,54,.94);box-shadow:0 -2px 8px rgba(0,0,0,.33);font:700 12px Poppins,sans-serif; }
.bank-workstation-tabs button.is-active { color:#171a20;border-color:#e5b600;background:#ffca18;box-shadow:0 -2px 8px rgba(0,0,0,.33); }
.bank-workstation :where(button,input,textarea,select,strong,b,small,span,p,em,time,label) { font-family:"Poppins","Segoe UI",sans-serif!important; }
.bank-workstation .bank-workstation-title strong { font-size:14px!important;line-height:1!important; }
.bank-workstation .bank-workstation-tabs button { font-size:12px!important;font-weight:700!important; }
.bank-workstation .bank-workstation-welcome small,.bank-workstation .bank-workstation-stats article>span { font-size:9px!important; }
.bank-workstation .bank-workstation-welcome strong { font-size:19px!important; }
.bank-workstation .bank-workstation-stats article>strong { font-size:16px!important; }
.bank-workstation .bank-workstation-volume span { font-size:11px!important; }
.bank-workstation .bank-workstation-volume strong { font-size:20px!important; }
.bank-workstation-welcome,.bank-workstation-settings-intro { border-color:rgba(255,196,49,.42); background:linear-gradient(125deg,#24291f 0 24%,#1a2230 24% 100%); }
.bank-workstation-stats article,.bank-workstation-volume,.bank-workstation-settings form > label:not(.bank-workstation-setting-switch),.bank-workstation-account,.bank-workstation-transaction,.bank-workstation-detail-balances article,.bank-workstation-detail-chart,.bank-workstation-credit-item { border-color:#303b51; background:#1b2433; }
.bank-workstation-search,.bank-workstation-settings form input[type="number"],.bank-workstation-transfer-panel form input,.bank-workstation-credit-panel form input { border-color:#34445f; background:#0d1521; }
.bank-workstation-detail-tabs { border-color:#303b51; background:#151e2b; }
.bank-workstation-detail-tabs button.is-active { color:#141a22; background:#ffc431; }
.bank-workstation .bank-workstation-locker>header strong{font-size:12px!important}.bank-workstation .bank-workstation-locker>header small{font-size:9px!important}.bank-workstation .bank-workstation-locker-items strong{font-size:9px!important}.bank-workstation .bank-workstation-locker-items small{font-size:7px!important}.bank-workstation .bank-workstation-locker-items b{font-size:10px!important}.bank-workstation .bank-workstation-locker-empty{font-size:10px!important}

/* ---------- Page de bannissement bloquant ---------- */
.ban-page {
    --ban-hrp-width: 419px;
    --ban-hrp-width-mobile: 240px;
    --ban-hrp-opacity: .15;
    min-height: 100vh;
    margin: 0;
    color: #fff;
    background: #850c16 !important;
    font-family: "Poppins", sans-serif;
}
.ban-page * { font-family: "DM Sans", sans-serif; }
.ban-page::before {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0;
    background-image: url(../img/maintenance/logo_sansfondx2.svg);
    background-repeat: repeat-y;
    background-position: right top;
    background-size: var(--ban-hrp-width) auto;
    opacity: var(--ban-hrp-opacity);
    pointer-events: none;
}
.ban-page-main {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-height: 100vh;
    align-items: center;
    padding: 40px 20px;
}
.ban-page-card {
    width: min(66vw, 720px);
    margin-left: clamp(36px, 18.55vw, 356px);
    padding: 42px 32px 42px 0;
    text-align: left;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.ban-page-logo { display: block; width: 190px; height: auto; margin: 0 0 28px; }
.ban-page-type {
    display: inline-flex;
    padding: 6px 11px;
    color: #ffb9bc;
    border: 1px solid rgba(255,125,131,.27);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.ban-page-card h1 { margin: 16px 0 10px; font-size: clamp(30px, 5vw, 43px); letter-spacing: -.04em; }
.ban-page-description { max-width: 500px; margin: 0 0 25px; color: #d9bdc1; line-height: 1.65; }
.ban-page-details { display: grid; gap: 10px; margin: 0; text-align: left; }
.ban-page-details > div { padding: 15px 17px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; }
.ban-page-details dt { margin-bottom: 5px; color: #c99399; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.ban-page-details dd { margin: 0; color: #fff; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.ban-page-help { margin: 20px 0 0; color: #bf9ba0; font-size: 12px; }
.ban-page-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.ban-page-actions a { display: inline-flex; min-height: 45px; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; color: #2a070a; border-radius: 9px; background: #fff; font-weight: 800; text-decoration: none; }
.ban-page-actions a.is-secondary { color: #fff; border: 1px solid rgba(255,255,255,.14); background: #ffffff00; }
.ban-page-actions a:hover { color: #2a070a; filter: brightness(.94); }
.ban-page-actions a.is-secondary:hover { color: #fff; background: rgba(255,255,255,.12); }
@media (max-width: 560px) {
    .ban-page-main { justify-content: center; padding: 18px 12px; }
    .ban-page-card { width: min(100%, 600px); margin: 0; padding: 30px 19px; text-align: center; }
    .ban-page-logo { margin-right: auto; margin-left: auto; }
    .ban-page-description { margin-right: auto; margin-left: auto; }
    .ban-page-actions { grid-template-columns: 1fr; }
    .ban-page::before { background-size: var(--ban-hrp-width-mobile) auto; }
}
.rp-inventory-panel {
    position: fixed;
    z-index: 10070;
    top: 96px;
    right: 24px;
    width: 164px;
    max-height: min(520px, calc(100vh - 90px));
    overflow: hidden;
    border: 2px solid #34405a;
    border-radius: 8px;
    background: rgba(23, 33, 49, .94);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.38);
    font-family: "DM Sans", sans-serif;
    backdrop-filter: blur(4px);
}

.rp-inventory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    padding: 0 4px 0 9px;
    background: transparent;
    border-bottom: 1px solid #34405a;
    cursor: move;
    user-select: none;
    touch-action: none;
}

.rp-inventory-header > div { display: flex; align-items: center; gap: 5px; }
.rp-inventory-header strong { font-size: 13px; color: #fff; text-shadow: 0 1px #000; }
.rp-inventory-header > div > i { display: none; }
.rp-inventory-header-actions { gap: 3px !important; }
.rp-inventory-header-actions button {
    width: 23px;
    height: 23px;
    padding: 0;
    border: 1px solid #17191a;
    border-radius: 5px;
    background: #27344a;
    color: #fff;
    font-size: 15px;
}
.rp-inventory-header-actions [data-rp-inventory-refresh] { display: none; }
.rp-inventory-header-actions button:last-child { background: #cf1717; border-color: #ef4444; }
.rp-inventory-status { padding: 18px 7px; color: #bbb; font-size: 11px; text-align: center; font-weight: 700; }
.rp-inventory-quick {
    display: grid;
    grid-template-columns: repeat(2, 60px);
    grid-auto-rows: 60px;
    justify-content: center;
    gap: 5px;
    padding: 7px 5px;
    border-bottom: 2px solid #34405a;
}
.rp-inventory-drop,
.rp-inventory-empty {
    display: block;
    width: 60px;
    height: 60px;
    border: 2px solid #3c4960;
    border-radius: 5px;
    background: rgba(12,18,28,.28);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.rp-inventory-drop { position: relative; }
.rp-inventory-drop::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px dashed rgba(139,151,174,.24);
    border-radius: 3px;
}
.rp-inventory-quick:has(.rp-inventory-drop:hover) .rp-inventory-drop:hover { border-color: #ffc431; background: rgba(255,196,49,.08); }
.rp-inventory-equipped { position:relative;display:grid;width:60px;height:60px;place-items:center;border:2px solid #d9ad18;border-radius:5px;background:#202b3d;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); }
.rp-inventory-equipped-temporary { cursor:context-menu; }
.rp-inventory-equipped img { max-width:46px;max-height:46px; }
.rp-inventory-equipped b { position:absolute;right:2px;bottom:1px;padding:1px 3px;border-radius:3px;background:rgba(8,13,22,.85);color:#fff;font:800 9px/1.2 Poppins,sans-serif; }

.rp-inventory-grid {
    display: grid;
    grid-template-columns: repeat(2, 60px);
    grid-auto-rows: 60px;
    justify-content: center;
    gap: 5px;
    max-height: none;
    padding: 7px 5px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.rp-inventory-item {
    position: relative;
    width: 60px;
    height: 60px;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 2px;
    border: 1px solid #3c4960;
    border-radius: 6px;
    background: #202b3d;
    box-shadow: inset 0 1px rgba(255,255,255,.04);
    cursor: pointer;
}
.rp-inventory-item:hover { transform: none; filter: brightness(1.18); border-color: #e2b500; }
.rp-inventory-item.is-using { pointer-events: none; border-color: #ffc431; filter: brightness(1.25); }
.rp-inventory-item.is-ammo-target { border-color:#53df7c;box-shadow:0 0 0 2px rgba(83,223,124,.3),inset 0 1px rgba(255,255,255,.04); }
.rp-inventory-item.is-broken { filter:grayscale(1);opacity:.48;cursor:not-allowed; }
.rp-inventory-item.is-broken:hover { filter:grayscale(1);border-color:#46536b; }
.rp-weapon-durability { position:absolute;left:4px;right:4px;bottom:3px;height:5px;overflow:hidden;border:1px solid #101722;border-radius:4px;background:#67242b;box-shadow:0 1px 2px rgba(0,0,0,.4); }
.rp-weapon-durability i { display:block;height:100%;background:linear-gradient(90deg,#25aa55,#55d878);transition:width .18s ease; }
.rp-weapon-skins { position:fixed;z-index:10075;width:230px;overflow:hidden;border:2px solid #34405a;border-radius:8px;background:rgba(23,33,49,.97);box-shadow:0 8px 22px rgba(0,0,0,.42);color:#fff;font-family:"DM Sans",sans-serif; }
.rp-weapon-skins[hidden] { display:none; }
.rp-weapon-skins header { display:flex;height:34px;align-items:center;justify-content:space-between;padding:0 6px 0 10px;border-bottom:1px solid #34405a; }
.rp-weapon-skins header strong { font-size:13px; }
.rp-weapon-skins header strong b { color:#ffc431;font-size:11px; }
.rp-weapon-skins header button { width:23px;height:23px;padding:0;border:1px solid #ef4444;border-radius:5px;background:#cf1717;color:#fff; }
.rp-weapon-skins > div { display:grid;gap:6px;max-height:min(650px,calc(100vh - 90px));padding:8px;overflow-y:auto;scrollbar-width:thin; }
.rp-weapon-skins p { margin:8px;color:#aeb9ca;font-size:11px;text-align:center; }
.rp-weapon-skin { position:relative;display:grid;grid-template-columns:48px 1fr 20px;align-items:center;gap:8px;overflow:hidden;padding:6px;border:1px solid #3c4960;border-radius:7px;background:#202b3d;color:#fff;text-align:left;cursor:pointer;isolation:isolate; }
.rp-weapon-skin > * { position:relative;z-index:1; }
.rp-weapon-skin:hover,.rp-weapon-skin.is-selected { border-color:#ffc431; }
.rp-weapon-skin:not(.has-feature-background):hover,.rp-weapon-skin:not(.has-feature-background).is-selected { background:#263248; }
.rp-weapon-skin-visual { position:relative;display:grid;width:48px;height:48px;place-items:center;overflow:hidden;border-radius:5px;background:#172235; }
.rp-weapon-skin img { position:relative;z-index:1;width:44px;height:44px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7)); }
.rp-weapon-skin span { font-size:12px;font-weight:800; }
.rp-weapon-skin > i { color:#ffc431;font-size:18px; }
.rp-weapon-ammo-info { display:flex;align-items:center;gap:7px;margin:3px;padding:7px 8px;border-top:1px solid #34405a;color:#ffc431;font:800 10px/1.2 "Poppins",sans-serif;white-space:nowrap; }
.rp-weapon-ammo-info[hidden] { display:none; }
.rp-ammo-loader { position:fixed;z-index:10130;inset:0;display:block;background:transparent; }
.rp-ammo-loader[hidden] { display:none; }
.rp-ammo-loader form { position:fixed;display:grid;grid-template-columns:76px 31px;grid-template-areas:'title title' 'input confirm' 'back back';gap:4px;width:129px;box-sizing:border-box;padding:5px;border:1px solid #46536b;border-radius:7px;background:#182132;box-shadow:0 8px 22px rgba(0,0,0,.48);color:#fff;font-family:"Poppins",sans-serif; }
.rp-ammo-loader strong { grid-area:title;display:block;margin:0;font-size:10px;white-space:nowrap; }
.rp-ammo-loader p { display:none; }
.rp-ammo-loader input { grid-area:input;width:76px;height:31px;box-sizing:border-box;padding:6px;border:1px solid #ffc431;border-radius:5px;background:#101827;color:#fff;font:700 12px/1 "Poppins",sans-serif;outline:none; }
.rp-ammo-loader input:focus { border-color:#ffc431; }
.rp-ammo-loader form > div { display:contents; }
.rp-ammo-loader button { padding:5px 7px;border:0;border-radius:5px;background:transparent;color:#aeb9ca;font-size:9px;font-weight:800;cursor:pointer; }
.rp-ammo-loader [data-rp-ammo-cancel] { grid-area:back;display:flex;align-items:center;gap:4px;justify-self:start;padding:2px 5px; }
.rp-ammo-loader [data-rp-ammo-cancel] i { font-size:11px;line-height:1; }
.rp-ammo-loader [data-rp-ammo-cancel]:hover { width:100%;justify-self:stretch;background:#ffc431;color:#192132; }
.rp-ammo-loader button[type="submit"] { grid-area:confirm;width:31px;height:31px;box-sizing:border-box;padding:0;border-color:#ffc431;background:#ffc431;color:#192132;font-size:0; }
.rp-ammo-loader button[type="submit"]::after { content:'\2713';font-size:13px; }
.rp-inventory-shortcut { width: 60px; height: 60px; }
.rp-inventory-tooltip {
    position: fixed;
    z-index: 10100;
    width: max-content;
    max-width: 170px;
    padding: 6px 9px;
    border: 1px solid #41495b;
    border-radius: 6px;
    background: #202738;
    box-shadow: 0 4px 12px rgba(0,0,0,.35);
    color: #fff;
    font: 700 12px/1.2 "Poppins", sans-serif;
    pointer-events: none;
}
.rp-inventory-context-menu { position:fixed;z-index:10110;min-width:118px;overflow:hidden;padding:4px;border:1px solid #46536b;border-radius:7px;background:#182132;box-shadow:0 8px 22px rgba(0,0,0,.48); }
.rp-inventory-context-menu[hidden] { display:none; }
.rp-inventory-context-menu button { display:flex;width:100%;align-items:center;gap:7px;padding:7px 9px;border:0;border-radius:5px;background:transparent;color:#eef3fb;font:700 11px/1.2 "Poppins",sans-serif;text-align:left;cursor:pointer; }
.rp-inventory-context-menu button:hover { background:#ffc431;color:#192132; }
.rp-inventory-context-menu button:disabled { opacity:.4;pointer-events:none; }
.rp-inventory-context-menu button i { width:15px;font-size:14px; }
.rp-inventory-context-menu [hidden] { display:none !important; }
.rp-inventory-context-menu form { padding:5px; }
.rp-inventory-context-menu form label { display:block;margin-bottom:5px;color:#dfe7f3;font:700 10px/1.2 "Poppins",sans-serif; }
.rp-inventory-context-menu form > div { display:flex;gap:4px; }
.rp-inventory-context-menu form input { width:76px;padding:6px;border:1px solid #4a5871;border-radius:5px;background:#101827;color:#fff;font:700 12px/1 "Poppins",sans-serif;outline:none; }
.rp-inventory-context-menu form input:focus { border-color:#ffc431;box-shadow:0 0 0 2px rgba(255,196,49,.16); }
.rp-inventory-context-menu form > div button { width:31px;justify-content:center;padding:6px;background:#ffc431;color:#192132; }
.rp-inventory-context-menu [data-rp-context-back] { margin-top:4px;padding:5px 6px;color:#aeb9ca;font-size:9px; }
.rp-inventory-picture { width: 50px; height: 50px; display: grid; place-items: center; }
.rp-inventory-picture img { max-width: 46px; max-height: 46px; image-rendering: auto; }
.rp-inventory-name { display: none; }
.rp-inventory-quantity {
    position: absolute;
    right: 2px;
    top: 1px;
    bottom: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 12px;
    text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111;
}

@media (max-width: 600px) {
    .rp-inventory-panel { width: 164px; right: 8px; top: 80px; }
    .rp-inventory-grid { gap: 5px; padding: 7px 5px 10px; }
    .rp-inventory-item { min-height: 0; }
}
.rp-inventory-item.is-repairing{pointer-events:none;filter:grayscale(1);opacity:.58}
.rp-inventory-status{display:none!important}
.rp-pet-companion-slot{position:relative;cursor:default!important;user-select:none}.rp-pet-companion-slot>img:first-child{max-width:52px;max-height:52px;object-fit:contain;image-rendering:pixelated;pointer-events:none}.rp-pet-companion-slot .rp-pet-companion-armor{position:absolute;right:2px;bottom:2px;width:18px;height:18px;object-fit:contain;background:#111827;border:1px solid #ffc107;border-radius:4px;padding:1px;pointer-events:none}

/* Armurerie */
.weapon-shop-overlay,
.weapon-shop-overlay * { box-sizing: border-box; font-family: Poppins, "Segoe UI", sans-serif; }
.weapon-shop-overlay { position: fixed; inset: 0; z-index: 10030; pointer-events: none; color: #f7f8fb; font-size: 14px; }
.weapon-shop-quantity-overlay { position: fixed; inset: 0; z-index: 10040; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .48); font-family: Poppins, "Segoe UI", sans-serif; }
.weapon-shop-quantity-overlay[hidden] { display: none; }
.weapon-shop-quantity-window { width: min(360px, calc(100vw - 32px)); overflow: hidden; border: 1px solid #34415a; border-radius: 10px; background: #10151f; color: #f7f8fb; box-shadow: 0 18px 48px rgba(0, 0, 0, .55); }
.weapon-shop-quantity-window header { padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 14px; }
.weapon-shop-quantity-content { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; }
.weapon-shop-quantity-content label { color: #cfd5e1; font-size: 12px; font-weight: 700; }
.weapon-shop-quantity-content input { width: 120px; height: 38px; padding: 0 11px; border: 1px solid #3b4658; border-radius: 7px; outline: 0; background: #171d27; color: #fff; font: 700 14px Poppins, sans-serif; }
.weapon-shop-quantity-content input:focus { border-color: #ffca18; box-shadow: 0 0 0 2px rgba(255, 202, 24, .14); }
.weapon-shop-quantity-window footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 18px 18px; }
.weapon-shop-quantity-window footer button { min-height: 38px; border: 1px solid #ffca18; border-radius: 7px; font: 800 12px Poppins, sans-serif; cursor: pointer; }
.weapon-shop-quantity-window .is-refuse { background: transparent; color: #ffca18; }
.weapon-shop-quantity-window .is-confirm { background: #ffca18; color: #171a20; }
.admin-online-bonus-form { overflow: hidden; }
.admin-online-bonus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 20px; }
.admin-online-bonus-grid > label:not(.admin-online-bonus-toggle) { display: grid; gap: 7px; padding: 16px; border: 1px solid #30405a; border-radius: 10px; background: #1b2639; }
.admin-online-bonus-grid label > span { color: #f4f6fa; font-size: 12px; font-weight: 800; }
.admin-online-bonus-grid label > span i { margin-right: 7px; color: #ffc619; }
.admin-online-bonus-grid label > small { color: #91a0b8; font-size: 11px; }
.admin-online-bonus-grid label > div { display: flex; align-items: center; overflow: hidden; border: 1px solid #34445e; border-radius: 8px; background: #111b2a; }
.admin-online-bonus-grid label > div input { min-width: 0; height: 42px; flex: 1; padding: 0 12px; border: 0; outline: 0; background: transparent; color: #fff; font: 500 14px Poppins, sans-serif; }
.admin-online-bonus-grid label > div b { padding: 0 12px; color: #7890b2; font-size: 10px; }
.admin-online-bonus-toggle { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid #30405a; border-radius: 10px; background: #1b2639; }
.admin-online-bonus-toggle > span { display: grid; grid-template-columns: auto 1fr; align-items: center; }
.admin-online-bonus-toggle > span i { grid-row: 1 / 3; }
.admin-online-bonus-toggle > span small { color: #91a0b8; font-size: 11px; font-weight: 400; }
.admin-online-bonus-toggle > input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.admin-online-bonus-toggle > i { position: relative; width: 48px; height: 28px; flex: 0 0 48px; border-radius: 999px; background: #516078; transition: background .15s ease; }
.admin-online-bonus-toggle > i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.admin-online-bonus-toggle > input:checked + i { background: #2cbd6f; }
.admin-online-bonus-toggle > input:checked + i::after { transform: translateX(20px); }
@media (max-width: 760px) { .admin-online-bonus-grid { grid-template-columns: 1fr; } }
body:not(.game-mode) .weapon-shop-overlay { display: none !important; }
.weapon-shop-window { pointer-events: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(700px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; background: #10151fe0; border: 1px solid #34415a; border-radius: 10px; box-shadow: 0 16px 48px #000b; backdrop-filter: blur(4px);}
.weapon-shop-header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 10px 15px 10px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); cursor: move; }
.weapon-shop-brand { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 800; }
.weapon-shop-brand img { display: block; width: 126px; height: auto; }
.weapon-shop-brand span { color: #cfd5e1; }
.weapon-shop-header button { width: 29px; height: 29px; padding: 0; border: 0; border-radius: 6px; background: #d21912; color: #fff; font-size: 21px; line-height: 27px; font-weight: 700; }
.weapon-shop-hero { position: relative; height: 127px; background: #202734 url("../img/background_arm_01.png") center / cover no-repeat; border-bottom: 1px solid #202938; }
.weapon-shop-hero::before { content: ""; position: absolute; inset: 0; background: #0000007d; pointer-events: none; }
.weapon-shop-tabs { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: flex-end; gap: 7px; padding: 0 20px; }
.weapon-shop-tabs button { padding: 9px 15px; border: 1px solid #3b4658; border-bottom: 0; border-radius: 7px 7px 0 0; background: #252c36ef; color: #e4e7ec; font-size: 12px; font-weight: 700; box-shadow: 0 -2px 8px #0005; }
.weapon-shop-tabs button.is-active { border-color: #e5b600; background: #ffca18; color: #171a20; }
.weapon-shop-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 9px; height: 315px; padding: 14px 20px 17px; overflow-y: auto; }
.weapon-shop-card { display: flex; flex-direction: column; min-height: 250px; background: #171d27; border: 1px solid #2b3546; border-radius: 8px; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.weapon-shop-card:hover { border-color: #ffca18; box-shadow: 0 0 0 1px rgba(255, 202, 24, .2), 0 6px 18px rgba(0, 0, 0, .25); }
.weapon-shop-picture { position: relative; height: 88px; display: grid; place-items: center; background: linear-gradient(145deg, #242d3c, #151b25); }
.weapon-shop-picture img { max-width: 88px; max-height: 65px; }
.weapon-shop-price { position: absolute; left: 7px; top: 7px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border-radius: 5px; background: #0e131c; color: #ffcf24; font-size: 12px; font-weight: 800; }
.weapon-shop-price img { object-fit: contain; }
.weapon-shop-card-body { display: flex; flex: 1; flex-direction: column; padding: 10px; }
.weapon-shop-title-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.weapon-shop-card h3 { margin: 0; font-size: 14px; line-height: 1.3; }
.weapon-shop-stock { display: inline-flex; align-items: center; gap: 3px; color: #fff; font-size: 12px; font-weight: 700; }
.weapon-shop-stock img { object-fit: contain; }
.weapon-shop-kind { margin: 2px 0 8px; color: #6f7d91; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.weapon-shop-stats { display: grid; gap: 4px; margin-bottom: 10px; }
.weapon-shop-stat { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 5px; min-height: 20px; color: #aeb7c5; font-size: 12px; }
.weapon-shop-stat i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 5px; background: rgba(255, 255, 255, .08); }
.weapon-shop-stat i img { max-width: 15px; max-height: 15px; object-fit: contain; }
.weapon-shop-stat i .ti { color: #e7ebf2; font-size: 14px; font-style: normal; line-height: 1; }
.weapon-shop-stat b { color: #fff; text-align: right; }
.weapon-shop-buy { margin-top: auto; height: 32px; border: 1px solid #ffca18; border-radius: 6px; background: #171d27; color: #ffca18; font-size: 14px; font-weight: 800; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.weapon-shop-buy:hover { background: #ffca18; color: #171a20; box-shadow: 0 0 0 1px rgba(255, 202, 24, .2); }
.weapon-shop-buy:disabled { opacity: .55; }
.weapon-shop-card.is-sold-out { opacity: .72; }
.weapon-shop-feedback { margin: 10px 20px 0; padding: 8px 10px; border-radius: 7px; background: #173522; color: #75e890; font-size: 12px; }
.weapon-shop-feedback.is-error { background: #3b1b20; color: #ff919b; }
.weapon-craft-window { pointer-events: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); overflow: hidden; background: #10151f; border: 1px solid #34415a; border-radius: 10px; box-shadow: 0 16px 48px #000b; }
.weapon-craft-content { padding: 18px; }
.weapon-craft-content h2 { margin: 0 0 3px; font-size: 18px; }
.weapon-craft-content > p { margin: 0 0 16px; color: #8995a8; font-size: 12px; }
.weapon-craft-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.weapon-craft-products button { display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto auto; align-items: center; gap: 2px 10px; min-height: 96px; padding: 10px; border: 1px solid #34415a; border-radius: 8px; background: #171d27; color: #fff; text-align: left; }
.weapon-craft-products button:hover { border-color: #ffca18; box-shadow: 0 0 0 1px rgba(255,202,24,.18); }
.weapon-craft-products img { grid-row: 1 / 4; max-width: 58px; max-height: 58px; image-rendering: pixelated; }
.weapon-craft-products strong { font-size: 14px; }
.weapon-craft-products span { color: #aeb7c5; font-size: 12px; }
.weapon-craft-products span i { margin-right: 5px; color: #ffca18; }
.weapon-craft-progress { display: grid; justify-items: center; gap: 8px; padding: 12px; text-align: center; }
.weapon-craft-progress > img { max-width: 90px; max-height: 70px; image-rendering: pixelated; }
.weapon-craft-progress > strong { font-size: 17px; }
.weapon-craft-progress > span { color: #aeb7c5; font-size: 12px; }
.weapon-craft-progress > i { width: 100%; height: 9px; overflow: hidden; border-radius: 10px; background: #252d3a; }
.weapon-craft-progress > i b { display: block; height: 100%; border-radius: inherit; background: #ffca18; transition: width .4s ease; }
.weapon-sale-request-window { pointer-events: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(430px, calc(100vw - 32px)); overflow: hidden; background: #10151f; border: 1px solid #34415a; border-radius: 10px; box-shadow: 0 16px 48px #000b; }
.weapon-sale-request-window [data-sale-request-content] { padding: 20px; text-align: center; }
.weapon-sale-request-icon { display: grid; width: 48px; height: 48px; margin: 0 auto 10px; place-items: center; border-radius: 50%; background: #ffca1818; color: #ffca18; font-size: 25px; }
.weapon-sale-request-window h2 { margin: 0 0 8px; font-size: 18px; }
.weapon-sale-request-window [data-sale-request-content] > strong { display: block; color: #ffca18; font-size: 15px; }
.weapon-sale-request-window [data-sale-request-content] > p { margin: 5px 0 18px; color: #aeb7c5; font-size: 12px; }
.weapon-sale-request-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }
.weapon-sale-request-actions button { height: 36px; border: 1px solid #ffca18; border-radius: 6px; background: #171d27; color: #ffca18; font-size: 13px; font-weight: 800; }
.weapon-sale-request-actions button:last-child { background: #ffca18; color: #171a20; }

@media (max-width: 720px) {
    .weapon-shop-window { width: min(620px, calc(100vw - 24px)); }
    .weapon-shop-products { grid-template-columns: repeat(2, 1fr); }
    .weapon-shop-tabs,
    .weapon-shop-products { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 430px) {
    .weapon-shop-products { grid-template-columns: 1fr; }
    .weapon-shop-brand span { display: none; }
}
.admin-trash-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:20px}.admin-trash-settings>label,.admin-trash-reward{padding:16px;border:1px solid #30405a;border-radius:14px;background:#182335}.admin-trash-settings label>span,.admin-trash-reward-grid label>span{display:block;margin-bottom:8px;font-weight:700}.admin-trash-settings label>div,.admin-trash-reward-grid label>div{display:flex;align-items:center;border:1px solid #30405a;border-radius:9px;overflow:hidden;background:#111b2b}.admin-trash-settings input,.admin-trash-reward input,.admin-trash-reward select{width:100%;min-height:42px;padding:9px 11px;border:1px solid #30405a;border-radius:9px;background:#111b2b;color:#fff}.admin-trash-settings label>div input,.admin-trash-reward-grid label>div input{border:0}.admin-trash-settings b,.admin-trash-reward-grid b{padding:0 12px;color:#8fa3c3;font-size:12px}.admin-trash-settings .admin-online-bonus-toggle{grid-column:1/-1}.admin-trash-loot{padding:0 20px 20px}.admin-trash-loot>header{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}.admin-trash-loot h3{margin:0}.admin-trash-loot p{margin:4px 0 0;color:#93a2ba}.admin-trash-chance{color:#ffcc19;font-weight:700}.admin-trash-rewards{display:grid;gap:14px}.admin-trash-reward.is-new{border-style:dashed;border-color:#ffcc19}.admin-trash-reward-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.admin-trash-reward-title label,.admin-trash-reward-enabled{display:flex!important;align-items:center;gap:8px}.admin-trash-reward-title input,.admin-trash-reward-enabled input{width:18px;height:18px;min-height:0}.admin-trash-reward-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.admin-trash-reward-enabled{align-self:end;min-height:42px}@media(max-width:900px){.admin-trash-settings,.admin-trash-reward-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.admin-trash-settings,.admin-trash-reward-grid{grid-template-columns:1fr}.admin-trash-loot>header{align-items:flex-start;gap:10px;flex-direction:column}}
.admin-trash-settings .admin-online-bonus-toggle > span { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:8px; margin:0; }
.admin-trash-settings .admin-online-bonus-toggle > span > i { grid-row:1/3; }
.admin-trash-settings .admin-online-bonus-toggle > span > strong { display:block; grid-column:2; line-height:1.35; }
.admin-trash-settings .admin-online-bonus-toggle > span > small { display:block; grid-column:2; margin-top:3px; color:#91a0b8; font-size:11px; font-weight:400; line-height:1.4; }
#police-prison-overlay,#police-prison-overlay * { font-family:"Poppins","Segoe UI",sans-serif; }
body:not(.game-mode) #police-prison-overlay { display:none!important; }
#police-prison-overlay .vending-purchase-dialog { width:min(560px,calc(100vw - 28px)); overflow:hidden; border:2px solid #2e334d; border-radius:11px; background:rgba(16,20,29,.94); box-shadow:0 18px 45px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(6px) saturate(145%); }
#police-prison-overlay .reboot-header { min-height:62px; padding:10px 15px 10px 18px; border-bottom:1px solid rgba(255,255,255,.07); }
#police-prison-overlay .reboot-header { cursor:grab; touch-action:none; user-select:none; }
#police-prison-overlay .reboot-header:active { cursor:grabbing; }
#police-prison-overlay .reboot-brand { display:flex; align-items:center; gap:11px; }
#police-prison-overlay .reboot-brand img { display:block; width:126px; height:auto; }
#police-prison-overlay .reboot-brand strong { color:#d9dce3; font-size:13px; font-weight:700; }
#police-prison-overlay .reboot-content { display:block; padding:20px; text-align:left; }
#police-prison-overlay .reboot-message { display:block; width:100%; min-height:0; margin:0 0 15px; padding:0; color:#d8dbe2; font-size:12px; line-height:1.55; font-weight:500; text-align:left; }
#police-prison-overlay .police-prison-actions { grid-template-columns:minmax(190px,1.4fr) repeat(2,minmax(0,1fr)); }
#police-prison-overlay .vending-purchase-quantity input { width:120px; }
.police-prison-feedback { display:block; min-height:18px; margin-top:10px; color:#aeb8cb; font-size:11px; }