.fhdu-board,
.fhdu-board * {
 box-sizing: border-box;
}

.fhdu-board {
 --gold: #d9b54b;

 position: relative;
 width: 100%;
 padding: 16px;

 color: #d8dbe0;
 background:
 radial-gradient(
 circle at 0 0,
 rgba(217,181,75,.1),
 transparent 34%
 ),
 linear-gradient(180deg,#15171b,#090b0e);

 border: 1px solid rgba(217,181,75,.2);
 border-radius: 16px;

 box-shadow:
 0 18px 38px rgba(0,0,0,.27),
 inset 0 1px 0 rgba(255,255,255,.035);

 overflow: hidden;
}

.fhdu-board::before {
 content: "";
 position: absolute;
 top: 0;
 left: 17px;
 width: 80px;
 height: 2px;
 background: linear-gradient(90deg,#f4d66d,#a87b1e,transparent);
}

.fhdu-source {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
 margin-top: 12px;
}

.fhdu-board.is-ready .fhdu-source {
 display: none;
}

.fhdu-source-user {
 display: inline-flex !important;
 padding: 5px 8px !important;
 color: #aeb3bb !important;
 background: rgba(255,255,255,.04) !important;
 border: 1px solid rgba(255,255,255,.07) !important;
 border-radius: 999px;
 font-size: 8px !important;
 text-decoration: none !important;
}

.fhdu-source-user::before,
.fhdu-source-user::after {
 content: none !important;
}

/* HEADER */

.fhdu-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding-bottom: 15px;
 border-bottom: 1px solid rgba(255,255,255,.065);
}

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

.fhdu-header-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 41px;
 height: 41px;
 flex: 0 0 41px;
 color: #111;
 background: linear-gradient(145deg,#f5d873,#d4a137);
 border: 1px solid rgba(255,231,145,.7);
 border-radius: 12px;
 box-shadow: 0 8px 20px rgba(217,181,75,.16);
}

.fhdu-header-icon svg {
 width: 20px;
 height: 20px;
 fill: currentColor;
}

.fhdu-header-copy {
 display: flex;
 min-width: 0;
 flex-direction: column;
}

.fhdu-header-copy small {
 margin-bottom: 3px;
 color: var(--gold);
 font-size: 6px;
 font-weight: 900;
 letter-spacing: 1px;
 text-transform: uppercase;
}

.fhdu-header-copy strong {
 color: #f2f3f4;
 font-size: 13px;
 font-weight: 900;
}

.fhdu-header-copy em {
 margin-top: 3px;
 color: #747a84;
 font-size: 7px;
 font-style: normal;
 font-weight: 600;
}

.fhdu-counter {
 display: inline-flex;
 align-items: baseline;
 gap: 4px;
 padding: 7px 9px;
 color: #797f89;
 background: rgba(255,255,255,.035);
 border: 1px solid rgba(255,255,255,.075);
 border-radius: 999px;
 font-size: 6px;
 font-weight: 900;
 text-transform: uppercase;
}

.fhdu-counter strong {
 color: #e2bd50;
 font-size: 11px;
}

/* SECȚIUNI */

.fhdu-section {
 margin-top: 16px;
}

.fhdu-section-heading {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 9px;
}

.fhdu-section-heading > span:last-child {
 display: flex;
 flex-direction: column;
}

.fhdu-section-heading strong {
 color: #e4e6e8;
 font-size: 9px;
 font-weight: 900;
}

.fhdu-section-heading small {
 margin-top: 2px;
 color: #686e78;
 font-size: 6.3px;
}

.fhdu-section-mark {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 25px;
 height: 25px;
 color: #dfbb50;
 background: rgba(217,181,75,.08);
 border: 1px solid rgba(217,181,75,.17);
 border-radius: 7px;
 font-size: 9px;
 font-weight: 900;
}

.fhdu-top-mark {
 color: #c58bff;
 background: rgba(164,91,230,.08);
 border-color: rgba(164,91,230,.2);
}

.fhdu-users-mark {
 color: #73bee8;
 background: rgba(73,150,194,.08);
 border-color: rgba(73,150,194,.2);
}

/* STAFF */

.fhdu-staff-grid {
 display: grid;
 grid-template-columns: 1fr;
 gap: 8px;
}

.fhdu-staff-card {
 --role: 217,181,75;

 position: relative;
 display: grid;
 grid-template-columns: 40px minmax(0,1fr) 7px;
 align-items: center;
 gap: 9px;
 padding: 9px;

 color: #fff;
 background:
 linear-gradient(
 105deg,
 rgba(var(--role),.16),
 rgba(var(--role),.035)
 );

 border: 1px solid rgba(var(--role),.29);
 border-radius: 11px;
 text-decoration: none !important;

 transition:
 background .2s ease,
 border-color .2s ease;
}

.fhdu-staff-card::before,
.fhdu-staff-card::after {
 content: none !important;
}

.fhdu-staff-card:hover {
 background:
 linear-gradient(
 105deg,
 rgba(var(--role),.24),
 rgba(var(--role),.07)
 );

 border-color: rgba(var(--role),.52);
}

.fhdu-role-emblem {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 color: #fff;
 background: linear-gradient(
 145deg,
 rgba(var(--role),1),
 rgba(var(--role),.45)
 );
 border: 1px solid rgba(var(--role),.75);
 border-radius: 11px;
 box-shadow: 0 7px 17px rgba(0,0,0,.23);
 font-size: 17px;
 font-weight: 950;
}

.fhdu-staff-card[data-role="admin"] .fhdu-role-emblem {
 color: #171106;
 background: linear-gradient(145deg,#f5d873,#cb9228);
 border-color: rgba(255,232,148,.75);
}

.fhdu-staff-info {
 display: flex;
 min-width: 0;
 flex-direction: column;
}

.fhdu-staff-name {
 overflow: hidden;
 color: #f2f3f4;
 font-size: 10px;
 font-weight: 900;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.fhdu-staff-role {
 margin-top: 3px;
 color: rgb(var(--role));
 font-size: 6.5px;
 font-weight: 900;
 letter-spacing: .3px;
 text-transform: uppercase;
}

.fhdu-online-dot {
 width: 7px;
 height: 7px;
 background: #56d883;
 border-radius: 50%;
 box-shadow: 0 0 9px rgba(86,216,131,.65);
}

/* TOP 5 */

.fhdu-top-list {
 display: flex;
 flex-direction: column;
 gap: 7px;
}

.fhdu-top-card {
 --role: 73,150,194;

 display: grid;
 grid-template-columns: 29px 31px minmax(0,1fr);
 align-items: center;
 gap: 8px;
 padding: 8px;

 color: #fff;
 background: rgba(var(--role),.07);
 border: 1px solid rgba(var(--role),.2);
 border-radius: 10px;
 text-decoration: none !important;
}

.fhdu-top-card::before,
.fhdu-top-card::after {
 content: none !important;
}

.fhdu-position {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 29px;
 height: 29px;
 color: #858b95;
 background: rgba(255,255,255,.045);
 border: 1px solid rgba(255,255,255,.075);
 border-radius: 8px;
 font-size: 8px;
 font-weight: 950;
}

.fhdu-top-card[data-place="1"] .fhdu-position {
 color: #171207;
 background: linear-gradient(145deg,#f5d873,#c99128);
}

.fhdu-top-card[data-place="2"] .fhdu-position {
 color: #202328;
 background: linear-gradient(145deg,#d7dde3,#89929b);
}

.fhdu-top-card[data-place="3"] .fhdu-position {
 color: #23140b;
 background: linear-gradient(145deg,#d9955d,#86502c);
}

.fhdu-user-emblem {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 31px;
 height: 31px;
 color: #fff;
 background: linear-gradient(
 145deg,
 rgba(var(--role),.95),
 rgba(var(--role),.43)
 );
 border: 1px solid rgba(var(--role),.65);
 border-radius: 50%;
 font-size: 10px;
 font-weight: 950;
}

.fhdu-user-info {
 display: flex;
 min-width: 0;
 flex-direction: column;
}

.fhdu-user-name {
 overflow: hidden;
 color: #e9ebed;
 font-size: 9px;
 font-weight: 900;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.fhdu-user-role {
 margin-top: 3px;
 color: rgb(var(--role));
 font-size: 6.2px;
 font-weight: 850;
 text-transform: uppercase;
}

/* RESTUL */

.fhdu-users-cloud {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 max-height: 170px;
 overflow-y: auto;
}

.fhdu-user-chip {
 --role: 73,150,194;

 display: inline-flex;
 align-items: center;
 gap: 5px;
 max-width: 100%;
 padding: 5px 8px 5px 5px;

 color: #b9bdc4;
 background: rgba(var(--role),.055);
 border: 1px solid rgba(var(--role),.14);
 border-radius: 999px;

 font-size: 7.5px;
 font-weight: 800;
 text-decoration: none !important;
}

.fhdu-user-chip::before,
.fhdu-user-chip::after {
 content: none !important;
}

.fhdu-chip-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 17px;
 height: 17px;
 color: rgb(var(--role));
 background: rgba(var(--role),.14);
 border-radius: 50%;
 font-size: 6.5px;
 font-weight: 950;
}

.fhdu-chip-name {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.fhdu-empty {
 margin-top: 15px;
 padding: 16px;
 color: #747a84;
 background: rgba(255,255,255,.025);
 border: 1px dashed rgba(255,255,255,.09);
 border-radius: 10px;
 font-size: 8px;
 text-align: center;
}

.fhdu-footer {
 display: flex;
 justify-content: center;
 gap: 6px;
 margin-top: 16px;
 padding-top: 12px;
 color: #626873;
 border-top: 1px solid rgba(255,255,255,.055);
 font-size: 6.7px;
 font-weight: 700;
}

.fhdu-footer span {
 color: #b8993e;
 font-size: 11px;
}

@media (max-width:680px) {
 .fhdu-board {
 padding: 14px;
 }

 .fhdu-header-copy strong {
 font-size: 12px;
 }
}