/* talkyo dashboard shell - concept v9 (no sidebar) */
:root{
  --bg:#030507;
  --panel:#07101b;
  --panel2:#0b1422;
  --line:rgba(87,140,255,.26);
  --line-soft:rgba(255,255,255,.08);
  --text:#f5f7fb;
  --muted:#8f98a8;
  --blue:#3d8dff;
  --blue2:#72b6ff;
  --green:#7df1c1;
  --shadow:0 16px 48px rgba(0,0,0,.35);
}

html,body{min-height:100%}
body{
  margin:0;
  background:
    radial-gradient(circle at 55% -10%, rgba(30,98,255,.14), transparent 34%),
    linear-gradient(180deg,#020304 0%,#040608 54%,#020304 100%);
  color:var(--text);
  font-family:"Google Sans Hebrew","Google Sans","Helvetica Neue",Arial,sans-serif;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overflow-x:hidden;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{display:none;width:0;height:0}

#app.app{
  min-height:100%;
  display:block;
  direction:rtl;
  grid-template-columns:none;
}
#app #smooth-content{
  min-height:100%;
}

#app .sidebar{display:none !important}

#app main.main{
  width:100%;
  min-height:100vh;
  min-width:0;
  direction:rtl;
  overflow:visible;
  padding:24px 52px 0;
  position:relative;
  display:flex;
  flex-direction:column;
}

#app .topbar{
  width:100%;
  max-width:none;
  height:auto;
  min-height:46px;
  margin:0 auto 42px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  direction:rtl;
  border:0;
  background:transparent;
  backdrop-filter:none;
  position:relative;
  top:auto;
  z-index:20;
}

#app .topbar-brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
  position:relative;
  z-index:2;
}

#app .topbar-brand .brand-mark{
  display:flex;
  align-items:center;
  width:auto;
  padding:0;
  border:0;
  margin:0;
}

#app .topbar-brand .brand-logo{
  display:block;
  width:87px;
  max-width:none;
  height:auto;
  object-fit:contain;
  object-position:right center;
}

#app .topbar-actions{
  display:flex;
  align-items:center;
  gap:12px;
  direction:rtl;
  flex:0 0 auto;
  position:relative;
  z-index:2;
}

#app .shell-nav{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:2px;
  margin:0;
  max-width:none;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:1;
  pointer-events:none;
}
#app .shell-nav button{
  pointer-events:auto;
  border:0;
  background:transparent;
  color:#7b86a0;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  transition:.2s ease;
  text-wrap:balance;
}
#app.app.is-overview .shell-nav{
  margin:0;
  opacity:1;
}
#app.app.is-overview .topbar{margin-bottom:72px}
#app.app.is-overview .hero{margin-top:8px;margin-bottom:52px}

#app .shell-nav button:hover{color:#fff;background:rgba(255,255,255,.035)}
#app .shell-nav button.active{
  color:#fff;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
#app .shell-nav button.nav-hidden{display:none !important}
#app .shell-nav small{
  display:inline-block;
  margin-inline-start:6px;
  font-size:10px;
  color:rgba(255,255,255,.34);
  vertical-align:middle;
}

#app .nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:40px;
  padding:0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  color:#fff;
  flex:0 0 auto;
}
#app .nav-toggle-bars,
#app .nav-toggle-bars::before,
#app .nav-toggle-bars::after{
  display:block;
  width:16px;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  transition:transform .2s ease, opacity .2s ease;
}
#app .nav-toggle-bars{position:relative}
#app .nav-toggle-bars::before,
#app .nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
}
#app .nav-toggle-bars::before{top:-5px}
#app .nav-toggle-bars::after{top:5px}
#app.app.nav-open .nav-toggle-bars{background:transparent}
#app.app.nav-open .nav-toggle-bars::before{top:0;transform:rotate(45deg)}
#app.app.nav-open .nav-toggle-bars::after{top:0;transform:rotate(-45deg)}

#app .shell-nav-backdrop{
  display:none;
  border:0;
  padding:0;
  margin:0;
  appearance:none;
  background:rgba(0,0,0,.52);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

#app .google-user{
  display:flex;
  align-items:center;
  gap:9px;
  height:40px;
  padding:4px 7px 4px 11px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

#app .avatar-wrap{
  position:relative;
  width:31px;
  height:31px;
  flex:0 0 31px;
}

#app .user-avatar{
  display:block;
  width:31px;
  height:31px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 0 2px rgba(255,255,255,.025);
  background:#14192a;
}

#app .google-badge{
  position:absolute;
  left:-2px;
  bottom:-2px;
  width:13px;
  height:13px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(0,0,0,.2);
  box-shadow:0 2px 7px rgba(0,0,0,.35);
  font-family:Arial,sans-serif;
  font-size:8px;
  line-height:1;
  font-weight:700;
}

