:root{
  --bg:#0b162b;
  --panel:#1b2a42;
  --panel2:#223451;
  --panel3:#2c4161;
  --line:#3f5878;

  --text:#f7fafc;
  --muted:#9fb0c5;
  --teal:#00c99a;
  --teal2:#0aa88d;
  --blue:#2f7bf6;

  --green:#10d39b;
  --red:#ff5d6c;
  --amber:#f6b73c;
  --white:#fff;

  --shadow:0 18px 48px rgba(0,0,0,.24);

  --radius:22px;
  --radius-sm:14px;
  --sidebar:300px;
  --bottom:72px;
}


/* =========================================================
   GLOBAL
   ========================================================= */

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}

body{
  overflow-x:hidden;
}

button,
input,
textarea,
select{
  font:inherit;
}

.hidden{
  display:none!important;
}


/* =========================================================
   APP LAYOUT
   ========================================================= */

.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:var(--sidebar) 1fr;
  direction:rtl;
}

.sidebar,
.main-area{
  direction:rtl;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar{
  position:sticky;
  top:0;

  height:100vh;

  background:#101f35;

  border-left:1px solid rgba(255,255,255,.08);

  padding:20px 16px;

  display:flex;
  flex-direction:column;

  z-index:30;

  overflow:auto;
}

.brand-block{
  display:flex;
  align-items:center;
  gap:12px;

  padding:4px 6px 18px;

  border-bottom:1px solid rgba(255,255,255,.08);
}

.brand-logo{
  width:52px;
  height:52px;
  object-fit:contain;
}

.brand-block strong{
  display:block;
  font-size:20px;
}

.brand-block small{
  display:block;
  color:var(--muted);
  margin-top:4px;
}


/* =========================================================
   ACCOUNT
   ========================================================= */

.account-card{
  padding:16px 6px;
}

.account-summary{
  display:flex;
  align-items:center;
  gap:12px;
}

.avatar{
  width:44px;
  height:44px;

  border-radius:50%;

  display:grid;
  place-items:center;

  background:#20466d;
  color:#d7ecff;

  font-weight:800;
}

.account-name{
  font-weight:700;
}

.account-email{
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
}

.account-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}


/* =========================================================
   MODE SWITCH
   ========================================================= */

.mode-switch{
  display:grid;
  grid-template-columns:1fr 1fr;

  background:#0b1728;

  border:1px solid #314967;
  border-radius:16px;

  padding:4px;
  margin-bottom:14px;
}

.mode-switch button{
  border:0;

  background:transparent;
  color:var(--muted);

  padding:10px;

  border-radius:12px;

  cursor:pointer;
}

.mode-switch button.active{
  background:var(--panel3);
  color:var(--teal);
}


/* =========================================================
   SIDE NAV
   ========================================================= */

.side-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.nav-section-label{
  font-size:11px;
  color:#71849c;

  margin:14px 10px 5px;
}

.nav-item{
  display:flex;
  align-items:center;

  gap:12px;

  padding:11px 12px;

  border:0;

  background:transparent;
  color:#dce7f4;

  border-radius:13px;

  cursor:pointer;

  text-align:right;
}

.nav-item:hover,
.nav-item.active{
  background:#21344f;
  color:#fff;
}

.nav-item.active{
  box-shadow:inset -3px 0 var(--teal);
}

.nav-icon{
  width:24px;
  text-align:center;
  font-size:18px;
}

.sidebar-footer{
  margin-top:auto;

  border-top:1px solid rgba(255,255,255,.08);

  padding-top:12px;

  color:var(--muted);

  display:flex;
  justify-content:space-between;
  align-items:center;

  font-size:12px;
}


/* =========================================================
   MAIN AREA / TOPBAR
   ========================================================= */

.main-area{
  min-width:0;
  min-height:100vh;
}

.topbar{
  height:78px;

  position:sticky;
  top:0;

  z-index:20;

  background:rgba(11,22,43,.94);

  backdrop-filter:blur(16px);

  border-bottom:1px solid rgba(255,255,255,.07);

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 28px;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.topbar h1{
  font-size:22px;
  margin:0;
}

.topbar p{
  font-size:12px;
  color:var(--muted);
  margin:4px 0 0;
}

.topbar-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.sync-status{
  font-size:12px;

  color:var(--teal);

  background:#0e2b2b;

  border:1px solid #1b5f53;
  border-radius:999px;

  padding:7px 10px;
}

.icon-btn{
  border:1px solid #334c6d;

  background:#172840;
  color:#fff;

  border-radius:12px;

  width:40px;
  height:40px;

  cursor:pointer;

  font-size:20px;
}

.icon-btn:hover{
  background:#233a58;
}

.back-market-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;

  border:1px solid #365171;

  background:#172840;
  color:#e6eef7;

  border-radius:12px;

  height:40px;

  padding:0 12px;

  cursor:pointer;

  font-weight:700;
}

