/* === Reset & Base Styles === */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; line-height:1.6; color:#2d3748; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); min-height:100vh; position:relative; overflow-x:hidden; }

/* === Background Animations === */
.background-animation { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:-1; }
.floating-shape { position:absolute; background:rgba(255,255,255,0.1); border-radius:50%; animation:float 6s ease-in-out infinite; }
.shape-1 { width:100px;height:100px;top:20%;left:10%; animation-delay:0s; }
.shape-2 { width:150px;height:150px;top:60%;right:10%; animation-delay:2s; }
.shape-3 { width:80px;height:80px;top:80%;left:20%; animation-delay:4s; }
.shape-4 { width:120px;height:120px;top:30%;right:30%; animation-delay:1s; }
@keyframes float {0%,100%{transform:translateY(0) rotate(0deg);opacity:0.7;}50%{transform:translateY(-20px) rotate(180deg);opacity:1;}}

/* === Layout === */
.container { max-width:1200px;margin:0 auto;padding:0 20px; }
.header {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px 0;
    position: relative; /* scrolls normally */
    top: auto;
    z-index: auto;
}
.logo { display:flex; align-items:center; justify-content:center; gap:15px; margin-bottom:10px; }
.logo i { font-size:2.5rem; color:#fff; text-shadow:0 0 20px rgba(255,255,255,0.5); }
.logo h1 { font-size:2.5rem; font-weight:700; color:#fff; text-shadow:2px 2px 4px rgba(0,0,0,0.3); }
.header-subtitle { text-align:center; }
.header-subtitle p { color:rgba(255,255,255,0.9); font-size:1.1rem; font-weight:300; }
.main-container { padding:40px 0; min-height:calc(100vh - 200px); }
.app-panels { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:30px; }
.panel { background:rgba(255,255,255,0.95); border-radius:20px; box-shadow:0 20px 40px rgba(0,0,0,0.1); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.3); padding:30px; transition:all 0.4s cubic-bezier(0.4,0,0.2,1); position:relative; overflow:hidden; }
.panel::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#667eea,#764ba2); transform:scaleX(0); transition:transform 0.3s ease; }
.panel:hover { transform:translateY(-10px); box-shadow:0 30px 60px rgba(0,0,0,0.2); }
.panel:hover::before { transform:scaleX(1); }
.panel-header { text-align:center; margin-bottom:30px; }
.panel-header h2 { font-size:1.8rem; font-weight:600; color:#2d3748; margin-bottom:10px; display:flex; align-items:center; justify-content:center; gap:10px; }
.panel-header h2 i { color:#667eea; }
.panel-header p { color:#718096; font-size:0.95rem; }

/* === Input === */
.input-group { margin-bottom:25px; }
.input-group label { display:block; margin-bottom:8px; font-weight:500; color:#4a5568; font-size:0.95rem; }
#message-input { width:100%; padding:15px; border:2px solid #e2e8f0; border-radius:12px; font-family:inherit; font-size:1rem; resize:vertical; transition:all 0.3s ease; background:#f8fafc; line-height:1.5; }
#message-input:focus { outline:none; border-color:#667eea; background:#fff; box-shadow:0 0 0 3px rgba(102,126,234,0.1); }
.word-counter { display:flex; justify-content:flex-end; margin-top:8px; font-size:0.85rem; color:#718096; }
#word-count { color:#667eea; font-weight:500; }
.word-counter.over-limit #word-count { color:#e53e3e; }

/* === File Upload === */
.file-upload-group { display:flex; flex-direction:column; gap:15px; margin-bottom:25px; }
.file-upload-area { border:2px dashed #cbd5e0; border-radius:12px; padding:20px; text-align:center; cursor:pointer; transition:all 0.3s ease; background:#f8fafc; position:relative; }
.file-upload-area:hover { border-color:#667eea; background:rgba(102,126,234,0.05); }
.file-upload-area.file-selected { border-color:#48bb78; background:rgba(72,187,120,0.05); }
.file-upload-area.drag-over { border-color:#667eea !important; background:rgba(102,126,234,0.15); }
.upload-content i { font-size:2rem; color:#667eea; margin-bottom:10px; display:block; }
.upload-content p { font-weight:500; color:#4a5568; margin-bottom:5px; }
.file-name { font-size:0.85rem; color:#718096; font-style:italic; }
.file-upload-area.file-selected .file-name { color:#48bb78; font-weight:500; }

/* === Buttons === */
.action-btn { width:100%; padding:15px 25px; border:none; border-radius:12px; font-size:1.1rem; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; position:relative; overflow:hidden; text-transform:uppercase; letter-spacing:0.5px; transition:all 0.3s ease; }
.action-btn::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition:left 0.5s ease; }
.action-btn:hover::before { left:100%; }
.encrypt-btn { background:linear-gradient(135deg,#667eea,#764ba2); color:white; box-shadow:0 10px 25px rgba(102,126,234,0.3); }
.encrypt-btn:hover { transform:translateY(-2px); box-shadow:0 15px 35px rgba(102,126,234,0.4); }
.decrypt-btn { background:linear-gradient(135deg,#48bb78,#38a169); color:white; box-shadow:0 10px 25px rgba(72,187,120,0.3); }
.decrypt-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 15px 35px rgba(72,187,120,0.4); }
.decrypt-btn:disabled { background:#cbd5e0; color:#a0aec0; cursor:not-allowed; box-shadow:none; }
.loading-spinner { display:none; width:20px; height:20px; border:2px solid rgba(255,255,255,0.3); border-top:2px solid #fff; border-radius:50%; animation:spin 1s linear infinite; }
.action-btn.loading .loading-spinner { display:block; opacity:0; animation:fadeIn 0.3s forwards, spin 1s linear infinite; }
.action-btn.loading span { display:none; }
@keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
@keyframes fadeIn { to { opacity:1; } }

/* === Results Section === */
.results-section { display:none; margin-top:25px; padding:20px; background:rgba(72,187,120,0.1); border:1px solid rgba(72,187,120,0.3); border-radius:12px; opacity:0; transform:translateY(-10px); transition:opacity 0.5s ease, transform 0.5s ease; }
.results-section.show { display:block; opacity:1; transform:translateY(0); }
.results-section h3 { text-align:center; color:#48bb78; margin-bottom:15px; font-size:1.2rem; font-weight:600; }
.download-links { display:flex; flex-direction:column; gap:10px; }
.download-link { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; background:#48bb78; color:white; text-decoration:none; border-radius:8px; font-weight:500; transition:all 0.3s ease, transform 0.2s ease; }
.download-link:hover { background:#38a169; transform:translateY(-3px) scale(1.02); }

/* === Notifications === */
#notification-container { position:fixed; top:20px; right:20px; z-index:1000; display:flex; flex-direction:column; gap:10px; }
.notification { background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.2); padding:15px 20px; display:flex; align-items:center; gap:12px; min-width:300px; max-width:400px; animation:notificationSlide 0.5s ease-out; border-left:4px solid; }
.notification.success { border-left-color:#48bb78; }
.notification.error { border-left-color:#e53e3e; }
.notification.info { border-left-color:#3182ce; }
.notification i { font-size:1.2rem; }
.notification-content { flex:1; }
.notification-title { font-weight:600; margin-bottom:2px; }
.notification-message { font-size:0.9rem; color:#718096; }
.notification-close { background:none; border:none; font-size:1.2rem; color:#718096; cursor:pointer; padding:0; margin-left:10px; }
.notification-close:hover { color:#2d3748; }
@keyframes notificationSlide { from { opacity:0; transform:translateX(100px); } to { opacity:1; transform:translateX(0); } }

/* === Footer === */
.footer { background:rgba(255,255,255,0.1); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,0.2); padding:20px 0; text-align:center; margin-top:50px; }
.footer p { color:rgba(255,255,255,0.8); font-size:0.9rem; }

/* === Responsive === */
@media (max-width:968px) { .app-panels { grid-template-columns:1fr; gap:25px; } .panel { padding:25px; } .logo h1 { font-size:2rem; } .logo i { font-size:2rem; } }
@media (max-width:768px) { .container { padding:0 15px; } .main-container { padding:30px 0; } .panel { padding:20px; } .panel-header h2 { font-size:1.5rem; } .logo h1 { font-size:1.8rem; } .header-subtitle p { font-size:1rem; } .download-links { gap:8px; } .download-link { padding:10px 15px; font-size:0.9rem; } #notification-container { left:15px; right:15px; top:15px; } .notification { min-width:auto; max-width:none; } }
@media (max-width:480px) { .logo { flex-direction:column; gap:5px; } .panel-header h2 { flex-direction:column; gap:5px; } .file-upload-group { gap:12px; } .file-upload-area { padding:15px; } .action-btn { padding:12px 20px; font-size:1rem; } }

/* === Accessibility === */
@media(prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;} .floating-shape{animation:none;}}
.action-btn:focus,.file-upload-area:focus,#message-input:focus{outline:2px solid #667eea; outline-offset:2px;}
@media(prefers-contrast:high){.panel{border:2px solid #2d3748;} .action-btn{border:2px solid currentColor;}}
@media(prefers-color-scheme:dark){body{background:linear-gradient(135deg,#1a202c 0%,#2d3748 100%);} .panel{background:rgba(26,32,44,0.95); color:#f7fafc; border-color:rgba(255,255,255,0.1);} .panel-header h2,.input-group label{color:#f7fafc;} .panel-header p{color:#cbd5e0;} #message-input{background:#2d3748;border-color:#4a5568;color:#f7fafc;} #message-input:focus{background:#374151;border-color:#667eea;} .file-upload-area{background:#2d3748;border-color:#4a5568;} .file-upload-area:hover{background:rgba(102,126,234,0.1);} .notification{background:#2d3748;color:#f7fafc;} }