:root{
  font-family:IRANSansX,Tahoma,sans-serif;
  color:#17324d;
  background:#f6f8fb;
  font-synthesis:none;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  direction:rtl;
  text-align:right;
  background:#f6f8fb;
}

body{
  background:linear-gradient(180deg,#fbfdff 0%,#f2f6fa 100%);
}

header{
  height:72px;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid #e4ebf2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 16px;
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(10px);
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#0f2e52;
  font-size:20px;
  font-weight:800;
  flex:1;
  text-align:center;
}

.brand span{color:#0f2e52}

#identity{
  font-size:13px;
  color:#6d8294;
  white-space:nowrap;
}

main{
  max-width:980px;
  margin:auto;
  padding:16px 14px 28px;
}

.intro{
  padding:2px 0 10px;
}

.eyebrow{
  color:#0d8a92;
  font-size:13px;
  font-weight:700;
  margin-bottom:8px;
}

.eyebrow:empty{display:none}

h1{
  font-size:28px;
  margin:6px 0 8px;
  line-height:1.45;
  color:#102a43;
}

h2{
  font-size:20px;
  margin:0 0 8px;
  color:#102a43;
}

h3{
  font-size:17px;
  margin:0;
  color:#102a43;
}

p{
  color:#667a8a;
  line-height:1.9;
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

#notice{
  padding:14px 16px;
  margin-bottom:16px;
  border:1px solid #dde8ef;
  border-radius:18px;
  background:#fff;
  color:#294257;
  box-shadow:0 10px 28px rgba(16,42,67,.05);
}

#notice.error{
  background:#fff4f1;
  border-color:#efc1b6;
  color:#922f23;
}

/* top nav -> horizontal, compact, not stacked */
nav{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:2px 2px 8px;
  margin:0 0 18px;
  scrollbar-width:none;
}
nav::-webkit-scrollbar{display:none}

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

nav button{
  flex:0 0 112px;
  min-height:92px;
  border:1px solid #dbe7ee;
  background:#fff;
  color:#24415a;
  border-radius:20px;
  padding:12px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(16,42,67,.04);
}

nav button::before{
  content:attr(data-icon);
  font-size:21px;
  line-height:1;
  color:#5d7389;
}

nav button.selected{
  background:#0ea5a8;
  color:#fff;
  border-color:#0ea5a8;
  box-shadow:0 12px 24px rgba(14,165,168,.18);
}

