Omaimah/Encryption-App

1:root{2  --bg-0: #eef2ff;3  --card: rgba(255,255,255,0.78);4  --glass: rgba(255,255,255,0.32);5  --txt: #1f2937;6  --muted: #6b7280;7  --accent: #2563eb;8  --accent-2: #06b6d4;9  --success: #16a34a;10  --danger: #ef4444;11}12 13/* Dark theme */14:root[data-theme="dark"]{15  --bg-0: linear-gradient(135deg,#0f1724 0%, #001219 100%);16  --card: rgba(8,10,15,0.6);17  --glass: rgba(255,255,255,0.04);18  --txt: #e6eef8;19  --muted: #9aa6b2;20  --accent: #60a5fa;21  --accent-2: #2dd4bf;22  --success: #10b981;23}24 25/* reset and layout */26*{box-sizing:border-box}27html,body{height:100%}28body{29  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;30  margin:0;31  background: var(--bg-0);32  -webkit-font-smoothing:antialiased;33  -moz-osx-font-smoothing:grayscale;34  display:flex;35  align-items:center;36  justify-content:center;37  padding:32px;38}39 40/* animated background */41.bg-animated{42  position:fixed;43  inset:0;44  z-index:-2;45  background: radial-gradient(circle at 10% 10%, rgba(6,182,212,0.12), transparent 10%),46              radial-gradient(circle at 90% 80%, rgba(37,99,235,0.12), transparent 15%);47  animation: floatBG 10s linear infinite alternate;48  opacity:0.95;49}50@keyframes floatBG{ from{transform:translateY(-10px)} to{transform:translateY(10px)} }51 52/* app container */53.app{54  width: 820px;55  max-width: 96%;56  display:grid;57  grid-template-columns: 1fr;58  gap:18px;59}60 61/* header */62.app-header{63  display:flex;64  align-items:center;65  justify-content:space-between;66  gap:12px;67}68.title{69  margin:0;70  font-size:20px;71  color:var(--txt);72}73.tagline{margin:4px 0 0;font-size:13px;color:var(--muted)}74 75/* header buttons */76.controls{display:flex;gap:8px;align-items:center}77.icon-btn{78  background:transparent;79  border:1px solid transparent;80  padding:8px 10px;81  border-radius:10px;82  cursor:pointer;83  font-size:16px;84}85.icon-btn:hover{transform:translateY(-3px)}86.action-btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;border:none;padding:8px 12px;border-radius:10px;cursor:pointer}87 88/* card */89.card{90  background: var(--card);91  border-radius:14px;92  padding:18px;93  backdrop-filter: blur(6px) saturate(120%);94  border: 1px solid rgba(255,255,255,0.06);95  box-shadow: 0 8px 30px rgba(2,6,23,0.08);96}97 98/* label & textarea */99.label{display:block;font-weight:600;color:var(--txt);margin-bottom:8px}100textarea{101  width:100%;102  min-height:120px;103  resize:vertical;104  padding:12px;105  border-radius:10px;106  border:1px solid rgba(0,0,0,0.06);107  font-family:inherit;108  font-size:14px;109  color:var(--txt);110  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.45));111}112:root[data-theme="dark"] textarea{ background: rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04) }113textarea:focus{outline:none;box-shadow:0 6px 18px rgba(37,99,235,0.08);border-color:var(--accent)}114 115/* layout utilities */116.row{display:flex;align-items:center;justify-content:space-between;gap:10px}117.small{font-size:13px;color:var(--muted);margin-top:8px}118.left{display:flex;align-items:center;gap:12px}119.right{display:flex;align-items:center;gap:12px}120 121/* radios */122.radio-group label{margin-right:12px; font-weight:600; color:var(--muted)}123.radio-group input{margin-right:6px}124 125/* buttons */126.actions{margin-top:12px;align-items:center}127.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;border:none;padding:10px 16px;border-radius:10px;cursor:pointer}128.primary:hover{transform:translateY(-3px)}129.ghost{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;border:none;padding:10px 16px;border-radius:10px;cursor:pointer}130.ghost:hover{transform:translateY(-3px)}131 132/* strength meter */133.strength{display:flex;align-items:center;gap:10px;margin-left:auto}134.meter{width:180px;background:rgba(0,0,0,0.06);height:10px;border-radius:999px;overflow:hidden}135.meter-bar{height:100%;width:0;transition:width 300ms ease;border-radius:999px;background:linear-gradient(90deg,#ef4444,#f97316,#f59e0b,#10b981)}136.meter-bar[data-level="low"]{filter:grayscale(0.3)}137.meter-bar[data-level="med"]{filter:brightness(1.05)}138.meter-bar[data-level="high"]{filter:drop-shadow(0 4px 10px rgba(16,185,129,0.14))}139 140/* result card specifics */141.result-card{padding:14px}142.result-head{display:flex;align-items:center;justify-content:space-between}143.result-head h2{margin:0;font-size:16px;color:var(--txt)}144.result-actions{display:flex;gap:8px}145.result-area{margin-top:12px}146.result-box{147  background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(30,30,47,0.95));148  color:#f8fafc;149  padding:14px;150  border-radius:10px;151  min-height:78px;152  max-height:260px;153  overflow:auto;154  white-space:pre-wrap;155  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;156  font-size:13px;157  box-shadow: inset 0 2px 12px rgba(0,0,0,0.35);158  transition: box-shadow .25s ease;159}160.result-box.flash{box-shadow:0 6px 28px rgba(34,197,94,0.12)}161:root[data-theme="light"] .result-box{ background: linear-gradient(180deg,#0b1220, #111827); }162 163/* toast */164#toastWrap{position:fixed;right:24px;bottom:24px;z-index:9999;display:flex;flex-direction:column;gap:10px}165.toast{166  min-width:120px;167  max-width:320px;168  padding:10px 14px;169  border-radius:10px;170  background:rgba(17,24,39,0.92);171  color:#fff;172  opacity:0;173  transform:translateY(12px);174  transition:all 260ms ease;175  box-shadow:0 8px 30px rgba(2,6,23,0.4);176}177.toast.show{opacity:1;transform:translateY(0)}178 179/* footer */180.footer{text-align:center;color:var(--muted);font-size:12px;margin-top:6px}181 182/* responsive */183@media (max-width:720px) {184  .app{ padding: 0 6px; }185  .strength{display:none}186  .app-header{flex-direction:column;align-items:flex-start;gap:8px}187}188#drop-zone {189  border: 2px dashed #007bff;190  border-radius: 12px;191  padding: 30px;192  margin: 20px auto;193  width: 80%;194  cursor: pointer;195  transition: 0.3s ease;196  background: #f9f9fc;197}198 199#drop-zone.dragover {200  background: #e6f0ff;201  border-color: #0056b3;202}203#file-upload {204    color:#007bff;205}