*
{
    margin                  : 0;
    padding                 : 0;
    box-sizing              : border-box;
    -webkit-tap-highlight-color : transparent;
    -webkit-touch-callout   : none;
}

html
{
    height                  : 100%;
    height                  : 100dvh;
    background              : #0F3460;
}

body
{
    font-family             : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Helvetica Neue", "Noto Sans CJK SC", sans-serif;
    min-height              : 100vh;
    min-height              : 100dvh;
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    padding                 : 20px;
    color                   : #FFF;
    -webkit-user-select     : none;
    user-select             : none;
    -webkit-overflow-scrolling : touch;
    overflow-x              : hidden;
    overscroll-behavior     : none;
    position                : relative;
}

body::before
{
    content                 : "";
    position                : fixed;
    top                     : 0;
    left                    : 0;
    width                   : 100%;
    height                  : 100%;
    background              : linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%);
    z-index                 : -1;
    will-change             : transform;
    backface-visibility     : hidden;
    -webkit-backface-visibility : hidden;
}

.container
{
    width                   : 100%;
    max-width               : 420px;
    background              : rgba(255, 255, 255, 0.08);
    backdrop-filter         : blur(20px);
    -webkit-backdrop-filter : blur(20px);
    border-radius           : 24px;
    padding                 : 30px 24px;
    box-shadow              : 0 8px 32px rgba(0, 0, 0, 0.3);
    border                  : 1px solid rgba(255, 255, 255, 0.1);
    min-height              : auto;
    overflow                : hidden;
}