nav button.selected::before{color:#fff}

nav button.danger-lite{
  background:#fff;
  color:#ef4444;
  border-color:#f4d4d4;
}
nav button.danger-lite::before{color:#ef4444}

button,.entry{
  border:1px solid #d4e2ea;
  background:#fff;
  color:#24415a;
  padding:11px 14px;
  border-radius:14px;
  cursor:pointer;
  text-decoration:none;
  transition:.18s ease;
}

button:hover,.entry:hover{
  transform:translateY(-1px);
  border-color:#0ea5a8;
}

button:disabled{opacity:.6;cursor:wait}

.card{
  border:1px solid #dfe8ef;
  background:#fff;
  border-radius:24px;
  padding:18px;
  margin:16px 0;
  box-shadow:0 12px 30px rgba(16,42,67,.05);
}

.compact-card{padding:16px 18px}

/* HOME */
.dashboard-hero{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:18px;
}

.hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.hero-main h2{
  margin:0;
  font-size:18px;
  font-weight:800;
}

.hero-main p{
  margin-top:4px;
  font-size:13px;
}

.hero-role{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#4d6579;
  font-weight:700;
  font-size:13px;
}

.hero-role .dot{
  color:#0bb36d;
  font-size:15px;
}

.hero-box{
  border:1px solid #e2ebf1;
  border-radius:22px;
  background:#fff;
  padding:18px;
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:14px;
  align-items:center;
  box-shadow:0 10px 28px rgba(16,42,67,.04);
}

.hero-avatar{
  width:72px;
  height:72px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#dff5f5,#ecf7ff);
  color:#0b8f96;
  font-size:28px;
  font-weight:800;
}

.hero-text h3{
  font-size:18px;
  margin-bottom:4px;
}

.hero-text p{
  font-size:24px;
  font-weight:800;
  color:#102a43;
  line-height:1.5;
}

.hero-text small{
  display:block;
  margin-top:4px;
  color:#6a8193;
  font-size:13px;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  background:#e8f7f2;
  color:#0d9b62;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:8px 0 12px;
}

.section-head h3{
  font-size:16px;
  font-weight:800;
}

.section-head p{
  font-size:13px;
  text-align:left;
}

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}

.dash-card{
  width:100%;
  min-height:96px;
  text-align:right;
  border:1px solid #dfe8ef;
  border-radius:18px;
  background:#fff;
  padding:12px;
  display:grid;
  grid-template-columns:48px 1fr 12px;
  align-items:center;
  gap:10px;
  box-shadow:0 8px 22px rgba(16,42,67,.04);
}

.dash-card.wide{grid-column:1 / -1}

.dash-card .dash-body{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.dash-card strong{
  display:block;
  font-size:14px;
  line-height:1.5;
  color:#102a43;
}

.dash-card span{
  display:block;
  font-size:11px;
  color:#6b8092;
  line-height:1.8;
}

.dash-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0f2e52;
  background:#eff6ff;
}

.dash-icon svg{
  width:22px;
  height:22px;
}

.dash-card.teal .dash-icon{background:#e6f8f7;color:#0b9a9e}
.dash-card.blue .dash-icon{background:#edf4ff;color:#2679d9}
.dash-card.purple .dash-icon{background:#f1edff;color:#6a54ea}
.dash-card.green .dash-icon{background:#eaf8f2;color:#14a06f}
.dash-card.amber .dash-icon{background:#fff4e7;color:#e58a00}
.dash-card.danger .dash-icon{background:#fff0f0;color:#ef4444}

.dash-arrow{
  color:#7b8da0;
  font-size:26px;
  line-height:1;
  text-align:left;
}

.entries-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}

.dash-link{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:12px;
  align-items:center;
  text-decoration:none;
  background:#fff;
  border:1px solid #e1ebf2;
  border-radius:18px;
  padding:12px;
  color:#17324d;
}

.dash-link:hover{border-color:#0ea5a8}

.dash-link-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0b9a9e;
  background:#e6f8f7;
}

.dash-link-icon svg{
  width:24px;
  height:24px;
}

.dash-link-text{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.dash-link-text strong{
  font-size:14px;
  color:#102a43;
}

.dash-link-text small{
  font-size:12px;
  color:#73879a;
  direction:ltr;
  text-align:right;
  overflow-wrap:anywhere;
}

/* USERS */
.user-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:12px;
}

.user-card{
  border:1px solid #e1ebf2;
  border-radius:20px;
  background:#fff;
  padding:16px;
  box-shadow:0 10px 24px rgba(16,42,67,.04);
}

.user-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}

.user-identity strong{
  display:block;
  font-size:16px;
  color:#102a43;
  margin-bottom:4px;
}

.user-identity small{
  color:#73879a;
  font-size:12px;
}

.user-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.soft-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:#f4f8fb;
  color:#61798d;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid #e2eaf1;
}

.user-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}

button.pill{
  padding:8px 14px;
  min-height:auto;
  border-radius:999px;
  font-size:13px;
  box-shadow:none;
}

button.success{
  background:#ecfbf4;
  color:#0d9b62;
  border-color:#bfe7d1;
}

button.danger-btn{
  background:#fff3f2;
  color:#d5473d;
  border-color:#f1c6c1;
}

button.muted-btn{
  background:#f3f6f8;
  color:#5c7386;
  border-color:#d9e3ea;
}

button.secondary{
  background:#eef7ff;
  color:#2463b8;
  border-color:#cfe2f5;
}

/* Generic */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:14px 0;
  font-size:14px;
}

input:not([type=checkbox]),select,textarea{
  width:100%;
  border:1px solid #cfdde6;
  background:#fff;
  padding:12px 13px;
  border-radius:14px;
  color:inherit;
}

input[type=checkbox]{
  width:18px;
  height:18px;
  accent-color:#0ea5a8;
}

label.check{
  display:flex;
  gap:9px;
  align-items:center;
  font-size:13px;
  padding:8px 0;
}

.permissions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:6px 12px;
}

table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

th,td{
  text-align:right;
  padding:13px;
  border-bottom:1px solid #e8eef3;
  vertical-align:top;
  line-height:1.8;
}

th{
  background:#f6f9fb;
  color:#5c7284;
}

.scroll{overflow:auto}
.muted{color:#6c8390;font-size:13px}
.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#0d8e95;
  background:#eef9f8;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:16px;
}

.entry{
  display:block;
  padding:18px;
  border-radius:16px;
  background:#fff;
}

.entry small{
  display:block;
  color:#657b87;
  margin-top:8px;
  direction:ltr;
  overflow-wrap:anywhere;
}

.thread{
  border-bottom:1px solid #dce6eb;
  padding:18px 0;
}

.thread small{
  display:block;
  margin:8px 0;
}

footer{
  padding:24px 8px 18px;
  text-align:center;
  font-size:12px;
  color:#8aa0af;
}

input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{
  outline:2px solid #2eacb6;
  outline-offset:3px;
}

@media(max-width:860px){
  .entries-list{grid-template-columns:1fr}
  .dashboard-grid{grid-template-columns:1fr}
}

@media(max-width:600px){
  header{
    height:66px;
    padding:0 12px;
  }

  .brand{
    font-size:18px;
  }

  main{
    padding:14px 12px 24px;
  }

  h1{font-size:24px}

  nav button{
    flex:0 0 96px;
    min-height:82px;
    border-radius:18px;
    font-size:12px;
  }

  .hero-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero-box{
    grid-template-columns:60px 1fr;
    align-items:start;
  }

  .hero-badge{
    grid-column:1 / -1;
    justify-self:flex-start;
  }

  .hero-avatar{
    width:60px;
    height:60px;
    border-radius:18px;
    font-size:24px;
  }

  .hero-text p{
    font-size:20px;
  }

  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .dash-card{
    grid-template-columns:56px 1fr 16px;
    padding:14px;
    border-radius:18px;
  }

  .dash-icon{
    width:56px;
    height:56px;
    border-radius:16px;
  }

  .card{
    padding:14px;
    border-radius:18px;
  }

  .permissions{display:block}

  .user-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .user-meta{
    justify-content:flex-start;
  }
}

/* DASHBOARD UI V3 */

body{
overflow-x:hidden;
}

.dashboard-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}

.dash-card{
min-height:90px;
padding:12px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
background:#fff;
border:1px solid #e2ebf2;
box-shadow:0 8px 22px rgba(15,45,70,.04);
}

.dash-icon{
width:48px;
height:48px;
border-radius:15px;
flex-shrink:0;
}

.dash-card strong{
font-size:15px;
font-weight:800;
}

.dash-card span{
font-size:12px;
line-height:1.6;
}


.section-head{
margin-bottom:12px;
}


.role-grid,
.permissions{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}


.role-item,
.permission-item{

background:#fff;
border:1px solid #e1eaf1;
border-radius:16px;
padding:12px;
text-align:center;

}


.user-actions,
.actions{

display:flex;
flex-wrap:wrap;
gap:6px;

}


.user-actions button,
.actions button{

border-radius:20px;
padding:7px 12px;
font-size:12px;

}


.quick-actions,
.mission-actions{

display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;

}


@media(max-width:600px){

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

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


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


.dash-card{
min-height:82px;
padding:10px;
}

.dash-icon{
width:42px;
height:42px;
}

}


.menu-tile{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:92px;
height:76px;
border-radius:18px;
background:#fff;
border:1px solid #e1eaf1;
gap:6px;
font-size:12px;
}

.menu-icon{
font-size:22px;
}

.menu-tile.selected{
background:#08a4a8;
color:white;
border-color:#08a4a8;
}



/* Roles cards V1 */

.role-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}

.role-card{
  min-height:95px;
  background:#fff;
  border:1px solid #e1eaf1;
  border-radius:20px;
  padding:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 8px 24px rgba(15,45,70,.05);
  cursor:pointer;
}

