@charset "UTF-8";.live-stream-component{display:flex;flex-direction:column;height:100%;max-width:100%;overflow:hidden;background-color:var(--surface-color);border-radius:8px;border:1px solid var(--border-color);box-sizing:border-box}.live-stream-component--loading{opacity:.7}.live-stream-component .stream-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-large)}.live-stream-component .stream-header .status-indicator{padding:4px 12px;border-radius:16px;font-size:12px;font-weight:600}.live-stream-component .stream-header .status-indicator.live{background-color:#4caf50;color:#fff}.live-stream-component .stream-header .status-indicator.offline{background-color:var(--error-color);color:#fff}.live-stream-component .stream-header .stream-info{display:flex;align-items:center;gap:var(--spacing-medium)}.live-stream-component .stream-header .stream-info .viewer-count{display:flex;align-items:center;gap:var(--spacing-small);font-size:12px;color:var(--text-color-secondary)}.live-stream-component .stream-header .stream-info .viewer-count svg{width:16px;height:16px}.live-stream-component .stream-preview{flex:1;background-color:var(--surface-color);padding:var(--spacing-medium);border-radius:var(--spacing-medium);aspect-ratio:16/9;position:relative;margin-bottom:var(--spacing-large);max-width:100%;width:100%;box-sizing:border-box;overflow:hidden;min-height:0}.live-stream-component .stream-preview .video-container{width:100%;height:100%;border-radius:var(--spacing-medium);background-color:#000;max-width:100%;box-sizing:border-box;overflow:hidden;transition:transform .3s ease}.live-stream-component .stream-preview .video-container--mirrored{transform:scaleX(-1)}.live-stream-component .stream-preview .video-controls{position:absolute;top:var(--spacing-small);right:var(--spacing-small);display:flex;gap:var(--spacing-small);z-index:10}.live-stream-component .stream-preview .video-controls .control-btn{width:36px;height:36px;border:none;border-radius:6px;background-color:#0009;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.live-stream-component .stream-preview .video-controls .control-btn svg{width:18px;height:18px}.live-stream-component .stream-preview .video-controls .control-btn:hover{background-color:#000c;transform:scale(1.05)}.live-stream-component .stream-preview .video-controls .control-btn--active{background-color:var(--primary-color)}.live-stream-component .stream-preview .video-controls .control-btn--active:hover{background-color:var(--primary-color-dark)}.live-stream-component .stream-preview .preview-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--surface-color);border-radius:var(--spacing-medium)}.live-stream-component .stream-preview .preview-content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.live-stream-component .stream-preview .preview-placeholder{text-align:center;color:var(--text-color-secondary)}.live-stream-component .stream-preview .preview-placeholder h3{font-size:1.2rem;margin-bottom:var(--spacing-small);color:var(--text-color-primary)}.live-stream-component .stream-preview .preview-placeholder p{margin-bottom:var(--spacing-small);color:var(--text-color-secondary)}.live-stream-component .stream-preview .preview-placeholder .room-description{font-size:.9rem;margin-top:var(--spacing-small);color:var(--text-color-secondary)}.live-stream-component .stream-preview .watch-button{margin-top:var(--spacing-large);padding:12px 24px;background-color:var(--primary-color);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.live-stream-component .stream-preview .watch-button:hover{background-color:var(--primary-color-dark)}.live-stream-component .stream-preview .watch-button:disabled{opacity:.6;cursor:not-allowed}.live-stream-component .stream-controls{padding:var(--spacing-large);background-color:var(--background-color);border-radius:8px;border:1px solid var(--border-color)}.live-stream-component .stream-controls .controls-section .device-controls{display:flex;align-items:center;gap:var(--spacing-small);margin-bottom:var(--spacing-large);padding:var(--spacing-medium);background-color:var(--surface-color);border-radius:6px;border:1px solid var(--border-color)}.live-stream-component .stream-controls .controls-section .device-controls .device-selector{flex:1;display:flex;align-items:center;gap:var(--spacing-small);min-width:0}.live-stream-component .stream-controls .controls-section .device-controls .device-selector .device-icon{width:18px;height:18px;color:var(--text-color-secondary);flex-shrink:0}.live-stream-component .stream-controls .controls-section .device-controls .device-selector select{flex:1;padding:8px 12px;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:4px;color:var(--text-color-primary);font-size:14px;min-width:0}.live-stream-component .stream-controls .controls-section .device-controls .device-selector select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.1)}.live-stream-component .stream-controls .controls-section .device-controls .device-selector select:disabled{opacity:.6;cursor:not-allowed;background-color:var(--surface-color)}.live-stream-component .stream-controls .controls-section .device-controls .device-selector select option{padding:8px;background-color:var(--background-color);color:var(--text-color-primary)}.live-stream-component .stream-controls .controls-section .device-controls .mic-toggle{padding:8px;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;flex-shrink:0}.live-stream-component .stream-controls .controls-section .device-controls .mic-toggle svg{width:18px;height:18px}.live-stream-component .stream-controls .controls-section .device-controls .mic-toggle.enabled{background-color:var(--primary-color);color:#fff}.live-stream-component .stream-controls .controls-section .device-controls .mic-toggle.enabled:hover{background-color:var(--primary-color-dark)}.live-stream-component .stream-controls .controls-section .device-controls .mic-toggle.disabled{background-color:var(--error-color);color:#fff}.live-stream-component .stream-controls .controls-section .device-controls .mic-toggle.disabled:hover{background-color:#d32f2f}.live-stream-component .stream-controls .controls-section .control-row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-medium)}.live-stream-component .stream-controls .controls-section .control-row .resolution-selector{flex:1;display:flex;align-items:center;gap:var(--spacing-small)}.live-stream-component .stream-controls .controls-section .control-row .resolution-selector select{flex:1;padding:8px 12px;background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:4px;color:var(--text-color-primary);font-size:14px}.live-stream-component .stream-controls .controls-section .control-row .resolution-selector select:focus{outline:none;border-color:var(--primary-color)}.live-stream-component .stream-controls .controls-section .control-row .resolution-selector .resolution-icon{width:20px;height:20px;color:var(--text-color-secondary)}.live-stream-component .stream-controls .controls-section .control-row .control-btn-icon{padding:10px;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:44px;height:44px}.live-stream-component .stream-controls .controls-section .control-row .control-btn-icon svg{width:20px;height:20px}.live-stream-component .stream-controls .controls-section .control-row .control-btn-icon.start{background-color:#4caf50;color:#fff}.live-stream-component .stream-controls .controls-section .control-row .control-btn-icon.start:hover{background-color:#388e3c}.live-stream-component .stream-controls .controls-section .control-row .control-btn-icon.stop{background-color:var(--error-color);color:#fff}.live-stream-component .stream-controls .controls-section .control-row .control-btn-icon.stop:hover{background-color:#d32f2f}.live-stream-component .stream-controls .controls-section .control-row .control-btn-icon:disabled{opacity:.6;cursor:not-allowed}@media(max-width:768px){.live-stream-component .stream-controls .controls-section .device-controls{flex-wrap:wrap;gap:var(--spacing-small);width:100%;max-width:100%;box-sizing:border-box}.live-stream-component .stream-controls .controls-section .device-controls .device-selector{flex:1;min-width:140px;max-width:calc(50% - 8px)}.live-stream-component .stream-controls .controls-section .device-controls .device-selector select{min-width:0;font-size:13px;width:100%;max-width:100%;box-sizing:border-box}.live-stream-component .stream-controls .controls-section .device-controls .mic-toggle{flex-shrink:0}.live-stream-component .stream-controls .controls-section .control-row{flex-direction:column;align-items:stretch;gap:var(--spacing-large)}.live-stream-component .stream-controls .controls-section .control-row .resolution-selector{width:100%}.live-stream-component .stream-controls .controls-section .control-row .control-btn-icon{align-self:center}}@media(max-width:480px){.live-stream-component .stream-controls{padding:var(--spacing-medium);width:100%;max-width:100%;box-sizing:border-box}.live-stream-component .stream-controls .controls-section{width:100%;max-width:100%;box-sizing:border-box}.live-stream-component .stream-controls .controls-section .device-controls{padding:var(--spacing-small);gap:6px;width:100%;max-width:100%;box-sizing:border-box;flex-direction:column}.live-stream-component .stream-controls .controls-section .device-controls .device-selector{min-width:120px;width:100%;max-width:100%}.live-stream-component .stream-controls .controls-section .device-controls .device-selector .device-icon{width:16px;height:16px}.live-stream-component .stream-controls .controls-section .device-controls .device-selector select{font-size:12px;padding:6px 8px;width:100%;max-width:100%;box-sizing:border-box}.live-stream-component .stream-controls .controls-section .device-controls .mic-toggle{min-width:32px;height:32px;align-self:flex-end}.live-stream-component .stream-controls .controls-section .device-controls .mic-toggle svg{width:16px;height:16px}}@supports (-webkit-overflow-scrolling: touch){.live-stream-component,.live-stream-component .stream-preview,.live-stream-component .stream-preview .video-container{-webkit-transform:translateZ(0);transform:translateZ(0)}.live-stream-component .stream-controls .controls-section .device-controls .device-selector select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");background-repeat:no-repeat;background-position:right 8px center;background-size:12px;padding-right:28px}}.betting-history{background-color:var(--surface-color);padding:var(--spacing-medium);border-radius:var(--spacing-medium);border:1px solid var(--border-color);display:flex;flex-direction:column;gap:var(--spacing-small);height:210px;min-height:210px;overflow:hidden}.betting-history__title{font-size:.9rem;font-weight:700;flex-shrink:0}.betting-history__list{display:flex;flex-direction:column;gap:var(--spacing-small);overflow-y:auto;flex:1;min-height:0}.betting-history__list::-webkit-scrollbar{width:4px}.betting-history__list::-webkit-scrollbar-track{background:var(--surface-color);border-radius:2px}.betting-history__list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}.betting-history__list::-webkit-scrollbar-thumb:hover{background:var(--text-color-secondary)}.betting-history__item{display:flex;flex-direction:column;gap:2px;padding:var(--spacing-small);border-bottom:1px solid var(--border-color);font-size:.8rem}.betting-history__item:last-child{border-bottom:none}.betting-history__user{font-weight:700;color:var(--text-color-primary)}.betting-history__details{color:var(--text-color-secondary)}.betting-history__characters{color:var(--primary-color)}.betting-history__loading,.betting-history__empty{text-align:center;color:var(--text-color-secondary);padding:var(--spacing-medium)}.chinese-character-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:3px;height:100%;width:100%;overflow:visible}.chinese-character-grid--loading{display:flex;align-items:center;justify-content:center;grid-template-columns:none;grid-template-rows:none}.chinese-character-grid__item{aspect-ratio:1/1;border:1px solid var(--border-color);border-radius:var(--spacing-small);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;background-color:#2e2e2e}.chinese-character-grid__item--red-text .chinese-character-grid__char{color:#f44;text-shadow:1px 1px 0px #660000,2px 2px 0px #880000,3px 3px 2px rgba(102,0,0,.8),4px 4px 4px rgba(68,0,0,.6)}.chinese-character-grid__item--bet-selected{transform:scale(.9);border-color:var(--primary-color);background-color:var(--primary-variant-color);box-shadow:0 0 8px rgba(var(--primary-color-rgb),.4)}.chinese-character-grid__item--fallback-selected{transform:scale(.95);border-color:var(--secondary-color);background-color:#03a9f433;box-shadow:0 0 8px #03a9f466;border-width:2px}.chinese-character-grid__item--winner-selected{transform:scale(.9);border-color:#ffa726;background-color:#ffa7264d;box-shadow:0 0 12px #ffa72699;border-width:3px}.chinese-character-grid__item--disabled{opacity:.5;cursor:not-allowed}.chinese-character-grid__item--disabled:hover{transform:none}.chinese-character-grid__char{font-size:1.5rem;font-weight:700;color:#fff;text-shadow:1px 1px 0px #000000,2px 2px 0px #444444,3px 3px 2px rgba(0,0,0,.8),4px 4px 4px rgba(0,0,0,.6)}.game-mode-selector{display:flex!important;flex-direction:column!important;gap:var(--spacing-small);height:100%;overflow:hidden}.game-mode-selector__section{display:flex;flex-direction:column;gap:var(--spacing-small);flex:1;min-height:0}.game-mode-selector__section-title{font-size:.75rem;color:var(--text-color-secondary);font-weight:400;margin-bottom:2px}.game-mode-selector__buttons{display:flex;flex-wrap:wrap;gap:var(--spacing-small);flex:1;align-content:flex-start}.game-mode-chip{background-color:transparent;border:1px solid var(--border-color);color:var(--text-color-secondary);padding:5px 10px;border-radius:12px;cursor:pointer;font-size:.75rem;white-space:nowrap}.game-mode-chip--return{border-color:var(--secondary-color);color:var(--secondary-color)}.game-mode-chip--selected{background-color:var(--primary-color);color:var(--background-color);border-color:var(--primary-color);font-weight:700}.game-mode-chip--disabled{opacity:.5;cursor:not-allowed;background-color:var(--border-color);color:var(--text-color-secondary)}.game-mode-selector__current{display:none}.bet-input-panel{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--spacing-small);padding:var(--spacing-medium);display:flex;flex-direction:column;gap:var(--spacing-small);flex:1;min-height:0}.bet-input-panel--empty{display:flex;align-items:center;justify-content:center;min-height:120px;color:var(--text-color-secondary);text-align:center}.bet-input-panel__hint{margin:0;font-size:.9rem;color:var(--text-color-secondary)}.bet-input-panel__selection{background-color:var(--background-color);border-radius:var(--spacing-small);padding:var(--spacing-small);display:flex;flex-direction:column;gap:var(--spacing-tiny)}.bet-input-panel__mode,.bet-input-panel__characters{display:flex;align-items:center;gap:var(--spacing-small);font-size:.9rem}.bet-input-panel__label{font-weight:500;color:var(--text-color-secondary);min-width:80px;flex-shrink:0}.bet-input-panel__value{color:var(--text-color);font-weight:600}.bet-input-panel__input-group{display:flex;flex-direction:column;gap:var(--spacing-tiny)}.bet-input-panel__input,.bet-input-panel__select{padding:var(--spacing-small);border:1px solid var(--border-color);border-radius:var(--spacing-tiny);background-color:var(--background-color);color:var(--text-color);font-size:.9rem}.bet-input-panel__input:focus,.bet-input-panel__select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.1)}.bet-input-panel__input:disabled,.bet-input-panel__select:disabled{background-color:var(--surface-color);color:var(--text-color-secondary);cursor:not-allowed}.bet-input-panel__input--readonly,.bet-input-panel__select--readonly{background-color:var(--surface-color);cursor:pointer}.bet-input-panel__input--readonly:hover:not(:disabled),.bet-input-panel__select--readonly:hover:not(:disabled){border-color:var(--primary-color)}.bet-input-panel__input--readonly:focus,.bet-input-panel__select--readonly:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(var(--primary-color-rgb),.1)}.bet-input-panel__user-info{background-color:var(--background-color);border-radius:var(--spacing-tiny);padding:var(--spacing-small);text-align:center;font-size:.85rem}.bet-input-panel__balance{color:var(--text-color-secondary);font-weight:500}.bet-input-panel__actions{display:flex;justify-content:center;align-items:center;gap:var(--spacing-medium);margin-top:auto}.bet-input-panel__clear-btn,.bet-input-panel__confirm-btn{border:none;padding:var(--spacing-small) var(--spacing-large);border-radius:var(--spacing-small);font-weight:600;font-size:1rem;cursor:pointer;transition:background-color .2s ease;min-width:120px}.bet-input-panel__clear-btn:disabled,.bet-input-panel__confirm-btn:disabled{background-color:var(--border-color);color:var(--text-color-secondary);cursor:not-allowed}.bet-input-panel__clear-btn{background-color:var(--text-color-secondary);color:var(--background-color)}.bet-input-panel__clear-btn:hover:not(:disabled){background-color:var(--text-color-primary)}.bet-input-panel__confirm-btn{background-color:var(--primary-color);color:#fff}.bet-input-panel__confirm-btn:hover:not(:disabled){background-color:var(--primary-variant-color)}@media(max-width:768px){.bet-input-panel{padding:var(--spacing-small);gap:var(--spacing-tiny)}.bet-input-panel__mode,.bet-input-panel__characters{flex-direction:column;align-items:flex-start;gap:var(--spacing-tiny)}.bet-input-panel__label{min-width:auto;font-size:.8rem}.bet-input-panel__value{font-size:.9rem}.bet-input-panel__input,.bet-input-panel__select{font-size:.85rem}.bet-input-panel__clear-btn,.bet-input-panel__confirm-btn{font-size:.9rem;min-width:100px}}.guess-area{background-color:var(--surface-color);padding:var(--spacing-small);border-radius:var(--spacing-medium);border:1px solid var(--border-color);display:flex!important;flex-direction:column!important;gap:var(--spacing-small);flex:1;overflow:hidden}.guess-area>.chinese-character-grid{flex:2;min-height:0;overflow:visible}.guess-area>.game-mode-selector{flex:1;min-height:0;overflow:hidden}.guess-area>.bet-input-panel{flex:2;min-height:0;overflow:hidden}.guess-area__actions{flex:.5;display:flex;gap:var(--spacing-medium);justify-content:center;align-items:center;padding:var(--spacing-small) 0}.guess-area__clear-btn{background-color:var(--surface-color);border:1px solid var(--border-color);color:var(--text-color-secondary);padding:var(--spacing-small) var(--spacing-medium);border-radius:var(--spacing-small);cursor:pointer}.guess-area__clear-btn:hover{background-color:var(--border-color)}.guess-area__bet-btn{background-color:var(--primary-color);color:#fff;border:none;padding:var(--spacing-small) var(--spacing-medium);border-radius:var(--spacing-small);cursor:pointer;font-weight:700}.guess-area__bet-btn:hover{background-color:var(--primary-color-dark)}.guess-area__bet-btn:disabled{background-color:var(--border-color);cursor:not-allowed}.guess-area--loading,.guess-area--disabled{display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--text-color-secondary)}.result-area{background-color:var(--surface-color);padding:var(--spacing-medium);border-radius:var(--spacing-medium);border:1px solid var(--border-color);display:flex;flex-direction:column;gap:var(--spacing-small);height:210px;min-height:210px;overflow:hidden}.result-area__title{font-size:.9rem;font-weight:700;flex-shrink:0}.result-area__current{flex-shrink:0}.result-area__content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-small)}.result-area__char-container{display:flex;align-items:center;gap:var(--spacing-medium)}.result-area__char-label{font-size:1rem}.result-area__char{font-size:2rem;font-weight:700;color:var(--primary-color)}.result-area__fallback-info,.result-area__waiting{font-size:.9rem;color:var(--text-color-secondary)}.result-area__history{display:flex;flex-direction:column;gap:var(--spacing-small);margin-top:var(--spacing-medium);flex-grow:1;min-height:0}.result-area__history-title{font-size:.8rem;color:var(--text-color-secondary);border-bottom:1px solid var(--border-color);padding-bottom:var(--spacing-small);flex-shrink:0}.result-area__history-list{list-style-type:none;overflow-y:auto;flex:1;min-height:0;padding-right:var(--spacing-small)}.result-area__history-list::-webkit-scrollbar{width:4px}.result-area__history-list::-webkit-scrollbar-track{background:var(--surface-color);border-radius:2px}.result-area__history-list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}.result-area__history-list::-webkit-scrollbar-thumb:hover{background:var(--text-color-secondary)}.result-area__history-item{display:flex;justify-content:space-between;font-size:.75rem;padding:var(--spacing-small) 0}.result-area__history-char{font-weight:700;color:var(--primary-color)}.result-area__loading,.result-area__empty{text-align:center;color:var(--text-color-secondary);padding:var(--spacing-medium)}.chat-area{background-color:var(--surface-color);padding:var(--spacing-medium);border-radius:var(--spacing-medium);border:1px solid var(--border-color);display:flex;flex-direction:column;gap:var(--spacing-small);height:300px;overflow:hidden}.chat-area__messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-small);padding:var(--spacing-small);border:1px solid var(--border-color);border-radius:var(--spacing-small);background-color:var(--background-color)}.chat-area__messages::-webkit-scrollbar{width:6px}.chat-area__messages::-webkit-scrollbar-track{background:var(--surface-color);border-radius:3px}.chat-area__messages::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.chat-area__messages::-webkit-scrollbar-thumb:hover{background:var(--text-color-secondary)}.chat-area__input-box{flex:.3;display:flex;gap:var(--spacing-small);align-items:center}.chat-area__input{flex-grow:1;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--spacing-small);padding:var(--spacing-small) var(--spacing-medium);color:var(--text-color-primary)}.chat-area__send-btn{background-color:var(--primary-color);color:var(--background-color);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:1rem}.chat-area__send-btn:hover{background-color:var(--primary-color-dark)}.chat-area__preset-menu{position:relative}.chat-area__menu-btn{background-color:var(--surface-color);border:1px solid var(--border-color);color:var(--text-color-primary);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem}.chat-area__menu-btn:hover{background-color:var(--border-color)}.chat-area__input-container{position:relative;display:flex;flex-direction:column;gap:var(--spacing-small)}.chat-area__preset-dropdown{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--spacing-medium);box-shadow:0 4px 16px #0003;max-height:120px;overflow-y:auto;margin-bottom:var(--spacing-small)}.chat-area__preset-dropdown::-webkit-scrollbar{width:6px}.chat-area__preset-dropdown::-webkit-scrollbar-track{background:var(--surface-color);border-radius:3px}.chat-area__preset-dropdown::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.chat-area__preset-dropdown::-webkit-scrollbar-thumb:hover{background:var(--text-color-secondary)}.chat-area__preset-item{display:block;width:100%;background:none;border:none;color:var(--text-color-primary);padding:var(--spacing-small) var(--spacing-medium);text-align:left;cursor:pointer;font-size:.85rem;border-bottom:1px solid var(--border-color)}.chat-area__preset-item:last-child{border-bottom:none}.chat-area__preset-item:hover{background-color:var(--primary-color);color:#fff}.chat-area__preset-empty{padding:var(--spacing-small) var(--spacing-medium);color:var(--text-color-secondary);font-size:.85rem;text-align:center;font-style:italic}.chat-area__loading-more{display:flex;align-items:center;justify-content:center;gap:var(--spacing-small);padding:var(--spacing-small);color:var(--text-color-secondary);font-size:.85rem}.chat-area__loading-icon{animation:spin 1s linear infinite}.chat-area__loading{text-align:center;color:var(--text-color-secondary);padding:var(--spacing-medium)}.chat-area__status{font-size:.9rem;color:var(--text-color-secondary)}.chat-area__status-bar{display:flex;justify-content:flex-end;padding:var(--spacing-small);border-bottom:1px solid var(--border-color);margin-bottom:var(--spacing-small)}.chat-area__connection-status{display:flex;align-items:center;gap:var(--spacing-small);font-size:.8rem;padding:2px 8px;border-radius:var(--spacing-small)}.chat-area__connection-status--connected{color:var(--success-color, #28a745);background-color:#28a7451a}.chat-area__connection-status--connecting{color:var(--warning-color, #ffc107);background-color:#ffc1071a}.chat-area__connection-status--disconnected,.chat-area__connection-status--error{color:var(--danger-color, #dc3545);background-color:#dc35451a}.chat-area__message{font-size:.9rem}.chat-area__message--system_notification{color:var(--secondary-color);font-style:italic;text-align:center;background-color:#6c757d1a;padding:var(--spacing-small);border-radius:var(--spacing-small)}.chat-area__message--player_message .chat-area__user-message,.chat-area__message--player_preset .chat-area__user-message{display:flex;flex-wrap:wrap;gap:var(--spacing-small);align-items:center}.chat-area__message--player_message .chat-area__username,.chat-area__message--player_preset .chat-area__username{color:var(--primary-color);font-weight:600}.chat-area__message--player_message .chat-area__content,.chat-area__message--player_preset .chat-area__content{flex:1}.chat-area__message--player_message .chat-area__preset-indicator,.chat-area__message--player_preset .chat-area__preset-indicator{font-size:.8rem;opacity:.7}.chat-area__message--admin_message .chat-area__username{color:var(--danger-color, #dc3545);font-weight:700}.chat-area__message--admin_message{background-color:#dc35450d;padding:var(--spacing-small);border-radius:var(--spacing-small);border-left:3px solid var(--danger-color, #dc3545)}.chat-area__system-message{color:var(--text-color-secondary);font-style:italic}.chat-area__input:disabled{background-color:var(--surface-color);color:var(--text-color-secondary);cursor:not-allowed}.chat-area__send-btn:disabled{background-color:var(--border-color);cursor:not-allowed}.chat-area__send-btn:disabled:hover{background-color:var(--border-color)}.chat-area__menu-btn:disabled{background-color:var(--surface-color);color:var(--text-color-secondary);cursor:not-allowed}.chat-area__menu-btn:disabled:hover{background-color:var(--surface-color)}.top-nav-bar{display:flex;justify-content:space-between;align-items:center;height:60px;padding:0 var(--spacing-large);background-color:var(--surface-color);border-bottom:1px solid var(--border-color);flex-shrink:0}.top-nav-bar .nav-left,.top-nav-bar .nav-right{display:flex;align-items:center;gap:var(--spacing-large)}.top-nav-bar .menu-button,.top-nav-bar .logout-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:1px solid var(--border-color);border-radius:8px;color:var(--text-color-primary);cursor:pointer;transition:all .2s ease}.top-nav-bar .menu-button:hover,.top-nav-bar .logout-button:hover{background-color:var(--primary-color);border-color:var(--primary-color);color:#fff}.top-nav-bar .menu-button svg,.top-nav-bar .logout-button svg{width:20px;height:20px}.top-nav-bar .room-info,.top-nav-bar .user-info{display:flex;align-items:center;gap:var(--spacing-medium)}.top-nav-bar .room-info .room-label,.top-nav-bar .room-info .user-label,.top-nav-bar .user-info .room-label,.top-nav-bar .user-info .user-label{font-size:12px;color:var(--text-color-secondary)}.top-nav-bar .room-info .room-id,.top-nav-bar .room-info .user-name,.top-nav-bar .user-info .room-id,.top-nav-bar .user-info .user-name{font-size:14px;font-weight:600;color:var(--text-color-primary)}.top-nav-bar .room-info .user-points,.top-nav-bar .user-info .user-points{display:flex;align-items:center;gap:var(--spacing-small);padding:4px 8px;background-color:var(--primary-color);border-radius:12px;color:#fff;font-size:12px;font-weight:600}.top-nav-bar .room-info .user-points .points-icon,.top-nav-bar .user-info .user-points .points-icon{width:12px;height:12px}.side-menu{position:fixed;top:0;left:-280px;width:280px;height:100vh;background-color:var(--surface-color);border-right:1px solid var(--border-color);transition:left .3s ease;z-index:999;overflow-y:auto}.side-menu.open{left:0}.side-menu .menu-header{padding:var(--spacing-large);border-bottom:1px solid var(--border-color)}.side-menu .menu-header h3{color:var(--text-color-primary);font-size:16px;font-weight:600}.side-menu .menu-nav{padding:var(--spacing-large)}.side-menu .menu-item{display:flex;align-items:center;gap:var(--spacing-large);width:100%;padding:var(--spacing-large);margin-bottom:var(--spacing-medium);background:transparent;border:none;border-radius:8px;color:var(--text-color-primary);text-align:left;cursor:pointer;transition:all .2s ease}.side-menu .menu-item:hover{background-color:#e539351a}.side-menu .menu-item.active{background-color:var(--primary-color);color:#fff}.side-menu .menu-item--logout{margin-top:var(--spacing-large);border-top:1px solid var(--border-color);border-radius:0;padding-top:var(--spacing-large)}.side-menu .menu-item--logout:hover{background-color:#dc35451a;color:var(--error-color)}.side-menu .menu-item .menu-icon{width:20px;height:20px}.side-menu .menu-item .menu-label{font-size:14px;font-weight:500}@media(max-width:768px){.top-nav-bar .room-info .room-label,.top-nav-bar .room-info .user-label,.top-nav-bar .user-info .room-label,.top-nav-bar .user-info .user-label{display:none}.top-nav-bar .room-info .user-points,.top-nav-bar .user-info .user-points{font-size:11px;padding:2px 6px}.top-nav-bar .room-info .user-points .points-icon,.top-nav-bar .user-info .user-points .points-icon{width:10px;height:10px}}.game-room{display:flex;flex-direction:column;height:100vh;overflow:hidden;background-color:var(--background-color)}.game-room__container{display:flex;flex-direction:column;flex:1;padding:var(--spacing-small);gap:var(--spacing-small);overflow-y:auto;min-height:0}.game-room__container::-webkit-scrollbar{width:6px}.game-room__container::-webkit-scrollbar-track{background:var(--background-color);border-radius:3px}.game-room__container::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.game-room__container::-webkit-scrollbar-thumb:hover{background:var(--text-color-secondary)}.game-room__main-content{flex:5;display:flex;flex-direction:column;gap:var(--spacing-small)}.game-room__guess-section{flex:2}.game-room__side-sections{display:flex;gap:var(--spacing-small);flex:3}.game-room__side-sections>*{flex:1}.game-room__chat-section{flex:0 0 auto}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-large);background-color:var(--background-color)}.auth-background{position:relative;width:100%;max-width:400px}.auth-background:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,var(--primary-color),var(--secondary-color));border-radius:12px;z-index:-1}.auth-card{background-color:var(--surface-color);border-radius:10px;padding:2rem;box-shadow:0 10px 30px #0000004d;position:relative;z-index:1}.auth-header{text-align:center;margin-bottom:2rem}.auth-title{font-size:2rem;font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-medium)}.auth-subtitle{color:var(--text-color-secondary);font-size:.9rem;margin:0}.auth-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:var(--spacing-medium)}.form-label{font-weight:600;color:var(--text-color-primary);font-size:.9rem}.form-input{padding:.75rem 1rem;border:2px solid var(--border-color);border-radius:6px;background-color:var(--background-color);color:var(--text-color-primary);font-size:1rem;transition:border-color .3s ease,box-shadow .3s ease}.form-input::placeholder{color:var(--text-color-secondary)}.form-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #e539351a}.form-input:hover{border-color:var(--primary-variant-color)}.error-message{background-color:#fdd8351a;color:var(--error-color);padding:.75rem 1rem;border-radius:6px;border:1px solid var(--error-color);font-size:.9rem;text-align:center}.auth-button{padding:.875rem 2rem;background:linear-gradient(135deg,var(--primary-color),var(--primary-variant-color));color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:var(--spacing-medium)}.auth-button:hover:not(:disabled){background:linear-gradient(135deg,var(--primary-variant-color),var(--primary-color));transform:translateY(-2px);box-shadow:0 6px 20px #e539354d}.auth-button:active:not(:disabled){transform:translateY(0)}.auth-button:disabled{opacity:.6;cursor:not-allowed}.auth-switch{display:flex;justify-content:center;align-items:center;gap:var(--spacing-medium);margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-color)}.switch-text{color:var(--text-color-secondary);font-size:.9rem}.switch-button{background:none;border:none;color:var(--primary-color);cursor:pointer;font-size:.9rem;font-weight:600;text-decoration:underline;transition:color .3s ease}.switch-button:hover{color:var(--primary-variant-color)}@media(max-width:480px){.auth-container{padding:var(--spacing-medium)}.auth-card{padding:1.5rem}.auth-title{font-size:1.5rem}.form-input{padding:.6rem .8rem}.auth-button{padding:.75rem 1.5rem}}.auth-button:disabled{position:relative}.auth-button:disabled:after{content:"";position:absolute;width:16px;height:16px;margin:auto;border:2px solid transparent;border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;inset:0}.admin-page-layout{display:flex;flex-direction:column;height:100vh;background-color:var(--background-color);overflow:hidden}.admin-top-nav-bar{display:flex;justify-content:space-between;align-items:center;height:60px;padding:0 var(--spacing-large);background-color:var(--surface-color);border-bottom:1px solid var(--border-color);flex-shrink:0}.admin-top-nav-bar .nav-left,.admin-top-nav-bar .nav-right{display:flex;align-items:center;gap:var(--spacing-large)}.admin-top-nav-bar .menu-button,.admin-top-nav-bar .logout-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:1px solid var(--border-color);border-radius:8px;color:var(--text-color-primary);cursor:pointer;transition:all .2s ease}.admin-top-nav-bar .menu-button:hover,.admin-top-nav-bar .logout-button:hover{background-color:var(--primary-color);border-color:var(--primary-color)}.admin-top-nav-bar .menu-button svg,.admin-top-nav-bar .logout-button svg{width:20px;height:20px}.admin-top-nav-bar .room-info,.admin-top-nav-bar .admin-info{display:flex;flex-direction:column;align-items:flex-start}.admin-top-nav-bar .room-info .room-label,.admin-top-nav-bar .room-info .admin-label,.admin-top-nav-bar .admin-info .room-label,.admin-top-nav-bar .admin-info .admin-label{font-size:12px;color:var(--text-color-secondary)}.admin-top-nav-bar .room-info .room-id,.admin-top-nav-bar .room-info .admin-name,.admin-top-nav-bar .admin-info .room-id,.admin-top-nav-bar .admin-info .admin-name{font-size:14px;font-weight:600;color:var(--text-color-primary)}.menu-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:998}.admin-side-menu{position:fixed;top:0;left:-280px;width:280px;height:100vh;background-color:var(--surface-color);border-right:1px solid var(--border-color);transition:left .3s ease;z-index:999;overflow-y:auto}.admin-side-menu.open{left:0}.admin-side-menu .menu-header{padding:var(--spacing-large);border-bottom:1px solid var(--border-color)}.admin-side-menu .menu-header h3{color:var(--text-color-primary);font-size:16px;font-weight:600}.admin-side-menu .menu-nav{padding:var(--spacing-large)}.admin-side-menu .menu-item{display:flex;align-items:center;gap:var(--spacing-large);width:100%;padding:var(--spacing-large);margin-bottom:var(--spacing-medium);background:transparent;border:none;border-radius:8px;color:var(--text-color-primary);text-align:left;cursor:pointer;transition:all .2s ease}.admin-side-menu .menu-item:hover{background-color:#e539351a}.admin-side-menu .menu-item.active{background-color:var(--primary-color);color:#fff}.admin-side-menu .menu-item .menu-icon{width:20px;height:20px}.admin-side-menu .menu-item .menu-label{font-size:14px;font-weight:500}.admin-main-content{flex:1;overflow-y:auto;padding:var(--spacing-small)}.admin-main-content::-webkit-scrollbar{width:6px}.admin-main-content::-webkit-scrollbar-track{background:var(--background-color);border-radius:3px}.admin-main-content::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.admin-main-content::-webkit-scrollbar-thumb:hover{background:var(--text-color-secondary)}@media(max-width:768px){.admin-top-nav-bar .room-info,.admin-top-nav-bar .admin-info{display:none}}.game-controller{padding:var(--spacing-large);height:100%;display:flex;flex-direction:column;position:relative}.game-controller--loading{align-items:center;justify-content:center}.game-controller--loading .loading-message{text-align:center;color:var(--text-color-secondary)}.game-controller--loading .loading-message p{font-size:14px;margin:0}.game-controller .controller-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-large)}.game-controller .controller-header h3{font-size:18px;font-weight:600}.game-controller .controller-header .game-status{padding:4px 12px;border-radius:16px;font-size:12px;font-weight:600}.game-controller .controller-header .game-status.status-gray{background-color:var(--border-color);color:var(--text-color-secondary)}.game-controller .controller-header .game-status.status-green{background-color:#4caf50;color:#fff}.game-controller .controller-header .game-status.status-red{background-color:var(--primary-color);color:#fff}.game-controller .controller-header .game-status.status-blue{background-color:var(--secondary-color);color:#fff}.game-controller .stats-controls-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-large);gap:var(--spacing-large)}.game-controller .game-stats{display:flex;gap:var(--spacing-large)}.game-controller .game-stats .stat-item{display:flex;flex-direction:column;align-items:center}.game-controller .game-stats .stat-item .stat-label{font-size:12px;color:var(--text-color-secondary)}.game-controller .game-stats .stat-item .stat-value{font-size:16px;font-weight:600;color:var(--text-color-primary)}.game-controller .main-controls .control-button{display:flex;align-items:center;gap:var(--spacing-medium);padding:12px 24px;border:none;border-radius:8px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.game-controller .main-controls .control-button:disabled{opacity:.5;cursor:not-allowed}.game-controller .main-controls .control-button.control-button--gray{background-color:var(--border-color)}.game-controller .main-controls .control-button.control-button--green{background-color:#4caf50}.game-controller .main-controls .control-button.control-button--red{background-color:var(--primary-color)}.game-controller .main-controls .control-button.control-button--blue{background-color:var(--secondary-color)}.game-controller .main-controls .control-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px #0003}.game-controller .character-selection{flex:1;display:flex;flex-direction:column}.game-controller .character-selection h4{margin-bottom:var(--spacing-medium);font-size:14px;color:var(--text-color-secondary);text-align:center}.game-controller .character-selection .selected-winner{margin-top:var(--spacing-medium);padding:var(--spacing-medium);background-color:var(--background-color);border-radius:4px;text-align:center;font-size:14px}.game-controller .settling-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#000c;color:#fff;border-radius:8px}.game-controller .settling-overlay .settling-spinner{width:40px;height:40px;border:4px solid var(--border-color);border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--spacing-medium)}.admin-main-page{display:flex;flex-direction:column;min-height:100%;gap:var(--spacing-small);padding-bottom:var(--spacing-large)}.admin-main-page__main-content{flex:5;display:flex;gap:var(--spacing-small)}.admin-main-page__game-section{flex:1;min-height:400px;background-color:var(--surface-color);border-radius:8px;border:1px solid var(--border-color);padding:var(--spacing-medium);display:flex;flex-direction:column}@media(max-width:768px){.admin-main-page__main-content{flex-direction:column}.admin-main-page__live-section{flex:0 0 150px}.admin-main-page__game-section{flex:0 0 300px}.admin-main-page__chat-section{flex:1;min-height:200px}}.message-management{padding:var(--spacing-large);max-width:800px;margin:0 auto}.message-management .management-header{display:flex;align-items:center;margin-bottom:var(--spacing-xl)}.message-management .management-header svg{width:24px;height:24px;color:var(--primary-color);margin-right:var(--spacing-medium)}.message-management .management-header h3{font-size:20px;font-weight:600;color:var(--text-color-primary)}.message-management .system-settings-section{background-color:var(--background-color);border-radius:8px;padding:var(--spacing-large);margin-bottom:var(--spacing-xl);border:1px solid var(--border-color)}.message-management .system-settings-section h4{font-size:16px;font-weight:600;color:var(--text-color-primary);margin-bottom:var(--spacing-large)}.message-management .system-settings-section .settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-large)}.message-management .system-settings-section .settings-grid .setting-item label{display:flex;align-items:center;gap:var(--spacing-medium);font-size:14px;color:var(--text-color-primary);cursor:pointer}.message-management .system-settings-section .settings-grid .setting-item label input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary-color)}.message-management .templates-section .templates-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-large)}.message-management .templates-section .templates-header h4{font-size:16px;font-weight:600;color:var(--text-color-primary)}.message-management .templates-section .templates-header .add-template-btn{display:flex;align-items:center;gap:var(--spacing-small);padding:8px 16px;background-color:var(--primary-color);border:none;border-radius:4px;color:#fff;font-size:14px;cursor:pointer;transition:all .2s ease}.message-management .templates-section .templates-header .add-template-btn:hover{background-color:var(--primary-variant-color);transform:translateY(-1px)}.message-management .templates-section .templates-header .add-template-btn svg{width:16px;height:16px}.message-management .templates-section .template-editor{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:8px;margin-bottom:var(--spacing-large);overflow:hidden}.message-management .templates-section .template-editor .editor-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-medium) var(--spacing-large);background-color:var(--primary-color);color:#fff}.message-management .templates-section .template-editor .editor-header h5{font-size:14px;font-weight:600}.message-management .templates-section .template-editor .editor-header .close-btn{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.message-management .templates-section .template-editor .editor-header .close-btn:hover{background-color:#ffffff1a;border-radius:4px}.message-management .templates-section .template-editor .editor-form{padding:var(--spacing-large)}.message-management .templates-section .template-editor .editor-form input,.message-management .templates-section .template-editor .editor-form textarea{width:100%;padding:10px;margin-bottom:var(--spacing-medium);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:4px;color:var(--text-color-primary);font-size:14px}.message-management .templates-section .template-editor .editor-form input::placeholder,.message-management .templates-section .template-editor .editor-form textarea::placeholder{color:var(--text-color-secondary)}.message-management .templates-section .template-editor .editor-form input:focus,.message-management .templates-section .template-editor .editor-form textarea:focus{outline:none;border-color:var(--primary-color)}.message-management .templates-section .template-editor .editor-form textarea{resize:vertical;min-height:80px}.message-management .templates-section .template-editor .editor-form .editor-actions{display:flex;gap:var(--spacing-medium);justify-content:flex-end}.message-management .templates-section .template-editor .editor-form .editor-actions button{padding:8px 16px;border:none;border-radius:4px;font-size:14px;cursor:pointer;transition:all .2s ease}.message-management .templates-section .template-editor .editor-form .editor-actions button.save-btn{background-color:var(--primary-color);color:#fff}.message-management .templates-section .template-editor .editor-form .editor-actions button.save-btn:hover{background-color:var(--primary-variant-color)}.message-management .templates-section .template-editor .editor-form .editor-actions button.cancel-btn{background-color:var(--border-color);color:var(--text-color-secondary)}.message-management .templates-section .template-editor .editor-form .editor-actions button.cancel-btn:hover{background-color:var(--text-color-secondary);color:#fff}.message-management .templates-section .templates-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--spacing-large)}.message-management .templates-section .templates-list .template-item{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:8px;padding:var(--spacing-large);transition:all .2s ease}.message-management .templates-section .templates-list .template-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.message-management .templates-section .templates-list .template-item .template-info{margin-bottom:var(--spacing-medium)}.message-management .templates-section .templates-list .template-item .template-info .template-title{font-size:14px;font-weight:600;color:var(--text-color-primary);margin-bottom:var(--spacing-small)}.message-management .templates-section .templates-list .template-item .template-info .template-content{font-size:13px;color:var(--text-color-secondary);line-height:1.4;margin:0}.message-management .templates-section .templates-list .template-item .template-actions{display:flex;gap:var(--spacing-small)}.message-management .templates-section .templates-list .template-item .template-actions button{padding:6px;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.message-management .templates-section .templates-list .template-item .template-actions button svg{width:14px;height:14px}.message-management .templates-section .templates-list .template-item .template-actions button.send-btn{background-color:var(--primary-color);color:#fff}.message-management .templates-section .templates-list .template-item .template-actions button.send-btn:hover{background-color:var(--primary-variant-color)}.message-management .templates-section .templates-list .template-item .template-actions button.edit-btn{background-color:var(--secondary-color);color:#fff}.message-management .templates-section .templates-list .template-item .template-actions button.edit-btn:hover{background-color:#0288d1}.message-management .templates-section .templates-list .template-item .template-actions button.delete-btn{background-color:var(--error-color);color:#fff}.message-management .templates-section .templates-list .template-item .template-actions button.delete-btn:hover{background-color:#d32f2f}@media(max-width:768px){.message-management{padding:var(--spacing-medium)}.message-management .templates-section .templates-list,.message-management .system-settings-section .settings-grid{grid-template-columns:1fr}}.user-management{padding:var(--spacing-large);height:100%;display:flex;flex-direction:column;overflow:hidden}.user-management .management-header{margin-bottom:var(--spacing-xl)}.user-management .management-header h3{font-size:20px;font-weight:600;color:var(--text-color-primary)}.user-management .search-filter-section{display:flex;align-items:stretch;gap:var(--spacing-medium);margin-bottom:var(--spacing-large);flex-wrap:wrap}.user-management .search-filter-section .search-box{flex:1;min-width:200px;position:relative;display:flex;align-items:center}.user-management .search-filter-section .search-box svg{position:absolute;left:12px;width:16px;height:16px;color:var(--text-color-secondary);z-index:1}.user-management .search-filter-section .search-box input{width:100%;padding:10px 10px 10px 36px;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:4px;color:var(--text-color-primary);font-size:14px}.user-management .search-filter-section .search-box input::placeholder{color:var(--text-color-secondary)}.user-management .search-filter-section .search-box input:focus{outline:none;border-color:var(--primary-color)}.user-management .search-filter-section .filter-box{flex-shrink:0}.user-management .search-filter-section .filter-box select{padding:10px;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:4px;color:var(--text-color-primary);font-size:14px;min-width:120px;width:100%}.user-management .search-filter-section .filter-box select:focus{outline:none;border-color:var(--primary-color)}.user-management .users-table{flex:1;background-color:var(--background-color);border-radius:8px;border:1px solid var(--border-color);overflow:hidden;display:flex;flex-direction:column;min-height:0}.user-management .users-table .table-header{display:flex;background-color:var(--primary-color);color:#fff;flex-shrink:0}.user-management .users-table .table-header .header-cell{padding:var(--spacing-small) var(--spacing-medium);font-size:14px;font-weight:600;text-align:left;display:flex;align-items:center}.user-management .users-table .table-header .header-cell:nth-child(1){flex:2;min-width:100px}.user-management .users-table .table-header .header-cell:nth-child(2){flex:2;min-width:100px}.user-management .users-table .table-header .header-cell:nth-child(3){flex:1.2;min-width:80px}.user-management .users-table .table-header .header-cell:nth-child(4){flex:1;min-width:70px}.user-management .users-table .table-header .header-cell:nth-child(5){flex:1.5;min-width:110px}.user-management .users-table .table-header .header-cell:nth-child(6){flex:2;min-width:120px}.user-management .users-table .table-body{flex:1;overflow-y:auto;min-height:0}.user-management .users-table .table-body .table-row{display:flex;border-bottom:1px solid var(--border-color);transition:background-color .2s ease;min-height:65px}.user-management .users-table .table-body .table-row:hover{background-color:rgba(var(--primary-color-rgb),.05)}.user-management .users-table .table-body .table-row .table-cell{padding:var(--spacing-small) var(--spacing-medium);font-size:14px;color:var(--text-color-primary);display:flex;align-items:center;word-break:break-word}.user-management .users-table .table-body .table-row .table-cell:nth-child(1){flex:2;min-width:100px}.user-management .users-table .table-body .table-row .table-cell:nth-child(2){flex:2;min-width:100px}.user-management .users-table .table-body .table-row .table-cell:nth-child(3){flex:1.2;min-width:80px}.user-management .users-table .table-body .table-row .table-cell:nth-child(4){flex:1;min-width:70px}.user-management .users-table .table-body .table-row .table-cell:nth-child(5){flex:1.5;min-width:110px}.user-management .users-table .table-body .table-row .table-cell:nth-child(6){flex:2;min-width:120px}.user-management .users-table .table-body .table-row .table-cell.points-cell{font-weight:600;color:var(--primary-color);justify-content:flex-start}.user-management .users-table .table-body .table-row .table-cell.points-adjustment-cell{padding:var(--spacing-small);justify-content:center}.user-management .users-table .table-body .loading-row{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl);min-height:120px}.user-management .users-table .table-body .loading-row .loading-text{color:var(--text-color-secondary);font-size:14px}.user-management .points-adjustment{display:flex;align-items:center;justify-content:center;width:100%}.user-management .points-adjustment .points-input-group{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}.user-management .points-adjustment .points-input-group .points-input{width:80px;padding:6px 8px;border:1px solid var(--border-color);border-radius:4px;font-size:13px;background-color:var(--background-color);color:var(--text-color-primary);text-align:center}.user-management .points-adjustment .points-input-group .points-input:focus{outline:none;border-color:var(--primary-color)}.user-management .points-adjustment .edit-btn{background-color:var(--primary-color);color:#fff;border:none;padding:8px 14px;border-radius:4px;font-size:13px;cursor:pointer;white-space:nowrap}.user-management .points-adjustment .edit-btn:hover{background-color:var(--primary-variant-color)}.user-management .role-badge{padding:2px 8px;border-radius:12px;font-size:12px;font-weight:600}.user-management .role-badge.role-player{background-color:var(--secondary-color);color:#fff}.user-management .role-badge.role-admin{background-color:var(--primary-color);color:#fff}.user-management .action-btn{padding:6px 8px;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;font-size:13px;min-width:28px;height:28px}.user-management .action-btn svg{width:14px;height:14px}.user-management .action-btn.add-btn{background-color:#4caf50;color:#fff}.user-management .action-btn.add-btn:hover:not(:disabled){background-color:#388e3c}.user-management .action-btn.subtract-btn{background-color:#f44336;color:#fff}.user-management .action-btn.subtract-btn:hover:not(:disabled){background-color:#d32f2f}.user-management .action-btn.cancel-btn{background-color:var(--border-color);color:var(--text-color-secondary);font-weight:700}.user-management .action-btn.cancel-btn:hover{background-color:var(--text-color-secondary);color:#fff}.user-management .action-btn:disabled{opacity:.5;cursor:not-allowed}.user-management .pagination{display:flex;justify-content:center;align-items:center;gap:var(--spacing-small);margin-top:var(--spacing-large);flex-wrap:wrap;padding:0 var(--spacing-medium)}.user-management .pagination button{padding:8px 12px;border:1px solid var(--border-color);background-color:var(--background-color);color:var(--text-color-primary);border-radius:4px;cursor:pointer;transition:all .2s ease;min-width:40px;flex-shrink:0}.user-management .pagination button:hover:not(:disabled){background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.user-management .pagination button:disabled{opacity:.5;cursor:not-allowed}.user-management .pagination button.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.user-management .pagination .page-numbers{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}.user-management .modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.user-management .modal-overlay .modal-content{background-color:var(--card-background);border-radius:8px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 8px 32px #0003}.user-management .modal-overlay .modal-content .modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-large);border-bottom:1px solid var(--border-color)}.user-management .modal-overlay .modal-content .modal-header h4{font-size:16px;font-weight:600;color:var(--text-color-primary)}.user-management .modal-overlay .modal-content .modal-header .close-btn{background:none;border:none;font-size:20px;color:var(--text-color-secondary);cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.user-management .modal-overlay .modal-content .modal-header .close-btn:hover{color:var(--text-color-primary)}.user-management .modal-overlay .modal-content .modal-body{padding:var(--spacing-large)}.user-management .modal-overlay .modal-content .modal-body .current-points{background-color:var(--background-color);padding:var(--spacing-medium);border-radius:4px;margin-bottom:var(--spacing-large);font-size:14px;color:var(--text-color-secondary)}.user-management .modal-overlay .modal-content .modal-body .current-points strong{color:var(--primary-color);font-size:16px}.user-management .modal-overlay .modal-content .modal-body .form-group{margin-bottom:var(--spacing-large)}.user-management .modal-overlay .modal-content .modal-body .form-group label{display:block;margin-bottom:var(--spacing-small);font-size:14px;font-weight:600;color:var(--text-color-primary)}.user-management .modal-overlay .modal-content .modal-body .form-group input,.user-management .modal-overlay .modal-content .modal-body .form-group textarea{width:100%;padding:10px;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:4px;color:var(--text-color-primary);font-size:14px}.user-management .modal-overlay .modal-content .modal-body .form-group input::placeholder,.user-management .modal-overlay .modal-content .modal-body .form-group textarea::placeholder{color:var(--text-color-secondary)}.user-management .modal-overlay .modal-content .modal-body .form-group input:focus,.user-management .modal-overlay .modal-content .modal-body .form-group textarea:focus{outline:none;border-color:var(--primary-color)}.user-management .modal-overlay .modal-content .modal-body .form-group textarea{resize:vertical;min-height:80px}.user-management .modal-overlay .modal-content .modal-body .form-group small{display:block;margin-top:var(--spacing-small);font-size:12px;color:var(--text-color-secondary)}.user-management .modal-overlay .modal-content .modal-body .user-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-large)}.user-management .modal-overlay .modal-content .modal-body .user-detail-grid .detail-item label{font-size:12px;color:var(--text-color-secondary);margin-bottom:4px}.user-management .modal-overlay .modal-content .modal-body .user-detail-grid .detail-item span{font-size:14px;color:var(--text-color-primary);font-weight:500}.user-management .modal-overlay .modal-content .modal-footer{display:flex;justify-content:flex-end;gap:var(--spacing-medium);padding:var(--spacing-large);border-top:1px solid var(--border-color)}.user-management .modal-overlay .modal-content .modal-footer button{padding:8px 16px;border:none;border-radius:4px;font-size:14px;cursor:pointer;transition:all .2s ease}.user-management .modal-overlay .modal-content .modal-footer button.confirm-btn{background-color:var(--primary-color);color:#fff}.user-management .modal-overlay .modal-content .modal-footer button.confirm-btn:hover:not(:disabled){background-color:var(--primary-variant-color)}.user-management .modal-overlay .modal-content .modal-footer button.confirm-btn:disabled{opacity:.5;cursor:not-allowed}.user-management .modal-overlay .modal-content .modal-footer button.cancel-btn,.user-management .modal-overlay .modal-content .modal-footer button.close-btn{background-color:var(--border-color);color:var(--text-color-secondary)}.user-management .modal-overlay .modal-content .modal-footer button.cancel-btn:hover,.user-management .modal-overlay .modal-content .modal-footer button.close-btn:hover{background-color:var(--text-color-secondary);color:#fff}@media(max-width:768px){.user-management{padding:var(--spacing-small)}.user-management .search-filter-section{flex-direction:column;gap:var(--spacing-medium)}.user-management .search-filter-section .search-box,.user-management .search-filter-section .filter-box select{min-width:unset}.user-management .users-table .table-header .header-cell{padding:var(--spacing-small);font-size:12px}.user-management .users-table .table-header .header-cell:nth-child(1){flex:1.5}.user-management .users-table .table-header .header-cell:nth-child(2){flex:1.5}.user-management .users-table .table-header .header-cell:nth-child(3){flex:1}.user-management .users-table .table-header .header-cell:nth-child(4){display:none}.user-management .users-table .table-header .header-cell:nth-child(5){display:none}.user-management .users-table .table-header .header-cell:nth-child(6){flex:2}.user-management .users-table .table-body .table-row{min-height:50px}.user-management .users-table .table-body .table-row .table-cell{padding:var(--spacing-small);font-size:12px}.user-management .users-table .table-body .table-row .table-cell:nth-child(1){flex:1.5}.user-management .users-table .table-body .table-row .table-cell:nth-child(2){flex:1.5}.user-management .users-table .table-body .table-row .table-cell:nth-child(3){flex:1}.user-management .users-table .table-body .table-row .table-cell:nth-child(4){display:none}.user-management .users-table .table-body .table-row .table-cell:nth-child(5){display:none}.user-management .users-table .table-body .table-row .table-cell:nth-child(6){flex:2}.user-management .users-table .points-adjustment .points-input-group{flex-direction:column;gap:2px}.user-management .users-table .points-adjustment .points-input-group .points-input{width:50px;font-size:11px}.user-management .users-table .points-adjustment .points-input-group .action-btn{font-size:10px;min-width:20px;height:20px}.user-management .users-table .points-adjustment .points-input-group .action-btn svg{width:10px;height:10px}.user-management .users-table .points-adjustment .edit-btn{font-size:10px;padding:4px 6px}.user-management .pagination{gap:2px;margin-top:var(--spacing-medium)}.user-management .pagination button{padding:6px 8px;font-size:12px;min-width:32px}.user-management .pagination .page-numbers{gap:2px;max-width:200px;overflow-x:auto}.user-management .pagination .page-numbers::-webkit-scrollbar{height:2px}.user-management .pagination .page-numbers::-webkit-scrollbar-track{background:var(--border-color)}.user-management .pagination .page-numbers::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:2px}.user-management .modal-overlay .modal-content{width:95%;margin:var(--spacing-small);max-height:90vh}.user-management .modal-overlay .modal-content .modal-body{padding:var(--spacing-medium)}.user-management .modal-overlay .modal-content .modal-body .user-detail-grid{grid-template-columns:1fr;gap:var(--spacing-medium)}.user-management .modal-overlay .modal-content .modal-body .form-group{margin-bottom:var(--spacing-medium)}.user-management .modal-overlay .modal-content .modal-footer{padding:var(--spacing-medium);flex-direction:column;gap:var(--spacing-small)}.user-management .modal-overlay .modal-content .modal-footer button{width:100%}}@media(max-width:480px){.user-management{padding:var(--spacing-small)}.user-management .users-table .table-header .header-cell{padding:4px;font-size:11px}.user-management .users-table .table-header .header-cell:nth-child(1){flex:1.2}.user-management .users-table .table-header .header-cell:nth-child(2){flex:1.2}.user-management .users-table .table-header .header-cell:nth-child(3){flex:.8}.user-management .users-table .table-header .header-cell:nth-child(6){flex:1.8}.user-management .users-table .table-body .table-row{min-height:45px}.user-management .users-table .table-body .table-row .table-cell{padding:4px;font-size:11px}.user-management .users-table .table-body .table-row .table-cell:nth-child(1){flex:1.2}.user-management .users-table .table-body .table-row .table-cell:nth-child(2){flex:1.2}.user-management .users-table .table-body .table-row .table-cell:nth-child(3){flex:.8}.user-management .users-table .table-body .table-row .table-cell:nth-child(6){flex:1.8}.user-management .points-adjustment .points-input-group .points-input{width:40px}.user-management .points-adjustment .points-input-group .action-btn{min-width:18px;height:18px}.user-management .points-adjustment .points-input-group .action-btn svg{width:8px;height:8px}.user-management .points-adjustment .edit-btn{font-size:9px;padding:3px 5px}}.qr-code-management{padding:var(--spacing-large);max-width:1200px;margin:0 auto;background-color:var(--background-color);color:var(--text-color-primary)}.qr-code-management__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.qr-code-management__header h2{margin:0;color:var(--text-color-primary);font-family:var(--font-family)}.qr-code-management__upload-form{margin-bottom:30px}.qr-code-management__upload-form .form-card{background:var(--surface-color);border-radius:8px;padding:25px;box-shadow:0 2px 8px #0000004d;border:1px solid var(--border-color)}.qr-code-management__upload-form .form-card h3{margin:0 0 20px;color:var(--text-color-primary);border-bottom:2px solid var(--border-color);padding-bottom:10px;font-family:var(--font-family)}.qr-code-management__upload-form .form-group{margin-bottom:20px}.qr-code-management__upload-form .form-group label{display:block;margin-bottom:5px;font-weight:500;color:var(--text-color-primary);font-family:var(--font-family)}.qr-code-management__upload-form .form-group label:has(input[type=checkbox]){display:flex;align-items:center;gap:8px}.qr-code-management__upload-form .form-group label:has(input[type=checkbox]) input{margin:0}.qr-code-management__upload-form .form-group input,.qr-code-management__upload-form .form-group textarea{width:100%;padding:10px;border:1px solid var(--border-color);border-radius:4px;font-size:14px;transition:border-color .2s;background-color:var(--surface-color);color:var(--text-color-primary);font-family:var(--font-family)}.qr-code-management__upload-form .form-group input:focus,.qr-code-management__upload-form .form-group textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #e5393540}.qr-code-management__upload-form .form-group input:disabled,.qr-code-management__upload-form .form-group textarea:disabled{background-color:var(--background-color);cursor:not-allowed;opacity:.6}.qr-code-management__upload-form .form-group input::placeholder,.qr-code-management__upload-form .form-group textarea::placeholder{color:var(--text-color-secondary)}.qr-code-management__upload-form .form-group small{display:block;margin-top:5px;color:var(--text-color-secondary);font-size:12px}.qr-code-management__upload-form .preview-container{margin-bottom:20px}.qr-code-management__upload-form .preview-container .preview-image{max-width:200px;max-height:200px;border:1px solid var(--border-color);border-radius:4px;display:block;margin-top:5px;background:var(--surface-color)}.qr-code-management__upload-form .upload-progress{margin-bottom:20px}.qr-code-management__upload-form .upload-progress .progress-bar{width:100%;height:8px;background-color:var(--border-color);border-radius:4px;overflow:hidden;margin-bottom:5px}.qr-code-management__upload-form .upload-progress .progress-bar .progress-fill{height:100%;background-color:var(--primary-color);transition:width .3s ease}.qr-code-management__upload-form .upload-progress span{font-size:14px;color:var(--text-color-primary)}.qr-code-management__upload-form .form-actions{display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--border-color);padding-top:20px;margin-top:20px}.qr-code-management__list .empty-state{text-align:center;padding:60px 20px;color:var(--text-color-secondary);background:var(--surface-color);border-radius:8px;border:2px dashed var(--border-color)}.qr-code-management__list .qr-codes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:20px}.qr-code-management__list .qr-code-item{background:var(--surface-color);border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000004d;border:1px solid var(--border-color);transition:transform .2s,box-shadow .2s}.qr-code-management__list .qr-code-item:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0006;border-color:var(--primary-color)}.qr-code-management__list .qr-code-item__image{position:relative;width:100%;height:200px;overflow:hidden;background:var(--background-color)}.qr-code-management__list .qr-code-item__image img{width:100%;height:100%;object-fit:contain;object-position:center}.qr-code-management__list .qr-code-item__image .inactive-overlay{position:absolute;inset:0;background:#000000b3;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}.qr-code-management__list .qr-code-item__content{padding:15px}.qr-code-management__list .qr-code-item__content h4{margin:0 0 5px;color:var(--text-color-primary);font-size:16px;font-family:var(--font-family)}.qr-code-management__list .qr-code-item__content p{margin:0 0 10px;color:var(--text-color-secondary);font-size:14px;line-height:1.4}.qr-code-management__list .qr-code-item__content .meta-info{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-color)}.qr-code-management__list .qr-code-item__content .meta-info small{color:var(--text-color-secondary);font-size:12px}.qr-code-management__list .qr-code-item__actions{display:flex;justify-content:flex-end;gap:5px;padding:10px 15px;background:var(--background-color);border-top:1px solid var(--border-color)}.qr-code-management .loading{text-align:center;padding:40px;color:var(--text-color-secondary);font-size:16px}.btn{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .2s}.btn--primary{background-color:var(--primary-color);color:var(--text-color-primary)}.btn--primary:hover:not(:disabled){background-color:var(--primary-variant-color)}.btn--secondary{background-color:var(--border-color);color:var(--text-color-primary)}.btn--secondary:hover:not(:disabled){background-color:var(--text-color-secondary)}.btn--icon{padding:8px;min-width:36px;justify-content:center;background-color:var(--surface-color);color:var(--text-color-primary);border:1px solid var(--border-color)}.btn--icon:hover:not(:disabled){background-color:var(--background-color);border-color:var(--primary-color)}.btn--icon.active{background-color:var(--secondary-color);color:var(--text-color-primary);border-color:var(--secondary-color)}.btn--icon.inactive{background-color:var(--border-color);color:var(--text-color-primary);border-color:var(--border-color)}.btn--icon--danger{background-color:var(--error-color);color:var(--background-color);border-color:var(--error-color)}.btn--icon--danger:hover:not(:disabled){background-color:var(--primary-color);border-color:var(--primary-color)}@media(max-width:768px){.qr-code-management{padding:10px}.qr-code-management__header{flex-direction:column;gap:15px;align-items:stretch}.qr-code-management__list .qr-codes-grid{grid-template-columns:1fr}.qr-code-management .form-actions{flex-direction:column;align-items:stretch}}.user-page-layout{display:flex;flex-direction:column;height:100vh;background-color:var(--background-color);overflow:hidden}.user-main-content{flex:1;overflow-y:auto;padding:var(--spacing-small)}.user-main-content::-webkit-scrollbar{width:6px}.user-main-content::-webkit-scrollbar-track{background:var(--background-color);border-radius:3px}.user-main-content::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.user-main-content::-webkit-scrollbar-thumb:hover{background:var(--text-color-secondary)}@media(max-width:768px){.user-page-layout .user-main-content{padding:var(--spacing-medium)}}.user-profile{max-width:600px;margin:0 auto;padding:var(--spacing-large)}.user-profile .component-header{text-align:center;margin-bottom:var(--spacing-xl)}.user-profile .component-header h2{color:var(--text-color-primary);font-size:1.8rem;font-weight:600;margin-bottom:var(--spacing-medium)}.user-profile .component-header .component-description{color:var(--text-color-secondary);font-size:.9rem;line-height:1.5}.user-profile .component-form .form-group{margin-bottom:var(--spacing-large)}.user-profile .component-form .form-group label{display:block;font-size:14px;font-weight:500;color:var(--text-color-primary);margin-bottom:var(--spacing-small)}.user-profile .component-form .form-group .input-wrapper{position:relative;display:flex;align-items:center}.user-profile .component-form .form-group .input-wrapper .input-icon{position:absolute;left:12px;width:18px;height:18px;color:var(--text-color-secondary);z-index:1}.user-profile .component-form .form-group .input-wrapper input{width:100%;padding:12px 12px 12px 40px;border:1px solid var(--border-color);border-radius:8px;font-size:14px;color:var(--text-color-primary);background-color:var(--surface-color);transition:all .2s ease}.user-profile .component-form .form-group .input-wrapper input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #e539351a}.user-profile .component-form .form-group .input-wrapper input.error{border-color:var(--error-color);box-shadow:0 0 0 3px #dc35451a}.user-profile .component-form .form-group .input-wrapper input::placeholder{color:var(--text-color-secondary)}.user-profile .component-form .form-group .error-message{display:block;margin-top:var(--spacing-small);font-size:12px;color:var(--error-color)}.user-profile .component-form .form-actions{display:flex;gap:var(--spacing-medium);justify-content:flex-end;margin-top:var(--spacing-xl);padding-top:var(--spacing-large);border-top:1px solid var(--border-color)}.user-profile .readonly-section{margin-bottom:var(--spacing-xl);padding:var(--spacing-large);background-color:var(--background-color);border-radius:12px;border:1px solid var(--border-color)}.user-profile .readonly-section h3{color:var(--text-color-primary);font-size:1.2rem;font-weight:600;margin-bottom:var(--spacing-large);text-align:center}.user-profile .readonly-section .readonly-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-large)}.user-profile .readonly-section .readonly-item{display:flex;align-items:center;gap:var(--spacing-medium);padding:var(--spacing-medium);background-color:var(--surface-color);border-radius:8px}.user-profile .readonly-section .readonly-item .readonly-icon{width:24px;height:24px;color:var(--primary-color)}.user-profile .readonly-section .readonly-item .readonly-content{flex:1}.user-profile .readonly-section .readonly-item .readonly-content label{display:block;font-size:12px;color:var(--text-color-secondary);margin-bottom:var(--spacing-small)}.user-profile .readonly-section .readonly-item .readonly-content span{font-size:14px;font-weight:500;color:var(--text-color-primary)}.user-profile .readonly-section .readonly-item .readonly-content span.points-value{color:var(--primary-color);font-weight:600}.user-profile .editable-section h3{color:var(--text-color-primary);font-size:1.2rem;font-weight:600;margin-bottom:var(--spacing-large);padding-bottom:var(--spacing-medium);border-bottom:1px solid var(--border-color)}.btn.btn-outline{background-color:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}.btn.btn-outline:hover:not(:disabled){background-color:var(--primary-color);color:#fff}@media(max-width:768px){.user-profile{padding:var(--spacing-medium)}.user-profile .component-form .form-actions{flex-direction:column-reverse}.user-profile .component-form .form-actions .btn{width:100%}.user-profile .readonly-section .readonly-grid{grid-template-columns:1fr}}.user-profile-page{max-width:800px;margin:0 auto;padding:var(--spacing-large)}.user-profile-page .success-message{position:fixed;top:20px;left:50%;transform:translate(-50%);background-color:var(--success-color, #4caf50);color:#fff;padding:var(--spacing-medium) var(--spacing-large);border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:1000;animation:slideIn .3s ease-out}.user-profile-page .success-message p{margin:0;font-size:14px;font-weight:500}@media(max-width:768px){.user-profile-page{padding:var(--spacing-medium)}}.change-password{max-width:500px;margin:0 auto;padding:var(--spacing-large);background-color:var(--surface-color);border-radius:12px;border:1px solid var(--border-color)}.change-password .component-header{text-align:center;margin-bottom:var(--spacing-xl)}.change-password .component-header h2{color:var(--text-color-primary);font-size:1.8rem;font-weight:600;margin-bottom:var(--spacing-medium)}.change-password .component-header .component-description{color:var(--text-color-secondary);font-size:.9rem;line-height:1.5}.change-password .component-form .form-group{margin-bottom:var(--spacing-large)}.change-password .component-form .form-group label{display:block;font-size:14px;font-weight:500;color:var(--text-color-primary);margin-bottom:var(--spacing-small)}.change-password .component-form .form-group .password-input{position:relative;display:flex;align-items:center}.change-password .component-form .form-group .password-input .input-icon{position:absolute;left:12px;width:18px;height:18px;color:var(--text-color-secondary);z-index:1}.change-password .component-form .form-group .password-input input{width:100%;padding:12px 40px;border:1px solid var(--border-color);border-radius:8px;font-size:14px;color:var(--text-color-primary);background-color:var(--background-color);transition:all .2s ease}.change-password .component-form .form-group .password-input input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #e539351a}.change-password .component-form .form-group .password-input input.error{border-color:var(--error-color);box-shadow:0 0 0 3px #dc35451a}.change-password .component-form .form-group .password-input input::placeholder{color:var(--text-color-secondary)}.change-password .component-form .form-group .password-input .password-toggle{position:absolute;right:12px;background:none;border:none;color:var(--text-color-secondary);cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.change-password .component-form .form-group .password-input .password-toggle:hover{color:var(--text-color-primary);background-color:#0000000d}.change-password .component-form .form-group .password-input .password-toggle svg{width:18px;height:18px}.change-password .component-form .form-group .error-message{display:block;margin-top:var(--spacing-small);font-size:12px;color:var(--error-color)}.change-password .component-form .password-strength{margin-top:var(--spacing-small)}.change-password .component-form .password-strength .strength-bar{width:100%;height:6px;background-color:var(--border-color);border-radius:3px;overflow:hidden;margin-bottom:var(--spacing-small)}.change-password .component-form .password-strength .strength-bar .strength-fill{height:100%;transition:all .3s ease;border-radius:3px}.change-password .component-form .password-strength .strength-text{font-size:12px;font-weight:500}.change-password .component-form .password-requirements{margin-top:var(--spacing-medium);padding:var(--spacing-medium);background-color:var(--background-color);border-radius:8px;border:1px solid var(--border-color)}.change-password .component-form .password-requirements .requirement-item{display:flex;align-items:center;gap:var(--spacing-small);margin-bottom:var(--spacing-small);font-size:12px}.change-password .component-form .password-requirements .requirement-item:last-child{margin-bottom:0}.change-password .component-form .password-requirements .requirement-item .check-icon{width:14px;height:14px}.change-password .component-form .password-requirements .requirement-item .check-icon.success{color:var(--success-color, #4caf50)}.change-password .component-form .password-requirements .requirement-item .check-icon.error{color:var(--error-color)}.change-password .component-form .password-requirements .requirement-item span{color:var(--text-color-secondary)}.change-password .component-form .form-actions{display:flex;gap:var(--spacing-medium);justify-content:flex-end;margin-top:var(--spacing-xl);padding-top:var(--spacing-large);border-top:1px solid var(--border-color)}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-width:100px}.btn:disabled{opacity:.6;cursor:not-allowed}.btn.btn-primary{background-color:var(--primary-color);color:#fff}.btn.btn-primary:hover:not(:disabled){background-color:var(--primary-color-dark, #c62828)}.btn.btn-secondary{background-color:var(--surface-color);color:var(--text-color-primary);border:1px solid var(--border-color)}.btn.btn-secondary:hover:not(:disabled){background-color:var(--background-color)}@media(max-width:768px){.change-password{padding:var(--spacing-medium);margin:var(--spacing-medium)}.change-password .component-form .form-actions{flex-direction:column-reverse}.change-password .component-form .form-actions .btn{width:100%}}.change-password-page{max-width:600px;margin:0 auto;padding:var(--spacing-large);display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 120px)}.change-password-page .success-message{position:fixed;top:20px;left:50%;transform:translate(-50%);background-color:var(--success-color, #4caf50);color:#fff;padding:var(--spacing-medium) var(--spacing-large);border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:1000;animation:slideIn .3s ease-out}.change-password-page .success-message p{margin:0;font-size:14px;font-weight:500}@keyframes slideIn{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(max-width:768px){.change-password-page{padding:var(--spacing-medium);min-height:calc(100vh - 100px)}}.qr-code-display{padding:var(--spacing-large);min-height:400px;background-color:var(--background-color);color:var(--text-color-primary)}.qr-code-display__header{text-align:center;margin-bottom:var(--spacing-large)}.qr-code-display__title{font-size:24px;font-weight:600;color:var(--primary-color);margin:0;font-family:var(--font-family)}.qr-code-display__container{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:var(--spacing-large)}.qr-code-display__loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--text-color-secondary)}.qr-code-display__loading .loading-spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top:3px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:15px}.qr-code-display__loading p{margin:0;font-size:16px;color:var(--text-color-primary)}.qr-code-display__empty{display:flex;align-items:center;justify-content:center;padding:60px 20px;color:var(--text-color-secondary);text-align:center;background:var(--surface-color);border-radius:8px;border:2px dashed var(--border-color)}.qr-code-display__empty p{margin:0;font-size:16px;color:var(--text-color-primary)}.qr-code-card{background:var(--surface-color);border-radius:12px;box-shadow:0 4px 16px #0000004d;border:1px solid var(--border-color);overflow:hidden;transition:transform .2s,box-shadow .2s}.qr-code-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0006;border-color:var(--primary-color)}.qr-code-card__header{padding:20px 20px 15px;text-align:center;background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-variant-color) 100%);color:var(--text-color-primary)}.qr-code-card__header h3{margin:0 0 8px;font-size:20px;font-weight:600;font-family:var(--font-family)}.qr-code-card__header .description{margin:0;font-size:14px;opacity:.9;line-height:1.4;color:var(--text-color-primary)}.qr-code-card__image{padding:30px;display:flex;justify-content:center;align-items:center;background:var(--background-color);min-height:280px}.qr-code-card__image img{max-width:100%;max-height:250px;width:auto;height:auto;border-radius:8px;box-shadow:0 2px 8px #0000004d;background:var(--surface-color);padding:10px;border:1px solid var(--border-color)}.qr-code-card__image .image-error{display:flex;align-items:center;justify-content:center;width:200px;height:200px;background:var(--surface-color);border-radius:8px;color:var(--text-color-secondary);font-size:14px;text-align:center;border:1px solid var(--border-color)}.qr-code-card__footer{padding:15px 20px;text-align:center;background:var(--background-color);border-top:1px solid var(--border-color)}.qr-code-card__footer .scan-tip{margin:0;font-size:14px;color:var(--text-color-secondary);font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:768px){.qr-code-display{padding:15px}.qr-code-display__container{max-width:100%}.qr-code-card__header{padding:15px 15px 12px}.qr-code-card__header h3{font-size:18px}.qr-code-card__image{padding:20px;min-height:220px}.qr-code-card__image img{max-height:200px}.qr-code-card__image .image-error{width:180px;height:180px}.qr-code-card__footer{padding:12px 15px}}@media(max-width:480px){.qr-code-display{padding:10px}.qr-code-card__image{padding:15px;min-height:200px}.qr-code-card__image img{max-height:180px}.qr-code-card__image .image-error{width:160px;height:160px;font-size:12px}}.error-toast{position:fixed;top:var(--spacing-large);right:var(--spacing-large);z-index:9999;min-width:300px;max-width:500px;animation:slideInRight .3s ease-out}.error-toast-content{background:var(--error-color);color:var(--background-color);padding:var(--spacing-large) var(--spacing-large);border-radius:var(--spacing-medium);box-shadow:0 4px 12px #fdd8354d;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-large)}.error-toast-message{flex:1;font-family:var(--font-family);font-size:14px;line-height:1.4;word-break:break-word;font-weight:500}.error-toast-close{background:none;border:none;color:var(--background-color);font-size:20px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.error-toast-close:hover{background-color:#1a1a1a33}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@media(max-width:480px){.error-toast{left:var(--spacing-medium);right:var(--spacing-medium);top:var(--spacing-medium);min-width:auto}.error-toast-content{padding:var(--spacing-large) var(--spacing-large)}.error-toast-message{font-size:13px}}.app{height:100%;display:flex;flex-direction:column}:root{--background-color: #1a1a1a;--surface-color: #2c2c2c;--primary-color: #e53935;--primary-variant-color: #b71c1c;--secondary-color: #03a9f4;--text-color-primary: #ffffff;--text-color-secondary: #aaaaaa;--error-color: #fdd835;--border-color: #424242;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--spacing-small: 4px;--spacing-medium: 8px;--spacing-large: 16px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-family);background-color:var(--background-color);color:var(--text-color-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}