/* JD-Ragezone Simple Panel - Dark Sleek Midnight Sci-Fi Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #0a0a0a;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #16213e 50%, #0f1419 75%, #0a0a0a 100%);
    color: #ffffff;
    min-height: 100vh;
    line-height: 1.6;
    position: relative;
    overflow-x: hidden;
}

/* Animated background elements */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 85% 85%, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px, 80px 80px;
    animation: starField 20s linear infinite;
    pointer-events: none;
    z-index: -1;
}

/* Moon design */
body::after {
    content: '🌙';
    position: fixed;
    top: 10%;
    right: 10%;
    font-size: 60px;
    opacity: 0.1;
    animation: moonFloat 15s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes starField {
    0% { transform: translateX(0) translateY(0); }
    100% { transform: translateX(-50px) translateY(-50px); }
}

@keyframes moonFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.1; }
    50% { transform: translateY(-20px) rotate(5deg); opacity: 0.15; }
}

/* Top Menu - Dark Sleek Sci-Fi Style */
.top-menu {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(26, 26, 46, 0.95) 50%, rgba(10, 10, 10, 0.95) 100%);
    border: 1px solid rgba(120, 119, 198, 0.3);
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid rgba(255, 119, 198, 0.4);
    padding: 1rem 0;
    backdrop-filter: blur(15px);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
}

.top-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(120, 219, 255, 0.5), transparent);
}

.menu-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.menu-title { 
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    letter-spacing: 0.5px;
    background: linear-gradient(45deg, #78d3ff, #ff77c6, #7877c6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
}

.menu-items {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 5;
}

.menu-items li {
    position: relative;
    z-index: 5;
}

.menu-link {
    color: #a0a0a0;
    text-decoration: none;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-weight: 500;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    z-index: 10;
    cursor: pointer;
    display: inline-block;
}

.menu-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(120, 219, 255, 0.2), transparent);
    transition: left 0.5s ease;
    z-index: -1;
}

.menu-link:hover {
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.2), rgba(255, 119, 198, 0.1));
    color: #fff;
    transform: translateY(-2px);
    border: 1px solid rgba(120, 219, 255, 0.3);
    box-shadow: 0 4px 15px rgba(120, 219, 255, 0.2);
    z-index: 20;
}

.menu-link:hover::before {
    left: 100%;
}

