:root{
    --bg:#14121C;
    --surface:#1F1B2E;
    --surface-2:#282239;
    --surface-hover:#322B49;
    --line:#352F4A;
    --amber:#E8A33D;
    --amber-dim:#8a6528;
    --teal:#4FD8C4;
    --red:#E1615A;
    --text:#F3EEE7;
    --muted:#9691AA;
    --muted-2:#6F6B85;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    background:
      radial-gradient(ellipse 900px 500px at 50% -10%, rgba(232,163,61,0.10), transparent 60%),
      var(--bg);
    color:var(--text);
    font-family:'Tajawal', sans-serif;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3, .display{
    font-family:'Reem Kufi', 'Tajawal', sans-serif;
    font-weight:600;
    letter-spacing:0.3px;
  }
  #app{
    max-width:480px;
    margin:0 auto;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    position:relative;
    background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent 200px);
  }
  ::selection{background:var(--amber); color:#14121C;}
  button{font-family:inherit; cursor:pointer; border:none; outline:none; -webkit-tap-highlight-color:transparent;}
  input, textarea{font-family:inherit; outline:none;}
  a{color:inherit;}

  /* ---------- language switch ---------- */
  .lang-switch{
    display:flex; background:var(--surface); border:1px solid var(--line);
    border-radius:999px; padding:3px; gap:2px; flex:none;
  }
  .lang-switch button{
    padding:6px 12px; border-radius:999px; font-size:11.5px; font-weight:700;
    color:var(--muted-2); background:transparent; letter-spacing:.3px;
  }
  .lang-switch button.active{background:var(--amber); color:#1c1305;}
  .auth-topbar{display:flex; justify-content:flex-end; padding:16px 20px 0;}

  /* ---------- header ---------- */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 20px 14px;
    position:sticky; top:0; z-index:20;
    background:linear-gradient(180deg, var(--bg) 70%, transparent);
    gap:10px;
  }
  .brand{display:flex; align-items:center; gap:10px; min-width:0;}
  .brand-mark{width:30px; height:30px; position:relative; flex:none;}
  .brand-mark svg{width:100%; height:100%;}
  .brand-name{font-size:20px; color:var(--text); white-space:nowrap;}
  .brand-sub{font-size:10px; color:var(--muted-2); margin-top:-2px; letter-spacing:0.5px;}
  .topbar-actions{display:flex; align-items:center; gap:8px; flex:none;}
  .icon-btn{
    width:38px; height:38px; border-radius:50%;
    background:var(--surface); display:flex; align-items:center; justify-content:center;
    color:var(--muted); border:1px solid var(--line); flex:none;
  }

  /* ---------- generic screen ---------- */
  .screen{padding:0 20px 100px; flex:1; display:none; animation:fadein .35s ease;}
  .screen.active{display:block;}
  @keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

  .field{margin-bottom:16px;}
  .field label{display:block; font-size:13px; color:var(--muted); margin-bottom:7px;}
  .field input, .field textarea{
    width:100%; background:var(--surface); border:1px solid var(--line);
    color:var(--text); padding:13px 14px; border-radius:12px; font-size:15px;
    transition:border-color .15s;
  }
  .field textarea{resize:none; min-height:80px; line-height:1.6;}
  .field input:focus, .field textarea:focus{border-color:var(--amber-dim);}
  .hint{font-size:11.5px; color:var(--muted-2); margin-top:6px; line-height:1.6;}

  .btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 20px; border-radius:14px; font-size:15px; font-weight:700;
    width:100%; transition:transform .12s, opacity .12s;
  }
  .btn:active{transform:scale(0.98);}
  .btn-primary{background:var(--amber); color:#1c1305;}
  .btn-primary:disabled{opacity:.45;}
  .btn-ghost{background:var(--surface); color:var(--text); border:1px solid var(--line);}
  .btn-danger-outline{background:transparent; color:var(--red); border:1px solid rgba(225,97,90,.4);}
  .btn-teal{background:var(--teal); color:#07211d;}
  .btn-sm{padding:9px 14px; font-size:13px; border-radius:10px; width:auto;}

  /* ---------- auth ---------- */
  .auth-hero{padding:24px 0 22px; text-align:center;}
  .auth-hero .display{font-size:26px; line-height:1.5;}
  .auth-hero p{color:var(--muted); font-size:13.5px; margin-top:10px; line-height:1.8; padding:0 6px;}
  .divider-row{display:flex; align-items:center; gap:12px; margin:22px 0;}
  .divider-row .line{flex:1; height:1px; background:var(--line);}
  .divider-row span{font-size:12px; color:var(--muted-2);}

  /* ---------- bottom nav ---------- */
  .bottomnav{
    position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:480px;
    background:rgba(20,18,28,0.9); backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    display:flex; z-index:30;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .nav-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:11px 0 9px; background:none; color:var(--muted-2); position:relative;
  }
  .nav-item.active{color:var(--amber);}
  .nav-item svg{width:21px; height:21px;}
  .nav-item .lbl{font-size:10.5px;}
  .badge{
    position:absolute; top:5px; inset-inline-end:calc(50% - 20px);
    background:var(--red); color:#fff; font-size:9.5px; font-weight:700;
    width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  }

  /* ---------- radar ---------- */
  .radar-wrap{display:flex; flex-direction:column; align-items:center; padding:14px 0 6px;}
  .radar{
    width:270px; height:270px; border-radius:50%; position:relative;
    background:radial-gradient(circle, rgba(232,163,61,0.05) 0%, rgba(20,18,28,0) 70%);
    border:1px solid var(--line);
  }
  .radar::before, .radar::after{
    content:''; position:absolute; border-radius:50%; border:1px solid var(--line);
  }
  .radar::before{inset:22%;}
  .radar::after{inset:44%;}
  .radar-cross{position:absolute; inset:0;}
  .radar-cross i{position:absolute; background:var(--line);}
  .radar-cross .h{top:50%; left:0; right:0; height:1px;}
  .radar-cross .v{left:50%; top:0; bottom:0; width:1px;}
  .radar-sweep{
    position:absolute; inset:0; border-radius:50%; overflow:hidden;
    opacity:0; transition:opacity .3s;
  }
  .radar-sweep.on{opacity:1;}
  .radar-sweep .beam{
    position:absolute; top:0; left:50%; width:50%; height:50%; transform-origin:0% 100%;
    background:conic-gradient(from 0deg, rgba(232,163,61,0.55), rgba(232,163,61,0) 32%);
    animation:sweep 2.6s linear infinite;
  }
  @keyframes sweep{to{transform:rotate(360deg);}}
  .radar-center{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:13px; height:13px; border-radius:50%; background:var(--amber);
    box-shadow:0 0 0 5px rgba(232,163,61,0.18);
    z-index:3;
  }
  .radar-center::after{
    content:''; position:absolute; inset:-14px; border-radius:50%;
    border:1px solid rgba(232,163,61,0.35); opacity:0;
  }
  .radar-sweep.on ~ .radar-center::after{opacity:1; animation:ping 1.8s ease-out infinite;}
  @keyframes ping{0%{transform:scale(0.3); opacity:.7;} 100%{transform:scale(2.4); opacity:0;}}
  .radar-dot{
    position:absolute; width:11px; height:11px; border-radius:50%;
    background:var(--teal); box-shadow:0 0 10px rgba(79,216,196,0.7);
    transform:translate(-50%,-50%); z-index:2; opacity:0; animation:dotIn .5s forwards;
  }
  @keyframes dotIn{to{opacity:1;}}
  .radar-status{margin-top:18px; text-align:center; min-height:34px;}
  .radar-status .t1{font-size:13.5px; color:var(--muted);}
  .radar-status .t2{font-size:11.5px; color:var(--muted-2); margin-top:3px;}

  .scan-controls{display:flex; align-items:center; gap:10px; margin:20px 0 4px;}
  .scan-controls .btn{flex:1;}
  .radius-row{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted); margin:2px 0 14px;}
  .radius-row input[type=range]{flex:1; margin:0 12px; accent-color:var(--amber);}

  .section-label{
    font-size:11.5px; color:var(--muted-2); letter-spacing:.5px; margin:24px 0 12px;
    display:flex; align-items:center; gap:8px;
  }
  .section-label::after{content:''; flex:1; height:1px; background:var(--line);}

  /* ---------- person card ---------- */
  .p-card{
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:15px 16px; margin-bottom:12px;
  }
  .p-card .row1{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
  .p-avatar{
    width:44px; height:44px; border-radius:50%; flex:none;
    background:linear-gradient(135deg, var(--amber), #b5762b);
    display:flex; align-items:center; justify-content:center;
    font-family:'Reem Kufi'; font-size:16px; color:#1c1305; font-weight:700;
  }
  .p-name-wrap{flex:1; min-width:0;}
  .p-name{font-size:15px; font-weight:700;}
  .p-dist{font-size:11.5px; color:var(--teal); margin-top:2px;}
  .p-moment{
    font-size:13px; color:var(--muted); line-height:1.7;
    background:var(--surface-2); border-radius:10px; padding:10px 12px; margin-bottom:11px;
    border-inline-start:2px solid var(--amber-dim);
  }
  .p-actions{display:flex; gap:8px;}
  .p-status{
    font-size:12px; color:var(--muted-2); text-align:center; padding:9px; width:100%;
    background:var(--surface-2); border-radius:10px;
  }

  .empty{
    text-align:center; padding:40px 10px; color:var(--muted-2);
  }
  .empty svg{width:38px; height:38px; margin-bottom:12px; opacity:.5;}
  .empty p{font-size:13px; line-height:1.8;}

  /* ---------- requests tabs ---------- */
  .tabs{display:flex; gap:8px; margin-bottom:18px;}
  .tab{
    flex:1; text-align:center; padding:10px; border-radius:12px; font-size:13px;
    background:var(--surface); color:var(--muted); border:1px solid var(--line);
  }
  .tab.active{background:rgba(232,163,61,0.12); color:var(--amber); border-color:var(--amber-dim);}
  .tabpane{display:none;}
  .tabpane.active{display:block;}

  /* ---------- chats list ---------- */
  .chat-row{
    display:flex; align-items:center; gap:12px; padding:13px 6px;
    border-bottom:1px solid var(--line);
  }
  .chat-row .p-avatar{width:46px; height:46px;}
  .chat-meta{flex:1; min-width:0;}
  .chat-meta .nm{font-size:14.5px; font-weight:700;}
  .chat-meta .lm{font-size:12.5px; color:var(--muted-2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .chat-time{font-size:10.5px; color:var(--muted-2); flex:none;}

  /* ---------- chat screen ---------- */
  #screen-chat{padding:0;}
  .chat-header{
    display:flex; align-items:center; gap:12px; padding:14px 20px;
    position:sticky; top:0; background:var(--bg); z-index:5; border-bottom:1px solid var(--line);
  }
  .chat-header .p-avatar{width:36px; height:36px; font-size:13px;}
  .chat-back{width:34px; height:34px; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--text);}
  .chat-header .who{flex:1;}
  .chat-header .who .nm{font-size:14.5px; font-weight:700;}
  .chat-header .who .st{font-size:11px; color:var(--teal);}
  .chat-body{padding:16px 20px; min-height:calc(100vh - 260px); display:flex; flex-direction:column; gap:10px;}
  .msg{max-width:78%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.6; position:relative;}
  .msg.me{align-self:flex-start; background:var(--amber); color:#1c1305; border-end-start-radius:4px;}
  .msg.them{align-self:flex-end; background:var(--surface); color:var(--text); border:1px solid var(--line); border-end-end-radius:4px;}
  .msg .tm{font-size:9.5px; opacity:.65; margin-top:4px; display:block;}
  .chat-inputbar{
    position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:480px; display:flex; gap:10px; align-items:center;
    padding:12px 16px; background:rgba(20,18,28,0.92); backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
  .chat-inputbar input{
    flex:1; background:var(--surface); border:1px solid var(--line); color:var(--text);
    padding:12px 15px; border-radius:20px; font-size:14.5px;
  }
  .send-btn{
    width:42px; height:42px; border-radius:50%; background:var(--amber); flex:none;
    display:flex; align-items:center; justify-content:center; color:#1c1305;
  }
  html[dir="ltr"] .send-btn svg{transform:scaleX(1);}
  html[dir="rtl"] .send-btn svg{transform:scaleX(-1);}

  /* ---------- profile ---------- */
  .profile-head{display:flex; flex-direction:column; align-items:center; padding:24px 0 8px;}
  .profile-head .p-avatar{width:74px; height:74px; font-size:26px; margin-bottom:12px;}
  .profile-head .nm{font-size:19px;}
  .id-box{
    display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line);
    border-radius:12px; padding:12px 14px; margin:18px 0; font-size:12px; color:var(--muted);
  }
  .id-box code{flex:1; direction:ltr; text-align:left; color:var(--amber); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .copy-btn{background:var(--surface-2); border:1px solid var(--line); color:var(--text); padding:6px 10px; border-radius:8px; font-size:11px;}

  .toast{
    position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--surface-2); border:1px solid var(--line); color:var(--text);
    padding:11px 20px; border-radius:12px; font-size:13px; z-index:99;
    opacity:0; transition:all .25s; pointer-events:none; max-width:90%; text-align:center;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  .spin{width:15px; height:15px; border-radius:50%; border:2px solid rgba(28,19,5,0.3); border-top-color:#1c1305; animation:sp .7s linear infinite;}
  @keyframes sp{to{transform:rotate(360deg);}}