#app .g-blue{
  background:conic-gradient(
    from -45deg,
    #4285F4 0 25%,
    #34A853 25% 50%,
    #FBBC05 50% 75%,
    #EA4335 75% 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

#app .signed-user-name{
  font-family:"Google Sans Hebrew","Google Sans","Helvetica Neue",Arial,sans-serif;
  font-size:12px;
  font-weight:500;
  color:rgba(241,245,251,.9);
  direction:ltr;
  white-space:nowrap;
  letter-spacing:-.01em;
}

#app .logout-icon{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:rgba(201,209,222,.62);
  cursor:pointer;
  transition:.2s ease;
}

#app .logout-icon:hover{
  color:#fff;
  background:rgba(255,255,255,.055);
}

#app .logout-icon svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#app .new-client,
#app button.new-client{
  border:0;
  border-radius:999px;
  background:#f4f7fb;
  color:#0b0e13;
  padding:11px 18px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:.25s ease;
  box-shadow:0 8px 28px rgba(255,255,255,.08);
}
#app .new-client:hover{transform:translateY(-1px);box-shadow:0 10px 32px rgba(255,255,255,.14)}

#app .page-head{
  max-width:1180px;
  margin:0 auto 28px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  direction:rtl;
}
#app .page-head h1{
  margin:0;
  font-size:28px;
  letter-spacing:-.04em;
  font-weight:500;
  text-wrap:balance;
}
#app .page-head p{
  margin:6px 0 0;
  color:#7f8999;
  font-size:13px;
  text-wrap:balance;
}
#app.app.is-overview .page-head{display:none}

#app .shell-body.content{
  max-width:none;
  margin:0 auto;
  padding:0;
  flex:1 0 auto;
}

#app.app:not(.is-overview) .shell-body.content{
  max-width:1180px;
}

#app .hero{
  max-width:1060px;
  margin:0 auto 44px;
  text-align:center;
}
#app .hero h1{
  margin:0;
  font-size:clamp(42px,5.2vw,78px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:500;
  background:linear-gradient(90deg,#5f6671 0%,#d3d7df 34%,#ffffff 58%,#818996 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-wrap:balance;
}
#app .hero p{
  margin:18px auto 0;
  color:#7f8999;
  font-size:15px;
  max-width:660px;
  line-height:1.7;
  text-wrap:balance;
}
#app.app:not(.is-overview) .hero{display:none}

#app .ref-dashboard{
  width:min(936px,100%);
  max-width:none;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:27px;
  direction:ltr;
}

#app .ref-top-row{
  display:grid;
  grid-template-columns:repeat(3, 294px);
  gap:27px;
  justify-content:center;
}

#app .ref-bottom-row{
  display:grid;
  grid-template-columns:294px 374px 214px;
  gap:27px;
  justify-content:center;
}

#app .ref-card{
  position:relative;
  overflow:hidden;
  padding:0;
  border-radius:15px;
  background:#020710;
  border:1px solid rgba(39,89,192,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(4,14,34,.85);
  transform:none !important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  direction:rtl;
  cursor:pointer;
  appearance:none;
  width:100%;
  text-align:inherit;
  font:inherit;
  color:inherit;
}

#app .ref-top-card{
  width:294px;
  height:372px;
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}

#app .ref-top-1{background-image:url("/assets/dashboard-concept/ref-top-1.webp")}
#app .ref-top-2{
  background-color:#020710;
  background-image:none;
}
#app .ref-card-video{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  pointer-events:none;
  display:block;
}

@media (prefers-reduced-motion:reduce){
  #app .ref-card-video{display:none}
  #app .ref-top-2{background-image:url("/assets/dashboard-concept/ref-top-2.webp");background-size:cover;background-position:center}
}
#app .ref-top-3{
  background-color:#020710;
  background-image:url("/assets/dashboard-concept/ref-top-3-click.jpg");
  background-size:118% auto;
  background-position:center 8%;
  background-repeat:no-repeat;
}

#app .ref-card-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(2,7,16,0) 0%,
      rgba(2,7,16,.02) 49%,
      rgba(2,7,16,.84) 68%,
      #020710 82%,
      #020710 100%
    );
  pointer-events:none;
}

#app .ref-card-copy{
  position:absolute;
  z-index:2;
  right:26px;
  left:26px;
  bottom:23px;
  text-align:right;
}

#app .ref-title{
  font-size:23px;
  line-height:1.03;
  font-weight:400;
  letter-spacing:-.03em;
  color:#f5f7fb;
  text-wrap:balance;
}

#app .ref-sub{
  margin-top:9px;
  max-width:95%;
  font-size:12.5px;
  line-height:1.45;
  color:rgba(242,246,252,.82);
  text-wrap:balance;
}

