/* ─── APP SCREENSHOT MOCKUP ─────────────────────────────── */
    .hero-mockup-outer {
      position: relative;
      z-index: 2;
      padding: 0 1rem;
    }

    .browser-frame {
      background: #fff;
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -8px 60px rgba(0,87,255,.1), 0 0 0 1px rgba(0,87,255,.07), 0 40px 80px rgba(0,0,0,.12);
      overflow: hidden;
      max-width: 1100px;
      margin: 0 auto;
    }

    .browser-chrome {
      background: #f0f2f8;
      padding: .55rem 1rem;
      display: flex;
      align-items: center;
      gap: .7rem;
      border-bottom: 1px solid var(--border);
    }

    .b-dots {
      display: flex;
      gap: .35rem;
    }

    .b-dot {
      width: 11px; height: 11px;
      border-radius: 50%;
    }

    .b-dot.r { background: #ff5f57; }
    .b-dot.y { background: #febc2e; }
    .b-dot.g { background: #28c840; }

    .b-url {
      flex: 1;
      background: #fff;
      border-radius: 6px;
      padding: .25rem .75rem;
      font-size: .72rem;
      color: var(--muted);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: .4rem;
    }
    .b-url #urlBar{
      filter: blur(3px);
    }
    .b-url i { color: var(--accent2); font-size: .75rem; }

    /* Browser nav buttons */
    .b-nav-btns {
      display: flex; gap: .2rem; align-items: center;
    }
    .b-nav-btn {
      background: none; border: none; cursor: pointer;
      width: 26px; height: 26px; border-radius: 5px;
      display: flex; align-items: center; justify-content: center;
      color: var(--muted); font-size: .8rem;
      transition: background .12s, color .12s;
    }
    .b-nav-btn:hover { background: rgba(0,87,255,.1); color: var(--primary); }
    .b-nav-btn:disabled { opacity: .3; cursor: not-allowed; }
    .b-nav-btn.spinning i { animation: spin .6s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .b-action-btns { display: flex; gap: .15rem; align-items: center; }
    .b-action-btn {
      background: none; border: none; cursor: pointer;
      width: 26px; height: 26px; border-radius: 5px;
      display: flex; align-items: center; justify-content: center;
      color: var(--muted); font-size: .78rem;
      transition: background .12s, color .12s;
    }
    .b-action-btn:hover { background: rgba(0,87,255,.1); color: var(--primary); }

    /* ─── MAIL APP INSIDE MOCKUP ─────────────────────────────── */


    /* Left sidebar */
    .mail-sidebar {
      background: #fff;
      border-right: 1px solid var(--border);
      padding: .75rem .6rem;
    }

    .mail-logo-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .3rem .4rem .8rem;
    }

    .mail-logo {
      display: flex;
      align-items: center;
      gap: .4rem;
      font-family: var(--h-font);
      font-weight: 800;
      font-size: .85rem;
      color: var(--text);
    }
    .mail-logo img{
      width: 100%;
    }

    .mail-logo-sq {
      width: 26px; height: 26px;
      background: var(--primary);
      border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      font-size: .7rem;
    }

    .browser-frame .compose-btn {
      background: #d3e3fd;
      color: #171616;
      border-radius: 8px;
      padding: .35rem .75rem;
      font-size: .72rem;
      font-family: 'Jost-SemiBold';
      /* font-weight: 700; */
      font-family: var(--h-font);
      display: flex;
      align-items: center;
      gap: .3rem;
      width: 100%;
      margin-bottom: .7rem;
      border: none;
      cursor: pointer;
    }

    .ms-item {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .38rem .5rem;
      border-radius: 7px;
      color: var(--text);
      font-size: .76rem;
      cursor: pointer;
      transition: background .15s;
      position: relative;
    }

    .ms-item:hover { background: var(--bg-soft); }
    .ms-item.active {
      background: #05a4ef;
      color: #ffffff;
      font-family: 'Jost-SemiBold';
    }
    .ms-item i { font-size: .88rem; width: 16px; }

    .ms-badge {
      margin-left: auto;
      background: #0a88c3;
      color: #fff;
      font-size: .58rem;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 20px;
    }

    .ms-divider {
      height: 1px;
      background: var(--border);
      margin: .5rem 0;
    }

    .ms-label {
      font-size: .62rem;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--muted);
      padding: .5rem .5rem .2rem;
      font-weight: 700;
      font-family: var(--h-font);
    }

    /* Email list */
    .mail-list {
      border-right: 1px solid var(--border);
      background: #fafbff;
      display: flex;
      flex-direction: column;
    }

    .ml-toolbar {
      padding: .55rem .75rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: .5rem;
      background: #fff;
    }

    .ml-search {
      flex: 1;
      background: var(--bg-soft);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: .28rem .65rem;
      font-size: .72rem;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: .35rem;
    }

    .ml-search input {
      border: none;
      background: transparent;
      outline: none;
      font-size: .72rem;
      color: var(--text);
      width: 100%;
    }

    .ml-item {
      padding: .65rem .75rem;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      transition: background .15s;
      position: relative;
    }

    .ml-item:hover { background: #fff; }
    .ml-item.active { background: #fff; border-left: 3px solid var(--primary); }
    .ml-item.unread .ml-subject { font-weight: 700; color: var(--text); }

    .ml-top {
      display: flex;
      align-items: center;
      gap: .5rem;
      margin-bottom: .18rem;
    }

    .ml-av {
      width: 28px; 
      height: 28px;
      border-radius: 50%;
      display: flex; 
      align-items: center; 
      justify-content: center;
      font-size: .65rem;
      color: #fff;
      font-family: 'Jost-SemiBold';
      flex-shrink: 0;
    }

    .ml-sender {
      font-size: .74rem;
      font-family: 'Jost-SemiBold';
      color: var(--text);
      flex: 1;
    }

    .ml-date {
      font-size: .65rem;
      color: var(--muted);
      white-space: nowrap;
    }

    .ml-subject {
      font-size: .74rem;
      color: var(--text);
      margin-bottom: .1rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ml-preview {
      font-size: .68rem;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ml-size {
      font-size: .62rem;
      color: var(--muted);
    }

    .ml-attach { color: var(--muted); font-size: .72rem; }

    /* Email reader */
    .mail-reader {
      background: #fff;
      padding: 1.4rem 1.8rem;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .mr-toolbar {
      display: flex;
      align-items: center;
      gap: .6rem;
      margin-bottom: 1rem;
      padding-bottom: .75rem;
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap;
    }

    .mr-tb-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .12rem;
      cursor: pointer;
      color: var(--text);
    }

    .mr-tb-btn i { font-size: 1rem; }
    .mr-tb-btn span { font-size: .6rem; color: var(--muted); }
    .mr-tb-sep { width: 1px; height: 28px; background: var(--border); }

    .mr-subject {
      font-family: var(--h-font);
      font-size: 1.05rem;
      font-family: "Jost-SemoBold";
      margin-bottom: .5rem;
      display: flex;
      align-items: center;
      gap: .5rem;
    }

    .mr-subject .lock-icon {
      font-size: .8rem;
      color: var(--accent2);
    }

    .mr-from-row {
      display: flex;
      align-items: center;
      gap: .6rem;
      margin-bottom: .9rem;
    }

    .mr-av {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--bg-soft);
      display: flex; align-items: center; justify-content: center;
      font-size: .9rem;
      color: var(--muted);
      flex-shrink: 0;
      border: 1px solid var(--border);
    }

    .mr-from-info { flex: 1; }
    .mr-from-email { font-size: .78rem; font-weight: 600; color: var(--primary); }
    .mr-from-date { font-size: .7rem; color: var(--muted); }

    .mr-detail-links {
      display: flex;
      gap: .6rem;
    }

    .mr-detail-link {
      font-size: .72rem;
      color: var(--primary);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: .2rem;
    }

    .mr-body {
      font-size: .82rem;
      color: var(--text);
      line-height: 1.75;
      flex: 1;
    }

    .mr-body p { margin-bottom: .5rem; }

    .mr-list {
      margin: .4rem 0;
      padding-left: 1rem;
    }

    .mr-list li {
      margin-bottom: .3rem;
      font-size: .8rem;
    }

    .mr-link {
      color: var(--primary);
      font-size: .78rem;
      word-break: break-all;
    }

    .mr-sig {
      font-size: .8rem;
      margin-top: .6rem;
      line-height: 1.6;
    }

    .mr-reply-thread {
      background: var(--bg-soft);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: .9rem 1rem;
      margin-top: .8rem;
    }

    .mr-thread-from { font-size: .72rem; margin-bottom: .35rem; }
    .mr-thread-from a { color: var(--primary); font-weight: 600; }
    .mr-thread-body { font-size: .78rem; color: var(--text); line-height: 1.65; }

    .mr-footer-btns {
      display: flex;
      gap: .6rem;
      margin-top: auto;
      padding-top: .8rem;
      border-top: 1px solid var(--border);
      flex-wrap: wrap;
    }

    .mrf-btn {
      font-size: .72rem;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: .25rem;
      cursor: pointer;
      transition: color .15s;
    }

    .mrf-btn:hover { color: var(--primary); }
    .mrf-btn.print { color: var(--muted); }

    /* ─── FEATURE BADGES (floating) ────────────────────────── */
    .hero-app-features {
      display: flex;
      justify-content: center;
      gap: .65rem;
      flex-wrap: wrap;
      margin-bottom: 1.2rem;
    }

    .app-feature-chip {
      background: rgba(255,255,255,.88);
      border: 1px solid var(--border);
      border-radius: 50px;
      padding: .32rem .85rem;
      font-size: .78rem;
      font-family: var(--h-font);
      display: flex;
      align-items: center;
      gap: .35rem;
      backdrop-filter: blur(6px);
      transition: all .2s;
      cursor: pointer;
    }

    .app-feature-chip:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--primary-light);
    }

    .chip-icon {
      width: 22px; height: 22px;
      border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      font-size: .7rem;
      color: #fff;
    }

    /* ─── STATS BAR ─────────────────────────────────────────── */
    .stats-bar {
      background: var(--dark);
      padding: 2.2rem 0;
    }

    .stat-block { text-align: center; }

    .stat-num {
      font-family: var(--h-font);
      font-size: 2.1rem;
      font-weight: 900;
      color: #fff;
      line-height: 1;
      margin-bottom: .2rem;
    }

    .stat-num span { color: var(--primary); }

    .stat-lbl {
      font-size: .8rem;
      color: rgba(255,255,255,.5);
    }

    .stat-sep {
      width: 1px;
      background: rgba(255,255,255,.1);
    }

    /* ─── CTA ───────────────────────────────────────────────── */
    .cta-section {
      background: linear-gradient(135deg, #0057ff 0%, #003ecc 55%, #002899 100%);
      padding: 5.5rem 0;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .cta-section::before {
      content:'';
      position:absolute; inset:0;
      background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(255,255,255,.1) 0%, transparent 60%);
    }

    .cta-section h2 {
      font-size: clamp(2rem, 4.5vw, 3.2rem);
      font-weight: 900;
      color: #fff;
      letter-spacing: -.03em;
      margin-bottom: .75rem;
    }

    .cta-section p { color: rgba(255,255,255,.72); margin-bottom: 2rem; }

    .btn-cta-white {
      background: #fff;
      color: var(--primary);
      font-family: var(--h-font);
      font-weight: 700;
      padding: .85rem 2.5rem;
      border-radius: 50px;
      border: none;
      font-size: 1rem;
      transition: all .2s;
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      text-decoration: none;
      box-shadow: 0 8px 28px rgba(0,0,0,.18);
    }

    .btn-cta-white:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 36px rgba(0,0,0,.24);
      color: var(--primary-dark);
    }


    /* ─── RESPONSIVE ─────────────────────────────────────────── */
    @media (max-width: 991px) {
      .mail-app { grid-template-columns: 155px 1fr; }
      .mail-reader { display: none; }
    }

    @media (max-width: 767px) {
      .mail-app { grid-template-columns: 1fr; min-height: auto; }
      .mail-sidebar { display: none; }
      .mail-list { max-height: 320px; overflow-y: auto; }
      .step-connector { display: none; }
      .hero h1 { font-size: 2.4rem; }
    }

    @media (max-width: 575px) {
      .stat-num { font-size: 1.6rem; }
      .price-amount { font-size: 2rem; }
    }

    /* ─── RESPONSIVE HERO MOCKUP ────────────────────────────────── */
    @media (max-width: 768px) {
      .hero-mockup-outer { padding: 0 0; }
      .browser-frame { border-radius: 10px 10px 0 0; }
     
      .mail-sidebar { display: none !important; }
      .mail-list { max-height: 280px; }
      .b-url span { font-size: .6rem; }
    }
    @media (max-width: 480px) {
      .app-view-tabs { gap: .25rem; }
      .avt { padding: .28rem .55rem; font-size: .7rem; }
      .avt i { font-size: .75rem; }
      .browser-chrome { padding: .4rem .55rem; gap: .4rem; }
      .compose-win { width: calc(100% - .5rem) !important; right: .25rem !important; }
      .mr-toolbar { flex-wrap: wrap; }
      .mr-tb-btn span { display: none; }
    }
    .in-app-toast {
      position: absolute; bottom: 1rem; left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: var(--dark); color: #fff;
      padding: .45rem 1.1rem; border-radius: 50px;
      font-size: .78rem; font-weight: 600;
      font-family: var(--h-font); z-index: 800;
      opacity: 0; transition: all .25s ease;
      display: flex; align-items: center; gap: .4rem;
      box-shadow: 0 4px 20px rgba(0,0,0,.25);
      white-space: nowrap; pointer-events: none;
    }
    .in-app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    .in-app-toast.success { background: #1a7a4a; }
    .in-app-toast.error   { background: #c0392b; }
    /* ─── INTERACTIVE APP STYLES ──────────────────── */
    @keyframes slideInLeft {
      from { opacity:0; transform:translateX(-12px); }
      to   { opacity:1; transform:translateX(0); }
    }
    @keyframes fadeIn {
      from { opacity:0; }
      to   { opacity:1; }
    }
    @keyframes slideUpIn {
      from { opacity:0; transform:translateY(20px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes slideDownOut {
      from { opacity:1; transform:translateY(0); }
      to   { opacity:0; transform:translateY(20px); }
    }

    /* App View Tabs */
    .app-view-tabs {
      display:flex; gap:.4rem; justify-content:center;
      margin-bottom:.65rem; flex-wrap:wrap;
    }
    .avt {
      background:rgba(255,255,255,.75); border:1px solid var(--border);
      border-radius:50px; padding:.32rem .9rem; font-size:.78rem;
      font-weight:600; font-family:var(--h-font); cursor:pointer;
      display:flex; align-items:center; gap:.35rem;
      transition:all .18s; backdrop-filter:blur(6px);
    }
    .avt:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
    .avt.active { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 3px 12px rgba(0,87,255,.3); }

    /* App views */
    .app-view { display:none; }
    .app-view.active-view { display:block; animation:fadeIn .2s ease; }

    /* Calendar App */

    
    .cal-sidebar {
      background:#fafbff; border-right:1px solid var(--border);
      padding:.75rem .65rem; overflow-y:auto;
    }
    .cal-month-nav {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:.6rem;
    }
    .cal-nav-btn {
      background:none; border:none; cursor:pointer; color:var(--muted);
      padding:.2rem .4rem; border-radius:5px; transition:background .15s;
    }
    .cal-nav-btn:hover { background:var(--primary-light); color:var(--primary); }
    .cal-mini { font-size:.68rem; }
    .cal-mini-days {
      display:grid; grid-template-columns:repeat(7,1fr);
      text-align:center; color:var(--muted); font-weight:700;
      margin-bottom:.2rem;
    }
    .cal-mini-dates {
      display:grid; grid-template-columns:repeat(7,1fr); gap:1px;
    }
    .cal-mini-date {
      text-align:center; padding:.18rem;
      border-radius:50%; cursor:pointer; transition:all .12s;
      position:relative;
    }
    .cal-mini-date:hover { background:var(--primary-light); color:var(--primary); }
    .cal-mini-date.today { background:var(--primary); color:#fff; font-weight:700; }
    .cal-mini-date.selected { outline:2px solid var(--primary); }
    .cal-mini-date.has-event::after {
      content:''; position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
      width:4px; height:4px; border-radius:50%; background:var(--accent);
    }
    .cal-legend-item {
      display:flex; align-items:center; gap:.4rem;
      font-size:.76rem; padding:.25rem .4rem; border-radius:5px;
    }
    .cal-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .cal-main {
      background:#fff; padding:1rem 1.2rem;
      display:flex; flex-direction:column; gap:.8rem;
    }
    .cal-main-header {
      display:flex; align-items:center; justify-content:space-between; gap:.6rem;
    }
    .cal-view-btns { display:flex; gap:.3rem; }
    .cvb {
      background:none; border:1px solid var(--border); border-radius:6px;
      padding:.2rem .55rem; font-size:.72rem; cursor:pointer;
      font-family:var(--h-font); font-weight:600; transition:all .15s;
    }
    .cvb:hover { background:var(--primary-light); border-color:var(--primary); color:var(--primary); }
    .cvb.active { background:var(--primary); color:#fff; border-color:var(--primary); }
    .cal-grid-header {
      display:grid; grid-template-columns:repeat(7,1fr);
      text-align:center; font-size:.7rem; font-weight:700;
      color:var(--muted); border-bottom:1px solid var(--border);
      padding-bottom:.3rem; margin-bottom:.2rem;
    }
    .cal-grid-body {
      display:grid; grid-template-columns:repeat(7,1fr);
      gap:1px; flex:1; background:var(--border);
    }
    .cal-cell {
      background:#fff; min-height:68px; padding:.3rem .35rem;
      cursor:pointer; transition:background .12s; overflow:hidden;
      position:relative;
    }
    .cal-cell:hover { background:#f8f9ff; }
    .cal-cell.today .cal-day-num {
      background:var(--primary); color:#fff; border-radius:50%;
      width:22px; height:22px; display:flex; align-items:center; justify-content:center;
    }
    .cal-cell.selected { background:var(--primary-light); }
    .cal-cell.empty { background:#f8f8f8; }
    .cal-day-num { font-size:.72rem; font-weight:600; margin-bottom:.2rem; width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
    .cal-event-pill {
      font-size:.6rem; color:#fff; border-radius:4px; padding:1px 5px;
      margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      font-weight:600; cursor:pointer;
    }
    .cal-event-more { font-size:.58rem; color:var(--muted); padding-left:3px; }

    /* Event modal */
    .event-modal {
      position:absolute; inset:0; background:rgba(0,0,0,.4);
      display:flex; align-items:center; justify-content:center;
      z-index:500; border-radius:0 0 16px 16px;
    }
    .event-modal-inner {
      background:#fff; border-radius:16px; padding:1.5rem;
      width:320px; box-shadow:0 20px 60px rgba(0,0,0,.2);
      display:flex; flex-direction:column; gap:.6rem;
      animation:slideUpIn .2s ease;
    }
    .event-modal-header {
      display:flex; justify-content:space-between; align-items:center;
    }
    .event-input {
      border:1px solid var(--border); border-radius:8px;
      padding:.45rem .7rem; font-size:.8rem; outline:none;
      width:100%; font-family:var(--b-font);
      transition:border-color .15s;
    }
    .event-input:focus { border-color:var(--primary); }

    /* Drive App */

    .drive-sidebar {
      background:#fafbff; border-right:1px solid var(--border);
      padding:.75rem .65rem;
    }
    .drive-main { padding:1rem 1.2rem; overflow-y:auto; }
    .drive-toolbar {
      display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem;
    }
    .drive-view-btn {
      background:none; border:1px solid var(--border); border-radius:7px;
      padding:.28rem .5rem; cursor:pointer; font-size:.82rem; color:var(--muted);
      transition:all .15s;
    }
    .drive-view-btn.active, .drive-view-btn:hover {
      background:var(--primary-light); color:var(--primary); border-color:var(--primary);
    }
    .drive-section-label {
      font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
      color:var(--muted); font-weight:700; margin-bottom:.5rem;
      font-family:var(--h-font);
    }
    .drive-grid {
      display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
      gap:.6rem; margin-bottom:.5rem;
    }
    .drive-file-card {
      background:var(--bg-soft); border:1px solid var(--border);
      border-radius:10px; padding:.7rem .5rem; text-align:center;
      cursor:pointer; transition:all .18s;
    }
    .drive-file-card:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,87,255,.1); border-color:rgba(0,87,255,.2); }
    .drive-file-name { font-size:.65rem; font-weight:600; margin-top:.35rem; word-break:break-word; line-height:1.3; }
    .drive-file-meta { font-size:.58rem; color:var(--muted); margin-top:.15rem; }
    .drive-list-item {
      display:flex; align-items:center; gap:.6rem;
      padding:.45rem .4rem; border-bottom:1px solid var(--border);
      cursor:pointer; transition:background .12s; border-radius:6px;
    }
    .drive-list-item:hover { background:var(--bg-soft); }

    /* Notes App */
  
    .notes-sidebar {
      background:#fafbff; border-right:1px solid var(--border); padding:.75rem .65rem;
    }
    .notes-list {
      border-right:1px solid var(--border); background:#fff;
      overflow-y:auto;
    }
    .note-list-item {
      padding:.7rem .75rem; border-bottom:1px solid var(--border);
      cursor:pointer; transition:background .12s;
    }
    .note-list-item:hover { background:#f8f9ff; }
    .note-list-item.active { background:var(--primary-light); border-left:3px solid var(--primary); }
    .note-tag {
      font-size:.6rem; font-weight:700; padding:1px 7px;
      border-radius:20px; font-family:var(--h-font);
    }
    .notes-editor {
      background:#fff; position:relative;
      overflow-y:auto; display:flex; flex-direction:column;
    }

    /* Tasks App */

    .tasks-sidebar {
      background:#fafbff; border-right:1px solid var(--border); padding:.75rem .65rem;
    }
    .tasks-main {
      padding:1rem 1.2rem; display:flex; flex-direction:column;
    }
    .tasks-header {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:.8rem; padding-bottom:.6rem; border-bottom:1px solid var(--border);
    }
    .task-item {
      display:flex; align-items:center; gap:.6rem;
      padding:.55rem .4rem; border-radius:8px; transition:background .12s;
    }
    .task-item:hover { background:var(--bg-soft); }
    .task-item.done .task-text { text-decoration:line-through; color:var(--muted); }
    .task-check {
      width:18px; height:18px; border-radius:50%; border:2px solid var(--border);
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      flex-shrink:0; transition:all .15s;
    }
    .task-check:hover { border-color:var(--primary); }
    .task-check.checked { background:var(--accent2); border-color:var(--accent2); }
    .task-text { flex:1; font-size:.8rem; }
    .task-due { font-size:.68rem; color:var(--muted); white-space:nowrap; }
    .task-priority {
      font-size:.6rem; font-weight:700; padding:1px 6px;
      border-radius:20px; white-space:nowrap; font-family:var(--h-font);
    }
    .task-del {
      opacity:0; transition:opacity .15s;
    }
    .task-item:hover .task-del { opacity:1; }
    .new-task-input-row {
      display:flex; align-items:center; gap:.6rem;
      padding:.6rem .4rem; border-top:1px solid var(--border); margin-top:auto;
    }

    /* Compose Windows */
    .compose-win {
      position:absolute; bottom:0; z-index:600; width:300px;
      background:#fff; border-radius:12px 12px 0 0;
      box-shadow:0 -4px 30px rgba(0,0,0,.18);
      border:1px solid var(--border); overflow:hidden;
    }
    .compose-header {
      background: #f2f6fc;
      color: #484444;
      padding:.5rem .85rem; display:flex;
      align-items:center; justify-content:space-between;
      cursor:pointer; border-radius:12px 12px 0 0;
    }
    .compose-header span { font-size:.8rem; font-family: "Jost-Medium";}
    .compose-body { display:flex; flex-direction:column; }
    .compose-field {
      border:none; border-bottom:1px solid var(--border);
      padding:.45rem .75rem; font-size:.78rem; outline:none;
      font-family:var(--b-font); color:var(--text);
    }
    .compose-toolbar-row {
      display:flex; gap:.2rem; padding:.3rem .6rem;
      border-bottom:1px solid var(--border); background:var(--bg-soft);
    }
    .ctbtn {
      background:none; border:none; cursor:pointer;
      padding:.2rem .3rem; border-radius:4px; color:var(--muted);
      font-size:.82rem; transition:all .12s;
    }
    .ctbtn:hover { background:var(--primary-light); color:var(--primary); }
    .compose-textarea {
      min-height:120px; padding:.6rem .75rem;
      font-size:.78rem; outline:none; font-family:var(--b-font);
      color:var(--text); line-height:1.65;
    }
    .compose-textarea:empty::before {
      content:attr(placeholder); color:var(--muted);
    }
    .compose-footer {
      display:flex; align-items:center; justify-content:space-between;
      padding:.45rem .75rem; border-top:1px solid var(--border);
      background:var(--bg-soft);
    }
    .compose-send-btn {
      background:var(--primary); color:#fff; border:none;
      border-radius:50px; padding:.32rem .9rem; font-size:.75rem;
      font-weight:700; cursor:pointer; font-family:var(--h-font);
      display:flex; align-items:center; gap:.3rem;
      transition:all .15s;
    }
    .compose-send-btn:hover { background:var(--primary-dark); }

    /* Compose maximized state - controlled entirely by JS */
    .compose-maximized .compose-textarea {
      min-height: 220px !important;
    }

    /* Icon btn */
    .icon-btn {
      background:none; border:none; cursor:pointer;
      color:var(--muted); font-size:.82rem; padding:.18rem .3rem;
      border-radius:5px; transition:all .12s; display:flex; align-items:center;
    }
    .icon-btn:hover { background:var(--primary-light); color:var(--primary); }

    /* Toast - Global (kept for non-mail sections) */
    .app-toast {
      position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%) translateY(20px);
      background:var(--dark); color:#fff; padding:.55rem 1.2rem;
      border-radius:50px; font-size:.82rem; font-weight:600;
      font-family:var(--h-font); z-index:9999;
      opacity:0; transition:all .25s ease;
      display:flex; align-items:center; gap:.4rem;
      box-shadow:0 6px 24px rgba(0,0,0,.25);
      pointer-events: none;
    }
    .app-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

    /* Reader styles */
    .mr-toolbar { display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; padding-bottom:.6rem; border-bottom:1px solid var(--border); flex-wrap:wrap; }
    .mr-tb-btn { display:flex; flex-direction:column; align-items:center; gap:.1rem; cursor:pointer; color:var(--text); transition:color .15s; }
    .mr-tb-btn:hover { color:var(--primary); }
    .mr-tb-btn i { font-size:.9rem; }
    .mr-tb-btn span { font-size:.58rem; color:var(--muted); }
    .mr-tb-sep { width:1px; height:26px; background:var(--border); }
    .mr-subject { font-family:var(--h-font); font-size:1rem; font-family:"Jost-SemiBold"; margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; }
    .lock-icon { font-size:.78rem; color:var(--accent2); }
    .mr-from-row { display:flex; align-items:center; gap:.6rem; margin-bottom:.75rem; }
    .mr-av { width:34px; height:34px; border-radius:50%; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; font-size:.85rem; color:var(--muted); flex-shrink:0; border:1px solid var(--border); }
    .mr-from-email { font-size:.75rem; font-family: 'Jost-Medium'; color:var(--primary); }
    .mr-from-date { font-size:.68rem; color:var(--muted); }
    .mr-body { font-size:.8rem; color:var(--text); line-height:1.75; flex:1; overflow-y:auto; }
    .mr-body p { margin-bottom:.45rem; }
    .mr-footer-btns { display:flex; gap:.6rem; padding-top:.65rem; border-top:1px solid var(--border); flex-wrap:wrap; }
    .mrf-btn { font-size:.72rem; color:var(--muted); display:flex; align-items:center; gap:.25rem; cursor:pointer; transition:color .12s; }
    .mrf-btn:hover { color:var(--primary); }

    /* Responsive */
    @media (max-width:991px) {
 
      .mail-reader { display: none; }
    }
    @media (max-width:767px) {
      .cal-sidebar, .drive-sidebar, .tasks-sidebar, .notes-sidebar { display:none; }

      
      .compose-win { width:calc(100% - 1rem) !important; right:.5rem !important; }
      
      .mail-sidebar { display: none; }
      .mail-list { max-height: 300px; overflow-y: auto; }
      .browser-frame { border-radius: 12px 12px 0 0; }
      .b-action-btns { display: none; }
      .b-nav-btns .b-nav-btn:nth-child(n+3) { display: none; }
    }
    @media (max-width: 480px) {
      .compose-win { width: 100% !important; right: 0 !important; border-radius: 12px 12px 0 0; }
      .mr-tb-btn span { display: none; }
      .mr-toolbar { gap: .4rem; }
    }




  .contact-sidebar{
    background: #fafbff;
    border-right: 1px solid var(--border);
    padding: .75rem .65rem;
  }
 .contact-contacts {
    border-right: 1px solid #e1e1e1;
  }

  .contact-main {
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
  }

.contact-Searchbars{
  margin: 10px 6px;
  display: flex;
  align-items: center;
  background: #f1f3f4;
  border-radius: 20px;
  padding: 5px 12px;
  gap: 6px;
  flex: 1;
  font-size: 0.7rem;
}

.contact-Searchbars svg {
    width: 13px;
    height: 13px;
    fill: #5f6368;
    flex-shrink: 0;
}

ul.contact-contactsCntlist {
  list-style-type: none;
  padding-left: 0px;

}
ul.contact-contactsCntlist li{
  font-family: "Jost-Regular";
  font-size: 0.8rem;
  padding: 6px 10px;
}

ul.contact-contactsCntlist li.contACtive{
  background: #e8f0ff;
}

.contact-main ul{
    list-style-type: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    margin-bottom: 0;
    padding: 5px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50px;
}

.contact-main ul li{
  text-align: center;
}
.contact-main ul li i{
  font-size: 0.8rem;
}
.contact-main ul li .mainappnames{
  font-size: 0.6rem;
  margin-top: -2px;
}

.greatIconGrp {
  display: grid;
  grid-template-columns: 120px  1fr;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}

.greatIconGrp .greatIconGrpImg{
  background: #e8f0ff;
  color: #4ca5e7;
  text-align: center;
  font-size: 5rem;
  border-radius: 10px;
}

.greatIconGrp .greatIconGrpImgDet {
  padding: 1rem;
  margin-top: auto;
  margin-bottom: auto;
}

.greatIconGrp .greatIconGrpImgDet .greatIconnmae{
  font-family: 'Jost-SemiBold';
  font-size: 1.2rem;
}

.greatIconGrp .greatIconGrpImgDet .greatItxts{
  font-size: 0.8rem;
}




  .notey_afterclass_app { display: flex;  background: #f0f2f5; }
  .notey_afterclass_sidebar { width: 190px; min-width: 200px; background: #e0e7f0; display: flex; flex-direction: column; border-right: 1px solid #d0d3dc; }
  .notey_afterclass_sidebar_header { 
    padding: 14px 16px; 
    display: flex; 
    align-items: center; 
    gap: 8px;     
    padding: 12px 16px;
    border-bottom: 1px solid #d0d3dc;
    background: #fff;
    border-radius: 12px;
    margin: 10px;
  }
  .notey_afterclass_logo_icon { width: 28px; height: 28px; }
  .notey_afterclass_brand { font-size: 15px; font-weight: 700; color: #333; }
  .notey_afterclass_actions {  
    display: flex;
    gap: 8px;
    padding: 4px 11px;
    border-bottom: 1px solid #d0d3dc;
    background: #fff;
    border-radius: 12px;
    margin: 0 10px 8px 10px;
  }
  .notey_afterclass_btn_action { 
    flex-direction: column;
    align-items: center;
    /* gap: 3px; */
    background: #fff;
    border: 0px solid #ccc;
    border-radius: 8px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 11px;
    color: #444;
    padding: 0;
    min-width: 50%;
  }
  .notey_afterclass_btn_action svg { width: 16px; height: 16px; }
  .notey_afterclass_search { 
        /* margin: 10px 12px; */
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #ccc;
    /* border-radius: 20px; */
    padding: 6px 12px;
  }
  .notey_afterclass_search input { border: none; outline: none; font-size: 13px; width: 100%; background: transparent; color: #555; }
  .notey_afterclass_search svg { width: 14px; height: 14px; color: #888; flex-shrink: 0; }
  .notey_afterclass_note_item { padding: 10px 14px; border-bottom: 1px solid #d8dae2; cursor: pointer; background: #dde0ea; }
  .notey_afterclass_note_item:hover { background: #d2d5e0; }
  .notey_afterclass_note_meta { font-size: 11px; color: #888; text-align: right; margin-bottom: 2px; }
  .notey_afterclass_note_name { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #333; }
  .notey_afterclass_note_size { font-size: 11px; color: #aaa; text-align: right; margin-top: 2px; }
  .notey_afterclass_main { flex: 1; display: flex; flex-direction: column; background: #fff; }
  .notey_afterclass_topbar { 
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 5px;
    border-bottom: 1px solid #d0d3dc;
    background: #fff;
    border-radius: 12px;
    margin: 10px;
    box-shadow: 0 0 4px 0px rgb(34 50 72 / 19%);
   }
  .notey_afterclass_topbar_btn { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: #444; cursor: pointer; background: none; border: none; padding: 4px 6px; }
  .notey_afterclass_topbar_btn svg { width: 16px; height: 16px; }
  .notey_afterclass_topbar_spacer { flex: 1; }
  .notey_afterclass_avatar { width: 32px; height: 32px; border-radius: 50%; background: #bbb; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .notey_afterclass_grid_icon { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; width: 16px; height: 16px; }
  .notey_afterclass_grid_dot { width: 4px; height: 4px; background: #555; border-radius: 1px; }
  .notey_afterclass_content { flex: 1; padding: 30px 40px; overflow-y: auto; }
  .notey_afterclass_field_label { font-size: 14px; color: #444; margin-bottom: 8px; }
  .notey_afterclass_title_input { width: 100%; border: 1px solid #ccc; border-radius: 4px; padding: 5px 14px; font-size: 14px; color: #333; outline: none; margin-bottom: 30px; }
  .notey_afterclass_title_input:focus { border-color: #aaa; }
  .notey_afterclass_content_label { font-size: 22px; font-weight: 400; color: #333; margin-bottom: 14px; }
  .notey_afterclass_textarea { width: 100%; height: 240px; border: 1px solid #ccc; border-radius: 4px; padding: 12px 14px; font-size: 14px; color: #444; line-height: 1.6; outline: none; resize: vertical; font-family: Arial, sans-serif; }
  .notey_afterclass_textarea:focus { border-color: #aaa; }
  .notey_afterclass_footer { display: flex; justify-content: space-between; align-items: center; padding: 16px 40px 20px; background: #fff; }
  .notey_afterclass_cancel_btn { display: flex; align-items: center; gap: 6px; background: linear-gradient(117deg, #606d72 30%, #8b9fa7 100%); color: #fff; border: none; border-radius: 20px; padding: 9px 20px; font-size: 14px; cursor: pointer; }
  .notey_afterclass_update_btn { display: flex; align-items: center; gap: 6px; background: linear-gradient(117deg, #01aafb 30%, #1987ba 100%); color: #fff; border: none; border-radius: 20px; padding: 9px 22px; font-size: 14px; cursor: pointer; }


  .mocup-notes-img{
    display: none;
  }

  @media (max-width: 600px) {
  .mocup-notes-img{
    display: block;
  }
  .notey_afterclass_app{
    display: none;
  }
}