/* Phase two: consistent layouts for existing customer pages. Loaded after legacy page CSS. */
@media (max-width: 759px) {
  body:not(.mobile-app) { background:#f5f6fb!important; color:#15182b!important; overflow-x:hidden; }
  body:not(.mobile-app) .container { width:100%!important; max-width:100%!important; padding:0 15px!important; }
  .deposit-wrapper,.withdraw-wrapper,.investment-wrapper,.transactions-wrapper,.notifications-wrapper,.settings-wrapper,.messages-wrapper,.earnings-wrapper,.delete-wrapper { min-height:100vh!important; background:#f5f6fb!important; }
  .deposit-main,.withdraw-main,.investment-main,.transactions-main,.notifications-main,.settings-main,.messages-main,.profile-main,.investments-main,.earnings-main,.delete-main { padding:18px 0 100px!important; margin:0!important; width:100%!important; min-height:100vh!important; background:#f5f6fb!important; }

  /* Page titles */
  .deposit-header,.withdraw-header,.investment-header,.transactions-header,.notifications-header,.settings-header,.earnings-header,.page-header { margin:0 0 17px!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; text-align:left!important; }
  .deposit-header h1,.withdraw-header h1,.investment-header h1,.transactions-header h1,.notifications-header h1,.settings-header h1,.earnings-header h1,.page-header h1 { margin:0 0 5px!important; color:#15182b!important; font-size:25px!important; line-height:1.2!important; font-weight:850!important; letter-spacing:-.35px!important; }
  .deposit-header p,.withdraw-header p,.investment-header p,.transactions-header p,.notifications-header p,.settings-header p,.earnings-header p,.page-header p { margin:0!important; color:#6b7280!important; font-size:13px!important; line-height:1.5!important; }
  .deposit-header h1 i,.withdraw-header h1 i,.investment-header h1 i,.page-header h1 i { color:#5b4df6!important; }

  /* Summary cards */
  body:not(.mobile-app) .stats-grid { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:9px!important; margin:0 0 18px!important; }
  body:not(.mobile-app) .stat-card { min-width:0!important; min-height:104px!important; margin:0!important; padding:14px 11px!important; border:1px solid #e8eaf2!important; border-radius:17px!important; background:#fff!important; box-shadow:0 6px 18px rgba(28,32,74,.04)!important; }
  body:not(.mobile-app) .stat-card .stat-icon { width:30px!important; height:30px!important; border-radius:10px!important; display:grid!important; place-items:center!important; background:#eeeefe!important; color:#5b4df6!important; font-size:15px!important; }
  body:not(.mobile-app) .stat-title,.stat-card .label { color:#7a8092!important; font-size:10px!important; line-height:1.25!important; }
  body:not(.mobile-app) .stat-value { margin-top:8px!important; color:#15182b!important; font-size:17px!important; font-weight:850!important; overflow-wrap:anywhere; }
  body:not(.mobile-app) .stat-sub { color:#9aa0ae!important; font-size:9px!important; line-height:1.3!important; }

  /* Main cards and forms */
  .deposit-card,.withdraw-card,.investment-card,.detail-card,.filter-section,.table-wrapper,.table-wrap,.settings-card,.chat-card,.notification-list,.delete-main>.container>.card { margin:0 0 16px!important; padding:17px!important; background:#fff!important; border:1px solid #e8eaf2!important; border-radius:20px!important; box-shadow:0 7px 24px rgba(28,32,74,.05)!important; }
  .deposit-card>h2,.withdraw-card>h2,.investment-card>h2,.detail-card>h2,.settings-card .card-header h2 { margin:0 0 16px!important; color:#15182b!important; font-size:17px!important; font-weight:800!important; }
  body:not(.mobile-app) .form-group { margin-bottom:15px!important; }
  body:not(.mobile-app) .form-group label { display:block!important; margin:0 0 7px!important; color:#2b3047!important; font-size:12px!important; font-weight:750!important; }
  body:not(.mobile-app) input:not([type=checkbox]):not([type=radio]):not([type=hidden]),body:not(.mobile-app) select,body:not(.mobile-app) textarea { width:100%!important; min-height:47px!important; padding:11px 13px!important; color:#15182b!important; background:#fafbfe!important; border:1px solid #dcdfea!important; border-radius:12px!important; font-size:14px!important; box-shadow:none!important; }
  body:not(.mobile-app) textarea { min-height:94px!important; }
  body:not(.mobile-app) input:focus,body:not(.mobile-app) select:focus,body:not(.mobile-app) textarea:focus { outline:0!important; border-color:#7267f0!important; box-shadow:0 0 0 4px rgba(91,77,246,.11)!important; }
  body:not(.mobile-app) .helper-text { margin-top:6px!important; color:#8a90a2!important; font-size:10px!important; }
  body:not(.mobile-app) .btn,body:not(.mobile-app) button[type=submit] { min-height:45px!important; border:0!important; border-radius:13px!important; padding:11px 17px!important; font-size:13px!important; font-weight:800!important; }
  body:not(.mobile-app) .btn-primary,body:not(.mobile-app) .submit-btn,body:not(.mobile-app) button[type=submit] { color:#fff!important; background:linear-gradient(135deg,#5b4df6,#7569f5)!important; box-shadow:0 9px 20px rgba(91,77,246,.18)!important; }
  body:not(.mobile-app) .btn-success { color:#fff!important; background:#12b76a!important; }
  body:not(.mobile-app) .btn-outline { color:#5b4df6!important; background:#f0efff!important; border:1px solid #dedbff!important; }

  /* Payment selectors */
  .payment-grid,.payment-methods { display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; }
  .payment-option,.payment-method { min-height:112px!important; padding:13px 9px!important; border:1px solid #e0e3ec!important; border-radius:16px!important; background:#fafbfe!important; box-shadow:none!important; }
  .payment-option.active,.payment-option.selected,.payment-method.active,.payment-method.selected { border:2px solid #5b4df6!important; background:#f3f1ff!important; }
  .payment-option i,.payment-method i { color:#5b4df6!important; font-size:25px!important; }
  .payment-option .title,.payment-method .title { color:#15182b!important; font-size:12px!important; font-weight:800!important; }
  .deposit-summary,.withdrawal-summary,.investment-summary,.plan-details { padding:14px!important; border:1px solid #e5e7f0!important; border-radius:15px!important; background:#f8f9fc!important; }
  .deposit-summary .row,.withdrawal-summary .row,.investment-summary .row,.plan-details .row { padding:9px 0!important; font-size:12px!important; border-bottom:1px solid #e8eaf2!important; }

  /* Alerts and status */
  body:not(.mobile-app) .alert { margin:0 0 15px!important; padding:13px 14px!important; border-radius:13px!important; font-size:12px!important; line-height:1.45!important; }
  body:not(.mobile-app) .alert-success { color:#087443!important; background:#e9fbf2!important; border:1px solid #b9efd2!important; }
  body:not(.mobile-app) .alert-danger { color:#b42318!important; background:#fff0ef!important; border:1px solid #ffd1cd!important; }
  body:not(.mobile-app) .alert-info { color:#3f36b1!important; background:#f1f0ff!important; border:1px solid #dedbff!important; }
  body:not(.mobile-app) .badge { border-radius:999px!important; padding:5px 9px!important; font-size:10px!important; font-weight:800!important; }

  /* Tables remain usable without crushing columns. */
  .table-wrapper,.table-wrap { overflow-x:auto!important; padding:0!important; -webkit-overflow-scrolling:touch; }
  body:not(.mobile-app) table { min-width:700px!important; margin:0!important; border-collapse:separate!important; border-spacing:0!important; }
  body:not(.mobile-app) table th { padding:13px!important; color:#777d8e!important; background:#f8f9fc!important; font-size:10px!important; text-transform:uppercase!important; letter-spacing:.35px!important; }
  body:not(.mobile-app) table td { padding:13px!important; color:#30354d!important; font-size:12px!important; border-bottom:1px solid #eceef4!important; }

  /* Transaction filters */
  .filter-section form { display:grid!important; grid-template-columns:1fr!important; gap:11px!important; }
  .filter-section .form-group { margin:0!important; }
  .quick-actions { display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; }

  /* Notifications */
  .notification-list { padding:8px!important; }
  .notification-item { margin:0!important; padding:14px!important; gap:12px!important; border:0!important; border-bottom:1px solid #eceef4!important; border-radius:0!important; background:#fff!important; box-shadow:none!important; }
  .notification-item:last-child { border-bottom:0!important; }
  .notification-icon { min-width:40px!important; width:40px!important; height:40px!important; border-radius:13px!important; display:grid!important; place-items:center!important; }
  .notification-title { font-size:13px!important; }.notification-message { font-size:11px!important; line-height:1.45!important; }.notification-time { font-size:9px!important; }

  /* Settings */
  .settings-grid { display:grid!important; grid-template-columns:1fr!important; gap:14px!important; }
  .settings-card { padding:17px!important; }
  .settings-card .card-header { display:flex!important; align-items:center!important; gap:10px!important; margin-bottom:15px!important; padding:0!important; border:0!important; }
  .settings-card .card-header .icon { width:38px!important; height:38px!important; border-radius:12px!important; display:grid!important; place-items:center!important; color:#5b4df6!important; background:#eeeefe!important; }
  .toggle-row,.setting-item { padding:12px 0!important; border-bottom:1px solid #eceef4!important; }

  /* Support chat */
  .chat-card { padding:0!important; overflow:hidden!important; }
  .chat-card-header { padding:14px 16px!important; background:linear-gradient(135deg,#5145e6,#7165ed)!important; color:#fff!important; }
  .chat-messages { min-height:390px!important; max-height:52vh!important; padding:14px!important; background:#f8f9fc!important; }
  .message-bubble { max-width:84%!important; padding:10px 12px!important; border-radius:15px!important; font-size:12px!important; }
  .chat-input-bar { display:flex!important; gap:8px!important; padding:12px!important; background:#fff!important; border-top:1px solid #e8eaf2!important; }
  .chat-input-bar textarea,.chat-input-bar input { flex:1!important; min-height:44px!important; margin:0!important; }
  .chat-input-bar button { min-width:46px!important; padding:0 12px!important; }

  /* Status modal */
  .modal-overlay { padding:14px!important; background:rgba(15,18,36,.66)!important; backdrop-filter:blur(4px); }
  .modal-content { width:100%!important; max-width:430px!important; max-height:88vh!important; overflow:auto!important; border:0!important; border-radius:22px!important; box-shadow:0 22px 70px rgba(9,12,28,.28)!important; }
  .modal-header { padding:16px 18px!important; border-bottom:1px solid #eceef4!important; }.modal-header h2 { font-size:17px!important; }.modal-body { padding:18px!important; }.modal-actions { padding:14px 18px!important; }

  /* Plans */
  .plans-main-content { margin:0!important; width:100%!important; padding-bottom:90px!important; background:#f5f6fb!important; }
  .plans-hero { padding:25px 16px 20px!important; text-align:left!important; background:transparent!important; color:#15182b!important; }
  .plans-hero h1 { margin:0 0 5px!important; color:#15182b!important; font-size:25px!important; }.plans-hero h1 span { color:#5b4df6!important; -webkit-text-fill-color:initial!important; background:none!important; }.plans-hero p { margin:0!important; color:#6b7280!important; font-size:13px!important; }
  .plans-section { padding:0 15px 100px!important; }.plans-section .container { padding:0!important; }.plans-grid { grid-template-columns:1fr!important; gap:13px!important; }
  .plan-card { padding:18px!important; border:1px solid #e8eaf2!important; border-radius:20px!important; box-shadow:0 7px 22px rgba(28,32,74,.05)!important; }.plan-card:hover { transform:none!important; }.plan-card .plan-header { text-align:left!important; }.plan-card .plan-header .plan-icon { font-size:28px!important; }.plan-card .plan-price { text-align:left!important; padding:14px 0!important; }.plan-card .plan-price .amount { font-size:25px!important; }.plan-card .plan-actions { gap:9px!important; }
}

/* Authentication pages share the same visual language on every screen size. */
.phone-auth-page { position:relative!important; min-height:calc(100vh - 65px)!important; padding:30px 18px!important; background:radial-gradient(circle at 15% 15%,rgba(117,105,245,.42),transparent 34%),linear-gradient(145deg,#15182b,#2c256b)!important; }
.phone-auth-page:before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:30px 30px; mask-image:linear-gradient(to bottom,#000,transparent); }
.phone-auth-card { position:relative!important; width:100%!important; max-width:440px!important; padding:30px 24px!important; border:1px solid rgba(255,255,255,.55)!important; border-radius:24px!important; background:rgba(255,255,255,.98)!important; box-shadow:0 28px 80px rgba(4,6,18,.35)!important; }
.phone-auth-card:before { content:"VC"; width:48px; height:48px; display:grid; place-items:center; margin-bottom:18px; border-radius:15px; background:linear-gradient(135deg,#5b4df6,#8b5cf6); color:#fff; font-weight:900; letter-spacing:-1px; }
.phone-auth-card h1 { color:#15182b!important; font-size:27px!important; letter-spacing:-.4px!important; }.phone-auth-card .subtitle { color:#6b7280!important; font-size:13px!important; }
.phone-auth-card .field input { min-height:50px!important; padding:12px 14px!important; border:1px solid #dcdfea!important; border-radius:13px!important; background:#fafbfe!important; }.phone-auth-card .field input:focus { border-color:#6c60ef!important; box-shadow:0 0 0 4px rgba(91,77,246,.11)!important; }
.phone-auth-card .submit { min-height:50px!important; border-radius:13px!important; background:linear-gradient(135deg,#5b4df6,#7569f5)!important; box-shadow:0 11px 24px rgba(91,77,246,.22)!important; }.phone-auth-card .foot a { color:#5b4df6!important; }

@media (min-width:760px) {
  body:not(.mobile-app) .deposit-main,body:not(.mobile-app) .withdraw-main,body:not(.mobile-app) .investment-main,body:not(.mobile-app) .transactions-main,body:not(.mobile-app) .notifications-main,body:not(.mobile-app) .settings-main,body:not(.mobile-app) .messages-main { background:#f5f6fb!important; }
  body:not(.mobile-app) .deposit-card,body:not(.mobile-app) .withdraw-card,body:not(.mobile-app) .investment-card,body:not(.mobile-app) .detail-card,body:not(.mobile-app) .settings-card,body:not(.mobile-app) .chat-card { border-radius:20px!important; box-shadow:0 8px 28px rgba(28,32,74,.06)!important; }
}