body {
    background: #23272a;
    font-family: 'Segoe UI', 'Arial', sans-serif;
    color: #f5fff3;
    margin: 0; padding: 0;
    min-height: 100vh;
}

.main-card {
    background: #282c31;
    border-radius: 22px;
    max-width: 740px;
    margin: 36px auto;
    padding: 36px 22px 28px 22px;
    box-shadow: 0 8px 40px #3aff3a12, 0 1px 4px #0004;
}

.headline {
    font-size: 2.4em;
    font-weight: 900;
    margin-bottom: 10px;
    line-height: 1.2;
    color: #49ff7a;
    text-align: center;
    text-shadow: 0 3px 22px #1e43293a;
    letter-spacing: 1px;
}
.ticket-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 16px;
    background: #23282c;
    border-radius: 15px;
    box-shadow: 0 4px 22px #0006;
    overflow: hidden;
}
.ticket-table th, .ticket-table td {
    padding: 12px 15px;
    text-align: left;
}
.ticket-table th {
    background: #202625;
    color: #3aff3a;
    font-size: 1.08em;
    font-weight: bold;
    border-bottom: 2px solid #3aff3a44;
}
.ticket-table tr {
    transition: background 0.14s;
}
.ticket-table tr:hover td {
    background: #2b332b;
}
.ticket-table td {
    border-bottom: 1px solid #3aff3a10;
    font-size: 1.08em;
    color: #e0ffe0;
}
.ticket-table tr:last-child td {
    border-bottom: none;
}
.btn {
    background: linear-gradient(90deg, #23ff77 0%, #35e68b 100%);
    color: #18281d !important;
    font-weight: 800;
    padding: 10px 25px;
    border-radius: 12px;
    border: none;
    box-shadow: 0 2px 8px #3aff3a33;
    font-size: 1.09em;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.13s, box-shadow 0.16s, color 0.08s;
    display: inline-block;
    outline: none;
    position: relative;
}
.btn:hover, .btn:focus {
    background: linear-gradient(90deg, #36ff97 0%, #13ff5f 100%);
    color: #111;
    box-shadow: 0 5px 20px #3aff3a60;
}

input[type="search"], input[type="text"], input[type="password"] {
    width: 100%;
    padding: 15px 18px;
    font-size: 1.09em;
    border-radius: 11px;
    border: none;
    background: #21272b;
    color: #caffc9;
    box-shadow: 0 1px 6px #3aff3a24;
    margin-bottom: 18px;
    outline: none;
    transition: box-shadow 0.17s;
}
input[type="search"]:focus, input[type="text"]:focus, input[type="password"]:focus {
    box-shadow: 0 2px 14px #3aff3a80;
    background: #232c29;
}

@media (max-width: 780px) {
    .main-card {
        padding: 17px 4vw 17px 4vw;
        max-width: 99vw;
    }
    .headline {
        font-size: 1.45em;
    }
    .ticket-table th, .ticket-table td {
        font-size: 1em;
        padding: 10px 5px;
    }
    .btn { padding: 8px 14px; font-size: 1em; }
}

/* Preloader Style */
#preloader {
    position: fixed; z-index: 99; left:0; top:0; width:100vw; height:100vh;
    background: #23272af7;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.44s;
}
.preloader-frame {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.preloader-logo {
    width: 70px; height: 70px; margin-bottom: 24px;
    filter: drop-shadow(0 0 38px #2bff7766) drop-shadow(0 0 6px #16ff5c50);
    animation: capyspin 1.4s linear infinite;
}
@keyframes capyspin {
    0% { transform: rotate(-10deg);}
    90% { transform: rotate(22deg);}
    100% { transform: rotate(-10deg);}
}
.spinner-wandering-cubes {
    width: 32px; height: 32px; position: relative; margin-top:10px;
}
.spinner-wandering-cubes .spinner-item {
    position: absolute; width: 13px; height: 13px;
    background: #3aff3a;
    border-radius: 5px;
    animation: wandering-cubes 1.8s infinite ease-in-out;
}
.spinner-wandering-cubes .spinner-item:last-child { animation-delay: -.9s; }
@keyframes wandering-cubes {
    25% { transform: translateX(19px) rotate(-90deg) scale(.53);}
    50% { transform: translateX(19px) translateY(19px) rotate(-180deg);}
    75% { transform: translateX(0) translateY(19px) rotate(-270deg) scale(.53);}
    to { transform: rotate(-1turn);}
}

/* Error/focus */
.error { color: #ff395c; background: #26192a; border-radius: 8px; margin-top: 14px; padding: 7px 14px; font-size: 1.02em;}
.back-link { color: #3aff3a; margin-top: 33px; display: inline-block; font-size: 1.05em; text-decoration: none;}
.back-link:hover { text-decoration: underline; color: #bfffef;}