.back-market-btn:hover{
  background:#233a58;
  border-color:#4b6d94;
}

.back-market-btn span:first-child{
  font-size:18px;
  line-height:1;
}


/* =========================================================
   CONTENT
   ========================================================= */

.content{
  padding:24px 28px 105px;

  max-width:1540px;

  margin:auto;
}

.page-grid{
  display:grid;
  gap:18px;
}

.grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.grid-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}


/* =========================================================
   CARDS
   ========================================================= */

.card{
  background:linear-gradient(180deg,#1c2c45,#18283f);

  border:1px solid #3a526f;

  border-radius:var(--radius);

  padding:18px;

  box-shadow:0 8px 22px rgba(0,0,0,.1);
}

.card.compact{
  padding:14px;
}

.card-title{
  font-weight:800;
  font-size:17px;
  margin-bottom:5px;
}

.card-subtitle{
  font-size:12px;
  color:var(--muted);
}


/* =========================================================
   MARKET INDICES
   ========================================================= */

.market-strip{
  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:14px;

  padding:2px 0 12px;
}

.index-card{
  min-width:0;

  background:#f7fafc;
  color:#15243a;

  border-radius:18px;

  padding:18px;
}

.index-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.index-card .value{
  font-size:28px;

  color:#0abf91;

  font-weight:800;

  margin-top:12px;
}

.index-card .value small{
  font-size:12px;

  color:#607086;

  font-weight:700;
}

.index-percent,
.index-change{
  display:inline-flex;
  align-items:center;

  border-radius:9px;

  padding:5px 8px;

  font-weight:800;
  font-size:12px;
}

.index-change{
  margin-top:9px;
}

.index-percent.pos,
.index-change.pos{
  color:#078765;
  background:#dffbf1;
}

.index-percent.neg,
.index-change.neg{
  color:#b4233a;
  background:#ffe4e8;
}

.index-percent.neutral,
.index-change.neutral{
  color:#667085;
  background:#e9eef4;
}

.index-update{
  display:block;

  margin-top:9px;

  color:#607086;
}

.indices-strip{
  margin-bottom:4px;
}


/* =========================================================
   TOOLBAR / SEARCH
   ========================================================= */

.toolbar{
  display:flex;
  gap:10px;
  align-items:center;

  flex-wrap:wrap;

  margin-bottom:18px;
}

.searchbox{
  position:relative;

  flex:1;

  min-width:230px;
}

.searchbox input,
.form-control,
input,
textarea,
select{
  width:100%;

  background:#172840;

  border:1px solid #3b5575;

  color:#fff;

  border-radius:14px;

  padding:13px 14px;

  outline:none;
}

.searchbox input:focus,
.form-control:focus,
input:focus,
textarea:focus,
select:focus{
  border-color:var(--blue);

  box-shadow:0 0 0 3px rgba(47,123,246,.16);
}

textarea{
  min-height:120px;
  resize:vertical;
}

.chip-row{
  display:flex;

  gap:8px;

  flex-wrap:wrap;
}


/* =========================================================
   MARKET FILTER TOOLBAR
   ========================================================= */

.market-filter-toolbar{
  display:block;

  width:100%;
  max-width:100%;

  min-width:0;

  /*
   * مهم:
   * لا نقص شريط القطاعات من الطرفين.
   * التمرير يحدث داخل sector-chip-row نفسها.
   */
  overflow:visible;
}

.market-filter-toolbar .searchbox{
  width:100%;

  min-width:0;

  margin-bottom:12px;
}


/* =========================================================
   SECTOR CHIPS — HORIZONTAL SLIDER
   ========================================================= */

.market-filter-toolbar .sector-chip-row{
  direction:rtl;

  position:relative;

  display:flex;

  flex-wrap:nowrap;

  align-items:center;

  gap:8px;

  width:100%;
  max-width:100%;

  min-width:0;

  /*
   * Slider أفقي حقيقي.
   * لا يسمح للصف بالالتفاف ولا يقص آخر عنصر.
   */
  overflow-x:auto;
  overflow-y:hidden;

  padding:
    4px
    14px
    12px;

  scroll-padding-inline:
    20px;

  scroll-behavior:
    smooth;

  scroll-snap-type:
    inline proximity;

  -webkit-overflow-scrolling:
    touch;

  overscroll-behavior-inline:
    contain;

  touch-action:
    pan-x;

  box-sizing:
    border-box;

  /*
   * Firefox:
   * Scrollbar رفيع وواضح كـ Slider.
   */
  scrollbar-width:
    thin;

  scrollbar-color:
    #4f6f95
    #122239;
}


/* Chrome / Edge / Safari */

.market-filter-toolbar .sector-chip-row::-webkit-scrollbar{
  display:block;

  height:7px;
}

.market-filter-toolbar .sector-chip-row::-webkit-scrollbar-track{
  background:#122239;

  border-radius:999px;

  margin-inline:14px;
}

.market-filter-toolbar .sector-chip-row::-webkit-scrollbar-thumb{
  background:#4f6f95;

  border-radius:999px;

  border:1px solid #122239;
}

.market-filter-toolbar .sector-chip-row::-webkit-scrollbar-thumb:hover{
  background:#668bb5;
}


/* Sector chip */

.market-filter-toolbar .sector-chip-row .chip{
  flex:0 0 auto;

  white-space:nowrap;

  scroll-snap-align:start;

  scroll-snap-stop:normal;
}


/*
 * مسافة فعلية في بداية ونهاية الـ Slider.
 * تمنع قص أول وآخر قطاع، خصوصًا مع RTL.
 */

.market-filter-toolbar .sector-chip-row::before,
.market-filter-toolbar .sector-chip-row::after{
  content:"";

  display:block;

  flex:0 0 14px;

  width:14px;
  height:1px;

  pointer-events:none;
}


/* =========================================================
   CHIPS
   ========================================================= */

.chip{
  border:1px solid #365171;

  background:#172840;
  color:#cbd8e7;

  padding:9px 12px;

  border-radius:999px;

  cursor:pointer;

  font-size:13px;
}

.chip.active{
  background:#0e6656;

  border-color:#0f8f75;

  color:#ddfff5;
}

.chip.blue.active{
  background:#193e78;

  border-color:#2f7bf6;
}


/* =========================================================
   STOCK GRID
   ========================================================= */

.stock-grid{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(300px,1fr)
    );

  gap:14px;
}

