.cw-tabs-container {
    display        : flex;
    justify-content: center;
    gap            : 10px;
    margin-bottom  : 15px;
    padding-bottom : 15px;
    border-bottom  : 1px solid #ddd;
}

.button.active-tab {
    background: #1d1d1d;
    color     : #fff;
}

.button.disabled {
    opacity       : 0.5;
    cursor        : not-allowed;
    pointer-events: none;
}

.cw-form-error {
    text-align   : center;
    color        : red;
    font-weight  : bold;
    margin-bottom: 10px;
}

.cw-guest-name-box {
    text-align   : center;
    margin-bottom: 15px;
}

.cw-guest-name-box .textbox {
    width      : 200px;
    margin-left: 5px;
}

.cw-table {
    width : 550px;
    margin: 0 auto;
}

.cw-question-cell {
    font-size     : 14px;
    vertical-align: middle;
}

.cw-number {
    color       : #ff9900;
    font-weight : bold;
    margin-right: 5px;
}

.cw-question-hidden-text {
    color     : #888;
    font-style: italic;
}

.cw-answer-cell {
    width         : 100px;
    text-align    : center;
    vertical-align: middle;
}

.cw-input-answer {
    width         : 100%;
    font-weight   : bold;
    text-transform: uppercase;
    box-sizing    : border-box;
}

#final-password-container {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    gap             : 10px;
    max-width       : 600px;
    margin          : 15px auto;
    padding         : 25px 20px;
    border          : 4px solid #87ceeb;
    border-radius   : 15px;
    background-color: #2a2a2a;
    box-shadow      : 0 0 15px rgba(135, 206, 235, 0.3);
}

.cw-intro-container {
    display         : flex;
    align-items     : center;
    gap             : 20px;
    padding         : 15px;
    border          : 1px solid #ddd;
    border-radius   : 4px;
    max-width       : 700px;
    margin          : 0 auto 15px auto;
    background-color: #1d1d1d;
}

.cw-intro-left {
    flex-shrink: 0;
}

.cw-intro-img {
    width        : 120px;
    height       : auto;
    display      : block;
    border-radius: 4px;
}

.cw-intro-right p {
    margin     : 0;
    line-height: 1.5;
}

.cw-word-row {
    display: flex;
    gap    : 5px;
}

.pass-box {
    width           : 35px;
    height          : 35px;
    text-align      : center;
    font-size       : 20px;
    font-weight     : bold;
    border          : 2px solid #555;
    background-color: #1d1d1d;
    color           : #fff;
    text-transform  : uppercase;
    border-radius   : 4px;
}

.cw-panel-wrapper {
    max-width       : 550px;
    margin          : 0 auto;
    background-color: #1d1d1d;
    color           : #e0e0e0;
    padding         : 15px;
    border-radius   : 5px;
    border          : 1px solid #444;
}

.cw-panel-container {
    display: flex;
    gap    : 15px;
}

.cw-panel-left {
    flex          : 1;
    display       : flex;
    flex-direction: column;
    gap           : 15px;
}

.cw-panel-right {
    flex: 3;
}

.cw-panel-img {
    width  : 150px;
    height : 150px;
    border : 2px solid #0f33d3;
    height : auto;
    display: block;
    margin : 0 auto;
}

.cw-panel-img-placeholder {
    width           : 100%;
    aspect-ratio    : 4 / 3;
    background-color: #1d1d1d;
    border          : 2px dashed #555;
    border-radius   : 4px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 12px;
    color           : #888;
    text-align      : center;
}

.cw-panel-buttons {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
}

.cw-panel-buttons .button {
    display   : block;
    text-align: center;
    width     : 100%;
    box-sizing: border-box;
}

.cw-solvers-table {
    width          : 100%;
    border-collapse: collapse;
}

.cw-solvers-table td {
    padding      : 2px 8px;
    text-align   : left;
    border-bottom: 1px solid #444;
}

.cw-solvers-table tr:last-child td {
    border-bottom: none;
}

.cw-solvers-table td:last-child {
    text-align: right;
    font-size : 0.9em;
    color     : #aaa;
}

.cw-no-solvers {
    color     : #888;
    font-style: italic;
    text-align: center;
    padding   : 20px 0;
}

.cw-message {
    display        : flex;
    align-items    : center;
    justify-content: center;
    padding        : 10px;
    border-radius  : 5px;
    text-align     : center;
}

.cw-message img {
    margin-right: 10px;
    width       : 32px;
    height      : 32px;
}

.cw-success {
    background-color: #d4edda;
    color           : #155724;
    border          : 1px solid #c3e6cb;
}

.cw-error {
    background-color: #f8d7da;
    color           : #721c24;
    border          : 1px solid #f5c6cb;
}

/* Style for status messages */
.cw-intro-container--success {
    border-color    : #28a745;
    background-color: #202d23;
}

.cw-intro-container--error {
    border-color    : #dc3545;
    background-color: #302022;
}

.cw-intro-container--info {
    border-color    : #17a2b8;
    background-color: #1e2c2e;
}

.cw-legend {
    margin-top : 10px;
    padding-top: 10px;
    border-top : 1px solid #444;
    font-size  : 0.9em;
    color      : #ccc;
    text-align : center;
}

.cw-header-name {
    text-align   : left;
    color        : #87ceeb;
    font-family  : Arial, sans-serif;
    font-size    : 12px;
    padding      : 2px 4px;
    border-bottom: 1px solid #444;
}

.cw-legend {
    font-size: 14px;
}

.cw-solver-name {
    color: #007bff;
}

.cw-header-type {
    text-align   : center;
    color        : #87ceeb;
    font-family  : Arial, sans-serif;
    font-size    : 12px;
    padding      : 2px 4px;
    border-bottom: 1px solid #444;
}

.cw-header-date {
    text-align   : right;
    color        : #87ceeb;
    font-family  : Arial, sans-serif;
    font-size    : 12px;
    padding      : 2px 4px;
    border-bottom: 1px solid #444;
}