body{margin:0}.navbar{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 10px #0000001a;padding:1rem 0}.navbar-container{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1200px;padding:0 2rem}.navbar-logo{color:#fff;font-size:1.5rem;font-weight:700;text-decoration:none}.navbar-menu{align-items:center;display:flex;gap:2rem;list-style:none}.navbar-item{margin:0}.navbar-link{color:#fff;text-decoration:none;transition:opacity .3s}.navbar-link:hover{opacity:.8}.navbar-user{color:#fff;font-weight:500}.navbar-button{background:#fff3;border:1px solid #fff;border-radius:5px;color:#fff;cursor:pointer;padding:.5rem 1rem;transition:background .3s}.navbar-button:hover{background:#ffffff4d}@media (max-width:768px){.navbar-container,.navbar-menu{flex-direction:column;gap:1rem}}.utility-card{align-items:center;background:#fff;border:1px solid #667eea1a;border-radius:20px;box-shadow:0 4px 20px #00000014;color:inherit;display:flex;flex-direction:column;overflow:hidden;padding:2.5rem;position:relative;text-align:center;text-decoration:none;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.utility-card:before{background:linear-gradient(90deg,#0000,#667eea1a,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.utility-card:hover:before{left:100%}.utility-card:hover{border-color:#667eea4d;box-shadow:0 15px 40px #667eea33;transform:translateY(-10px) scale(1.02)}.utility-card.disabled{background:linear-gradient(135deg,#f5f5f5,#e0e0e0);cursor:not-allowed;opacity:.6}.utility-card.disabled:hover{box-shadow:0 4px 20px #00000014;transform:none}.utility-icon{display:inline-block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));font-size:4rem;margin-bottom:1.5rem;transition:transform .3s ease}.utility-card:hover .utility-icon{transform:scale(1.15) rotate(5deg)}.utility-card.disabled .utility-icon{filter:grayscale(.7)}.utility-title{color:#333;font-size:1.6rem;font-weight:600;margin-bottom:.75rem}.utility-description{color:#666;flex-grow:1;font-size:1rem;line-height:1.6;margin-bottom:1.5rem}.utility-category{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:15px;color:#667eea;font-size:.875rem;font-weight:600;letter-spacing:.5px;padding:.4rem 1rem;text-transform:uppercase}@media (max-width:768px){.utility-card{padding:2rem}.utility-icon{font-size:3rem}.utility-title{font-size:1.4rem}}.home{min-height:100vh}.hero{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:6rem 2rem;text-align:center}.hero-content{margin:0 auto;max-width:800px}.hero-title{font-size:3rem;font-weight:700;margin-bottom:1rem}.hero-subtitle{font-size:1.5rem;margin-bottom:2rem;opacity:.9}.hero-buttons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.btn{border-radius:5px;font-weight:600;padding:1rem 2rem;text-decoration:none;transition:transform .3s,box-shadow .3s}.btn-primary{background:#fff;color:#667eea}.btn-primary:hover{box-shadow:0 5px 15px #0003;transform:translateY(-2px)}.btn-secondary{background:#0000;border:2px solid #fff;color:#fff}.btn-secondary:hover{background:#fff;color:#667eea}.container{margin:0 auto;max-width:1200px;padding:4rem 2rem}.utilities-section{background:#f8f9fa}.games-section{background:#fff}.games-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:0 auto;max-width:1200px}.game-card{align-items:center;background:#fff;border:2px solid #e0e0e0;border-radius:10px;box-shadow:0 2px 10px #0000001a;color:#333;display:flex;flex-direction:column;padding:2rem;text-align:center;text-decoration:none;transition:transform .3s,box-shadow .3s,border-color .3s}.game-card:hover{border-color:#667eea;box-shadow:0 5px 20px #00000026;transform:translateY(-5px)}.game-icon{font-size:3rem;margin-bottom:1rem}.game-card h3{color:#333;font-size:1.5rem;margin-bottom:.5rem}.game-card p{color:#666;flex-grow:1;margin-bottom:1rem}.badge-free{background:#28a745;color:#fff}.badge-auth,.badge-free{border-radius:20px;display:inline-block;font-size:.875rem;font-weight:600;margin-top:.5rem;padding:.5rem 1rem}.badge-auth{background:#ffc107;color:#333}.section-title{color:#333;font-size:2.5rem;margin-bottom:3rem;text-align:center}.utilities-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.features-section{background:#fff}.features-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.feature-card{background:#f8f9fa;border-radius:10px;padding:2rem;transition:transform .3s,box-shadow .3s}.feature-card:hover{box-shadow:0 10px 25px #0000001a;transform:translateY(-5px)}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature-card h3{margin-bottom:.5rem}@media (max-width:768px){.hero-title{font-size:2rem}.hero-subtitle{font-size:1.2rem}.utilities-grid{grid-template-columns:1fr}}.premium-section{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;padding:4rem 2rem}.premium-section .section-title{color:#fff!important;font-weight:700}.premium-section .section-subtitle{color:#fff!important;font-size:1.2rem;font-weight:500;margin-bottom:3rem;text-align:center}.premium-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:0 auto;max-width:1200px}.premium-card{background:#fff;border-radius:10px;box-shadow:0 5px 20px #0003;color:#333;padding:2rem;text-align:center;transition:transform .3s,box-shadow .3s}.premium-card:hover{box-shadow:0 10px 30px #0000004d;transform:translateY(-5px)}.premium-card.coming-soon{opacity:.7;position:relative}.premium-icon{font-size:3rem;margin-bottom:1rem}.premium-card h3{color:#333;margin-bottom:.5rem}.premium-card p{color:#666;margin-bottom:1.5rem}.btn-premium{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:5px;color:#fff;display:inline-block;font-weight:600;padding:.75rem 1.5rem;text-decoration:none;transition:transform .3s}.btn-premium:hover{transform:scale(1.05)}.badge{background:#ffc107;border-radius:20px;color:#333;display:inline-block;font-size:.875rem;font-weight:600;margin-top:1rem;padding:.5rem 1rem}.section-subtitle{color:#666;font-size:1.1rem;margin-bottom:2rem;text-align:center}.auth-container{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:center;min-height:calc(100vh - 200px);padding:2rem}.auth-card{background:#fff;border-radius:10px;box-shadow:0 10px 40px #0003;max-width:400px;padding:3rem;width:100%}.auth-card h2{color:#333;margin-bottom:2rem;text-align:center}.form-group input{border:1px solid #ddd;border-radius:5px;box-sizing:border-box;font-size:1rem;padding:.75rem;width:100%}.form-group input:focus{border-color:#667eea;outline:none}.btn-submit{font-size:1rem;padding:.75rem;transition:transform .3s;width:100%}.btn-submit:hover:not(:disabled){transform:translateY(-2px)}.btn-submit:disabled{cursor:not-allowed;opacity:.6}.error-message{margin-bottom:1rem}.auth-link{color:#666;margin-top:1.5rem;text-align:center}.auth-link a{color:#667eea;text-decoration:none}.auth-link a:hover{text-decoration:underline}.dashboard{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:calc(100vh - 200px);overflow-x:hidden;padding:2rem;position:relative}.dashboard:before{background:linear-gradient(135deg,#667eea,#764ba2);content:"";height:300px;left:0;opacity:.1;position:absolute;right:0;top:0;z-index:0}.dashboard-header{animation:fadeInDown .6s ease-out;margin-bottom:4rem;position:relative;text-align:center;z-index:1}.dashboard-header h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;font-size:3rem;font-weight:700;letter-spacing:-.5px;margin-bottom:.5rem}.dashboard-header p{color:#555;font-size:1.3rem;font-weight:400}.utilities-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin:0 auto;max-width:1400px;position:relative;z-index:1}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.dashboard{padding:1.5rem}.dashboard-header h1{font-size:2rem}.dashboard-header p{font-size:1.1rem}.utilities-grid{gap:1.5rem;grid-template-columns:1fr}}.dashboard-section{animation:fadeInUp .6s ease-out;animation-fill-mode:both;margin-bottom:5rem;position:relative;z-index:1}.dashboard-section:first-child{animation-delay:.1s}.dashboard-section:nth-child(2){animation-delay:.2s}.dashboard-section:nth-child(3){animation-delay:.3s}.section-header{-webkit-text-fill-color:#0000;align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;color:#333;display:flex;font-size:2.5rem;font-weight:700;gap:.75rem;margin-bottom:.75rem}.dashboard-section.premium-section .section-header,.dashboard-section.premium-section h2.section-header,.premium-section .section-header{-webkit-text-fill-color:#2d3748!important;background:none!important;-webkit-background-clip:border-box!important;background-clip:initial!important;background-image:none!important;color:#2d3748!important;font-weight:700!important;opacity:1!important;text-shadow:none!important}.section-description{color:#555;font-size:1.15rem;line-height:1.6;margin-bottom:2.5rem;max-width:800px}.premium-banner{animation:pulse 2s ease-in-out infinite;background:linear-gradient(135deg,#ffc107,#ff9800);border-radius:15px;box-shadow:0 4px 15px #ffc10766;color:#333;display:inline-block;font-size:1.1rem;font-weight:600;margin-top:1.5rem;max-width:600px;padding:1.25rem 2rem;text-align:center;width:100%}.premium-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#667eea26,#764ba226);border:2px solid #667eea33;border-radius:20px;box-shadow:0 8px 32px #667eea1a;padding:3rem}.feature-cards{grid-gap:2rem;align-items:stretch;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.feature-card-link{color:inherit;display:block;text-decoration:none}.feature-card{background:#fff;border:1px solid #667eea1a;border-radius:20px;box-shadow:0 4px 20px #00000014;display:flex;flex-direction:column;height:100%;overflow:hidden;padding:2.5rem;position:relative;text-align:center;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.feature-card:before{background:linear-gradient(90deg,#0000,#667eea1a,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s;width:100%}.feature-card:hover:before{left:100%}.feature-card:hover{border-color:#667eea4d;box-shadow:0 15px 40px #667eea33;transform:translateY(-10px) scale(1.02)}.feature-card.coming-soon{background:linear-gradient(135deg,#f5f5f5,#e0e0e0);cursor:not-allowed;opacity:.75}.feature-card.coming-soon:hover{box-shadow:0 4px 20px #00000014;transform:none}.feature-icon{display:inline-block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));font-size:4rem;margin-bottom:1.5rem;transition:transform .3s ease}.feature-card:hover .feature-icon{transform:scale(1.1) rotate(5deg)}.feature-card.coming-soon .feature-icon{filter:grayscale(.5)}.feature-card h3{color:#333;font-size:1.5rem;font-weight:600;margin-bottom:.75rem}.feature-card p{color:#666;flex-grow:1;font-size:1rem;line-height:1.6}.badge-premium-small{background:linear-gradient(135deg,#ffc107,#ff9800);border-radius:20px;box-shadow:0 2px 8px #ffc1074d;color:#333;font-size:.8rem;font-weight:700;padding:.4rem 1rem}.badge-coming-soon,.badge-premium-small{display:inline-block;letter-spacing:.5px;margin-top:1rem;text-transform:uppercase}.badge-coming-soon{background:linear-gradient(135deg,#6c757d,#495057);border-radius:25px;box-shadow:0 2px 10px #6c757d4d;color:#fff;font-size:.875rem;font-weight:600;padding:.6rem 1.25rem}.coming-soon-section{opacity:.85}@media (max-width:768px){.section-header{font-size:2rem}.section-description{font-size:1rem}.premium-section{padding:2rem 1.5rem}.feature-cards{gap:1.5rem;grid-template-columns:1fr}.feature-card{padding:2rem}.feature-icon{font-size:3rem}}.back-button{background:#989aa2;border:1px solid #989aa2;border-radius:8px;display:inline-block;font-size:.95rem;font-weight:500;padding:.6rem 1.2rem;transition:all .3s ease}.back-button:hover{background:#7a7c84;border-color:#7a7c84;color:#fff;transform:translateY(-1px)}.back-button:active{transform:translateY(0)}.back-button-container{background:#0000;border:none;left:0;margin:0;padding:1rem 0 0 2rem;position:absolute;top:0;z-index:10}@media (max-width:768px){.back-button-container{padding:.75rem 1rem}.back-button{font-size:.9rem;padding:.5rem 1rem}}.rate-limit-modal-overlay{align-items:center;animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.rate-limit-modal{animation:slideIn .3s ease-out;background:#fff;border-radius:20px;box-shadow:0 10px 40px #0000004d;max-height:90vh;max-width:500px;overflow-y:auto;width:90%}.rate-limit-modal-header{align-items:center;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;padding:1.5rem 2rem}.rate-limit-modal-header h2{color:#333;font-size:1.5rem;margin:0}.close-button{align-items:center;background:none;border:none;border-radius:50%;color:#999;cursor:pointer;display:flex;font-size:2rem;height:30px;justify-content:center;padding:0;transition:all .2s ease;width:30px}.close-button:hover{background:#f0f0f0;color:#333}.rate-limit-modal-body{padding:2rem}.rate-limit-message{color:#666;font-size:1rem;line-height:1.6;margin:0 0 1.5rem}.rate-limit-suggestion{background:#f8f9fa;border-left:4px solid #667eea;border-radius:8px;margin-bottom:1.5rem;padding:1rem}.rate-limit-suggestion p{color:#555;line-height:1.6;margin:0}.rate-limit-info{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}.limit-item{align-items:center;background:#f8f9fa;border-radius:8px;display:flex;justify-content:space-between;padding:.75rem}.limit-label{color:#666;font-weight:500}.limit-value{color:#333;font-weight:600}.limit-value.highlight{color:#667eea}.rate-limit-modal-footer{border-top:1px solid #e0e0e0;display:flex;gap:1rem;justify-content:flex-end;padding:1.5rem 2rem}.btn-close,.btn-login{border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;padding:.75rem 1.5rem;transition:all .3s ease}.btn-login{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-login:hover{box-shadow:0 5px 15px #667eea66;transform:translateY(-2px)}.btn-close{background:#f0f0f0;color:#666}.btn-close:hover{background:#e0e0e0}@media (max-width:768px){.rate-limit-modal{max-height:85vh;width:95%}.rate-limit-modal-body,.rate-limit-modal-footer,.rate-limit-modal-header{padding:1rem 1.5rem}.rate-limit-modal-footer{flex-direction:column}.btn-close,.btn-login{width:100%}}.utility-page{background:#f8f9fa;min-height:calc(100vh - 200px);padding:4rem 2rem 2rem;position:relative}.utility-container{background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;margin:0 auto;max-width:1000px;padding:2rem}.utility-container h1{color:#333;margin-bottom:2rem;text-align:center}.utility-form{gap:1.5rem}.input-section,.output-section,.utility-form{display:flex;flex-direction:column}.input-section label,.output-section label{color:#333;font-weight:600;margin-bottom:.5rem}.input-section textarea,.output-section textarea{border:1px solid #ddd;border-radius:5px;box-sizing:border-box;font-family:Courier New,monospace;font-size:.9rem;padding:1rem;resize:vertical;width:100%}.input-section textarea:focus{border-color:#667eea;outline:none}.output-section textarea{background:#f8f9fa}.btn-process{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:1rem 2rem;transition:transform .3s}.btn-process:hover{transform:translateY(-2px)}.error-message{padding:1rem}.mode-selector{display:flex;gap:1rem;margin-bottom:1rem}.btn-mode{background:#fff;border:2px solid #ddd;border-radius:5px;cursor:pointer;flex:1 1;padding:.75rem;transition:all .3s}.btn-mode.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#667eea;color:#fff}.hash-results{gap:1rem}.hash-item,.hash-results{display:flex;flex-direction:column}.hash-item{background:#f8f9fa;border-radius:5px;gap:.5rem;padding:1rem}.hash-item code{font-size:.9rem;word-break:break-all}.uuid-list{display:flex;flex-direction:column;gap:.5rem}.uuid-item{align-items:center;background:#f8f9fa;border-radius:5px;display:flex;justify-content:space-between;padding:.75rem}.uuid-item code{flex:1 1;margin-right:1rem}.btn-clear,.btn-copy{background:#667eea;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:.9rem;padding:.5rem 1rem}.btn-clear:hover,.btn-copy:hover{background:#5568d3}.result-display{background:#f8f9fa;border-radius:5px;padding:1rem}.result-display div{margin-bottom:.5rem}.checkbox-group{display:flex;flex-direction:column;gap:.75rem}.checkbox-group label{align-items:center;cursor:pointer;display:flex;gap:.5rem}.checkbox-group input[type=checkbox]{width:auto}.password-display{align-items:center;background:#f8f9fa;border-radius:5px;display:flex;gap:1rem;padding:1rem}.password-display code{flex:1 1;font-size:1.1rem}.input-section input[type=number],.input-section input[type=text],.input-section select{border:1px solid #ddd;border-radius:5px;box-sizing:border-box;font-size:1rem;padding:.75rem;width:100%}.input-section input:focus,.input-section select:focus{border-color:#667eea;outline:none}.chat-dashboard{background:#f8f9fa;min-height:calc(100vh - 200px);padding:4rem 2rem 2rem;position:relative}.chat-container{display:flex;gap:2rem;height:calc(100vh - 250px);margin:0 auto;max-width:1400px}.chat-sidebar{background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;overflow-y:auto;padding:1.5rem;width:350px}.chat-sidebar h2{color:#333;margin-bottom:1.5rem}.chat-actions{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.btn-chat-action{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:5px;color:#fff;font-weight:600;padding:.75rem;text-align:center;text-decoration:none;transition:transform .3s}.btn-chat-action:hover{transform:translateY(-2px)}.search-section{margin-bottom:1.5rem}.search-input{border:1px solid #ddd;border-radius:5px;box-sizing:border-box;margin-bottom:.5rem;padding:.75rem;width:100%}.btn-search{background:#667eea;border:none;border-radius:5px;color:#fff;cursor:pointer;font-weight:600;padding:.75rem;width:100%}.btn-search:hover{background:#5568d3}.users-list h3{align-items:center;color:#333;display:flex;gap:.5rem;margin-bottom:1rem}.badge-unread{background:#f44;border-radius:10px;color:#fff;font-size:.75rem;padding:.25rem .5rem}.user-item{align-items:center;border-radius:5px;cursor:pointer;display:flex;gap:1rem;margin-bottom:.5rem;padding:1rem;transition:background .3s}.user-item:hover{background:#f8f9fa}.user-avatar{border-radius:50%;flex-shrink:0;height:50px;overflow:hidden;width:50px}.user-avatar img{height:100%;object-fit:cover;width:100%}.avatar-placeholder{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;font-size:1.2rem;font-weight:700;height:100%;justify-content:center;width:100%}.user-info{flex:1 1}.user-name{color:#333;font-weight:600;margin-bottom:.25rem}.user-status{color:#666;font-size:.875rem}.badge-premium{font-size:1.2rem}.chat-main{align-items:center;background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;display:flex;flex:1 1;justify-content:center;padding:2rem}.welcome-message{text-align:center}.welcome-message h1{color:#333;margin-bottom:1rem}.welcome-message p{color:#666;margin-bottom:.5rem}.loading,.no-users{color:#666;padding:2rem;text-align:center}@media (max-width:768px){.chat-container{flex-direction:column;height:auto}.chat-sidebar{width:100%}}.direct-chat{background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;display:flex;flex-direction:column;height:calc(100vh - 200px);margin:0 auto;max-width:1000px;overflow:hidden;padding-top:4rem;position:relative}.chat-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;justify-content:space-between;padding:1rem 1.5rem}.chat-header,.chat-header-info{align-items:center;display:flex}.chat-header-info{gap:1rem}.chat-header h2{color:#fff;margin:0}.btn-back,.btn-block{background:#fff3;border:1px solid #fff;border-radius:5px;color:#fff;cursor:pointer;padding:.5rem 1rem;transition:background .3s}.btn-back:hover,.btn-block:hover{background:#ffffff4d}.btn-block{background:#ff44444d;border-color:#f44}.ws-status{background:#fff3;border-radius:10px;font-size:.75rem;margin-left:.5rem;padding:.25rem .5rem}.ws-status.connected{color:#4caf50}.ws-status.disconnected{color:#f44336}.messages-container{background:#f8f9fa;flex:1 1;overflow-y:auto;padding:1.5rem}.message{display:flex;margin-bottom:1rem}.message.sent{justify-content:flex-end}.message.received{justify-content:flex-start}.message-content{border-radius:10px;max-width:70%;padding:.75rem 1rem}.message.sent .message-content{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.message.received .message-content{background:#fff;box-shadow:0 1px 3px #0000001a;color:#333}.message-sender{font-size:.75rem;opacity:.8}.message-sender,.message-text{margin-bottom:.25rem}.message-footer{align-items:center;display:flex;gap:.5rem;justify-content:space-between;margin-top:.25rem}.message-time{font-size:.7rem;opacity:.7}.message-status{align-items:center;display:flex;gap:.25rem}.status-delivered,.status-read,.status-sent{font-size:.7rem;opacity:.7}.status-sent{color:#ffffffb3}.status-delivered{color:#fffc}.status-read{color:#4caf50}.typing-indicator{animation:pulse 1.5s ease-in-out infinite;color:#666;font-size:.85rem;font-style:italic;padding:.5rem 1rem}.message-input-form{background:#fff;border-top:1px solid #ddd;display:flex;padding:1rem}.message-input{border:1px solid #ddd;border-radius:5px;flex:1 1;margin-right:.5rem;padding:.75rem}.btn-send{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:5px;color:#fff;cursor:pointer;font-weight:600;padding:.75rem 2rem}.btn-send:hover{opacity:.9}.loading,.no-messages{color:#666;padding:2rem;text-align:center}.chat-rooms{background:#f8f9fa;min-height:calc(100vh - 200px);padding:4rem 2rem 2rem;position:relative}.chat-rooms-container{background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;margin:0 auto;max-width:1200px;padding:2rem}.rooms-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:2rem}.rooms-header h1{color:#333}.btn-create{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:5px;color:#fff;cursor:pointer;font-weight:600;padding:.75rem 1.5rem;transition:transform .3s}.btn-create:hover{transform:translateY(-2px)}.create-room-form{background:#f8f9fa;border-radius:5px;margin-bottom:2rem;padding:1.5rem}.form-input,.form-textarea{border:1px solid #ddd;border-radius:5px;box-sizing:border-box;margin-bottom:1rem;padding:.75rem;width:100%}.form-textarea{min-height:100px;resize:vertical}.btn-submit{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:5px;color:#fff;cursor:pointer;font-weight:600;padding:.75rem 2rem}.rooms-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.room-card{background:#f8f9fa;border:1px solid #ddd;border-radius:10px;padding:1.5rem}.room-card h3{color:#333;margin-bottom:.5rem}.room-description,.room-info{color:#666;margin-bottom:1rem}.room-info{display:flex;font-size:.875rem;justify-content:space-between}.btn-join{background:#667eea;border:none;border-radius:5px;color:#fff;cursor:pointer;font-weight:600;padding:.75rem;width:100%}.btn-join:hover{background:#5568d3}.premium-required{margin:0 auto;padding:4rem 2rem}.premium-required h2{color:#333;margin-bottom:1rem}.premium-required p{color:#666;margin-bottom:.5rem}.loading,.no-rooms{color:#666;padding:2rem;text-align:center}.user-profile{background:#f8f9fa;min-height:calc(100vh - 200px);padding:4rem 2rem 2rem;position:relative}.profile-container{background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;margin:0 auto;max-width:800px;padding:2rem}.btn-back{background:#667eea;border:none;border-radius:5px;cursor:pointer;margin-bottom:2rem;padding:.5rem 1rem}.profile-header{border-bottom:1px solid #ddd;display:flex;gap:2rem;margin-bottom:2rem;padding-bottom:2rem}.profile-avatar{border-radius:50%;flex-shrink:0;height:150px;overflow:hidden;width:150px}.profile-avatar img{height:100%;object-fit:cover;width:100%}.avatar-placeholder-large{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;font-size:4rem;font-weight:700;height:100%;justify-content:center;width:100%}.profile-info h1{color:#333;margin:0 0 .5rem}.username{color:#666;margin-bottom:1rem}.badge-hidden,.badge-premium,.badge-visible{border-radius:15px;display:inline-block;font-size:.875rem;margin-right:.5rem;padding:.25rem .75rem}.badge-premium{background:#ffc107;color:#333}.badge-visible{background:#28a745;color:#fff}.badge-hidden{background:#6c757d;color:#fff}.profile-bio{margin-bottom:1.5rem}.profile-bio h3{color:#333;margin-bottom:.5rem}.profile-bio p{color:#666;line-height:1.6}.profile-meta{color:#666;font-size:.875rem;margin-bottom:1.5rem}.profile-actions{display:flex;gap:1rem}.btn-chat,.btn-edit,.btn-toggle{border:none;border-radius:5px;cursor:pointer;font-weight:600;padding:.75rem 1.5rem;transition:transform .3s}.btn-chat,.btn-edit{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-toggle{background:#6c757d;color:#fff}.btn-chat:hover,.btn-edit:hover,.btn-toggle:hover{transform:translateY(-2px)}.profile-form{max-width:600px}.profile-form h2{color:#333}.form-group,.profile-form h2{margin-bottom:1.5rem}.form-group label{color:#333;display:block;font-weight:500;margin-bottom:.5rem}.form-group input,.form-group textarea{border:1px solid #ddd;border-radius:5px;box-sizing:border-box;padding:.75rem;width:100%}.form-group textarea{min-height:100px;resize:vertical}.form-group label input[type=checkbox]{margin-right:.5rem;width:auto}.form-actions{display:flex;gap:1rem}.btn-save{background:linear-gradient(135deg,#667eea,#764ba2)}.btn-cancel,.btn-save{border:none;border-radius:5px;color:#fff;cursor:pointer;font-weight:600;padding:.75rem 2rem}.btn-cancel{background:#6c757d}.user-profile-error,.user-profile-loading{color:#666;padding:4rem 2rem;text-align:center}@media (max-width:768px){.profile-header{flex-direction:column;text-align:center}.profile-avatar{margin:0 auto}}.tic-tac-toe-lobby{margin:0 auto;max-width:1200px;min-height:calc(100vh - 200px);padding:4rem 2rem 2rem;position:relative}.lobby-header{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-bottom:3rem;margin-top:2rem}.lobby-header h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;font-size:2.5rem;margin:0}.lobby-info-message{background:#667eea1a;border-left:4px solid #667eea;border-radius:8px;margin-bottom:2rem;padding:1rem 1.5rem}.lobby-info-message p{color:#555;font-size:1rem;line-height:1.6;margin:0}.name-modal-overlay{align-items:center;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.name-modal{animation:slideUp .3s ease;background:#fff;border-radius:20px;box-shadow:0 10px 40px #0000004d;max-width:450px;padding:2.5rem;text-align:center;width:90%}.name-modal h3{color:#333;font-size:1.8rem;margin-bottom:.5rem}.name-modal p{color:#666;font-size:.95rem;margin-bottom:1.5rem}.name-input{border:2px solid #e0e0e0;border-radius:10px;box-sizing:border-box;font-size:1rem;margin-bottom:1.5rem;padding:.875rem 1.25rem;transition:all .3s ease;width:100%}.name-input:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}.name-modal-buttons{display:flex;gap:1rem;justify-content:center}.btn-cancel-name,.btn-submit-name{border:none;border-radius:10px;cursor:pointer;font-size:1rem;font-weight:600;padding:.875rem 2rem;transition:all .3s ease}.btn-submit-name{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-submit-name:hover{box-shadow:0 4px 15px #667eea66;transform:translateY(-2px)}.btn-cancel-name{background:#e0e0e0;color:#333}.btn-cancel-name:hover{background:#ccc}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.btn-create-computer{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:1rem 2rem;transition:all .3s}.btn-create-computer:hover{box-shadow:0 4px 15px #667eea4d;transform:translateY(-2px)}.lobby-sections{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.lobby-section{background:#fff;border-radius:15px;box-shadow:0 4px 20px #00000014;padding:2rem}.lobby-section h2{color:#333;font-size:1.5rem;margin-bottom:1.5rem;margin-top:0}.empty-state{color:#666;font-style:italic;padding:2rem;text-align:center}.games-list,.invites-list{display:flex;flex-direction:column;gap:1rem}.game-card,.invite-card{align-items:center;background:#f8f9fa;border-radius:10px;display:flex;justify-content:space-between;padding:1.5rem;transition:all .3s}.game-card{cursor:pointer}.game-card:hover{background:#e9ecef;transform:translateX(5px)}.invite-info{flex:1 1}.invite-actions{display:flex;gap:.5rem}.btn-accept,.btn-decline{border:none;border-radius:5px;cursor:pointer;font-weight:600;padding:.5rem 1rem;transition:all .3s}.btn-accept{background:#28a745;color:#fff}.btn-accept:hover{background:#218838}.btn-decline{background:#dc3545;color:#fff}.btn-decline:hover{background:#c82333}.invite-form{display:flex;flex-wrap:wrap;gap:1rem}.user-select{border:2px solid #ddd;border-radius:8px;flex:1 1;font-size:1rem;min-width:200px;padding:.75rem}.btn-send-invite{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:.75rem 1.5rem;transition:all .3s}.btn-send-invite:hover:not(:disabled){box-shadow:0 4px 15px #667eea4d;transform:translateY(-2px)}.btn-send-invite:disabled{cursor:not-allowed;opacity:.5}.game-card-info{display:flex;flex-direction:column;gap:.5rem}.game-status-badge{border-radius:15px;display:inline-block;font-size:.75rem;font-weight:600;padding:.25rem .75rem;text-transform:uppercase}.game-status-badge.in_progress{background:#17a2b8;color:#fff}.game-status-badge.waiting{background:#ffc107;color:#333}.loading{font-size:1.2rem;padding:2rem;text-align:center}@media (max-width:768px){.tic-tac-toe-lobby{padding:1rem}.lobby-sections{grid-template-columns:1fr}.invite-form{flex-direction:column}.user-select{width:100%}}.tic-tac-toe-container{margin:0 auto;max-width:800px;min-height:calc(100vh - 200px);overflow:visible;padding:4rem 2rem 3rem;position:relative}.game-header{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-bottom:2rem}.game-info h2{color:#333;font-size:2rem;margin:0 0 1rem}.players{flex-wrap:wrap;gap:1.5rem}.player,.players{align-items:center;display:flex}.player{background:#f5f5f5;border-radius:10px;flex-direction:column;min-width:120px;padding:1rem;transition:all .3s}.player.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 15px #667eea4d;color:#fff;transform:scale(1.05)}.player-name{font-size:.9rem;font-weight:600;margin-bottom:.5rem}.player-symbol{font-size:1.5rem;font-weight:700}.vs{color:#666;font-size:1.2rem;font-weight:700}.game-status{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:10px;color:#667eea;font-size:1.3rem;font-weight:600;margin-bottom:2rem;padding:1rem;text-align:center}.game-board{background:#333;border-radius:10px;display:flex;flex-direction:column;gap:5px;height:400px;margin:0 auto 3rem;overflow:visible;padding:5px;width:400px}.board-row{gap:5px}.board-cell,.board-row{display:flex;flex:1 1;min-height:0}.board-cell{align-items:center;aspect-ratio:1;background:#fff;border-radius:5px;cursor:default;font-size:3rem;font-weight:700;justify-content:center;overflow:visible;transition:all .2s;-webkit-user-select:none;user-select:none}.board-cell.clickable{background:#f0f0f0;cursor:pointer}.board-cell.clickable:hover{background:#e0e0e0;transform:scale(1.05)}.board-cell.filled-x{color:#667eea}.board-cell.filled-o{color:#f59e0b}.btn-abandon,.btn-back,.btn-new-game{border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;padding:.75rem 1.5rem;transition:all .3s}.btn-back{background:#6c757d;color:#fff}.btn-back:hover{background:#5a6268;transform:translateY(-2px)}.btn-abandon{background:#dc3545;color:#fff}.btn-abandon:hover{background:#c82333;transform:translateY(-2px)}.btn-new-game{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:block;margin:0 auto;padding:1rem 2rem}.btn-new-game:hover{box-shadow:0 4px 15px #667eea4d;transform:translateY(-2px)}.error,.loading{padding:2rem}.error{color:#dc3545}@media (max-width:768px){.tic-tac-toe-container{padding:1rem 1rem 2rem}.game-header{align-items:stretch;flex-direction:column}.players{justify-content:center}.game-board{height:350px;max-width:350px;width:100%}.board-cell{font-size:2rem}}.login-prompt-overlay{animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width:768px){.login-prompt{padding:2rem 1.5rem}.login-prompt-buttons{flex-direction:column}.login-prompt-buttons .cancel-button,.login-prompt-buttons .login-button{width:100%}}.kill-mosquito-container{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;flex-direction:column;min-height:calc(100vh - 200px);padding:70px 20px 20px;position:relative}.difficulty-selection h3,.game-over-screen h2,.game-start-screen h2{color:#667eea}.difficulty-btn:hover{border-color:#667eea}.difficulty-btn.active{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea;box-shadow:0 4px 15px #667eea4d}.difficulty-btn.active .difficulty-name,.final-stats strong{color:#667eea}.start-button{background:linear-gradient(135deg,#667eea,#764ba2)}.start-button:hover{box-shadow:0 6px 20px #667eea66}.leaderboard-button{background:linear-gradient(135deg,#f093fb,#f5576c)}.leaderboard-button:hover{box-shadow:0 6px 20px #f5576c66}.leaderboard-screen h2{color:#667eea}.leaderboard-item{background:#667eea1a;border-left:4px solid #667eea;grid-template-columns:50px 1fr 100px 100px}.leaderboard-item .rank{color:#667eea}.leaderboard-item .score{color:#f5576c}.leaderboard-item .accuracy{color:#666;font-size:.9rem}.game-board{background:linear-gradient(135deg,#a8edea,#fed6e3);border:4px solid #ffffff80;border-radius:20px;box-shadow:0 10px 40px #0000004d;cursor:crosshair;height:450px;max-width:1000px;overflow:hidden;position:relative;width:100%}.mosquito{animation:fly .5s ease-in-out infinite alternate;cursor:pointer;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.3));font-size:50px;position:absolute;transition:top .3s ease,left .3s ease,transform .1s ease;-webkit-user-select:none;user-select:none;z-index:10}.mosquito:hover{animation:fly .3s ease-in-out infinite alternate;transform:scale(1.2)}@keyframes fly{0%{transform:rotate(-5deg) translateY(0)}to{transform:rotate(5deg) translateY(-5px)}}.splat{animation:splat-animation .3s ease-out;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.5));font-size:60px;pointer-events:none;position:absolute;z-index:20}@keyframes splat-animation{0%{opacity:1;transform:scale(0) rotate(0deg)}50%{opacity:1;transform:scale(1.5) rotate(180deg)}to{opacity:0;transform:scale(2) rotate(1turn)}}.waiting-message{color:#00000080;font-size:1.5rem;font-weight:700;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}@media (max-width:768px){.game-header h1{font-size:2rem}.game-stats{gap:15px}.stat{min-width:100px;padding:10px 15px}.stat-value{font-size:1.4rem}.game-board{height:400px}.mosquito{font-size:40px}.difficulty-buttons{align-items:stretch;flex-direction:column}.difficulty-btn{max-width:100%;min-width:auto}.game-buttons{flex-direction:column}.game-buttons button{width:100%}}.drag-dragon-container{align-items:center;background:linear-gradient(135deg,#f093fb,#f5576c 50%,#4facfe);display:flex;flex-direction:column;min-height:calc(100vh - 200px);padding:70px 20px 20px;position:relative}.game-header{margin-bottom:15px;max-width:1200px;text-align:center;width:100%}.game-header h1{animation:pulse 2s ease-in-out infinite;color:#fff;font-size:2.5rem;margin-bottom:15px;text-shadow:2px 2px 4px #0000004d}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.game-stats{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-bottom:15px}.stat{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:2px solid #ffffff4d;border-radius:12px;box-shadow:0 8px 32px #0000001a;min-width:100px;padding:10px 20px}.stat-label{color:#ffffffe6;display:block;font-size:.9rem;font-weight:500;margin-bottom:5px}.stat-value{color:#fff;display:block;font-size:1.5rem;font-weight:700;text-shadow:1px 1px 2px #0000004d}.game-over-screen,.game-start-screen{background:#fffffff2;border-radius:20px;box-shadow:0 10px 40px #0003;margin:20px;max-width:500px;padding:40px;text-align:center}.game-over-screen h2,.game-start-screen h2{color:#f5576c;font-size:2rem;margin-bottom:20px}.game-start-screen p{color:#666;font-size:1.1rem;margin-bottom:30px}.difficulty-selection{margin:30px 0;width:100%}.difficulty-selection h3{color:#f5576c;font-size:1.3rem;margin-bottom:20px}.difficulty-buttons{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-bottom:30px}.difficulty-btn{align-items:center;background:#fff;border:2px solid #e0e0e0;border-radius:15px;cursor:pointer;display:flex;flex:1 1;flex-direction:column;gap:10px;max-width:200px;min-width:150px;padding:20px;transition:all .3s ease}.difficulty-btn:hover{border-color:#f5576c;box-shadow:0 8px 20px #00000026;transform:translateY(-5px)}.difficulty-btn.active{background:linear-gradient(135deg,#f5576c1a,#4facfe1a);border-color:#f5576c;box-shadow:0 4px 15px #f5576c4d;transform:scale(1.05)}.difficulty-icon{font-size:2.5rem}.difficulty-name{color:#333;font-size:1.3rem;font-weight:700}.difficulty-desc{color:#666;font-size:.85rem;text-align:center}.difficulty-btn.active .difficulty-name{color:#f5576c}.final-stats{margin:30px 0}.final-stats p{color:#333;font-size:1.2rem;margin:10px 0}.final-stats strong{color:#f5576c;font-size:1.4rem}.new-high-score{animation:bounce .5s ease-in-out;color:#ff6b6b!important;font-size:1.5rem!important;font-weight:700}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.game-buttons{display:flex;gap:15px;justify-content:center;margin-top:30px}.reset-button,.start-button{border:none;border-radius:10px;box-shadow:0 4px 15px #0003;cursor:pointer;font-size:1.1rem;font-weight:700;padding:15px 40px;transition:all .3s ease}.start-button{background:linear-gradient(135deg,#f5576c,#4facfe);color:#fff}.start-button:hover{box-shadow:0 6px 20px #f5576c66;transform:translateY(-2px)}.reset-button{background:#f0f0f0;color:#333}.reset-button:hover{background:#e0e0e0;transform:translateY(-2px)}.leaderboard-button.disabled{background:#ffffff4d;border:1px solid #0003;color:#333!important;cursor:not-allowed;opacity:.8}.leaderboard-button.disabled:hover{background:#fff6;box-shadow:none;transform:none}.login-prompt-overlay{align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.login-prompt{animation:slideIn .3s ease-out;background:#fff;border-radius:20px;box-shadow:0 10px 40px #0000004d;max-width:400px;padding:2.5rem;text-align:center;width:90%}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.login-prompt h3{color:#333;font-size:1.5rem;margin:0 0 1rem}.login-prompt p{color:#666;line-height:1.6;margin:0 0 2rem}.login-prompt-buttons{display:flex;gap:1rem;justify-content:center}.login-prompt-buttons .cancel-button,.login-prompt-buttons .login-button{border:none;border-radius:8px;cursor:pointer;font-size:1rem;padding:.75rem 1.5rem;transition:all .3s ease}.login-prompt-buttons .login-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:600}.login-prompt-buttons .login-button:hover{box-shadow:0 5px 15px #667eea66;transform:translateY(-2px)}.login-prompt-buttons .cancel-button{background:#f0f0f0;color:#666}.login-prompt-buttons .cancel-button:hover{background:#e0e0e0}.leaderboard-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:10px;box-shadow:0 4px 15px #0003;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:700;padding:15px 40px;transition:all .3s ease}.leaderboard-button:hover{box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.leaderboard-screen{background:#fffffff2;border-radius:20px;box-shadow:0 10px 40px #0003;margin:20px;max-width:600px;padding:40px;text-align:center}.leaderboard-screen h2{color:#f5576c;font-size:2rem;margin-bottom:30px}.leaderboard-list{margin:30px 0;max-height:400px;overflow-y:auto}.leaderboard-item{grid-gap:15px;align-items:center;background:#f5576c1a;border-left:4px solid #f5576c;border-radius:10px;display:grid;gap:15px;grid-template-columns:50px 1fr 100px 80px;margin:10px 0;padding:15px}.leaderboard-item .rank{color:#f5576c;font-size:1.2rem;font-weight:700}.leaderboard-item .username{color:#333;font-weight:600;text-align:left}.leaderboard-item .score{color:#4facfe;font-size:1.1rem;font-weight:700}.leaderboard-item .diamonds{color:#f5576c;font-size:.9rem}.game-board-container{background:#000;border:4px solid #ffffff80;border-radius:20px;box-shadow:0 10px 40px #0000004d;height:500px;margin:20px;max-width:1000px;overflow:hidden;width:100%}@media (max-width:768px){.game-header h1{font-size:2rem}.game-stats{gap:15px}.stat{min-width:100px;padding:10px 15px}.stat-value{font-size:1.4rem}.game-board-container{height:400px}.difficulty-buttons{align-items:stretch;flex-direction:column}.difficulty-btn{max-width:100%;min-width:auto}.game-buttons{flex-direction:column}.game-buttons button{width:100%}}.create-article-container{background:#f5f5f5;min-height:calc(100vh - 80px);padding:70px 20px 20px;position:relative}.article-editor{background:#fff;border-radius:10px;box-shadow:0 4px 15px #0000001a;margin:0 auto;max-width:1000px;padding:30px}.editor-header{align-items:center;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;margin-bottom:20px;padding-bottom:20px}.editor-actions{display:flex;gap:10px}.back-button,.publish-button,.save-button{border:none;border-radius:5px;cursor:pointer;font-weight:600;padding:10px 20px;transition:all .3s}.back-button{background:#6c757d}.back-button:hover{background:#5a6268}.save-button{background:#f0f0f0;color:#333}.save-button:hover{background:#e0e0e0}.publish-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.publish-button:hover{box-shadow:0 4px 15px #667eea4d;transform:translateY(-2px)}.error-message{background:#fee;border-left:4px solid #c33;border-radius:5px;color:#c33;margin-bottom:20px;padding:15px}.editor-content{display:flex;flex-direction:column;gap:20px}.article-title-input{border:none;border-bottom:2px solid #e0e0e0;font-family:inherit;font-size:2.5rem;font-weight:700;outline:none;padding:10px 0}.article-title-input:focus{border-bottom-color:#667eea}.article-description-input{border:none;border-bottom:1px solid #e0e0e0;color:#666;font-family:inherit;font-size:1.1rem;outline:none;padding:10px 0}.media-upload-section{align-items:center;background:#f9f9f9;border-radius:5px;display:flex;gap:10px;padding:15px}.upload-button{background:#667eea;border-radius:5px;color:#fff;cursor:pointer;display:inline-block;font-weight:600;padding:10px 20px;transition:all .3s}.upload-button:hover{background:#5568d3}.upload-button:disabled{background:#ccc;cursor:not-allowed}.upload-hint{color:#666;font-size:.9rem;font-style:italic}.article-content-textarea{border:1px solid #e0e0e0;border-radius:5px;font-family:Georgia,serif;font-size:1.1rem;line-height:1.8;min-height:400px;outline:none;padding:20px;resize:vertical}.article-content-textarea:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.editor-help{background:#f9f9f9;border-radius:5px;color:#666;font-size:.9rem;padding:15px}.editor-help ul{margin:10px 0 0 20px}.editor-help li{margin:5px 0}@media (max-width:768px){.article-editor{padding:15px}.editor-header{align-items:stretch;gap:10px}.editor-actions,.editor-header{flex-direction:column}.article-title-input{font-size:1.8rem}.media-upload-section{align-items:stretch;flex-direction:column}}.my-articles-container{background:#f5f5f5;min-height:calc(100vh - 80px);padding:70px 20px 40px;position:relative}.articles-header{align-items:center;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;margin:0 auto 30px;max-width:1200px}.articles-header h1{color:#333;font-size:2.5rem}.create-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 24px;transition:all .3s}.create-button:hover{box-shadow:0 4px 15px #667eea4d;transform:translateY(-2px)}.no-articles{background:#fff;border-radius:10px;box-shadow:0 4px 15px #0000001a;margin:100px auto;max-width:600px;padding:40px;text-align:center}.no-articles p{color:#666;font-size:1.2rem;margin-bottom:20px}.articles-list{display:flex;flex-direction:column;gap:20px;margin:0 auto;max-width:1200px}.article-card{align-items:flex-start;background:#fff;border-radius:10px;box-shadow:0 4px 15px #0000001a;display:flex;gap:20px;justify-content:space-between;padding:30px}.article-info{flex:1 1}.article-info h3{color:#333;font-size:1.5rem;margin-bottom:10px}.article-desc{color:#666;line-height:1.6;margin-bottom:15px}.article-meta{gap:15px}.status{border-radius:12px;font-size:.85rem;font-weight:600;padding:4px 12px}.status.published{background:#d4edda;color:#155724}.status.draft{background:#fff3cd;color:#856404}.date,.views{color:#888}.article-actions{display:flex;flex-shrink:0;gap:10px}.delete-button,.edit-button,.view-button{border:none;border-radius:5px;cursor:pointer;font-size:.9rem;font-weight:600;padding:8px 16px;transition:all .3s}.view-button{background:#667eea;color:#fff}.view-button:hover{background:#5568d3}.edit-button{background:#f0f0f0;color:#333}.edit-button:hover{background:#e0e0e0}.delete-button{background:#dc3545;color:#fff}.delete-button:hover{background:#c82333}.premium-required{background:#fff;border-radius:10px;box-shadow:0 4px 15px #0000001a;margin:100px auto;max-width:600px;padding:40px;text-align:center}.premium-required h2{color:#667eea;margin-bottom:20px}@media (max-width:768px){.article-card{flex-direction:column}.article-actions{justify-content:flex-start;width:100%}}.view-article-container{background:#f5f5f5;min-height:calc(100vh - 80px);padding:40px 20px}.article-content{background:#fff;border-radius:10px;box-shadow:0 4px 15px #0000001a;margin:0 auto;max-width:800px;padding:40px}.article-header{border-bottom:2px solid #f0f0f0;margin-bottom:30px;padding-bottom:20px}.article-header h1{color:#333;font-size:3rem;font-weight:700;line-height:1.2;margin-bottom:15px}.article-description{color:#666;font-size:1.3rem;line-height:1.6;margin-bottom:20px}.article-meta{color:#888;display:flex;flex-wrap:wrap;font-size:.9rem;gap:20px}.article-meta .author{color:#667eea;font-weight:600}.cover-image{border-radius:10px;margin:30px 0;overflow:hidden}.cover-image img{display:block;height:auto;width:100%}.article-body{color:#333;font-size:1.2rem;line-height:1.8;margin-top:30px}.article-body p{margin-bottom:20px}.article-body h2{color:#333;font-size:2rem;margin:40px 0 20px}.article-body h3{color:#333;font-size:1.5rem;margin:30px 0 15px}.article-body img{border-radius:5px;height:auto;margin:30px 0;max-width:100%}.article-body audio{margin:30px 0;width:100%}.article-body strong{font-weight:600}.article-body em{font-style:italic}.article-body ol,.article-body ul{margin:20px 0;padding-left:30px}.article-body li{margin:10px 0}.error,.loading{font-size:1.2rem;padding:40px;text-align:center}.error{color:#c33}.back-button{background:#667eea;border:none;border-radius:5px;color:#fff;cursor:pointer;font-weight:600;margin-top:20px;padding:10px 20px}.back-button:hover{background:#5568d3}@media (max-width:768px){.article-content{padding:20px}.article-header h1{font-size:2rem}.article-body{font-size:1.1rem}}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{min-height:100vh}.page-content{min-height:calc(100vh - 200px);position:relative}
/*# sourceMappingURL=main.66aa0214.css.map*/