.stock-card{
  position:relative;

  min-height:160px;

  cursor:pointer;
}

.stock-head{
  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:12px;
}

.stock-symbol{
  font-size:20px;

  font-weight:900;

  letter-spacing:.5px;
}

.sector-badge{
  background:#2d4566;

  color:#d3e0ef;

  border-radius:8px;

  padding:6px 9px;

  font-size:11px;
}

.stock-name{
  margin-top:5px;

  color:#ecf2f8;

  min-height:34px;
}

.price-row{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  margin-top:16px;

  gap:10px;
}

.price{
  font-size:25px;

  font-weight:900;
}

.price small{
  font-size:13px;

  color:var(--muted);
}

.change-badge{
  padding:7px 10px;

  border-radius:10px;

  font-weight:800;

  white-space:nowrap;
}

.pos{
  color:#0dd69b;

  background:#103e35;
}

.neg{
  color:#ff7d88;

  background:#481f2a;
}

.neutral{
  color:#c4d0dc;

  background:#293a50;
}

.meta-line{
  font-size:11px;

  color:var(--muted);

  margin-top:8px;
}

.star-btn{
  border:0;

  background:transparent;

  color:#9cb0c8;

  font-size:24px;

  cursor:pointer;
}

.star-btn.on{
  color:#ffd76b;
}

.stale{
  color:#f5be5c;
}