.role-card:hover{
  border-color:#10a7ad;
  transform:translateY(-2px);
}

.role-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  background:#edf8f8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}

.role-card strong{
  font-size:14px;
  color:#102a43;
}

.role-card span{
  font-size:12px;
  color:#6b8092;
}


@media(max-width:600px){
 .role-grid{
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:8px;
 }

 .role-card{
   min-height:82px;
   border-radius:16px;
   padding:10px;
 }
}


/* FINAL UI PATCH */

body{
direction:rtl;
text-align:right;
}

#content,
.card,
.dashboard-hero,
.hero-box{
direction:rtl;
}

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

.dash-card{
min-height:82px;
padding:10px;
border-radius:16px;
}

.dash-icon{
width:42px;
height:42px;
border-radius:12px;
}

.dash-card strong{
font-size:14px;
}

.dash-card span{
font-size:11px;
}

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


.user-card,
.action-card,
.mission-card{
background:#fff;
border:1px solid #e1eaf1;
border-radius:18px;
padding:14px;
margin-bottom:10px;
box-shadow:0 6px 18px rgba(15,45,70,.04);
}


.user-actions,
.mission-actions{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:10px;
}

.user-actions button,
.mission-actions button{
padding:7px 12px;
border-radius:12px;
font-size:12px;
}


.badge{
border-radius:20px;
font-size:11px;
}


@media(max-width:700px){

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

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

}



/* FINAL UI PATCH */

body{
direction:rtl;
text-align:right;
overflow-x:hidden;
}


.mission-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-top:15px;
}


.mission-card{
background:#fff;
border:1px solid #e1eaf1;
border-radius:20px;
padding:16px;
text-align:right;
display:flex;
flex-direction:column;
gap:8px;
box-shadow:0 8px 22px rgba(20,50,80,.05);
}


.mission-card strong{
font-size:15px;
color:#102a43;
}


.mission-card span{
font-size:12px;
color:#6b8092;
}


.user-actions,
.mission-actions{
display:flex;
flex-wrap:wrap;
gap:6px;
}


.pill{
border-radius:18px!important;
padding:7px 12px!important;
font-size:12px!important;
}


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


@media(max-width:600px){

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

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

}



/* RASA DASHBOARD FINAL UI */

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

.dash-card{
    min-height:86px;
    padding:12px;
    border-radius:16px;
}

.dash-icon{
    width:44px;
    height:44px;
    border-radius:14px;
}

.dash-icon svg{
    width:22px;
    height:22px;
}

.dash-card strong{
    font-size:14px;
}

.dash-card span{
    font-size:11px;
}

.section-head p{
    display:none;
}

@media(max-width:900px){
.dashboard-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media(max-width:600px){
.dashboard-grid{
grid-template-columns:1fr;
}
}



/* RASA HOME UI */

.rasa-hero{
direction:rtl;
padding:20px;
}

.rasa-brand{
display:flex;
align-items:center;
gap:18px;
}

.rasa-logo{
width:80px;
height:80px;
}

.rasa-logo svg{
width:100%;
height:100%;
}

.rasa-brand h2{
color:#17345b;
}

.rasa-brand p{
color:#71829a;
}

.rasa-user{
margin-top:20px;
background:white;
border-radius:24px;
padding:22px;
display:flex;
justify-content:space-between;
align-items:center;
box-shadow:0 8px 25px #0001;
}

.active{
background:#dcf8ea;
color:#00966d;
padding:10px 18px;
border-radius:30px;
}

.quick-menu{
display:flex;
gap:10px;
overflow:auto;
margin:20px 0;
}

.quick-menu div{
background:white;
min-width:75px;
height:75px;
border-radius:18px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:#17345b;
}

.quick-menu span{
font-size:12px;
margin-top:5px;
}

.welcome-rasa{
text-align:right;
padding:20px 5px;
}

.welcome-rasa small{
color:#009f98;
}

.welcome-rasa h1{
color:#17345b;
}

.welcome-rasa p{
color:#71829a;
line-height:2;
}

.rasa-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
}

.rasa-grid button{
border:0;
background:white;
border-radius:22px;
padding:25px 15px;
font-family:inherit;
color:#17345b;
box-shadow:0 8px 25px #0001;
}

.rasa-grid small{
display:block;
margin-top:8px;
color:#71829a;
}

.logout{
color:#d33!important;
}



/* FINAL RASA DASHBOARD FIX */

*{
 user-select:none;
}


body{
 background:#f7fafc;
}


main{
 max-width:900px;
 padding:10px 12px 20px;
}


header{
 height:64px;
 border-radius:0 0 24px 24px;
}


#notice{
 display:none!important;
}


.rasa-hero{
 display:flex;
 flex-direction:column;
 gap:14px;
}



.rasa-brand{

background:#fff;
border:1px solid #edf2f7;
border-radius:26px;
padding:18px;

display:flex;
align-items:center;
justify-content:flex-start;
gap:18px;

box-shadow:
0 8px 25px rgba(0,0,0,.05);

}


.rasa-logo{

width:70px;
height:70px;

}



.rasa-logo svg{

width:100%;
height:100%;

}



.rasa-brand h2{

font-size:21px;
margin:0;

}



.rasa-brand p{

margin-top:5px;

}



.rasa-user{

background:#fff;
border-radius:26px;

padding:20px;

display:flex;

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

border:1px solid #edf2f7;

box-shadow:
0 8px 25px rgba(0,0,0,.05);

}



.active{

background:#dff8ec;
color:#10a36f;

padding:12px 20px;

border-radius:30px;

font-weight:800;

}



.quick-menu{

display:flex;

gap:10px;

overflow-x:auto;

padding:4px 2px 12px;

}



.quick-item{

min-width:115px;

height:100px;

border-radius:22px;

background:white;

border:1px solid #e4edf3;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:8px;

font-weight:800;

}



.welcome-rasa{

text-align:center;

padding:12px 10px;

}


.welcome-rasa small{

color:#07969c;

font-weight:800;

}



.welcome-rasa h1{

font-size:24px;

margin:8px 0;

}