#app .ref-stat{
  height:187px;
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}

#app .ref-stat-1{background-image:url("/assets/dashboard-concept/ref-stat-1.jpg")}
#app .ref-stat-2{background-image:url("/assets/dashboard-concept/ref-stat-2.jpg")}
#app .ref-stat-3{background-image:url("/assets/dashboard-concept/ref-stat-3.jpg")}

#app .ref-stat-mask{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(1,5,12,0) 0%,
      rgba(1,5,12,.03) 31%,
      rgba(1,5,12,.72) 55%,
      rgba(1,5,12,.96) 76%,
      #01050c 100%
    );
  pointer-events:none;
}

#app .ref-stat-copy{
  position:absolute;
  z-index:2;
  right:24px;
  left:24px;
  bottom:22px;
  text-align:right;
}

#app .ref-number-line{
  display:flex;
  align-items:flex-end;
  gap:12px;
  direction:rtl;
}

#app .ref-number{
  font-size:54px;
  line-height:.88;
  font-weight:400;
  letter-spacing:-.055em;
  color:#fff;
  direction:ltr;
  text-align:right;
}

#app .ref-mini{
  font-size:11px;
  line-height:1.2;
  color:rgba(255,255,255,.9);
  padding-bottom:4px;
  white-space:nowrap;
}
#app .ref-mini strong{font-weight:500;color:#fff}

#app .ref-label{
  margin-top:11px;
  font-size:12px;
  line-height:1.35;
  color:rgba(255,255,255,.92);
  text-wrap:balance;
}

#app .ref-card:hover{
  border-color:rgba(72,130,230,.8);
}

#app .overview-clients{
  max-width:936px;
  margin:28px auto 0;
  border:1px solid rgba(39,89,192,.62);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(6,14,27,.96), rgba(2,7,16,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(4,14,34,.85);
  overflow:hidden;
  position:relative;
}
#app .overview-clients::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 0%, rgba(43,111,255,.14), transparent 30%),
    radial-gradient(circle at 82% 0%, rgba(43,111,255,.08), transparent 24%);
  pointer-events:none;
}
#app .overview-clients::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.025);
  pointer-events:none;
}

#app .clients-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:28px 30px;
  border-bottom:1px solid rgba(62,105,191,.24);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
}
#app .clients-title{
  font-size:18px;
  font-weight:500;
  letter-spacing:-.02em;
  color:#f5f7fb;
  text-wrap:balance;
}
#app .clients-sub{
  font-size:12px;
  color:rgba(224,231,242,.62);
  margin-top:5px;
  text-wrap:balance;
}
#app .overview-clients .new-client{
  background:rgba(255,255,255,.035) !important;
  color:#f5f7fb !important;
  border:1px solid rgba(82,132,230,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 18px rgba(38,100,235,.05) !important;
  padding:8px 13px;
  font-size:12px;
}
#app .overview-clients .new-client:hover{
  transform:none;
  border-color:rgba(94,150,255,.52) !important;
  background:rgba(255,255,255,.05) !important;
}

#app .overview-clients #overviewTable{
  position:relative;
  z-index:1;
}
#app .overview-clients .row{
  border-radius:0;
  background:transparent;
  border-bottom:1px solid rgba(62,105,191,.18);
  grid-template-columns:1.45fr 1.2fr 1fr .75fr;
  padding:20px 30px;
  gap:16px;
}
#app .overview-clients .empty{
  position:relative;
  z-index:1;
  min-height:160px;
  display:grid;
  place-items:center;
  text-align:center;
  color:rgba(194,204,219,.62);
  font-size:13px;
  border:0;
  border-radius:0;
  padding:36px 30px;
  text-wrap:balance;
  background:
    linear-gradient(180deg, rgba(4,10,20,.45), rgba(2,7,16,.72)),
    radial-gradient(circle at 50% 100%, rgba(30,91,219,.08), transparent 46%);
}
#app .overview-clients .row:hover{background:rgba(255,255,255,.03)}
#app .overview-clients .table{border:0;border-radius:0}
@media(max-width:1000px){
  #app .overview-clients .row{grid-template-columns:1.4fr 1fr .7fr .65fr}
  #app .overview-clients .row>*{display:block !important}
}
@media(max-width:640px){
  #app .overview-clients .row{grid-template-columns:1.2fr 1fr .7fr}
  #app .overview-clients .row>*:nth-child(2){display:none !important}
}

#app.app:not(.is-overview) .ref-dashboard,
#app.app:not(.is-overview) .overview-clients{display:none}

#app.app:not(.is-overview) .shell-body.content{
  max-width:1180px;
}

@media (max-width:1180px){
  #app .ref-dashboard{
    width:100%;
    transform:scale(.9);
    transform-origin:top center;
    margin-bottom:-56px;
  }
}