.unavailable{
  color:#a7b6c9;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.primary,
.secondary,
.ghost{
  border-radius:13px;

  padding:11px 15px;

  cursor:pointer;

  font-weight:700;
}

.primary{
  border:0;

  background:var(--teal2);

  color:#fff;
}

.secondary{
  border:1px solid #426183;

  background:#21344f;

  color:#fff;
}

.ghost{
  border:1px solid #365171;

  background:transparent;

  color:#cfe0ee;
}

.danger{
  border-color:#6c2a34;

  color:#ff9da6;
}

.wide{
  width:100%;
}

.small{
  padding:6px 9px;

  font-size:11px;
}

.link-btn{
  border:0;

  background:transparent;

  color:#47c6ff;

  cursor:pointer;

  padding:8px;
}


/* =========================================================
   MOBILE NAV DEFAULTS
   ========================================================= */

.bottom-nav{
  display:none;
}

.mobile-only{
  display:none;
}

.mobile-scrim{
  display:none;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.section-head{
  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:12px;

  margin:4px 0 14px;
}

.section-head h2{
  margin:0;

  font-size:20px;
}

.section-head p{
  margin:4px 0 0;

  color:var(--muted);

  font-size:12px;
}


/* =========================================================
   EMPTY / LOADING
   ========================================================= */

.empty{
  padding:48px 20px;

  text-align:center;

  color:var(--muted);
}

.empty .empty-icon{
  font-size:56px;

  opacity:.45;

  margin-bottom:12px;
}

.loading{
  display:flex;

  gap:10px;

  align-items:center;
  justify-content:center;

  padding:40px;

  color:var(--muted);
}

.spinner{
  width:24px;
  height:24px;

  border:3px solid #345;

  border-top-color:var(--teal);

  border-radius:50%;

  animation:spin .8s linear infinite;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}


/* =========================================================
   AUTH / MODAL
   ========================================================= */

.auth-layer,
.modal-layer{
  position:fixed;

  inset:0;

  background:rgba(2,8,18,.74);

  backdrop-filter:blur(8px);

  z-index:100;

  display:grid;
  place-items:center;

  padding:20px;
}

.auth-card,
.modal-card{
  width:min(460px,100%);

  background:#f6f8fb;
  color:#10213a;

  border-radius:26px;

  padding:28px;

  box-shadow:var(--shadow);

  position:relative;
}

.auth-card input,
.modal-card input,
.modal-card textarea,
.modal-card select{
  background:#fff;

  color:#172840;

  border-color:#c6d2df;

  margin-top:10px;
}

.auth-logo{
  width:100px;

  display:block;

  margin:0 auto;
}

.auth-card h2{
  text-align:center;

  margin:12px 0 5px;
}

.auth-card p{
  text-align:center;

  color:#66758a;

  font-size:13px;

  line-height:1.7;
}

.auth-close{
  position:absolute;

  left:16px;
  top:13px;

  border:0;

  background:transparent;

  font-size:26px;

  cursor:pointer;
}

.auth-separator{
  display:flex;

  align-items:center;

  gap:10px;

  margin:15px 0;

  color:#8a97a8;
}

.auth-separator:before,
.auth-separator:after{
  content:"";

  height:1px;

  background:#d8e0e8;

  flex:1;
}

.auth-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:8px;

  margin-top:10px;
}

.form-message{
  font-size:12px;

  color:#c0394c;

  margin-top:10px;

  min-height:18px;
}

.modal-card h3{
  margin-top:0;
}

.modal-actions{
  display:flex;

  gap:8px;

  justify-content:flex-start;

  margin-top:16px;
}

.toast{
  position:fixed;

  left:50%;
  bottom:90px;

  transform:translate(-50%,20px);

  background:#f7fafc;

  color:#10213a;

  padding:11px 16px;

  border-radius:12px;

  box-shadow:var(--shadow);

  opacity:0;

  pointer-events:none;

  transition:.25s;

  z-index:200;
}

.toast.show{
  opacity:1;

  transform:translate(-50%,0);
}


/* =========================================================
   CHART
   ========================================================= */

.chart-card{
  min-height:420px;
}

.chart-wrap{
  height:310px;

  position:relative;

  margin-top:12px;
}

.chart-svg{
  width:100%;
  height:100%;

  overflow:visible;
}

.chart-grid-line{
  stroke:#324862;

  stroke-width:1;
}

.chart-line{
  fill:none;

  stroke:#00c99a;

  stroke-width:3;
}

.chart-area{
  fill:rgba(0,201,154,.09);
}

.chart-label{
  fill:#879bb1;

  font-size:11px;
}


/* =========================================================
   METRICS
   ========================================================= */

.metric-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:10px;
}

.metric{
  background:#14243a;

  border:1px solid #314a68;

  border-radius:15px;

  padding:14px;
}