.rasa-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:14px;

}



.rasa-card{

background:white;

border-radius:24px;

border:1px solid #edf2f7;

min-height:135px;

padding:20px;

display:flex;

flex-direction:column;

align-items:flex-start;

justify-content:center;

gap:8px;

box-shadow:
0 8px 25px rgba(0,0,0,.05);

}



.rasa-card:hover{

transform:translateY(-2px);

border-color:#0ea5a8;

}



.card-icon{

font-size:32px;

}



.rasa-card b{

font-size:18px;

}



.rasa-card small{

color:#708399;

font-size:14px;

}



@media(max-width:700px){

.rasa-grid{

grid-template-columns:1fr 1fr;

}


.rasa-user{

flex-direction:column;

align-items:flex-start;

gap:14px;

}

}




.page-tools{
display:flex;
align-items:center;
justify-content:space-between;
background:#fff;
border:1px solid #e1eaf1;
border-radius:18px;
padding:8px 12px;
margin-bottom:14px;
font-size:13px;
box-shadow:0 8px 20px rgba(16,42,67,.04);
}


.page-tools button{
background:#fff;
border:1px solid #d7e5ed;
border-radius:12px;
padding:7px 12px;
font-size:12px;
}


.toast{
position:fixed;
bottom:24px;
right:50%;
transform:translateX(50%) translateY(20px);
background:#17345b;
color:white;
padding:12px 22px;
border-radius:25px;
opacity:0;
transition:.3s;
z-index:9999;
font-size:13px;
}

.toast.show{
opacity:1;
transform:translateX(50%) translateY(0);
}



.page-tools{

display:flex;

align-items:center;

justify-content:space-between;

direction:rtl;

background:#fff;

border:1px solid #e1eaf1;

border-radius:18px;

padding:8px 10px;

margin:0 0 14px;

box-shadow:0 8px 22px rgba(20,40,70,.05);

font-size:13px;

}


.page-tools strong{

color:#17345b;

}


.page-tools button{

background:#fff;

border:1px solid #d9e5ed;

border-radius:12px;

padding:6px 12px;

font-size:12px;

}



.toast{

position:fixed;

bottom:25px;

right:50%;

transform:translateX(50%) translateY(20px);

background:#17345b;

color:white;

padding:12px 22px;

border-radius:24px;

opacity:0;

transition:.3s;

z-index:99999;

font-size:13px;

}


.toast.show{

opacity:1;

transform:translateX(50%) translateY(0);

}



/* NAV POLISH V15 */

.page-tools{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:8px;
background:#ffffff;
border:1px solid #e4ebf2;
border-radius:18px;
padding:8px 10px;
margin:0 0 12px;
box-shadow:0 8px 22px rgba(16,42,67,.05);
}

.page-tools strong{
text-align:center;
font-size:13px;
font-weight:800;
color:#17345b;
}

.page-tools button{
height:34px;
min-width:72px;
padding:0 10px;
border:1px solid #d8e4ec;
background:#fff;
border-radius:12px;
font-size:12px;
font-weight:700;
color:#24415a;
}

.page-tools button:hover{
transform:none;
border-color:#0ea5a8;
}

/* smaller, cleaner user card */
.rasa-user{
min-height:88px !important;
height:auto !important;
padding:12px 16px !important;
border-radius:22px !important;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}

.rasa-user > div{
display:flex;
flex-direction:column;
gap:3px;
}

.rasa-user h3{
font-size:13px !important;
margin:0 !important;
line-height:1.2 !important;
}

.rasa-user strong{
font-size:15px !important;
line-height:1.25 !important;
margin:0 !important;
}

.rasa-user p{
font-size:12px !important;
line-height:1.5 !important;
margin:0 !important;
color:#6b7d8c !important;
}

.active{
padding:8px 12px !important;
border-radius:18px !important;
font-size:12px !important;
font-weight:800 !important;
white-space:nowrap;
}

@media(max-width:700px){
  .rasa-user{
    min-height:82px !important;
    padding:10px 14px !important;
  }
}

/* PRO UI V16 START */

:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-2:#f8fbfd;
  --text:#17345b;
  --muted:#6d8193;
  --line:#e3ebf2;
  --primary:#0ea5a8;
  --primary-dark:#0b8c90;
  --success-bg:#ddf7e8;
  --success-text:#0f9f69;
  --shadow:0 10px 30px rgba(18,42,66,.06);
  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:16px;
  --radius-sm:12px;
}

html,body{
  background:var(--bg) !important;
  color:var(--text);
}

body{
  margin:0;
  font-family:IRANSansX,Tahoma,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

*{
  box-sizing:border-box;
}

main{
  max-width:430px !important;
  margin:auto !important;
  padding:8px 10px 16px !important;
}

header{
  height:56px !important;
  background:rgba(255,255,255,.95) !important;
  border-bottom:1px solid var(--line) !important;
  backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(18,42,66,.04);
}

.brand{
  font-size:17px !important;
  font-weight:800 !important;
  color:var(--text) !important;
}

.brand span{
  color:var(--text) !important;
}

#identity{
  font-size:11px !important;
  color:var(--muted) !important;
}

footer{
  text-align:center;
  color:#7f90a0;
  font-size:11px;
  padding:10px 0 18px;
}

#notice{
  border-radius:16px !important;
  box-shadow:var(--shadow) !important;
}

/* shared shell */
.page-tools{
  display:grid !important;
  grid-template-columns:74px 1fr 74px;
  align-items:center;
  gap:8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:8px 10px;
  margin:0 0 10px !important;
  box-shadow:var(--shadow);
}

.page-tools strong{
  text-align:center;
  font-size:13px;
  font-weight:800;
  color:var(--text);
}