.menu-link.active {
    background: linear-gradient(135deg, rgba(120, 119, 198, 0.4), rgba(255, 119, 198, 0.2));
    color: #fff;
    border: 1px solid rgba(120, 219, 255, 0.5);
    box-shadow: 
        0 4px 20px rgba(120, 219, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 15;
}

/* Main Content */
.main-content {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.content-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.page-title {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.page-subtitle {
    color: #ccc;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

/* Selection Grid */
.selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.selection-card {
    border-radius: 12px;
    padding: 2rem;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.selection-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.selection-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.selection-card:hover::before {
    opacity: 0.2;
}

/* Give Jaden Card - Cash Theme */
.card-cash {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.card-cash::before {
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
}

.card-cash:hover {
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
}

/* Register Card - Tech Theme */
.card-register {
    background: linear-gradient(135deg, rgba(120, 219, 255, 0.1), rgba(120, 119, 198, 0.1));
    border: 1px solid rgba(120, 219, 255, 0.3);
}

.card-register::before {
    background: radial-gradient(circle at center, rgba(120, 219, 255, 0.2) 0%, transparent 70%);
}

.card-register:hover {
    border-color: rgba(120, 219, 255, 0.5);
    box-shadow: 0 10px 30px rgba(120, 219, 255, 0.2);
}

/* Password Change Card - Security Theme */
.card-password {
    background: linear-gradient(135deg, rgba(255, 119, 198, 0.1), rgba(120, 119, 198, 0.1));
    border: 1px solid rgba(255, 119, 198, 0.3);
}

.card-password::before {
    background: radial-gradient(circle at center, rgba(255, 119, 198, 0.2) 0%, transparent 70%);
}

.card-password:hover {
    border-color: rgba(255, 119, 198, 0.5);
    box-shadow: 0 10px 30px rgba(255, 119, 198, 0.2);
}

.selection-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.selection-card p {
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Forms */
.form-container {
    max-width: 600px;
    margin: 0 auto;
}

.form-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    color: #fff;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* Select option không còn bị chữ trắng trên nền trắng của trình duyệt. */
select.form-input {
    color-scheme: dark;
    color: #f4f7ff;
    background-color: #1a1f3a;
}

select.form-input option {
    color: #f4f7ff;
    background-color: #1a1f3a;
}

select.form-input option:checked {
    color: #fff;
    background-color: #667eea;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Buttons */
.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.btn {
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.9) 0%, rgba(40, 40, 80, 0.9) 50%, rgba(20, 20, 40, 0.9) 100%);
    color: #fff;
    border: 1px solid rgba(120, 219, 255, 0.3);
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(120, 219, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn:hover {
    transform: translateY(-3px);
    border-color: rgba(120, 219, 255, 0.6);
    box-shadow: 
        0 8px 25px rgba(120, 219, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn:hover::before {
    left: 100%;
}

.btn-secondary {
    background: linear-gradient(135deg, rgba(40, 40, 40, 0.8) 0%, rgba(60, 60, 60, 0.8) 50%, rgba(40, 40, 40, 0.8) 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, rgba(60, 60, 60, 0.9) 0%, rgba(80, 80, 80, 0.9) 50%, rgba(60, 60, 60, 0.9) 100%);
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.4);
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Alert Messages */
.alert {
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 6px;
    text-align: center;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.alert-error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Accounts Layout */
.accounts-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.account-list, .account-details {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.list-header h3, .account-details h3 {
    color: #fff;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.search-form {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

.search-input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Tables */
.table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.account-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.05);
}

.account-table th {
    background: rgba(255, 255, 255, 0.1);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
}

.account-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #ccc;
    font-size: 0.9rem;
}

.account-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.account-table tbody tr.selected {
    background: rgba(102, 126, 234, 0.2);
    border-left: 3px solid #667eea;
}

.no-data {
    text-align: center;
    color: #888;
    font-style: italic;
}

.account-info {
    color: #ccc;
}

.account-actions {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
}

/* Dark Theme Icons */
.fas, .far, .fab {
    color: #ccc;
    filter: brightness(0.8);
}

.fas:hover, .far:hover, .fab:hover {
    color: #fff;
    filter: brightness(1.2);
}

/* Icon colors for different contexts */
.btn .fas {
    color: #fff;
    filter: none;
}

.btn:hover .fas {
    color: #fff;
    filter: brightness(1.1);
}

/* Specific icon colors */
.fa-coins {
    color: #ffd700;
}

.fa-search {
    color: #4ade80;
}

.fa-eye {
    color: #60a5fa;
}

.fa-times {
    color: #f87171;
}

.fa-info-circle {
    color: #93c5fd;
}

.fa-user-plus {
    color: #34d399;
}

.fa-key {
    color: #fbbf24;
}

.fa-users {
    color: #a78bfa;
}

/* Responsive */
@media (max-width: 768px) {
    .menu-container {
        flex-direction: column;
        gap: 1rem;
        padding: 0 1rem;
    }
    
    .menu-title {
        font-size: 1.2rem;
        text-align: center;
    }
    
    .menu-items {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    
    .menu-link {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .accounts-layout {
        grid-template-columns: 1fr;
    }
    
    .selection-grid {
        grid-template-columns: 1fr;
    }
    
    .main-content {
        padding: 0 1rem;
    }
    
    .content-container {
        padding: 1.5rem;
    }
}

/* Footer */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(26, 26, 46, 0.95) 100%);
    border-top: 1px solid rgba(120, 219, 255, 0.2);
    padding: 0.5rem 0;
    text-align: center;
    backdrop-filter: blur(10px);
    z-index: 1000;
}

.footer-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Add bottom padding to main content to account for fixed footer */
.main-content {
    padding-bottom: 3rem;
}


/* Global event notifications beside the signed-in user's logout link. */
.site-notification-widget{position:relative;display:inline-flex;align-items:center;z-index:1200}
.site-notification-button{position:relative;display:grid;place-items:center;width:38px;height:38px;margin:0 4px;border:1px solid rgba(255,210,122,.5);border-radius:12px;color:#ffd27a;background:linear-gradient(145deg,rgba(255,210,122,.18),rgba(255,255,255,.06));cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.22);transition:transform .18s ease,background .18s ease,border-color .18s ease}
.site-notification-button:hover,.site-notification-button[aria-expanded="true"]{transform:translateY(-1px);border-color:#ffe09a;background:rgba(255,210,122,.24)}
.site-notification-button:focus-visible{outline:2px solid #ffd27a;outline-offset:3px}
.site-notification-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.site-notification-badge{position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;padding:0 4px;border:2px solid #11111b;border-radius:12px;background:#f05252;color:#fff;font:bold 10px/14px Arial,sans-serif;text-align:center}
.site-notification-badge[hidden]{display:none!important}
.site-notification-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(360px,calc(100vw - 24px));max-height:min(70vh,560px);overflow:hidden;border:1px solid rgba(255,210,122,.28);border-radius:15px;background:linear-gradient(145deg,#202033,#11111b);box-shadow:0 18px 48px rgba(0,0,0,.52);color:#e9eaf2;text-align:left}
.site-notification-panel[hidden]{display:none!important}
.site-notification-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.site-notification-panel-head strong{display:block;color:#ffd27a;font-size:14px}
.site-notification-panel-head small{display:block;margin-top:2px;color:#aeb3c4;font-size:11px}
.site-notification-panel-head button{width:30px;height:30px;border:0;border-radius:8px;background:rgba(255,255,255,.06);color:#cbd2e5;font-size:22px;cursor:pointer}
.site-notification-list{max-height:calc(min(70vh,560px) - 60px);overflow:auto;padding:9px}
.site-notification-card{padding:11px 12px;margin:0 0 8px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(255,255,255,.045);transition:opacity .2s ease,background .2s ease,border-color .2s ease}
.site-notification-card:last-child{margin-bottom:0}
.site-notification-card.is-unread{border-color:rgba(255,210,122,.35);background:rgba(255,210,122,.075)}
.site-notification-card.is-read{opacity:.48}
.site-notification-card h4{margin:0 0 4px;color:#f2d49a;font-size:13px;line-height:1.4}
.site-notification-card p{margin:0;color:#d5d8e3;font-size:12px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}
.site-notification-card button{margin-top:8px;padding:4px 8px;border:1px solid rgba(255,210,122,.3);border-radius:7px;background:transparent;color:#ffd27a;font-size:11px;cursor:pointer}
.site-notification-card.is-read button{color:#aab0c1;border-color:rgba(255,255,255,.15);cursor:default}
.site-notification-empty{padding:18px 10px;color:#aeb3c4;font-size:12px;text-align:center}
@media(max-width:640px){.site-notification-panel{position:fixed;top:120px;right:10px;width:min(360px,calc(100vw - 20px));max-height:calc(100vh - 140px)}.site-notification-list{max-height:calc(100vh - 205px)}}


/* Live Ho Chi Minh clock next to the global notification bell. */
.site-clock{display:inline-flex;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;min-width:82px;padding:2px 5px;margin-right:2px;color:#f4e4bd;font-style:normal;font-variant-numeric:tabular-nums;line-height:1.15;text-align:center}
.site-clock span{font-size:13px;font-weight:700;letter-spacing:.04em}
.site-clock small{margin-top:3px;color:#aeb3c4;font-size:9px;letter-spacing:.11em}

/* Event-detail dialog opened from the notification menu. */
.site-event-modal-open{overflow:hidden}
.site-event-dialog{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:18px}
.site-event-dialog[hidden]{display:none!important}
.site-event-dialog-backdrop{position:absolute;inset:0;background:rgba(4,6,13,.78);backdrop-filter:blur(5px)}
.site-event-dialog-card{position:relative;z-index:1;display:flex;flex-direction:column;width:min(680px,100%);max-height:min(88vh,820px);overflow:hidden;border:1px solid rgba(255,210,122,.32);border-radius:17px;background:linear-gradient(145deg,#202033,#11111b);box-shadow:0 25px 80px rgba(0,0,0,.65);color:#e9eaf2}
.site-event-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:18px 20px 14px;border-bottom:1px solid rgba(255,255,255,.11)}
.site-event-dialog-kicker{color:#c2a76e;font-size:9px;font-weight:700;letter-spacing:.15em}
.site-event-dialog-head h2{margin:4px 0 0;color:#ffdb96;font-size:clamp(18px,3vw,24px);line-height:1.25}
.site-event-dialog-close{flex:0 0 auto;width:34px;height:34px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(255,255,255,.06);color:#e5e7ef;font-size:24px;line-height:1;cursor:pointer}
.site-event-dialog-close:hover{border-color:rgba(255,210,122,.5);color:#ffd27a}
.site-event-dialog-content{overflow:auto;padding:16px 20px 20px}
.site-event-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px}
.site-event-meta-item{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:rgba(255,255,255,.035)}
.site-event-meta-item span{color:#9da5bb;font-size:10px}
.site-event-meta-item strong{color:#e9eaf2;font-size:12px;overflow-wrap:anywhere}
.site-event-description,.site-event-rewards{margin-top:14px}
.site-event-description h3,.site-event-rewards h3{margin:0 0 7px;color:#ffd27a;font-size:14px}
.site-event-description p,.site-event-rewards li{color:#d9dce7;font-size:13px;line-height:1.65;white-space:pre-line;overflow-wrap:anywhere}
.site-event-rewards ul{margin:0;padding-left:20px}
.site-event-rewards li{padding:3px 0}
@media(max-width:520px){.site-clock{min-width:70px}.site-clock span{font-size:11px}.site-event-dialog{padding:10px}.site-event-dialog-card{max-height:92vh;border-radius:13px}.site-event-dialog-head{padding:15px 15px 12px}.site-event-dialog-content{padding:13px 15px 16px}.site-event-meta-grid{grid-template-columns:1fr}}


/* Nhiệm vụ sự kiện trong popup thông báo */
.site-event-task{margin-top:16px;padding:14px;border:1px solid rgba(255,210,122,.24);border-radius:12px;background:linear-gradient(145deg,rgba(205,160,68,.09),rgba(255,255,255,.025))}
.site-event-task h3{margin:0 0 10px;color:#ffdc98;font-size:15px}
.site-event-task-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:10px}
.site-event-task-fact{padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(0,0,0,.14)}
.site-event-task-fact small{display:block;margin-bottom:3px;color:#99a4b8;font-size:9px;text-transform:uppercase;letter-spacing:.06em}
.site-event-task-fact strong{display:block;color:#e8eaf2;font-size:11px;overflow-wrap:anywhere}
.site-event-task-description{margin:8px 0;color:#d2d6e1;font-size:12px;line-height:1.55;white-space:pre-line}
.site-event-task-subtitle{display:block;margin-top:10px;color:#dfc37d;font-size:11px}
.site-event-task-requirements,.site-event-task-rewards{margin:5px 0 0;padding-left:20px;color:#c8cedc;font-size:11px;line-height:1.55}
.site-event-task-action{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-top:13px;padding-top:11px;border-top:1px solid rgba(255,255,255,.09)}
.site-event-task-status{flex:1;min-width:190px;color:#aeb8c9;font-size:10px;line-height:1.5}
@media(max-width:520px){.site-event-task-facts{grid-template-columns:1fr}.site-event-task-action{align-items:stretch;flex-direction:column}.site-event-task-action .btn{align-self:flex-start}}