.metric .label{
  font-size:11px;

  color:var(--muted);
}

.metric .value{
  font-size:19px;

  font-weight:800;

  margin-top:6px;
}

.trend-up{
  color:#18dca1;
}

.trend-down{
  color:#ff6775;
}

.trend-flat{
  color:#f0bd5a;
}


/* =========================================================
   NEWS
   ========================================================= */

.news-list{
  display:flex;

  flex-direction:column;

  gap:12px;
}

.news-card{
  display:grid;

  grid-template-columns:
    1fr auto;

  gap:14px;
}

.news-title{
  font-weight:800;

  line-height:1.7;
}

.news-source{
  font-size:11px;

  color:#f3b94e;

  margin-bottom:7px;
}

.news-summary{
  font-size:13px;

  color:#cad6e2;

  line-height:1.7;
}

.news-time{
  font-size:11px;

  color:var(--muted);

  margin-top:8px;
}

.news-link{
  align-self:center;

  color:#45d8b2;

  text-decoration:none;
}


/* =========================================================
   TABLE / NOTES / RISK
   ========================================================= */

.table-like{
  display:flex;

  flex-direction:column;
}

.row-item{
  display:grid;

  grid-template-columns:
    1.4fr .8fr .8fr .8fr;

  gap:8px;

  padding:12px 6px;

  border-bottom:1px solid rgba(255,255,255,.07);

  align-items:center;
}

.row-item.header{
  color:#8fa3ba;

  font-size:11px;
}

.note-card{
  display:flex;

  justify-content:space-between;

  gap:14px;
}

.note-actions{
  display:flex;

  gap:6px;

  align-self:flex-start;
}

.note-reminder{
  color:#f2b74a;

  font-size:11px;

  margin-top:8px;
}

.risk-bar{
  height:10px;

  background:#0f1c2e;

  border-radius:999px;

  overflow:hidden;

  margin-top:6px;
}

.risk-bar > span{
  display:block;

  height:100%;

  background:
    linear-gradient(
      90deg,
      #0ec999,
      #f2b744,
      #ff6070
    );

  border-radius:999px;
}


/* =========================================================
   AUTH LOCKED
   ========================================================= */

.auth-locked{
  border:1px dashed #536c8a;

  background:#122239;

  border-radius:18px;

  padding:24px;

  text-align:center;

  color:#b8c8d8;
}

.auth-locked strong{
  display:block;

  color:#fff;

  margin-bottom:8px;
}

.auth-locked button{
  margin-top:12px;
}


/* =========================================================
   ABOUT
   ========================================================= */

.about-card{
  overflow:hidden;
}

.about-header{
  text-align:center;
}

.about-logo-panel{
  width:164px;
  height:164px;

  margin:0 auto 16px;

  display:grid;
  place-items:center;

  background:#f7fafc;

  border:1px solid #d8e2ec;

  border-radius:24px;

  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.about-logo{
  width:128px;
  height:128px;

  object-fit:contain;

  display:block;
}

.about-description{
  line-height:1.9;

  text-align:center;

  margin:22px auto 12px;

  max-width:980px;
}


/* =========================================================
   PRIVACY
   ========================================================= */

.privacy-card{
  max-width:980px;

  margin:0 auto;
}

.privacy-title-block h2{
  margin:0 0 6px;
}

.privacy-priority{
  display:flex;

  gap:14px;

  align-items:flex-start;

  margin:20px 0 26px;

  padding:18px;

  background:#2b3d58;

  border:1px solid #465f7e;

  border-radius:18px;
}

.privacy-priority strong{
  display:block;

  font-size:17px;

  margin-bottom:6px;
}

.privacy-priority p{
  margin:0;

  color:#d6e0eb;

  line-height:1.9;
}

.privacy-lock{
  font-size:24px;

  line-height:1;
}

.privacy-section{
  padding:18px 0;

  border-top:1px solid rgba(255,255,255,.08);
}

.privacy-section h3{
  margin:0 0 10px;

  font-size:18px;
}

.privacy-section p{
  margin:0 0 10px;

  line-height:1.95;

  color:#e5edf6;
}

.privacy-section a,
.privacy-contact{
  color:#38d9b1;
}

.privacy-contact{
  display:flex;

  align-items:center;

  gap:12px;

  text-decoration:none;

  margin-top:18px;

  padding:16px;

  background:#2b3d58;

  border:1px solid #465f7e;

  border-radius:16px;
}

.privacy-contact span:first-child{
  font-size:22px;
}

.privacy-contact strong{
  display:block;

  color:#fff;
}

.privacy-contact small{
  display:block;

  margin-top:3px;

  color:#a9bbcf;
}


/* =========================================================
   SECTOR OVERVIEW
   ========================================================= */

.sector-overview-grid{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(210px,1fr)
    );

  gap:14px;
}