@media (max-width:900px){
  #app .ref-dashboard{
    transform:none;
    margin-bottom:0;
  }
  #app .ref-top-row,
  #app .ref-bottom-row{
    grid-template-columns:minmax(0,1fr);
    width:100%;
    gap:14px;
  }
  #app .ref-top-card,
  #app .ref-stat{
    width:100%;
  }
  #app .ref-top-card{
    height:min(372px, calc((100vw - 32px) * 1.265));
    background-size:cover;
  }
  #app .ref-stat{
    height:187px;
    background-size:cover;
  }
}

@media (max-width:1000px){
  #app .nav-toggle{display:inline-flex}
  #app .shell-nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:90;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
  }
  #app.app.nav-open .shell-nav-backdrop{
    opacity:1;
    pointer-events:auto;
  }
  #app .shell-nav{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:auto;
    width:min(300px, 86vw);
    margin:0;
    padding:88px 18px 28px;
    transform:translateX(-105%);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:6px;
    z-index:100;
    pointer-events:auto;
    background:
      linear-gradient(180deg, rgba(10,18,32,.98), rgba(4,8,14,.98));
    border-right:1px solid rgba(255,255,255,.08);
    box-shadow:24px 0 60px rgba(0,0,0,.45);
    transition:transform .24s ease;
    overflow:auto;
  }
  #app.app.nav-open .shell-nav{transform:translateX(0)}
  #app .shell-nav button{
    width:100%;
    justify-content:flex-start;
    text-align:right;
    padding:14px 16px;
    border-radius:14px;
    font-size:15px;
  }
  #app .topbar{z-index:110}
  #app.app.is-overview .topbar{margin-bottom:28px}
}

@media (max-width:760px){
  #app main.main{
    height:auto;
    min-height:100vh;
    padding:18px 16px 0;
  }
  #app .site-footer-wrap{
    margin-inline:-16px;
    width:calc(100% + 32px);
  }
  #app .topbar{
    margin-bottom:16px;
    gap:10px 12px;
    flex-wrap:nowrap;
  }
  #app .topbar-brand .brand-logo{width:72px}
  #app .signed-user-name{display:none}
  #app .google-user{padding:4px;gap:3px}
  #app .new-client{padding:10px 14px}
  #app .hero{text-align:right}
  #app .hero h1{font-size:44px;line-height:1.02}
}

/* ── site footer (concept) ── */
#app .site-footer-wrap{
  --sf-cyan:#53dcff;
  --sf-violet:#a66cff;
  --sf-muted:#8b95a8;
  width:calc(100% + 104px);
  margin:48px -52px 0;
  flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 0%,rgba(55,103,255,.09),transparent 34%),
    linear-gradient(180deg,#04080e 0%,#02050a 100%);
  border-top:1px solid rgba(255,255,255,.07);
  position:relative;
  overflow:hidden;
}
#app .site-footer-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 20%,rgba(65,173,255,.05),transparent 18%),
    radial-gradient(circle at 82% 30%,rgba(166,108,255,.05),transparent 18%);
  pointer-events:none;
}
#app .site-footer{
  width:min(1180px,92vw);
  margin:0 auto;
  padding:54px 0 34px;
  position:relative;
  z-index:1;
}
#app .site-footer-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}
#app .site-footer-logo{
  width:59px;
  height:auto;
  display:block;
}
#app .site-footer-divider{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  margin:32px 0 28px;
}
#app .site-footer-nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px 42px;
}
#app .site-footer-nav a,
#app .site-footer-nav button,
#app .site-footer-legal a{
  appearance:none;
  background:none;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  font:inherit;
  text-decoration:none;
  color:#d9e0eb;
  transition:color .22s ease, text-shadow .22s ease;
}
#app .site-footer-nav a,
#app .site-footer-nav button{
  font-size:14px;
}
#app .site-footer-nav a:hover,
#app .site-footer-nav button:hover,
#app .site-footer-legal a:hover{
  color:#fff;
  text-shadow:0 0 16px rgba(88,170,255,.22);
}
#app .site-footer-bottom{
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
#app .site-footer-legal{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
#app .site-footer-legal a{
  font-size:11px;
  color:#7f899b;
}
#app .site-footer-copy{
  direction:ltr;
  font-size:11px;
  color:#687285;
}
@media (max-width:900px){
  #app .site-footer-wrap{
    width:calc(100% + 64px);
    margin-inline:-32px;
  }
}
@media (max-width:680px){
  #app .site-footer{padding:42px 0 28px}
  #app .site-footer-nav{gap:14px 24px}
  #app .site-footer-bottom{justify-content:center;text-align:center}
  #app .site-footer-legal{justify-content:center}
}