* { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; }
  body { font-family: 'Rubik', 'Noto Sans Arabic', system-ui, sans-serif; -webkit-font-smoothing: antialiased; background: var(--page-bg); }
  input, button, textarea { font-family: inherit; }
  input::placeholder { color: #87938B; }
  a { color: inherit; }
  .lg-scroll::-webkit-scrollbar { width: 0; height: 0; }
  @keyframes lgToast { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  @keyframes lgPop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

  /* App frame: full-screen on mobile, phone frame on desktop */
  .app-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; }
  .app-frame { position: relative; width: 100%; max-width: 430px; height: 100dvh; background: var(--cream); overflow: hidden; display: flex; flex-direction: column; }
  @media (min-width: 480px) {
    .app-wrap { padding: 24px 16px; }
    .app-frame { height: min(880px, calc(100dvh - 48px)); border-radius: 42px; box-shadow: 0 34px 90px rgba(23,54,80,0.24); border: 1px solid rgba(0,0,0,0.05); }
  }
  .app-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; -webkit-overflow-scrolling: touch; }
  .statusbar { height: env(safe-area-inset-top, 0); flex: none; }

  .screen[hidden] { display: none; }

  /* Bottom tab bar */
  .tabbar { flex: none; display: flex; align-items: stretch; background: #fff; border-top: 1px solid #E8EBE3; padding: 8px 6px calc(12px + env(safe-area-inset-bottom, 0)); box-shadow: 0 -6px 20px rgba(31,72,105,0.05); }
  .tabbar[hidden] { display: none; }
  .tabbtn { flex: 1; background: none; border: none; padding: 6px 0; cursor: pointer; }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #87938B; }
  .tabbtn.active .tab { color: var(--brand-soft); }

  .ph-img { background: linear-gradient(135deg, #E4EFE4, #F1F2DB); position: relative; }
  .ph-img::after { content: ""; position: absolute; inset: 0; background: center/28px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%238FC9E4' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='15' rx='3'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M21 17l-5-5-9 8'/%3E%3C/svg%3E"); opacity: .6; }
  .btn-primary { border: none; border-radius: 16px; background: linear-gradient(135deg,var(--brand-soft),var(--brand)); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 12px 26px rgba(47,166,219,0.36); }
  .btn-primary:disabled { cursor: wait; opacity: .7; box-shadow: none; }
  .login-brand-logo { width: min(150px, 42vw); height: 135px; object-fit: contain; margin-bottom: 20px; filter: drop-shadow(0 12px 26px rgba(31,72,105,0.18)); }
  .login-field { margin-top: 14px; }
  .login-field:first-child { margin-top: 0; }
  .login-label { display: block; font-size: 14px; font-weight: 600; color: #243F38; margin-bottom: 9px; }
  .login-input-shell { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid #E4E8DF; border-radius: 16px; padding: 0 16px; height: 58px; box-shadow: 0 5px 16px rgba(31,72,105,0.05); transition: border-color .2s, box-shadow .2s; }
  .login-input-shell:focus-within { border-color: var(--brand-soft); box-shadow: 0 0 0 4px rgba(47,166,219,.11); }
  .login-input { flex: 1; min-width: 0; border: none; outline: none; font-size: 16px; color: #243F38; background: none; }
  .login-helper { margin: 7px 4px 0; color: #6D7973; font-size: 12px; line-height: 1.5; }
  .media-cover { width: 100%; height: 100%; display: block; object-fit: cover; }
  .media-empty { grid-column: 1 / -1; color: #77857D; font-size: 13px; text-align: center; padding: 18px 10px; background: #F7F9FB; border-radius: 14px; }
  .toast-host { position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
  .toast { animation: lgToast .28s ease; display: flex; align-items: center; gap: 9px; color: #fff; padding: 13px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
  .toast .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; }
  .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }


  .ctab { flex:1; text-align:center; padding:10px 0; border-radius:11px; font-size:13px; font-weight:700; color:#6D7973; cursor:pointer; }
  .ctab.active { background:#fff; color:#243F38; box-shadow:0 3px 10px rgba(31,72,105,0.08); }
  .more-row { display:flex; align-items:center; gap:13px; padding:14px 12px; border-bottom:1px solid #EDF0E8; cursor:pointer; }
  .more-row span { flex:1; font-size:15px; font-weight:600; color:#243F38; }
  .more-ic { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none; }
  .lang { flex:1; text-align:center; padding:11px 0; border-radius:11px; font-size:14px; font-weight:700; color:#6D7973; cursor:pointer; }
  .lang.active { background:var(--brand-soft); color:#fff; }