.page-tools button{
  height:34px !important;
  min-width:74px !important;
  padding:0 8px !important;
  border:1px solid var(--line) !important;
  background:#fff !important;
  color:var(--text) !important;
  border-radius:12px !important;
  font-size:11px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

.page-tools button:hover{
  transform:none !important;
  border-color:var(--primary) !important;
}

/* dashboard */
.rasa-hero{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.rasa-brand{
  min-height:82px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  border:1px solid var(--line);
  border-radius:24px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  box-shadow:var(--shadow);
}

.rasa-brand > div:last-child{
  flex:1;
}

.rasa-logo{
  width:56px !important;
  height:56px !important;
  flex:0 0 56px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.rasa-logo svg{
  width:56px;
  height:56px;
}

.rasa-brand h2{
  margin:0 0 4px !important;
  font-size:17px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
  color:var(--text);
}

.rasa-brand p{
  margin:0 !important;
  font-size:12px !important;
  line-height:1.5 !important;
  color:var(--muted) !important;
}

/* compact user card */
.rasa-user{
  min-height:86px !important;
  background:var(--surface) !important;
  border:1px solid var(--line);
  border-radius:24px !important;
  padding:12px 16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  box-shadow:var(--shadow) !important;
}

.rasa-user > div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.rasa-user h3{
  margin:0 !important;
  font-size:12px !important;
  line-height:1.2 !important;
  color:var(--muted) !important;
  font-weight:700 !important;
}

.rasa-user strong{
  margin:0 !important;
  font-size:16px !important;
  line-height:1.25 !important;
  color:var(--text) !important;
  font-weight:800 !important;
}

.rasa-user p{
  margin:0 !important;
  font-size:12px !important;
  line-height:1.45 !important;
  color:var(--muted) !important;
}

.active{
  background:var(--success-bg) !important;
  color:var(--success-text) !important;
  padding:8px 12px !important;
  border-radius:18px !important;
  font-size:12px !important;
  font-weight:800 !important;
  white-space:nowrap;
  box-shadow:none !important;
}

/* quick nav */
.quick-menu{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 2px 4px;
  margin:0;
  scrollbar-width:none;
}
.quick-menu::-webkit-scrollbar{display:none;}

.quick-item{
  min-width:88px !important;
  height:58px !important;
  border:1px solid var(--line) !important;
  background:var(--surface) !important;
  border-radius:16px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  font-size:11px !important;
  font-weight:700 !important;
  color:var(--text) !important;
  box-shadow:none !important;
  padding:6px !important;
}
.quick-item span{
  font-size:14px;
  line-height:1;
  color:#6c7f90;
}
.quick-item:hover{
  transform:none !important;
  border-color:var(--primary) !important;
}

/* headline */
.welcome-rasa{
  text-align:center;
  padding:4px 6px 0;
}

.welcome-rasa small{
  display:block;
  margin-bottom:4px;
  color:var(--primary-dark);
  font-size:11px !important;
  font-weight:800 !important;
}

.welcome-rasa h1{
  margin:0 !important;
  font-size:18px !important;
  line-height:1.4 !important;
  font-weight:900 !important;
  color:var(--text) !important;
}

.welcome-rasa p{
  margin-top:4px !important;
  font-size:12px !important;
  line-height:1.6 !important;
  color:var(--muted) !important;
}

/* cards grid */
.rasa-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
}

.rasa-card{
  min-height:112px !important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;
  border:1px solid var(--line) !important;
  border-radius:22px !important;
  padding:14px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:6px !important;
  box-shadow:var(--shadow) !important;
  text-align:right;
}

.rasa-card:hover{
  transform:translateY(-1px) !important;
  border-color:var(--primary) !important;
}

.card-icon{
  font-size:21px !important;
  line-height:1 !important;
  color:#71879a;
  margin-bottom:2px;
}

.rasa-card b{
  font-size:15px !important;
  line-height:1.35 !important;
  color:var(--text) !important;
  font-weight:800 !important;
}

.rasa-card small{
  font-size:11px !important;
  line-height:1.55 !important;
  color:var(--muted) !important;
}

/* generic cards in inner pages */
.card{
  border:1px solid var(--line) !important;
  background:var(--surface) !important;
  border-radius:22px !important;
  padding:16px !important;
  margin:12px 0 !important;
  box-shadow:var(--shadow) !important;
}

.card h2{
  font-size:16px !important;
  margin:0 0 8px !important;
}

.card p{
  font-size:12px !important;
  line-height:1.7 !important;
  color:var(--muted) !important;
}

/* role/user lists */
.role-grid,
.user-list{
  display:grid;
  gap:10px;
}

.role-card{
  min-height:74px !important;
  border-radius:18px !important;
  border:1px solid var(--line) !important;
  background:#fff !important;
  box-shadow:none !important;
}

.role-icon{
  font-size:20px !important;
}

/* actions / forms */
.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

button,.entry{
  border:1px solid var(--line) !important;
  background:#fff !important;
  color:var(--text) !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  font-size:12px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

button:hover,.entry:hover{
  transform:none !important;
  border-color:var(--primary) !important;
}

.primary{
  background:var(--primary) !important;
  color:#fff !important;
  border-color:var(--primary) !important;
}

.primary:hover{
  border-color:var(--primary-dark) !important;
}

.danger-lite{
  color:#d63b3b !important;
}

/* tables */
.scroll.card{
  overflow:auto;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:12px;
}

th,td{
  padding:10px 8px;
  border-bottom:1px solid var(--line);
  text-align:right;
}

th{
  color:var(--text);
  font-weight:800;
  background:#fbfdff;
}

/* toast */
.toast{
  position:fixed;
  bottom:24px;
  right:50%;
  transform:translateX(50%) translateY(20px);
  background:#17345b;
  color:white;
  padding:11px 18px;
  border-radius:22px;
  opacity:0;
  transition:.3s;
  z-index:99999;
  font-size:12px;
  box-shadow:0 14px 32px rgba(0,0,0,.18);
}
.toast.show{
  opacity:1;
  transform:translateX(50%) translateY(0);
}

/* mobile fit */
@media (max-width:700px){
  .rasa-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .rasa-user{
    min-height:82px !important;
    padding:10px 14px !important;
  }

  .rasa-brand{
    min-height:78px;
    padding:12px 14px;
  }

  .rasa-card{
    min-height:106px !important;
  }
}

/* PRO UI V16 END */

/* PREMIUM UI V17 START */

:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-soft:#fbfdff;
  --text:#17345b;
  --muted:#718498;
  --line:#e3ebf2;
  --primary:#0ea5a8;
  --primary-dark:#0b8c90;
  --success-bg:#ddf7e8;
  --success-text:#119b67;
  --danger:#de4a4a;
  --shadow:0 10px 28px rgba(17,42,66,.06);
  --radius-xl:26px;
  --radius-lg:22px;
  --radius-md:18px;
  --radius-sm:14px;
}

html,body{
  background:var(--bg) !important;
  color:var(--text) !important;
}

body{
  margin:0;
  font-family:IRANSansX,Tahoma,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

*{
  box-sizing:border-box;
}

main{
  max-width:430px !important;
  margin:auto !important;
  padding:8px 10px 14px !important;
}

header{
  height:56px !important;
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:0 3px 18px rgba(17,42,66,.04) !important;
  backdrop-filter:blur(10px);
}

.brand{
  font-size:17px !important;
  font-weight:800 !important;
  color:var(--text) !important;
}

.brand span{
  color:var(--text) !important;
}

#identity{
  font-size:11px !important;
  color:var(--muted) !important;
}

footer{
  text-align:center;
  color:#7f90a0;
  font-size:11px;
  padding:10px 0 16px;
}

/* top page nav */
.page-tools{
  display:grid !important;
  grid-template-columns:74px 1fr 74px !important;
  align-items:center !important;
  gap:8px !important;
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  padding:8px 10px !important;
  margin:0 0 10px !important;
  box-shadow:var(--shadow) !important;
}

.page-tools strong{
  text-align:center !important;
  font-size:13px !important;
  font-weight:800 !important;
  color:var(--text) !important;
}

.page-tools button{
  height:34px !important;
  min-width:74px !important;
  padding:0 8px !important;
  border:1px solid var(--line) !important;
  background:#fff !important;
  color:var(--text) !important;
  border-radius:12px !important;
  font-size:11px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

.page-tools button:hover{
  transform:none !important;
  border-color:var(--primary) !important;
}

/* dashboard wrapper */
.rasa-hero{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

/* brand card */
.rasa-brand{
  min-height:78px !important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;
  border:1px solid var(--line) !important;
  border-radius:24px !important;
  padding:12px 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  box-shadow:var(--shadow) !important;
}

.rasa-brand > div:last-child{
  flex:1 !important;
}

.rasa-logo{
  width:54px !important;
  height:54px !important;
  flex:0 0 54px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.rasa-logo svg{
  width:54px !important;
  height:54px !important;
}

.rasa-brand h2{
  margin:0 0 3px !important;
  font-size:17px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
  color:var(--text) !important;
}

.rasa-brand p{
  margin:0 !important;
  font-size:12px !important;
  line-height:1.45 !important;
  color:var(--muted) !important;
}

/* USER CARD: small / minimal / premium */
.rasa-user{
  min-height:72px !important;
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:22px !important;
  padding:10px 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  box-shadow:var(--shadow) !important;
}

.rasa-user > div{
  display:flex !important;
  flex-direction:column !important;
  gap:1px !important;
  flex:1 !important;
}

.rasa-user h3{
  margin:0 !important;
  font-size:11px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  color:var(--muted) !important;
}

.rasa-user strong{
  margin:0 !important;
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  color:var(--text) !important;
}

.rasa-user p{
  margin:0 !important;
  font-size:11px !important;
  line-height:1.35 !important;
  color:var(--muted) !important;
}

.active{
  background:var(--success-bg) !important;
  color:var(--success-text) !important;
  padding:7px 11px !important;
  border-radius:16px !important;
  font-size:11px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}

/* quick top nav */
.quick-menu{
  display:flex !important;
  gap:8px !important;
  overflow-x:auto !important;
  padding:2px 2px 4px !important;
  margin:0 !important;
  scrollbar-width:none !important;
}
.quick-menu::-webkit-scrollbar{display:none !important;}

.quick-item{
  min-width:86px !important;
  height:56px !important;
  border:1px solid var(--line) !important;
  background:#fff !important;
  border-radius:16px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  font-size:11px !important;
  font-weight:700 !important;
  color:var(--text) !important;
  box-shadow:none !important;
  padding:6px !important;
}

.quick-item span{
  font-size:14px !important;
  line-height:1 !important;
  color:#6d8092 !important;
}

.quick-item:hover{
  transform:none !important;
  border-color:var(--primary) !important;
}

/* welcome text */
.welcome-rasa{
  text-align:center !important;
  padding:2px 4px 0 !important;
}

.welcome-rasa small{
  display:block !important;
  margin-bottom:4px !important;
  color:var(--primary-dark) !important;
  font-size:11px !important;
  font-weight:800 !important;
}

.welcome-rasa h1{
  margin:0 !important;
  font-size:18px !important;
  line-height:1.35 !important;
  font-weight:900 !important;
  color:var(--text) !important;
}

.welcome-rasa p{
  margin-top:4px !important;
  font-size:12px !important;
  line-height:1.55 !important;
  color:var(--muted) !important;
}

/* dashboard cards */
.rasa-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
}

.rasa-card{
  min-height:106px !important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;
  border:1px solid var(--line) !important;
  border-radius:22px !important;
  padding:14px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:6px !important;
  box-shadow:var(--shadow) !important;
  text-align:right !important;
}

.rasa-card:hover{
  transform:translateY(-1px) !important;
  border-color:var(--primary) !important;
}

.card-icon{
  font-size:20px !important;
  line-height:1 !important;
  color:#7a8da0 !important;
  margin-bottom:2px !important;
}

.rasa-card b{
  font-size:14px !important;
  line-height:1.35 !important;
  color:var(--text) !important;
  font-weight:800 !important;
}

.rasa-card small{
  font-size:11px !important;
  line-height:1.5 !important;
  color:var(--muted) !important;
}

/* inner pages */
.card{
  border:1px solid var(--line) !important;
  background:#fff !important;
  border-radius:22px !important;
  padding:16px !important;
  margin:12px 0 !important;
  box-shadow:var(--shadow) !important;
}

.card h2{
  font-size:16px !important;
  margin:0 0 8px !important;
  color:var(--text) !important;
}

.card p{
  font-size:12px !important;
  line-height:1.7 !important;
  color:var(--muted) !important;
}

.role-grid,
.user-list{
  display:grid !important;
  gap:10px !important;
}

.role-card{
  min-height:72px !important;
  border-radius:18px !important;
  border:1px solid var(--line) !important;
  background:#fff !important;
  box-shadow:none !important;
}

.role-icon{
  font-size:20px !important;
}

/* buttons */
button,.entry{
  border:1px solid var(--line) !important;
  background:#fff !important;
  color:var(--text) !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  font-size:12px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

button:hover,.entry:hover{
  transform:none !important;
  border-color:var(--primary) !important;
}

.primary{
  background:var(--primary) !important;
  border-color:var(--primary) !important;
  color:#fff !important;
}

.primary:hover{
  border-color:var(--primary-dark) !important;
}

.danger-lite{
  color:var(--danger) !important;
}

/* form fields */
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
  font-size:12px;
  color:var(--text);
}

.field input,
.field select,
.field textarea{
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  font:inherit;
  color:var(--text);
}

/* tables */
.scroll.card{
  overflow:auto;
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:12px;
}

th,td{
  padding:10px 8px;
  border-bottom:1px solid var(--line);
  text-align:right;
}

th{
  color:var(--text);
  font-weight:800;
  background:#fbfdff;
}

/* notice / toast */
#notice{
  border-radius:16px !important;
  box-shadow:var(--shadow) !important;
}

.toast{
  position:fixed;
  bottom:22px;
  right:50%;
  transform:translateX(50%) translateY(16px);
  background:#17345b;
  color:#fff;
  padding:11px 18px;
  border-radius:20px;
  opacity:0;
  transition:.3s;
  z-index:99999;
  font-size:12px;
  box-shadow:0 14px 32px rgba(0,0,0,.18);
}

.toast.show{
  opacity:1;
  transform:translateX(50%) translateY(0);
}

/* mobile fit */
@media(max-width:700px){
  .rasa-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .rasa-user{
    min-height:68px !important;
    padding:9px 12px !important;
  }

  .rasa-brand{
    min-height:74px !important;
    padding:11px 13px !important;
  }

  .rasa-card{
    min-height:102px !important;
  }
}

/* PREMIUM UI V17 END */


/* =========================
   RASA PREMIUM DASHBOARD V18
   Modular Architecture Ready
========================= */


:root{
 --rasa-primary:#0ea5a8;
 --rasa-dark:#17345b;
 --rasa-text:#20384f;
 --rasa-muted:#71849a;
 --rasa-border:#e3ebf2;
}


body{
 background:#f5f8fb;
}


main{
 max-width:430px!important;
 margin:auto;
 padding:8px 12px 18px!important;
}


/* COMMON MODULE CARD */

.module-card{

background:#fff;

border:1px solid var(--rasa-border);

border-radius:24px;

padding:16px;

min-height:110px;

display:flex;

flex-direction:column;

justify-content:center;

gap:8px;

box-shadow:
0 10px 30px rgba(20,50,80,.06);

transition:.2s;

}


.module-card:hover{

border-color:var(--rasa-primary);

transform:translateY(-2px);

}



.module-title{

font-size:15px;

font-weight:800;

color:var(--rasa-dark);

}



.module-desc{

font-size:12px;

color:var(--rasa-muted);

line-height:1.6;

}



.module-icon{

width:38px;

height:38px;

border-radius:12px;

background:#eefafa;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

}



/* DASHBOARD GRID */

.rasa-grid{

display:grid!important;

grid-template-columns:1fr 1fr!important;

gap:12px!important;

}



.rasa-card{

min-height:105px!important;

border-radius:22px!important;

padding:14px!important;

}



/* USER MINI CARD */

.rasa-user{

min-height:68px!important;

padding:10px 14px!important;

border-radius:20px!important;

}



.rasa-user strong{

font-size:14px!important;

}



.rasa-user p{

font-size:11px!important;

}



/* TOP MODULE NAV */


.module-nav{

display:flex;

gap:8px;

overflow-x:auto;

padding:4px 0 8px;

scrollbar-width:none;

}


.module-nav::-webkit-scrollbar{

display:none;

}


.module-nav button{

height:42px;

min-width:78px;

border-radius:14px;

font-size:11px;

white-space:nowrap;

}



/* INNER PAGE HEADER */

.inner-header{

display:flex;

align-items:center;

justify-content:space-between;

background:#fff;

border:1px solid var(--rasa-border);

border-radius:18px;

padding:8px 10px;

margin-bottom:12px;

box-shadow:0 8px 20px rgba(0,0,0,.04);

}


.inner-header button{

height:34px;

font-size:11px;

padding:0 12px;

}



/* future modules */

.future-module{

border:1px dashed #cddce8;

background:#fbfdff;

}




/* PREMIUM DASHBOARD CARDS */

.rasa-grid{

display:grid;

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

gap:12px;

margin-top:18px;

}


.rasa-card{

min-height:120px;

background:white;

border:1px solid #e1eaf0;

border-radius:22px;

padding:16px;

display:flex;

flex-direction:column;

justify-content:center;

gap:8px;

cursor:pointer;

transition:.2s;

box-shadow:0 8px 25px rgba(15,40,70,.05);

}


.rasa-card:hover{

transform:translateY(-3px);

border-color:#0ea5a8;

}


.rasa-card .card-icon{

font-size:28px;

}


.rasa-card b{

font-size:15px;

}


.rasa-card small{

font-size:12px;

color:#718096;

}



/* mobile */

@media(max-width:900px){

.rasa-grid{

display:flex;

overflow-x:auto;

scroll-snap-type:x mandatory;

padding-bottom:10px;

}


.rasa-card{

min-width:160px;

scroll-snap-align:start;

}


.rasa-grid::-webkit-scrollbar{

height:5px;

}

}





/* ===== PREMIUM CARD GRID V21 ===== */

.rasa-grid{

display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
margin-top:16px;

}


.rasa-card{

min-height:125px;

background:#ffffff;

border:1px solid #e3ebf2;

border-radius:22px;

padding:16px;

display:flex;

flex-direction:column;

justify-content:center;

gap:8px;

cursor:pointer;

font-family:inherit;

text-align:right;

transition:.2s ease;

box-shadow:0 8px 24px rgba(16,42,67,.05);

}


.rasa-card:hover{

transform:translateY(-3px);

border-color:#0ea5a8;

box-shadow:0 12px 28px rgba(14,165,168,.12);

}


.rasa-card .card-icon{

font-size:28px;

line-height:1;

}


.rasa-card b{

font-size:15px;

color:#102a43;

}


.rasa-card small{

font-size:12px;

color:#718096;

line-height:1.5;

}



/* موبایل - اسلایدی */

@media(max-width:900px){

.rasa-grid{

display:flex;

overflow-x:auto;

gap:12px;

padding-bottom:8px;

scroll-snap-type:x mandatory;

}


.rasa-card{

min-width:165px;

scroll-snap-align:start;

}


.rasa-grid::-webkit-scrollbar{

height:5px;

}

}



/* نوار بالای صفحات */

.page-nav{

display:flex;

align-items:center;

gap:8px;

margin-bottom:12px;

padding:8px;

background:#fff;

border:1px solid #e5edf3;

border-radius:18px;

}


.page-nav button{

height:34px;

padding:0 14px;

border-radius:12px;

font-size:12px;

}





/* PREMIUM DASHBOARD GRID V26 */

.rasa-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
margin-top:14px;
}


.rasa-card{
min-height:120px;
border-radius:22px;
background:#fff;
border:1px solid #e3ebf2;
padding:16px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
gap:8px;
cursor:pointer;
transition:.2s;
box-shadow:0 8px 25px rgba(16,42,67,.06);
}


.rasa-card:hover{
transform:translateY(-3px);
border-color:#0ea5a8;
}


.card-icon{
font-size:30px;
}


.rasa-card b{
font-size:16px;
color:#17324d;
}


.rasa-card small{
font-size:12px;
color:#718397;
}



@media(max-width:900px){

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

}



@media(max-width:480px){

.rasa-grid{
grid-template-columns:1fr 1fr;
gap:10px;
}


.rasa-card{
min-height:105px;
padding:12px;
}

}



/* ===== PREMIUM NAV V27 ===== */

.global-nav{

height:46px;

display:flex;

align-items:center;

gap:8px;

background:#ffffff;

border:1px solid #e5edf3;

border-radius:18px;

padding:6px 10px;

margin:8px 0 12px;

box-shadow:0 6px 20px rgba(16,42,67,.05);

}


.global-nav button{

border:0;

background:#f4f8fb;

border-radius:12px;

padding:6px 12px;

font-size:12px;

cursor:pointer;

}


.global-nav strong{

margin:auto;

font-size:14px;

color:#17324d;

}



/* cards */

.rasa-grid{

display:grid;

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

gap:12px;

}


.rasa-card{

min-height:110px;

border-radius:20px;

padding:14px;

}


.rasa-card small{

line-height:1.5;

}



@media(max-width:900px){

.rasa-grid{

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

}

}



@media(max-width:500px){

.rasa-grid{

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

gap:8px;

}


.rasa-card{

min-height:95px;

}

}




/* ===== PREMIUM PAGE NAV V29 ===== */

.page-tools{

display:flex;

align-items:center;

justify-content:space-between;

gap:8px;

height:44px;

margin:10px 0 14px;

padding:6px 8px;

background:rgba(255,255,255,.92);

border:1px solid #e4edf3;

border-radius:18px;

box-shadow:
0 8px 24px rgba(16,42,67,.05);

backdrop-filter:blur(10px);

}


.page-tools strong{

font-size:14px;

font-weight:800;

color:#17324d;

flex:1;

text-align:center;

}


.page-tools button{

height:32px;

padding:0 12px;

border-radius:12px;

border:1px solid #e1eaf1;

background:#f8fbfd;

color:#38526a;

font-size:12px;

font-weight:700;

cursor:pointer;

transition:.2s;

}


.page-tools button:hover{

background:#0ea5a8;

border-color:#0ea5a8;

color:#fff;

transform:translateY(-1px);

}



/* مدیر کوچک تر */

.rasa-hero{

margin-bottom:10px;

}


.rasa-user,
.rasa-brand{

padding:10px 14px!important;

border-radius:18px!important;

}


.rasa-user h2,
.rasa-brand h2{

font-size:16px!important;

}


.rasa-user p,
.rasa-brand p{

font-size:12px!important;

line-height:1.5!important;

}



/* کارت ها جمع و جور */

.rasa-card{

min-height:105px!important;

border-radius:20px!important;

}


.card-icon{

font-size:26px!important;

}



@media(max-width:700px){

.page-tools{

height:42px;

}


.page-tools button{

padding:0 9px;

font-size:11px;

}

}





/* ===== V30 FORMS POLLS PREMIUM ===== */

.form-list,
.poll-list{
display:flex;
flex-direction:column;
gap:12px;
}


.form-card,
.poll-card{

background:#fff;
border:1px solid #e5edf5;
border-radius:18px;
padding:18px;

display:flex;
flex-direction:column;
gap:10px;

box-shadow:0 8px 24px rgba(30,60,90,.06);

}


.form-card strong,
.poll-card strong{

font-size:17px;
color:#102a43;

}


.form-card span{

color:#64748b;
font-size:14px;

}


.poll-card label{

display:flex;
align-items:center;
gap:10px;

padding:12px;

background:#f7fafc;
border-radius:12px;

}


.empty-state{

padding:30px;
text-align:center;

background:#f8fafc;

border-radius:18px;

color:#64748b;

}



/* V35.2 FORM BUILDER */

.form-list{
display:flex;
flex-direction:column;
gap:12px;
}


.form-card{
background:#fff;
border:1px solid #e4ebf2;
border-radius:18px;
padding:16px;
display:flex;
flex-direction:column;
gap:6px;
}


.form-card strong{
font-size:16px;
}


.form-card span{
color:#64748b;
font-size:13px;
}