.sector-overview-card{
  appearance:none;

  color:var(--text);

  text-align:right;

  cursor:pointer;
}

.sector-overview-card:hover{
  border-color:#55779f;

  transform:translateY(-1px);
}

.sector-count{
  font-size:28px;

  font-weight:900;

  color:var(--teal);

  margin:10px 0 4px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

  .grid-4{
    grid-template-columns:
      repeat(2,1fr);
  }

  .grid-3{
    grid-template-columns:
      repeat(2,1fr);
  }

  .metric-grid{
    grid-template-columns:
      repeat(2,1fr);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:780px){

  :root{
    --bottom:76px;
  }

  .app-shell{
    display:block;
  }

  .sidebar{
    position:fixed;

    right:0;
    top:0;

    transform:translateX(105%);

    transition:.23s;

    width:min(86vw,330px);

    box-shadow:var(--shadow);
  }

  .sidebar.open{
    transform:none;
  }

  .mobile-scrim{
    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    z-index:25;
  }

  .mobile-scrim.show{
    display:block;
  }

  .main-area{
    min-height:100vh;
  }

  .topbar{
    height:72px;

    padding:0 14px;
  }

  .mobile-only{
    display:inline-grid;

    place-items:center;
  }

  .content{
    padding:16px 12px 96px;
  }

  .bottom-nav{
    display:grid;

    grid-template-columns:
      repeat(5,1fr);

    position:fixed;

    bottom:0;
    left:0;
    right:0;

    height:var(--bottom);

    background:#12333d;

    border-top:1px solid rgba(255,255,255,.12);

    z-index:24;

    padding-bottom:
      env(safe-area-inset-bottom);
  }

  .bottom-nav button{
    border:0;

    background:transparent;

    color:#94aeb1;

    font-size:10px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;
  }

  .bottom-nav button span:first-child{
    font-size:22px;
  }

  .bottom-nav button.active{
    color:#06d99c;
  }

  .grid-2,
  .grid-3,
  .grid-4{
    grid-template-columns:1fr;
  }

  .stock-grid{
    grid-template-columns:1fr;
  }

  .metric-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .toolbar{
    align-items:stretch;
  }

  .searchbox{
    min-width:100%;
  }

  .topbar-actions .sync-status{
    display:none;
  }

  .chart-card{
    min-height:360px;
  }

  .chart-wrap{
    height:250px;
  }

  .row-item{
    grid-template-columns:
      1.4fr .9fr .9fr;
  }

  .row-item > *:nth-child(4){
    display:none;
  }

  .sidebar-footer{
    padding-bottom:15px;
  }

  .about-logo-panel{
    width:138px;
    height:138px;
  }

  .about-logo{
    width:108px;
    height:108px;
  }

  .privacy-card{
    padding:16px;
  }

  .privacy-priority{
    padding:14px;
  }

  .sector-overview-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .market-strip{
    display:flex;

    overflow-x:auto;

    scrollbar-width:none;
  }

  .market-strip::-webkit-scrollbar{
    display:none;

    width:0;
    height:0;
  }

  .index-card{
    min-width:235px;
  }

  /*
   * شريط القطاعات على الهاتف:
   * السحب بالإصبع بدون إظهار Scrollbar.
   */
  .market-filter-toolbar .sector-chip-row{
    gap:7px;

    padding:
      4px
      10px
      8px;

    scroll-padding-inline:
      14px;

    scrollbar-width:none;
  }

  .market-filter-toolbar .sector-chip-row::-webkit-scrollbar{
    display:none;

    width:0;
    height:0;
  }

  .market-filter-toolbar .sector-chip-row::before,
  .market-filter-toolbar .sector-chip-row::after{
    flex-basis:12px;

    width:12px;
  }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:420px){

  .back-market-btn{
    width:40px;

    padding:0;

    justify-content:center;
  }

  .back-market-btn span:last-child{
    display:none;
  }
}