body{font-family:Arial,sans-serif;background-color:rgba(0,0,0,0.8);color:#ffffff;margin:0;display:flex;flex-direction:column;height:100vh;overflow:hidden;padding:0}.logo img{max-width:30px;max-height:30px;height:auto;margin:0}#user-info{display:flex;margin-right:20px;gap:20px;align-items:center}.icon-button{background:none;border:none;cursor:pointer;margin-left:10px;font-size:16px;color:#ffffff;outline:none;box-shadow:none}.icon-button.green{color:green}#center-image{max-width:100%;height:auto;display:block;margin-bottom:20px}#controls{display:flex;align-items:center;padding:10px;background-color:rgba(0,0,0,0.8);border:none;justify-content:space-between;outline:none;box-shadow:none}#controls label{margin-right:10px;color:#ffffff}#controls select{margin-right:10px;background-color:rgba(0,0,0,0.8);color:#ffffff;border:1px solid rgba(0,0,0,0.8);padding:5px;border-radius:5px}label{margin-right:10px;color:#ffffff}.notification{display:none;display:flex;align-items:center;transform:translateX(-50%);color:green;z-index:1000;font-size:16px;opacity:0;transition:opacity 0.5s ease-in-out}.notification.show{display:block;opacity:1}#main-container{display:flex;flex-grow:1;width:100%;height:100%}#problem-container{width:30%;padding:20px;background-color:rgba(0,0,0,0.8);color:#ffffff;box-sizing:border-box}#editor-and-output-container{display:flex;flex-direction:column;width:70%;height:100%}#code-editor-container{height:80%;position:relative;width:100%;padding:10px;box-sizing:border-box;background-color:rgba(0,0,0,0.8);color:#ffffff}#input-output-container{display:flex;flex-direction:column;position:relative;width:100%;height:20%;background-color:rgba(0,0,0,0.8);overflow:hidden}#output{flex-grow:1;overflow-y:auto;padding:10px;background-color:rgba(0,0,0,0.8);color:#ffffff}#input-label{color:#ffffff}#problem-textarea{width:100%;height:100%;background-color:rgba(0,0,0,0.8);color:#ffffff;padding:10px;box-sizing:border-box;resize:none;border:none;outline:none}#code-editor,#output{width:100%;height:100%;border:none;font-size:16px;resize:none;padding:10px;box-sizing:border-box;background-color:rgba(0,0,0,0.8);outline:none;box-shadow:none}.CodeMirror{height:100%;background-color:rgba(0,0,0,0.8);outline:none;box-shadow:none}.cm-s-material-darker.CodeMirror{background-color:rgba(0,0,0,0.8);color:#eff}.cm-s-material-darker .CodeMirror-gutters{background:rgba(0,0,0,0.8);color:#545454;border:none}.CodeMirror-scroll{min-height:calc(100% - 40px);background-color:rgba(0,0,0,0.8)}.CodeMirror-linenumber{color:#888888;background-color:rgba(0,0,0,0.8)}#language-select,#font-size-select{background-color:rgba(0,0,0,0.8);color:#ffffff;border:none;padding:5px;border-radius:5px;padding:10px}select option{background-color:rgba(0,0,0,0.8);color:#ffffff}.buttons{display:flex;justify-content:center;margin-left:auto;gap:10px}#create-button,#vip-save-button,.auth-button{background-color:#ffffff;color:rgba(0,0,0,0.8);border:none;padding:5px 5px;cursor:pointer;border-radius:5px}#create-button:hover,#run-button:hover,.auth-button:hover{background-color:rgba(0,0,0,0.8);color:#ffffff}#run-button{background-color:#4CAF50;color:#ffffff;border:none;font-size:16px;font-weight:bold;cursor:pointer;border-radius:5px;margin-left:auto;margin-right:20px}#run-button:hover{background-color:#010302;color:#ffffff}footer{display:flex;justify-content:center;align-items:center;height:30px;background-color:rgba(0,0,0,0.8);color:#ffffff;font-size:8px;line-height:1.2;border:none;outline:none;box-shadow:none}footer p{margin:0;color:#ffffff}footer a{margin-left:10px;color:#ffffff;text-decoration:none}footer a:hover{text-decoration:underline}footer img{margin-left:10px;vertical-align:middle;width:20px;height:20px}.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.4);padding-top:20px;align-items:center;justify-content:center}.modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:none;width:80%;max-width:800px;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center}.main-room-container{background-color:rgba(0,0,0,0.0);margin:15% auto;padding:20px;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,0.0);width:80%;max-width:600px;text-align:center;position:relative}.main-room-content{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}.close{display:flex;color:#aaa;font-size:28px;font-weight:bold;cursor:pointer;margin-left:auto}.close:hover,.close:focus{color:black}#center-image{max-width:100%;height:auto}#create-room-button{padding:10px 20px;font-size:16px;cursor:pointer;border:none;background-color:#4CAF50;color:white;border-radius:5px;transition:background-color 0.3s}#create-room-button:hover{background-color:#45a049}#loginModal{z-index:1050}#membershipInfo{z-index:1000}.close{color:#aaa;float:right;font-size:16px;font-weight:bold;right:20px;top:5px}.close:hover,.close:focus{color:black;text-decoration:none;cursor:pointer}#login-modal-content{background-color:#fefefe;margin:5% auto;padding:20px;border:none;width:40%;max-width:400px}.tab{overflow:hidden;margin-bottom:5px}.tab button{border-radius:10px;background-color:inherit;float:left;border:none;outline:none;cursor:pointer;padding:8px 12px;transition:0.3s;font-size:16px;background-color:#cccccc;color:#ffffff}.tab button.active{border-bottom:2px solid #72ee77;background-color:#4CAF50}#login-tab{border-radius:10px 0px 0px 10px}#signup-tab{border-radius:0px 10px 10px 0px}.tabcontent{display:none;padding:6px 12px;border-top:none}#login-form input[type=text],#login-form input[type=password],#signup-form input[type=text],#signup-form input[type=password]{width:calc(100% - 20px);padding:10px;margin:8px 0;display:inline-block;border:1px solid #ccc;border-radius:5px;box-sizing:border-box;background-color:rgba(0,0,0,0.2);color:rgba(0,0,0,1.0)}#login-form button,#signup-form button{width:50%;background-color:#4CAF50;color:white;padding:8px 12px;margin:8px 0;border:none;border-radius:5px;cursor:pointer;font-size:16px}#login-form button:hover,#signup-form button:hover{background-color:#010302}#login-form label,#signup-form label{color:#010302}.login-button-group{display:flex;align-items:center;justify-content:center;width:100%}.membership-info-container{background-color:rgba(0,0,0,0.8);margin:5% auto;padding:10px;border:none;width:80%;border-radius:10px;height:80%;box-sizing:border-box;color:#000000}.membership-info-content{padding:10px;display:flex;justify-content:space-between;height:95%}.pricing-column{flex:1;margin:0 10px;background-color:rgba(255,255,255,1.0);padding:10px;border-radius:10px;box-shadow:none;width:35%;display:flex;flex-direction:column;position:relative;height:100%;box-sizing:border-box}.pricing-header{text-align:center;margin-bottom:20px;color:#000000}.pricing-title{font-size:1.5em;margin-bottom:10px;color:#000000}.pricing-price{font-size:1.2em;color:#ff9800}.pricing-description{list-style-type:none;padding:0;margin:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;color:#000000}.pricing-description li{margin-bottom:10px;color:#000000}.purchase-group{display:flex;height:20%;padding:0px;align-items:center;background-color:white}.purchase-group label{color:#010302}.button-group{flex:1;align-items:center;width:50%}.qr-display-area{margin:20px 0;text-align:center;width:50%;background-color:white}.quantity-selector,.duration-selector{flex:1;margin-top:0px;padding:0px;background-color:white;border-radius:5px;width:50%;min-width:0;margin:0px}.qr-image{background-color:white;border-radius:8px;padding:10px;transition:opacity 0.3s ease;max-width:100%}#qr-instruction{font-size:16px;color:#000000;animation:fadeIn 0.5s ease}.btn-custom{background-color:#4CAF50;color:#ffffff;border:none;border-radius:5px}.btn-custom:hover{background-color:#010302;color:#ffffff}