.page-title
{
    font-size               : 22px;
    font-weight             : 700;
    text-align              : center;
    margin-bottom           : 4px;
    background              : linear-gradient(90deg, #4FC3F7, #81D4FA);
    -webkit-background-clip : text;
    -webkit-text-fill-color : transparent;
    background-clip         : text;
    letter-spacing          : 1px;
}

.page-subtitle
{
    text-align              : center;
    font-size               : 14px;
    line-height             : 20px;
    color                   : rgba(255, 255, 255, 0.4);
    margin-top              : 8px;
    margin-bottom           : 24px;
}

.qr-section
{
    background              : rgba(255, 255, 255, 0.05);
    border-radius           : 16px;
    padding                 : 20px;
    margin-bottom           : 20px;
    border                  : 1px solid rgba(255, 255, 255, 0.06);
    text-align              : center;
}

#qrcode
{
    width                   : 208px;
    height                  : 208px;
    margin                  : 0 auto 16px;
    padding                 : 12px;
    background              : #FFF;
    border-radius           : 12px;
    display                 : flex;
    align-items             : center;
    justify-content         : center;
}

.room-badge
{
    display                 : inline-block;
    background              : rgba(79, 195, 247, 0.12);
    color                   : #4FC3F7;
    padding                 : 6px 14px;
    border-radius           : 20px;
    font-size               : 14px;
    font-weight             : 600;
    border                  : 1px solid rgba(79, 195, 247, 0.3);
}

.room-badge code
{
    color                   : #4FC3F7;
    font-size               : 15px;
    -webkit-user-select     : text;
    user-select             : text;
}

#roomText
{
    cursor                  : pointer;
}

.tip
{
    text-align              : center;
    font-size               : 14px;
    color                   : rgba(255, 255, 255, 0.4);
    margin-top              : 10px;
}

.tip_clr
{
    color                   : #4FC3F7;
}

.card
{
    background              : rgba(255, 255, 255, 0.05);
    border-radius           : 16px;
    padding                 : 18px 16px;
    margin-bottom           : 16px;
    border                  : 1px solid rgba(255, 255, 255, 0.06);
}

.btn
{
    display                 : inline-flex;
    align-items             : center;
    justify-content         : center;
    border                  : none;
    background              : rgba(79, 195, 247, 0.25);
    color                   : #4FC3F7;
    border-radius           : 14px;
    font-size               : 16px;
    font-weight             : 600;
    cursor                  : pointer;
    width                   : 100%;
    padding                 : 15px 24px;
    transition              : all 0.2s;
    user-select             : none;
    -webkit-touch-callout   : none;
    -webkit-user-select     : none;
    outline                 : none;
    -webkit-appearance      : none;
    appearance              : none;
}

.btn:active
{
    transform               : scale(0.96);
    background              : rgba(79, 195, 247, 0.4);
}

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

.btn-secondary
{
    background              : transparent !important;
    color                   : rgba(255, 255, 255, 0.6) !important;
    border                  : 1px solid rgba(255, 255, 255, 0.2) !important;
}

.btn-secondary:active
{
    background              : rgba(255, 255, 255, 0.08) !important;
}

input[type="file"]
{
    width                   : 100%;
    padding                 : 14px;
    margin                  : 8px 0;
    border                  : 2px dashed rgba(255, 255, 255, 0.2);
    border-radius           : 12px;
    background              : rgba(0, 0, 0, 0.2);
    font-size               : 14px;
    cursor                  : pointer;
    color                   : rgba(255, 255, 255, 0.5);
    -webkit-appearance      : none;
    appearance              : none;
}

input[type="file"]::file-selector-button
{
    background              : rgba(79, 195, 247, 0.25);
    color                   : #4FC3F7;
    border                  : 1px solid rgba(79, 195, 247, 0.3);
    padding                 : 9px 16px;
    border-radius           : 10px;
    font-size               : 14px;
    font-weight             : 600;
    margin-right            : 12px;
    cursor                  : pointer;
}

textarea
{
    width                   : 100%;
    min-height              : 120px;
    padding                 : 14px;
    margin                  : 8px 0;
    border                  : 1px solid rgba(255, 255, 255, 0.15);
    border-radius           : 12px;
    font-size               : 16px;
    resize                  : vertical;
    font-family             : inherit;
    line-height             : 1.6;
    background              : rgba(0, 0, 0, 0.25);
    color                   : rgba(255, 255, 255, 0.9);
    -webkit-appearance      : none;
    appearance              : none;
}

textarea:focus
{
    outline                 : none;
    border-color            : #4FC3F7;
}

progress
{
    width                   : 100%;
    height                  : 10px;
    border-radius           : 5px;
    overflow                : hidden;
    margin-top              : 16px;
    -webkit-appearance      : none;
    appearance              : none;
}

progress::-webkit-progress-bar
{
    background              : rgba(255, 255, 255, 0.1);
    border-radius           : 5px;
}

progress::-webkit-progress-value
{
    background              : linear-gradient(90deg, #4FC3F7, #81D4FA);
    border-radius           : 5px;
}

.progress-wrap
{
    display                 : none;
    margin-top              : 16px;
}

.progress-text
{
    text-align              : center;
    font-size               : 14px;
    color                   : #4FC3F7;
    font-weight             : 600;
    margin-top              : 8px;
}

.log-box
{
    background              : rgba(0, 0, 0, 0.25);
    border-radius           : 12px;
    padding                 : 14px 16px;
    max-height              : 180px;
    overflow-y              : auto;
    font-size               : 14px;
    line-height             : 1.7;
    border                  : 1px solid rgba(255, 255, 255, 0.06);
}

.log-box div
{
    color                   : rgba(255, 255, 255, 0.5);
}

.log-box div.success
{
    color                   : #66BB6A;
    font-weight             : 600;
}

.log-box div.info
{
    color                   : #4FC3F7;
    font-weight             : 600;
}

.hidden
{
    display                 : none !important;
}

.conn-status
{
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    gap                     : 6px;
    padding                 : 6px 14px;
    border-radius           : 999px;
    font-size               : 14px;
    font-weight             : 600;
    margin                  : 14px auto 0;
    width                   : fit-content;
    background              : rgba(255, 255, 255, 0.06);
    border                  : 1px solid rgba(255, 255, 255, 0.08);
}

.conn-dot
{
    width                   : 8px;
    height                  : 8px;
    border-radius           : 50%;
    background              : rgba(255, 255, 255, 0.3);
}

.conn-dot.connected
{
    background              : #66BB6A;
    animation               : pulse 2s infinite;
}

@keyframes pulse
{
    0%, 100%               { opacity: 1; }
    50%                    { opacity: 0.5; }
}

.section-title
{
    font-size               : 15px;
    font-weight             : 700;
    margin                  : 16px 0 12px;
    color                   : rgba(255, 255, 255, 0.85);
}

.modal-mask
{
    position                : fixed;
    inset                   : 0;
    background              : rgba(0, 0, 0, 0.6);
    z-index                 : 100;
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    padding                 : 20px;
    backdrop-filter         : blur(6px);
    -webkit-backdrop-filter : blur(6px);
}

.modal
{
    background              : linear-gradient(135deg, #1A1A2E 0%, #16213E 100%);
    border-radius           : 24px;
    padding                 : 24px;
    width                   : 100%;
    max-width               : 400px;
    box-shadow              : 0 20px 60px rgba(0, 0, 0, 0.5);
    text-align              : center;
    border                  : 1px solid rgba(255, 255, 255, 0.1);
    animation               : pop 0.25s ease;
    max-height              : 90vh;
    overflow-y              : auto;
}

@keyframes pop
{
    from                   { transform: scale(0.9); opacity: 0; }
    to                     { transform: scale(1); opacity: 1; }
}

.modal .icon
{
    font-size               : 44px;
    margin-bottom           : 10px;
}

.modal h3
{
    margin                  : 0 0 8px;
    font-size               : 19px;
    color                   : rgba(255, 255, 255, 0.95);
}

.modal p
{
    color                   : rgba(255, 255, 255, 0.5);
    font-size               : 14px;
    margin                  : 4px 0;
    word-break              : break-all;
}

.modal .filename
{
    font-weight             : 700;
    color                   : #4FC3F7;
    font-size               : 15px;
    margin                  : 8px 0;
}

.modal .text-preview
{
    max-height              : 140px;
    overflow                : auto;
    text-align              : left;
    background              : rgba(0, 0, 0, 0.3);
    padding                 : 14px;
    border-radius           : 12px;
    font-size               : 14px;
    line-height             : 1.6;
    border                  : 1px solid rgba(255, 255, 255, 0.1);
    margin                  : 12px 0;
    white-space             : pre-wrap;
    word-break              : break-all;
    color                   : rgba(255, 255, 255, 0.85);
}

.modal .img-preview
{
    max-width               : 100%;
    max-height              : 300px;
    border-radius           : 12px;
    margin                  : 12px 0;
    box-shadow              : 0 4px 15px rgba(0, 0, 0, 0.3);
    -webkit-touch-callout   : default;
    -webkit-user-select     : auto;
    user-select             : auto;
}

.long-press-hint
{
    background              : rgba(255, 183, 77, 0.15);
    color                   : #FFB74D;
    font-size               : 14px;
    font-weight             : 600;
    padding                 : 10px 16px;
    border-radius           : 10px;
    margin                  : 8px 0;
    border                  : 1px solid rgba(255, 183, 77, 0.3);
}

.modal .btn
{
    margin-top              : 14px;
}

.modal .close
{
    margin-top              : 10px;
}

.room-char-input
{
    width                   : 40px;
    height                  : 44px;
    text-align              : center;
    font-size               : 20px;
    font-weight             : 600;
    border-radius           : 10px;
    border                  : 1px solid rgba(255, 255, 255, 0.2);
    background              : rgba(0, 0, 0, 0.2);
    color                   : #FFF;
    -webkit-appearance      : none;
    appearance              : none;
    padding                 : 0;
}

.room-char-input:focus
{
    outline                 : none;
    border-color            : #4FC3F7;
}