* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI','Noto Kufi Arabic','Noto Sans Arabic',Tahoma,sans-serif; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body { background:linear-gradient(165deg,#7dd3fc 0%,#38bdf8 30%,#2563eb 78%,#1e40af 100%); color:#0f2a4a; min-height:100dvh; }
#app { max-width:520px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column; position:relative; }
button { font-family:inherit; cursor:pointer; border:none; }
input,select,textarea { font-family:inherit; font-size:16px; }
.card { background:linear-gradient(180deg,#ffffff,#eef6ff); border-radius:22px; box-shadow:0 12px 26px rgba(8,47,120,.25), inset 0 2px 0 #fff; padding:16px; }
.icon3d { display:flex; align-items:center; justify-content:center; border-radius:17px; box-shadow:0 8px 15px rgba(8,47,120,.28), inset 0 2px 3px rgba(255,255,255,.75), inset 0 -4px 6px rgba(0,0,0,.18); flex:none; }
.btn { display:block; width:100%; background:linear-gradient(180deg,#38bdf8,#0369a1); color:#fff; text-align:center; padding:14px; border-radius:17px; font-size:18px; font-weight:700; box-shadow:0 11px 20px rgba(3,80,140,.38), inset 0 2px 2px rgba(255,255,255,.55), inset 0 -4px 6px rgba(0,0,0,.20); }
.btn:active { transform:translateY(1px); }
.btn.green { background:linear-gradient(180deg,#4ade80,#15803d); box-shadow:0 11px 20px rgba(21,101,52,.38), inset 0 2px 2px rgba(255,255,255,.55), inset 0 -4px 6px rgba(0,0,0,.20); }
.btn.gold { background:linear-gradient(180deg,#fbbf24,#d97706); color:#451a03; border:2px solid #fde68a; }
.btn.red { background:linear-gradient(180deg,#f87171,#b91c1c); }
.btn.ghost { background:rgba(255,255,255,.92); color:#0369a1; box-shadow:0 8px 16px rgba(8,47,120,.22); }
.btn.small { padding:9px 12px; font-size:14.5px; border-radius:13px; width:auto; display:inline-block; }
.eng { display:block; font-size:10px; color:#7d9bbd; letter-spacing:.6px; font-weight:600; direction:ltr; margin-top:1px; }
.btn .eng { color:rgba(255,255,255,.85); }
label.f-label { display:block; font-size:14.5px; font-weight:700; color:#0c2f57; margin:12px 0 0; }
input.inp, select.inp, textarea.inp { width:100%; background:#eaf4ff; border:1.8px solid #bfdbfe; border-radius:13px; padding:11px 13px; margin-top:6px; color:#0c2f57; outline:none; }
input.inp:focus, select.inp:focus, textarea.inp:focus { border-color:#38bdf8; background:#fff; }
.h-title { color:#fff; font-size:24px; font-weight:800; text-shadow:0 3px 8px rgba(0,40,90,.4); text-align:center; }
.h-sub { color:rgba(255,255,255,.94); font-size:13.5px; text-align:center; margin-top:4px; }
.langbar { display:flex; gap:7px; justify-content:center; margin-top:11px; }
.langbar button { border-radius:13px; padding:7px 16px; font-size:14.5px; font-weight:700; background:rgba(255,255,255,.92); color:#0369a1; box-shadow:0 6px 13px rgba(8,47,120,.25); }
.langbar button.on { background:linear-gradient(180deg,#22c55e,#15803d); color:#fff; }
.codeboxes { display:flex; gap:7px; direction:ltr; justify-content:center; margin-top:9px; }
.codeboxes input { width:48px; height:54px; text-align:center; font-size:24px; font-weight:800; color:#0369a1; background:#eaf4ff; border:1.8px solid #bfdbfe; border-radius:12px; outline:none; }
.codeboxes input:focus { border-color:#22c55e; background:#fff; }
.switch { width:54px; height:30px; border-radius:15px; background:#cbd5e1; position:relative; box-shadow:inset 0 2px 4px rgba(0,0,0,.25); flex:none; transition:.2s; }
.switch::after { content:''; position:absolute; top:3px; inset-inline-end:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.3); transition:.2s; }
.switch.on { background:linear-gradient(180deg,#22c55e,#15803d); }
.switch.on::after { transform:translateX(-24px); }
[dir="ltr"] .switch.on::after { transform:translateX(24px); }
.topbar { position:sticky; top:0; z-index:30; background:linear-gradient(180deg,rgba(37,99,235,.97),rgba(29,78,216,.94)); backdrop-filter:blur(3px); color:#fff; padding:11px 15px; display:flex; align-items:center; gap:11px; box-shadow:0 6px 16px rgba(8,47,120,.35); }
.topbar .ttl { font-size:17px; font-weight:800; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.banner { margin:10px 14px 0; border-radius:14px; padding:9px 13px; font-size:13.5px; line-height:1.7; }
.banner.amber { background:#fef9e3; border:1.8px solid #fde68a; color:#664d03; }
.banner.red { background:#fdf2f2; border:1.8px solid #fecaca; color:#7f1d1d; }
.banner.green { background:#eafaf0; border:1.8px solid #bbf7d0; color:#14532d; }
.nav { position:sticky; bottom:0; z-index:30; display:flex; background:linear-gradient(180deg,#ffffff,#e8f3ff); box-shadow:0 -8px 22px rgba(8,47,120,.30); border-radius:22px 22px 0 0; margin-top:auto; }
.nav button { flex:1; background:none; padding:9px 2px 11px; font-size:12.5px; font-weight:700; color:#5b7ba3; display:flex; flex-direction:column; align-items:center; gap:2px; position:relative; }
.nav button .ic { font-size:22px; }
.nav button.on { color:#0369a1; }
.nav .bdg { position:absolute; top:4px; inset-inline-start:calc(50% + 2px); background:#e11d48; color:#fff; font-size:10.5px; min-width:19px; height:19px; border-radius:10px; line-height:19px; padding:0 5px; }
.view { padding:14px 14px 20px; flex:1; display:flex; flex-direction:column; gap:12px; }
.row { display:flex; align-items:center; gap:11px; }
.chip { border-radius:12px; padding:6px 11px; font-size:12.5px; font-weight:700; display:inline-block; }
.chip.g { background:#dcfce7; color:#166534; border:1.5px solid #86efac; }
.chip.a { background:#fef3c7; color:#92400e; border:1.5px solid #fcd34d; }
.chip.r { background:#fee2e2; color:#991b1b; border:1.5px solid #fca5a5; }
.chip.b { background:#dbeafe; color:#1e40af; border:1.5px solid #93c5fd; }
.room-row, .member-row { display:flex; align-items:center; gap:12px; background:linear-gradient(180deg,#fff,#eef6ff); border-radius:19px; padding:12px 14px; box-shadow:0 8px 18px rgba(8,47,120,.20); cursor:pointer; text-align:start; width:100%; }
.room-row:active, .member-row:active { transform:scale(.99); }
.av { width:50px; height:50px; font-size:25px; border-radius:15px; overflow:hidden; }
.av img { width:100%; height:100%; object-fit:cover; }
.dot { width:11px; height:11px; border-radius:50%; flex:none; }
.dot.on { background:#22c55e; box-shadow:0 0 0 3px #bbf7d0; }
.dot.off { background:#94a3b8; }
.thread { flex:1; display:flex; flex-direction:column; gap:8px; padding:12px 12px 6px; overflow-y:auto; }
.msg { max-width:82%; padding:9px 12px; border-radius:17px; font-size:15px; line-height:1.65; box-shadow:0 4px 10px rgba(8,47,120,.16); position:relative; word-break:break-word; }
.msg.me { align-self:flex-end; background:linear-gradient(180deg,#dcfce7,#bbf7d0); border-end-end-radius:5px; }
.msg.other { align-self:flex-start; background:#fff; border-end-start-radius:5px; }
.msg .who { font-size:11.5px; font-weight:800; color:#0369a1; margin-bottom:2px; }
.msg .tm { font-size:10.5px; color:#7d9bbd; text-align:end; margin-top:3px; }
.msg img.att { max-width:100%; border-radius:11px; margin-top:4px; }
.msg .filechip { display:flex; gap:8px; align-items:center; background:#eaf4ff; border-radius:11px; padding:8px 10px; margin-top:4px; font-size:13.5px; }
.composer { position:sticky; bottom:0; display:flex; gap:8px; align-items:flex-end; padding:9px 10px; background:linear-gradient(180deg,#ffffff,#e8f3ff); box-shadow:0 -6px 18px rgba(8,47,120,.22); }
.composer textarea { flex:1; resize:none; border:1.8px solid #bfdbfe; border-radius:15px; padding:10px 12px; max-height:110px; background:#f4faff; outline:none; }
.cbtn { width:46px; height:46px; border-radius:50%; font-size:20px; display:flex; align-items:center; justify-content:center; flex:none; box-shadow:0 7px 14px rgba(8,47,120,.28), inset 0 2px 2px rgba(255,255,255,.55); }
.modal-bg { position:fixed; inset:0; background:rgba(7,32,74,.55); z-index:60; display:flex; align-items:flex-end; justify-content:center; }
.modal { background:linear-gradient(180deg,#fff,#eef6ff); width:100%; max-width:520px; border-radius:26px 26px 0 0; padding:19px; max-height:88dvh; overflow-y:auto; box-shadow:0 -14px 34px rgba(0,0,0,.3); }
.setitem { display:flex; align-items:center; gap:12px; padding:12px 3px; border-bottom:1.6px solid #e2e8f0; width:100%; background:none; text-align:start; font-size:15.5px; font-weight:600; color:#0c2f57; }
.setitem:last-child { border-bottom:none; }
.qrbox { background:#fff; padding:12px; border-radius:15px; display:inline-block; box-shadow:0 6px 14px rgba(8,47,120,.18); }
.small { font-size:12.5px; color:#5b7ba3; }
.center { text-align:center; }
.hidden { display:none !important; }
.kv { display:flex; justify-content:space-between; font-size:14px; padding:6px 0; border-bottom:1px dashed #dbeafe; }
.period-card { border:2px solid #bfdbfe; }
.period-card.done { border-color:#22c55e; background:linear-gradient(180deg,#f0fdf4,#dcfce7); }
@media print { body { background:#fff; } .noprint { display:none !important; } }