/* ===== LETTERS APP — Premium Mobile UI + Calming Background ===== */
:root{
  --bg:#070b16; --bg2:#0e1325;
  --glass:#10162b80;
  --text:#eaf0ff; --muted:#a7b1c9;
  --accent:#3960ff; --accent-2:#7aa2ff;
  --ok:#28c76f; --danger:#ff6b6b;
  --r-lg:20px; --r-md:14px; --r-sm:12px;
  --t-h1:clamp(22px,4.8vw,34px);
  --t-h2:clamp(16px,3.2vw,20px);
  --t-body:clamp(14px,2.8vw,16px);
  --t-note:clamp(12px,2.4vw,14px);
  --control-h:52px; /* সব ইনপুট/সিলেক্ট একই উচ্চতা */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  font-size:var(--t-body);
  color:var(--text);
  background: radial-gradient(1200px 600px at 80% -10%, #2443ff22, transparent 60%),
              radial-gradient(900px 500px at -10% 10%, #00e6ff18, transparent 60%),
              linear-gradient(180deg,var(--bg),var(--bg2) 60%,#0b1124);
  -webkit-font-smoothing:antialiased;
  padding:max(14px,env(safe-area-inset-top))
          max(14px,env(safe-area-inset-right))
          max(18px,env(safe-area-inset-bottom))
          max(14px,env(safe-area-inset-left));
  overflow-x:hidden;
}

/* soft animated wave */
body::before{
  content:""; position:fixed; inset:-10% -10% -10% -10%; z-index:-1;
  background:
    radial-gradient(60% 80% at 20% 10%, #6ea8ff14 0%, transparent 60%),
    radial-gradient(70% 90% at 90% 0%, #00e6ff12 0%, transparent 65%),
    conic-gradient(from 0deg at 50% 50%, #1a2140 0 25%, #11172f 25% 50%, #1a2140 50% 75%, #11172f 75% 100%);
  mix-blend-mode:screen;
  animation:veil 16s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes veil{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(0,-2%,0) scale(1.03)}
}

/* background canvas (floating letters handled by JS) */
#bg{
  position:fixed; inset:0; z-index:-2;
  width:100vw; height:100vh; display:block;
  pointer-events:none;
}

.container{max-width:860px;margin:0 auto}
.appbar{
  position:sticky;top:0;z-index:5;margin-bottom:20px;
  backdrop-filter:saturate(140%) blur(12px);
  background:linear-gradient(180deg,#0c122280,#0c122200);
  border-bottom:1px solid #1a2140
}
.appbar-inner{display:flex;align-items:center;gap:12px;padding:10px 6px}
.logo-dot{
  width:12px;height:12px;border-radius:999px;
  background:radial-gradient(circle at 30% 30%,#7aa2ff,#3960ff);
  box-shadow:0 0 0 3px #3960ff33,0 6px 18px #3960ff55;
}
.app-title{font-size:var(--t-h1);font-weight:700;letter-spacing:.3px}
.app-sub{color:var(--muted);font-size:var(--t-note);margin-top:2px}

/* Card style */
.card{
  position:relative;
  background:linear-gradient(180deg,#0e142b,#0b1124);
  border:1px solid #1a2042;border-radius:var(--r-lg);
  padding:28px;box-shadow:0 6px 20px rgba(0,0,0,.35);
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(800px 400px at 10% -10%,#7aa2ff0f,transparent 60%),
             radial-gradient(700px 360px at 100% 0%,#00e6ff0d,transparent 60%);
}

/* Headings */
h1{font-size:var(--t-h1);margin:0 0 6px}
h2{font-size:var(--t-h2);margin:0 0 14px;color:#dbe3ff}

/* Tabs */
.tabs{
  display:flex;gap:10px;margin:14px 0 18px;padding:6px;
  background:#0b1226;border:1px solid #1a2042;border-radius:999px;
}
.tab{
  flex:1;text-align:center;cursor:pointer;border-radius:999px;
  padding:12px 14px;font-weight:600;color:#cfd7ff;background:transparent;
  border:1px solid transparent;
  transition:transform .18s,background .18s,color .18s,border-color .18s;
}
.tab:active{transform:translateY(1px)}
.tab.active{
  color:#fff;background:linear-gradient(180deg,var(--accent),#2749ff);
  border-color:#3b56ff;box-shadow:0 6px 16px #3b56ff55;
}

/* Form fields */
label{display:block;margin:10px 0 8px;color:#cfe1ff}
.row{display:flex;gap:12px;flex-wrap:wrap}
.half{flex:1 1 280px}

/* --- uniform input/select styling --- */
input, select, textarea{
  width:100%;
  background:#0b1124;
  border:1px solid #1f2748;
  color:var(--text);
  border-radius:var(--r-md);
  outline:none;
  font-size:16px; /* iOS zoom fix */
  transition:border-color .18s, box-shadow .18s, transform .06s ease;
}

/* uniform height for inputs & selects */
input, select{
  height:var(--control-h);
  line-height:calc(var(--control-h) - 2px);
  padding:0 14px;
}

/* select special tweaks */
select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:38px; /* arrow space */
  background-color:#0b1124;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23cfd7ff' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px;
}

/* textarea */
textarea{
  min-height:180px;
  resize:vertical;
  line-height:1.55;
  padding:14px;
}

input::placeholder, textarea::placeholder{color:#8f9bb8}

/* Focus glow */
input:focus, textarea:focus, select:focus{
  border-color:#3b56ff;
  box-shadow:0 0 0 4px #3b56ff22, inset 0 0 24px #3b56ff0f;
}

/* Buttons */
.btn{
  display:inline-block;width:100%;
  background:linear-gradient(180deg,var(--accent),#2749ff);
  color:#fff;border:none;border-radius:14px;
  padding:14px 16px;font-weight:700;letter-spacing:.2px;
  cursor:pointer;box-shadow:0 10px 22px #3653ff55;
  transition:transform .08s,filter .18s,box-shadow .18s;
}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(1px)}
.btn.sec{background:#121a35;box-shadow:none;border:1px solid #233059}

/* Notes, alerts */
.note{color:var(--muted);font-size:var(--t-note);margin-top:6px}
.alert{margin-top:12px;padding:12px 14px;border-radius:var(--r-md);
  background:#0d1224;border:1px solid #1e2648}
.alert.ok{border-color:#1f5f3a}
.alert.err{border-color:#5f2a2a}

/* Footer */
footer{margin-top:18px;text-align:center;color:var(--muted);font-size:var(--t-note)}
footer .btn{width:auto;padding:10px 14px}
.hidden{display:none}

/* prefers-reduced-motion respect */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}