/* ==========================================================================
   Q-One v1.4.0 — Mobile-First UI System
   Scope: official website, auth, dashboard/editor, admin, public client page.
   Loaded LAST on every user-facing page.
   ========================================================================== */

:root{
  --q14-cyan:#56C2E4;
  --q14-cyan-soft:#EAF8FC;
  --q14-navy:#2E4263;
  --q14-navy-deep:#14263E;
  --q14-text:#20364F;
  --q14-muted:#75879A;
  --q14-line:#DFE8EE;
  --q14-bg:#F4F8FB;
  --q14-card:#FFFFFF;
  --q14-danger:#B83C4A;
  --q14-success:#16835D;
  --q14-radius:18px;
  --q14-shadow:0 10px 32px rgba(31,55,80,.07);
  --q14-safe-r:max(12px,env(safe-area-inset-right));
  --q14-safe-l:max(12px,env(safe-area-inset-left));
  --q14-safe-b:max(12px,env(safe-area-inset-bottom));
  --q14-safe-t:max(8px,env(safe-area-inset-top));
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  max-width:100%;
  overflow-x:hidden;
}
button,a,input,textarea,select{
  -webkit-tap-highlight-color:transparent;
}
button,a{
  touch-action:manipulation;
}
input,textarea,select{
  max-width:100%;
}
img,svg,canvas,video{
  max-width:100%;
}

/* --------------------------------------------------------------------------
   OFFICIAL WEBSITE — mobile-first experience
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  body:not(.dashboard-body):not(.admin-body):not(.auth-body):not(.public-body) .site-bg__cursor{
    display:none;
  }

  .site-header{
    padding-top:var(--q14-safe-t)!important;
  }
  .site-header .nav-shell{
    width:calc(100% - var(--q14-safe-r) - var(--q14-safe-l))!important;
    min-height:60px;
    height:60px!important;
    padding:0 8px!important;
    border-radius:18px!important;
    background:rgba(247,251,253,.92)!important;
    border-color:rgba(46,66,99,.09)!important;
    box-shadow:0 8px 30px rgba(31,55,80,.07)!important;
    backdrop-filter:blur(18px) saturate(1.2);
  }
  .q-brand{
    gap:7px!important;
    min-width:0;
  }
  .q-brand__mark{
    width:36px!important;
    height:36px!important;
    flex:0 0 36px;
    border-radius:11px!important;
  }
  .q-brand__type strong{
    font-size:13px!important;
  }
  .q-brand__type small{
    display:none!important;
  }
  .nav-actions{
    gap:5px!important;
    min-width:0;
  }
  .nav-actions .button--small{
    height:38px!important;
    min-height:38px;
    padding:0 11px!important;
    border-radius:11px!important;
    font-size:9px!important;
    white-space:nowrap;
  }
  .nav-actions .button--small i{
    display:none;
  }
  .menu-toggle{
    width:40px!important;
    height:40px!important;
    flex:0 0 40px;
    border-radius:11px!important;
    justify-content:center;
    align-items:center;
  }
  .main-nav{
    top:calc(var(--q14-safe-t) + 68px)!important;
    right:var(--q14-safe-r)!important;
    left:var(--q14-safe-l)!important;
    width:auto!important;
    max-height:calc(100dvh - 90px);
    overflow:auto;
    padding:9px!important;
    border-radius:18px!important;
  }
  .main-nav a{
    min-height:48px;
    display:flex;
    align-items:center;
    padding:0 13px!important;
    font-size:12px;
  }

  .hero{
    min-height:auto!important;
    padding-top:104px!important;
    padding-bottom:48px!important;
  }
  .hero-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:34px!important;
  }
  .hero-copy{
    width:100%;
    max-width:620px;
    margin-inline:auto;
    text-align:center!important;
  }
  .hero-badge{
    min-height:34px;
    height:auto!important;
    padding:8px 12px!important;
    line-height:1.45;
    white-space:normal;
    justify-content:center;
  }
  .hero h1{
    margin:18px 0 14px!important;
    font-size:clamp(38px,11vw,58px)!important;
    line-height:1.12!important;
    letter-spacing:-.045em!important;
  }
  .hero-lead{
    max-width:580px!important;
    margin-inline:auto!important;
    font-size:13px!important;
    line-height:1.95!important;
  }
  .hero-cta-row{
    width:100%;
    max-width:430px;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin:22px auto 0!important;
  }
  .hero-cta-row .button{
    width:100%;
    min-height:50px;
    justify-content:center;
    border-radius:14px;
  }
  .slug-builder{
    width:100%;
    max-width:480px!important;
    margin:18px auto 0!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px!important;
    padding:6px!important;
    border-radius:15px!important;
  }
  .slug-builder__label{
    display:none!important;
  }
  .slug-builder__input{
    min-height:42px;
    padding-inline:9px!important;
    font-size:9px!important;
    overflow:hidden;
  }
  .slug-builder__input span{
    max-width:67%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .slug-builder__input input{
    min-width:72px!important;
    width:33%!important;
    font-size:12px!important;
  }
  .slug-builder>a{
    min-height:42px;
    height:42px!important;
    padding-inline:11px!important;
    border-radius:11px!important;
    white-space:nowrap;
  }
  .hero-proof{
    justify-content:center!important;
    flex-wrap:wrap;
    margin-top:18px!important;
  }

  /* Never scale a 334px phone with transform on mobile.
     Give it an actual responsive width to avoid layout gaps/overflow. */
  .hero-stage{
    width:100%;
    min-height:590px!important;
    margin:0!important;
    transform:none!important;
    overflow:hidden;
  }
  .hero-stage:before{
    width:min(115vw,430px)!important;
    height:min(115vw,430px)!important;
  }
  .hero-stage__ring,
  .hero-stage__orbit,
  .float-card{
    display:none!important;
  }
  .phone-wrap{
    width:min(86vw,314px);
    max-width:314px;
    transform:none!important;
  }
  .phone-device{
    width:100%!important;
    height:auto!important;
    aspect-ratio:334/664;
    border-radius:clamp(38px,12vw,52px)!important;
    padding:8px!important;
  }
  .phone-screen{
    border-radius:calc(clamp(38px,12vw,52px) - 7px)!important;
    padding:56px 15px 15px!important;
  }
  .phone-device__island{
    top:15px!important;
    width:88px!important;
    height:23px!important;
  }
  .phone-logo{
    width:72px!important;
    height:72px!important;
  }
  .phone-link{
    min-height:54px!important;
  }
  .phone-shadow{
    width:88%!important;
  }

  .platform-rail{
    width:calc(100% - var(--q14-safe-r) - var(--q14-safe-l))!important;
    margin-top:4px!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    padding:12px!important;
    border-radius:16px;
  }
  .platform-rail__label{
    text-align:center!important;
  }

  .section{
    padding-block:64px!important;
  }
  .section-heading{
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin-bottom:24px!important;
  }
  .section-heading h2,
  .design-copy h2,
  .qr-copy h2{
    font-size:clamp(30px,9vw,42px)!important;
    line-height:1.2!important;
  }
  .section-heading p,
  .design-copy>p,
  .qr-copy>p{
    font-size:11px!important;
    line-height:1.9!important;
  }

  .product-bento{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }
  .bento-card,
  .bento-card--wide{
    grid-column:auto!important;
    min-height:0!important;
    grid-template-columns:minmax(0,1fr)!important;
    padding:20px!important;
    border-radius:22px!important;
  }
  .bento-card h3{
    font-size:20px!important;
  }
  .editor-mock{
    width:100%;
    max-width:100%;
    height:220px!important;
    overflow:hidden;
  }

  .design-grid,
  .qr-grid,
  .usecase-stage{
    grid-template-columns:minmax(0,1fr)!important;
    gap:26px!important;
  }
  .design-copy,
  .qr-copy{
    text-align:right!important;
  }
  .theme-lab{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden;
    border-radius:22px!important;
  }
  .theme-picker{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .theme-picker button{
    min-width:0;
  }

  .usecase-tabs{
    display:flex!important;
    grid-template-columns:none!important;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    gap:7px!important;
    padding-bottom:3px;
  }
  .usecase-tabs::-webkit-scrollbar{display:none}
  .usecase-tabs button{
    flex:0 0 auto;
    min-height:42px;
    white-space:nowrap;
  }
  .usecase-copy{
    padding:22px!important;
  }
  .usecase-copy h3{
    font-size:26px!important;
    line-height:1.35;
  }
  .usecase-visual{
    min-height:300px!important;
    overflow:hidden;
  }
  .case-card{
    width:min(72vw,270px)!important;
    height:auto!important;
    aspect-ratio:260/170;
  }

  .qr-copy{
    order:-1;
  }
  .qr-visual{
    min-height:410px!important;
    overflow:hidden;
  }
  .qr-orbit{
    display:none!important;
  }
  .qr-card{
    width:min(82vw,300px)!important;
    height:auto!important;
    min-height:360px;
    border-radius:28px!important;
    transform:none!important;
  }
  .qr-code{
    width:min(54vw,185px)!important;
    height:auto!important;
    aspect-ratio:1;
  }
  .qr-copy ul{
    margin-block:18px 22px!important;
  }

  .final-cta{
    padding-top:24px!important;
  }
  .final-cta__card{
    min-height:420px!important;
    padding:40px 18px!important;
    border-radius:26px!important;
  }
  .final-cta__logo{
    width:76px!important;
    height:76px!important;
    border-radius:22px!important;
  }
  .final-cta h2{
    font-size:clamp(35px,10vw,50px)!important;
    line-height:1.18!important;
  }
  .final-cta p{
    line-height:1.8;
  }
  .final-cta__actions{
    width:100%;
    max-width:360px;
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .final-cta__actions .button{
    width:100%;
    justify-content:center;
  }

  .footer{
    padding-top:42px!important;
    padding-bottom:calc(20px + env(safe-area-inset-bottom))!important;
  }
  .footer-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:26px!important;
  }
  .footer-links{
    width:100%;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:22px 14px!important;
  }
  .footer-credit{
    justify-self:start!important;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:8px!important;
  }
}

@media (max-width:380px){
  .nav-actions .button--small{
    padding-inline:9px!important;
  }
  .q-brand__type{
    display:none!important;
  }
  .hero h1{
    font-size:36px!important;
  }
  .hero-stage{
    min-height:540px!important;
  }
  .phone-wrap{
    width:min(88vw,286px);
  }
  .slug-builder{
    grid-template-columns:1fr!important;
  }
  .slug-builder>a{
    justify-content:center;
  }
  .slug-builder__input span{
    max-width:62%;
  }
  .footer-links{
    grid-template-columns:1fr!important;
  }
}

/* --------------------------------------------------------------------------
   AUTH — login/register
   -------------------------------------------------------------------------- */
.auth-body{
  min-height:100dvh!important;
}
@media (max-width:720px){
  .auth-body{
    display:block!important;
    padding:
      calc(18px + env(safe-area-inset-top))
      var(--q14-safe-r)
      calc(24px + env(safe-area-inset-bottom))
      var(--q14-safe-l)!important;
    background:
      radial-gradient(circle at 15% 0,rgba(86,194,228,.16),transparent 30%),
      linear-gradient(180deg,#f7fbfd,#f2f7fa)!important;
  }
  .auth-shell{
    width:100%!important;
    max-width:460px!important;
    margin:0 auto;
  }
  .auth-brand{
    justify-content:flex-start!important;
    margin:3px 4px 16px!important;
  }
  .auth-brand .brand-mark.logo-mark{
    width:42px!important;
    height:42px!important;
  }
  .auth-card{
    width:100%;
    padding:20px 16px!important;
    border-radius:21px!important;
    box-shadow:0 14px 45px rgba(31,55,80,.07)!important;
  }
  .auth-card h1{
    font-size:22px!important;
    line-height:1.4;
  }
  .auth-card>p{
    margin:7px 0 18px!important;
    font-size:11px!important;
    line-height:1.85!important;
  }
  .auth-form{
    gap:12px!important;
  }
  .auth-field{
    gap:6px!important;
  }
  .auth-field span{
    font-size:10px!important;
  }
  .auth-field input{
    height:50px!important;
    min-height:50px;
    padding-inline:13px!important;
    border-radius:13px!important;
    font-size:16px!important; /* prevents iOS input zoom */
  }
  .auth-submit{
    min-height:50px!important;
    border-radius:13px!important;
    font-size:12px!important;
  }
  .auth-alert,
  .google-auth-status{
    max-width:100%;
    overflow-wrap:anywhere;
  }
  .google-auth-zone,
  .google-auth-button,
  .google-auth-button>div,
  .google-auth-button iframe{
    width:100%!important;
    max-width:100%!important;
  }
  .auth-divider{
    margin-block:16px!important;
  }
  .auth-meta{
    margin-top:16px!important;
    line-height:1.7;
  }
}
@media (max-width:360px){
  .auth-body{
    padding-inline:10px!important;
  }
  .auth-card{
    padding:18px 13px!important;
    border-radius:18px!important;
  }
}

/* --------------------------------------------------------------------------
   ADMIN — replace desktop table overflow with native mobile cards
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  .admin-body{
    background:var(--q14-bg)!important;
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
  }
  .admin-top{
    position:sticky;
    top:0;
    z-index:30;
    height:auto!important;
    min-height:62px;
    padding:
      max(7px,env(safe-area-inset-top))
      var(--q14-safe-r)
      7px
      var(--q14-safe-l)!important;
    gap:10px;
    background:rgba(255,255,255,.94)!important;
    backdrop-filter:blur(16px);
  }
  .admin-brand{
    min-width:0;
  }
  .admin-brand img{
    width:32px!important;
    height:32px!important;
  }
  .admin-brand b{
    font-size:12px;
  }
  .admin-brand small{
    font-size:8px;
  }
  .admin-top>div a{
    display:inline-flex;
    min-height:38px;
    align-items:center;
    padding-inline:10px;
    border:1px solid var(--q14-line);
    border-radius:10px;
    background:#fff;
    font-size:9px!important;
    white-space:nowrap;
  }
  .admin-wrap{
    width:auto!important;
    margin:16px var(--q14-safe-r) 34px var(--q14-safe-l)!important;
  }
  .admin-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    margin-bottom:14px!important;
  }
  .admin-head h1{
    font-size:21px!important;
  }
  .admin-head p{
    font-size:10px!important;
    line-height:1.75;
  }
  .admin-head>div:last-child{
    width:100%;
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:7px!important;
  }
  #adminMailTest,#adminRefresh{
    width:100%;
    height:44px!important;
    min-height:44px;
    padding:0 9px!important;
    border-radius:11px!important;
    font-size:10px;
  }
  .admin-message,
  #mailStatus{
    overflow-wrap:anywhere;
    line-height:1.7;
  }
  .admin-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .admin-metric{
    min-height:92px;
    padding:13px!important;
    border-radius:15px!important;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .admin-metric span{
    font-size:9px!important;
    line-height:1.45;
  }
  .admin-metric strong{
    margin-top:4px!important;
    font-size:23px!important;
  }

  .admin-table-wrap{
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
  }
  .admin-table{
    width:100%!important;
    min-width:0!important;
    display:block;
  }
  .admin-table thead{
    display:none;
  }
  .admin-table tbody{
    display:grid;
    gap:9px;
  }
  .admin-table tbody tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 12px;
    padding:13px;
    border:1px solid var(--q14-line);
    border-radius:17px;
    background:#fff;
    box-shadow:0 5px 18px rgba(31,55,80,.035);
  }
  .admin-table tbody tr.pending-row{
    border-color:#F0D49B;
    background:linear-gradient(145deg,#fff,#fffaf1);
  }
  .admin-table td{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:8px;
    min-width:0;
    padding:9px 0!important;
    border-bottom:1px solid #EEF3F6!important;
    font-size:10px!important;
  }
  .admin-table td:first-child{
    grid-column:1/-1;
    display:block;
    padding-top:0!important;
  }
  .admin-table td:nth-child(2)::before{content:"الدور";color:#8B9AA8;font-size:8px}
  .admin-table td:nth-child(3)::before{content:"الحالة";color:#8B9AA8;font-size:8px}
  .admin-table td:nth-child(4)::before{content:"الصفحات";color:#8B9AA8;font-size:8px}
  .admin-table td:nth-child(5)::before{content:"آخر دخول";color:#8B9AA8;font-size:8px}
  .admin-table td:nth-child(2),
  .admin-table td:nth-child(3),
  .admin-table td:nth-child(4),
  .admin-table td:nth-child(5){
    grid-column:span 1;
  }
  .admin-table td:nth-child(6){
    grid-column:1/-1;
    border-bottom:0!important;
    padding-bottom:0!important;
  }
  .admin-user{
    width:100%;
    min-width:0;
  }
  .admin-user-avatar{
    flex:0 0 38px;
    width:38px!important;
    height:38px!important;
  }
  .admin-user>div{
    min-width:0;
  }
  .admin-user b,
  .admin-user small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .admin-actions{
    width:100%;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px!important;
  }
  .admin-actions button{
    min-width:0;
    min-height:40px!important;
    height:40px!important;
    padding:0 8px!important;
    font-size:9px!important;
    border-radius:10px!important;
  }
}
@media (max-width:360px){
  .admin-summary{
    grid-template-columns:1fr 1fr!important;
  }
  .admin-table tbody tr{
    grid-template-columns:1fr;
  }
  .admin-table td:nth-child(2),
  .admin-table td:nth-child(3),
  .admin-table td:nth-child(4),
  .admin-table td:nth-child(5){
    grid-column:1;
  }
}

/* --------------------------------------------------------------------------
   DASHBOARD / EDITOR — mobile app shell
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .dashboard-body{
    overflow:auto!important;
    background:#F5F9FB!important;
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }
  .dashboard-shell{
    min-height:100dvh!important;
    display:block!important;
  }
  .dashboard-main{
    width:100%;
    min-width:0;
    height:auto!important;
    min-height:100dvh!important;
    display:block!important;
  }

  /* Bottom navigation instead of a drawer. */
  .dashboard-body .sidebar{
    position:fixed!important;
    z-index:100!important;
    right:0!important;
    left:0!important;
    top:auto!important;
    bottom:0!important;
    width:100%!important;
    height:calc(66px + env(safe-area-inset-bottom))!important;
    padding:5px var(--q14-safe-r) env(safe-area-inset-bottom) var(--q14-safe-l)!important;
    transform:none!important;
    transition:none!important;
    display:block!important;
    background:rgba(12,29,47,.97)!important;
    border-top:1px solid rgba(255,255,255,.09);
    box-shadow:0 -12px 30px rgba(17,37,58,.13);
    backdrop-filter:blur(18px);
  }
  .dashboard-body .brand-dashboard,
  .dashboard-body .side-bottom{
    display:none!important;
  }
  .dashboard-body .side-nav{
    height:61px;
    margin:0!important;
    display:flex!important;
    align-items:stretch;
    gap:2px!important;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .dashboard-body .side-nav::-webkit-scrollbar{display:none}
  .dashboard-body .side-nav a{
    flex:1 0 58px;
    min-width:58px;
    height:56px!important;
    padding:5px 4px!important;
    border-radius:13px!important;
    display:flex!important;
    flex-direction:column;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    color:#A9B7C5!important;
    font-size:8px!important;
    text-align:center;
    scroll-snap-align:center;
  }
  .dashboard-body .side-nav a span{
    width:28px!important;
    height:26px;
    display:grid;
    place-items:center;
    color:#9AAABA!important;
    font-size:15px;
  }
  .dashboard-body .side-nav a b{
    display:block!important;
    max-width:100%;
    overflow:hidden;
    font-size:8px!important;
    font-weight:600;
    line-height:1.1;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .dashboard-body .side-nav a.active{
    background:rgba(86,194,228,.14)!important;
    color:#fff!important;
  }
  .dashboard-body .side-nav a.active span{
    color:#70D3EF!important;
  }
  .dashboard-body .side-nav a.admin-only{
    display:flex!important;
  }

  /* Compact sticky command bar. */
  .dashboard-body .topbar{
    position:sticky!important;
    top:0;
    z-index:60!important;
    width:100%;
    min-height:64px!important;
    height:auto!important;
    padding:
      max(7px,env(safe-area-inset-top))
      var(--q14-safe-r)
      7px
      var(--q14-safe-l)!important;
    gap:7px;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 1px 0 rgba(46,66,99,.09);
    backdrop-filter:blur(17px);
  }
  .dashboard-body .topbar-title{
    min-width:0;
    gap:0!important;
  }
  .dashboard-body .menu-btn{
    display:none!important;
  }
  .dashboard-body .breadcrumb{
    display:none!important;
  }
  .dashboard-body .topbar h1{
    max-width:34vw;
    overflow:hidden;
    font-size:15px!important;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .dashboard-body .topbar-actions{
    margin-inline-start:auto;
    min-width:0;
    gap:5px!important;
  }
  .dashboard-body .topbar-actions .save-state,
  .dashboard-body .topbar-actions #exportBtn,
  .dashboard-body .topbar-actions .hide-small{
    display:none!important;
  }
  .dashboard-body .page-switcher-btn,
  .dashboard-body .preview-launch,
  .dashboard-body #publishBtn{
    min-height:40px!important;
    height:40px!important;
    border-radius:11px!important;
  }
  .dashboard-body .page-switcher-btn,
  .dashboard-body .preview-launch{
    width:40px!important;
    min-width:40px!important;
    padding:0!important;
    justify-content:center!important;
  }
  .dashboard-body .page-switcher-btn b,
  .dashboard-body .page-switcher-btn .chev,
  .dashboard-body .preview-launch span{
    display:none!important;
  }
  .dashboard-body #publishBtn{
    padding-inline:12px!important;
    font-size:10px!important;
    white-space:nowrap;
  }
  .dashboard-body .page-switcher-menu{
    position:fixed!important;
    top:calc(62px + env(safe-area-inset-top))!important;
    right:var(--q14-safe-r)!important;
    left:var(--q14-safe-l)!important;
    width:auto!important;
    max-height:55dvh;
    overflow:auto;
    border-radius:16px!important;
  }

  .dashboard-body .workspace,
  .dashboard-body .v02-workspace{
    display:block!important;
    min-height:0!important;
    background:#F5F9FB!important;
  }
  .dashboard-body .editor-column{
    width:100%;
    min-width:0;
    overflow:visible!important;
    padding:14px var(--q14-safe-r) calc(26px + env(safe-area-inset-bottom)) var(--q14-safe-l)!important;
  }
  .dashboard-body .preview-column,
  .dashboard-body .v02-preview-column{
    display:none!important;
  }
  .dashboard-body.preview-focus-open .v02-preview-column{
    display:grid!important;
    position:fixed!important;
    z-index:110!important;
    inset:
      max(8px,env(safe-area-inset-top))
      max(8px,env(safe-area-inset-right))
      max(8px,env(safe-area-inset-bottom))
      max(8px,env(safe-area-inset-left))!important;
    max-width:none!important;
    margin:0!important;
    border-radius:18px!important;
  }
  .dashboard-body.preview-focus-open .preview-overlay-backdrop{
    z-index:105!important;
  }

  .dashboard-body .panel{
    width:100%;
    min-width:0;
  }
  .dashboard-body .panel-head{
    display:flex!important;
    align-items:flex-end!important;
    gap:10px!important;
    margin-bottom:12px!important;
  }
  .dashboard-body .panel-head>div{
    min-width:0;
  }
  .dashboard-body .panel-head h2{
    font-size:17px!important;
    line-height:1.35;
  }
  .dashboard-body .panel-head p{
    font-size:10px!important;
    line-height:1.7;
  }
  .dashboard-body .panel-eyebrow{
    font-size:8px!important;
  }

  .dashboard-body .card{
    max-width:100%;
    border-radius:17px!important;
    box-shadow:0 6px 22px rgba(31,55,80,.035)!important;
  }
  .dashboard-body .form-card{
    padding:15px!important;
  }
  .dashboard-body .form-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
  }
  .dashboard-body .field-full{
    grid-column:auto!important;
  }
  .dashboard-body .field input,
  .dashboard-body .field textarea,
  .dashboard-body .select{
    min-height:48px;
    font-size:16px!important; /* prevents iOS form zoom */
    border-radius:12px!important;
  }
  .dashboard-body .field textarea{
    min-height:96px!important;
  }
  .dashboard-body .field span{
    font-size:10px!important;
  }
  .dashboard-body .slug-input{
    width:100%;
    min-height:48px;
  }
  .dashboard-body .slug-input input{
    min-width:0!important;
  }
  .dashboard-body .slug-input small{
    max-width:48%!important;
    height:46px!important;
    padding-inline:8px!important;
    font-size:8px!important;
  }
  .dashboard-body .field-hint{
    line-height:1.65;
  }

  .dashboard-body .avatar-row{
    display:grid!important;
    grid-template-columns:62px minmax(0,1fr);
    align-items:center!important;
    gap:12px!important;
    padding-bottom:15px!important;
    margin-bottom:15px!important;
  }
  .dashboard-body .editor-avatar{
    width:58px!important;
    height:58px!important;
    border-radius:17px!important;
  }
  .dashboard-body .upload-actions{
    min-width:0;
  }
  .dashboard-body .upload-actions .btn{
    min-height:40px;
  }

  /* Link cards: all actions remain accessible; none are hidden. */
  .dashboard-body .link-editor-item{
    grid-template-columns:24px 40px minmax(0,1fr)!important;
    gap:8px!important;
    padding:10px!important;
    border-radius:15px!important;
  }
  .dashboard-body .link-editor-item .item-actions{
    grid-column:1/-1;
    width:100%;
    padding-top:8px;
    margin-top:2px;
    border-top:1px solid #EEF2F5;
    display:flex!important;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px!important;
  }
  .dashboard-body .link-editor-item .item-actions .edit-btn{
    display:inline-flex!important;
  }
  .dashboard-body .mini-action{
    width:38px!important;
    height:38px!important;
    min-width:38px;
    border-radius:10px!important;
  }

  .dashboard-body .section-space{
    margin-top:22px!important;
  }
  .dashboard-body .design-quick-nav-wrap{
    top:calc(66px + env(safe-area-inset-top))!important;
    margin:8px 0 12px!important;
    border-radius:13px!important;
  }
  .dashboard-body .design-quick-nav button,
  .dashboard-body .design-collapse-all{
    min-height:38px!important;
    height:38px!important;
  }
  .dashboard-body .design-section-card{
    margin-bottom:10px!important;
    border-radius:17px!important;
  }
  .dashboard-body .design-section-title{
    padding:15px 13px!important;
  }
  .dashboard-body .design-section-title h3{
    font-size:13px!important;
  }
  .dashboard-body .design-section-title p{
    font-size:9px!important;
    line-height:1.65;
  }
  .dashboard-body .template-filter-row,
  .dashboard-body .design-quick-nav{
    overflow-x:auto!important;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
  }
  .dashboard-body .template-filter-row::-webkit-scrollbar,
  .dashboard-body .design-quick-nav::-webkit-scrollbar{display:none}
  .dashboard-body .template-filter-row{
    display:flex!important;
    flex-wrap:nowrap!important;
  }
  .dashboard-body .template-filter-row button{
    flex:0 0 auto;
    min-height:38px;
  }
  .dashboard-body .full-template-grid{
    grid-template-columns:minmax(0,1fr)!important;
    padding-inline:12px!important;
  }
  .dashboard-body .layout-preset-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    padding-inline:12px!important;
  }
  .dashboard-body .theme-grid-v02,
  .dashboard-body .style-choice-grid,
  .dashboard-body .activity-template-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .dashboard-body .platform-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .dashboard-body .pages-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:9px!important;
  }
  .dashboard-body .page-card{
    padding:13px!important;
    border-radius:16px!important;
  }
  .dashboard-body .page-card-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dashboard-body .page-card-actions button,
  .dashboard-body .page-card-actions a{
    min-width:0;
    min-height:40px!important;
    height:40px!important;
    justify-content:center;
    padding-inline:7px!important;
  }
  .dashboard-body .page-limit-badge{
    max-width:100%;
    white-space:normal!important;
  }

  .dashboard-body #panel-qr{
    overflow:hidden!important;
  }
  .dashboard-body #panel-qr .qr-layout-v08{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"demo" "controls"!important;
    gap:10px!important;
    padding:0!important;
    overflow:visible!important;
  }
  .dashboard-body #panel-qr .qr-demo-card-v08{
    grid-area:demo!important;
    min-height:330px!important;
    padding:18px 10px!important;
    border-radius:17px!important;
  }
  .dashboard-body #panel-qr .qr-controls-v08{
    grid-area:controls!important;
    padding:15px 12px!important;
    border-radius:17px!important;
  }
  .dashboard-body #panel-qr .qr-live{
    width:min(100%,248px)!important;
    height:auto!important;
    aspect-ratio:1;
  }
  .dashboard-body #panel-qr .qr-link-row,
  .dashboard-body #panel-qr .qr-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .dashboard-body #panel-qr .qr-actions-v08{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .dashboard-body #panel-qr .qr-actions-v08 .btn{
    min-width:0!important;
    width:100%;
  }
  .dashboard-body #panel-qr #copyPublicUrl{
    width:100%;
  }

  .dashboard-body .account-card{
    grid-template-columns:56px minmax(0,1fr)!important;
    gap:11px!important;
  }
  .dashboard-body .account-avatar{
    width:52px!important;
    height:52px!important;
  }
  .dashboard-body .account-copy{
    min-width:0;
  }
  .dashboard-body .account-copy small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .dashboard-body .account-card>.btn{
    grid-column:1/-1!important;
    min-height:42px;
  }
  .dashboard-body .account-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }

  /* Dialogs become mobile bottom sheets. */
  .dashboard-body dialog{
    width:calc(100% - var(--q14-safe-r) - var(--q14-safe-l))!important;
    max-width:600px!important;
    max-height:calc(100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    margin:auto!important;
    border-radius:22px!important;
  }
  .dashboard-body .dialog-body{
    max-height:64dvh;
    overflow-y:auto;
    padding:14px!important;
  }
  .dashboard-body .dialog-head{
    padding:14px!important;
  }
  .dashboard-body .dialog-actions{
    position:sticky;
    bottom:0;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;
    background:#fff;
  }
  .dashboard-body .dialog-actions .btn{
    min-height:44px;
  }
}
@media (max-width:520px){
  .dashboard-body .topbar h1{
    max-width:28vw;
  }
  .dashboard-body #publishBtn{
    padding-inline:10px!important;
  }
  .dashboard-body .panel-head{
    align-items:flex-start!important;
  }
  .dashboard-body .panel-head>.btn,
  .dashboard-body .panel-head>button{
    flex:0 0 auto;
    max-width:42%;
    min-height:38px;
    padding-inline:9px!important;
  }
  .dashboard-body .avatar-row{
    grid-template-columns:54px minmax(0,1fr);
  }
  .dashboard-body .editor-avatar{
    width:52px!important;
    height:52px!important;
  }
  .dashboard-body .upload-actions p{
    font-size:8px!important;
  }
  .dashboard-body .platform-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .dashboard-body #panel-qr .qr-actions-v08{
    grid-template-columns:1fr 1fr!important;
  }
  .dashboard-body #panel-qr .qr-actions-v08 .btn:first-child{
    grid-column:1/-1;
  }
}
@media (max-width:360px){
  .dashboard-body .topbar{
    gap:4px;
  }
  .dashboard-body .topbar h1{
    max-width:24vw;
    font-size:14px!important;
  }
  .dashboard-body .page-switcher-btn,
  .dashboard-body .preview-launch{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
  }
  .dashboard-body #publishBtn{
    height:38px!important;
    min-height:38px!important;
    font-size:9px!important;
  }
  .dashboard-body .editor-column{
    padding-inline:9px!important;
  }
  .dashboard-body .form-card{
    padding:12px!important;
  }
  .dashboard-body .panel-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
  }
  .dashboard-body .link-editor-item{
    grid-template-columns:22px 36px minmax(0,1fr)!important;
  }
}

/* --------------------------------------------------------------------------
   PUBLIC CLIENT PAGE — phone-safe by default
   -------------------------------------------------------------------------- */
.public-body{
  min-height:100dvh!important;
  overflow-x:hidden!important;
}
.public-body .public-shell{
  width:100%;
  min-width:0;
}
.public-body .public-profile{
  width:100%;
  min-width:0;
  min-height:100dvh;
  padding-bottom:calc(28px + env(safe-area-inset-bottom))!important;
}
.public-body .public-top{
  max-width:100%;
}
.public-body .public-brand,
.public-body .public-action{
  min-height:40px;
}
.public-body .public-action{
  min-width:40px;
}
.public-body .public-links,
.public-body .social-row{
  max-width:100%;
}
.public-body .public-link{
  min-width:0;
  min-height:56px;
}
.public-body .public-link>div{
  min-width:0;
}
.public-body .public-link b,
.public-body .public-link small{
  overflow-wrap:anywhere;
}
@media (max-width:520px){
  .v02-public-body.v03-public-body .public-top{
    top:max(16px,env(safe-area-inset-top))!important;
    right:max(16px,env(safe-area-inset-right))!important;
    left:max(16px,env(safe-area-inset-left))!important;
  }
  .public-body .public-profile{
    padding-right:max(14px,env(safe-area-inset-right))!important;
    padding-left:max(14px,env(safe-area-inset-left))!important;
  }
  .public-body .social-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px!important;
  }
}
@media (max-width:340px){
  .v02-public-body.v03-public-body .public-top{
    right:max(12px,env(safe-area-inset-right))!important;
    left:max(12px,env(safe-area-inset-left))!important;
  }
  .public-brand strong{
    font-size:9px!important;
  }
}

/* --------------------------------------------------------------------------
   TABLET / compact desktop polish
   -------------------------------------------------------------------------- */
@media (min-width:981px) and (max-width:1280px){
  .dashboard-body .editor-column{
    padding-inline:26px!important;
  }
  .dashboard-body .topbar{
    padding-inline:18px!important;
  }
}

/* ==========================================================================
   Q-One v1.4.1 — Home Feature Bento / Mobile Distribution Fix
   Removes desktop absolute positioning from feature visuals on phones.
   ========================================================================== */
@media (max-width:680px){
  .product .product-bento{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:11px!important;
  }

  .product .bento-card{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:17px!important;
    border-radius:20px!important;
    overflow:hidden!important;
  }

  /* Standard cards: 02 and 03 */
  .product .bento-card:not(.bento-card--wide):not(.bento-card--dark):not(.bento-card--accent){
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr) auto!important;
    grid-template-areas:
      "icon title number"
      "desc desc desc"
      "visual visual visual"!important;
    align-items:center!important;
    gap:8px 10px!important;
  }

  .product .bento-card:not(.bento-card--wide):not(.bento-card--dark):not(.bento-card--accent) .bento-icon{
    grid-area:icon!important;
    width:46px!important;
    height:46px!important;
    margin:0!important;
    border-radius:14px!important;
    position:static!important;
  }

  .product .bento-card:not(.bento-card--wide):not(.bento-card--dark):not(.bento-card--accent) .number{
    grid-area:number!important;
    align-self:start!important;
    justify-self:end!important;
    margin-top:4px!important;
    position:static!important;
    font-size:8px!important;
  }

  .product .bento-card:not(.bento-card--wide):not(.bento-card--dark):not(.bento-card--accent) h3{
    grid-area:title!important;
    margin:0!important;
    min-width:0!important;
    font-size:19px!important;
    line-height:1.35!important;
    text-align:right!important;
    overflow-wrap:anywhere;
  }

  .product .bento-card:not(.bento-card--wide):not(.bento-card--dark):not(.bento-card--accent) p{
    grid-area:desc!important;
    width:100%!important;
    max-width:none!important;
    margin:3px 0 0!important;
    font-size:10px!important;
    line-height:1.85!important;
    text-align:right!important;
  }

  /* Blocks: icons become a normal row, not floating on top of copy. */
  .product .block-cloud{
    grid-area:visual!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:56px!important;
    margin-top:7px!important;
    padding:7px 5px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    direction:rtl!important;
    overflow:hidden!important;
    border-radius:14px!important;
    background:linear-gradient(180deg,#f8fbfd,#f4f9fb)!important;
    border:1px solid #E7EEF2!important;
  }
  .product .block-cloud span,
  .product .block-cloud span:nth-child(n){
    position:static!important;
    inset:auto!important;
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
    border-radius:13px!important;
    transform:none!important;
    box-shadow:0 5px 15px rgba(46,66,99,.06)!important;
  }

  /* Responsive illustration gets its own dedicated row. */
  .product .responsive-stack{
    grid-area:visual!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:104px!important;
    margin-top:7px!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    gap:0!important;
    overflow:hidden!important;
    border-radius:14px!important;
    background:linear-gradient(180deg,#f9fcfd,#f2f8fb)!important;
    border:1px solid #E5EDF2!important;
    padding:10px 10px 9px!important;
  }
  .product .responsive-stack span{
    position:relative!important;
    inset:auto!important;
    bottom:auto!important;
    left:auto!important;
    flex:0 0 auto!important;
    transform:none!important;
  }
  .product .responsive-stack .screen-lg{
    width:min(48%,146px)!important;
    height:72px!important;
    margin-inline-end:-16px!important;
    z-index:1;
  }
  .product .responsive-stack .screen-md{
    width:72px!important;
    height:82px!important;
    z-index:2;
  }
  .product .responsive-stack .screen-sm{
    width:46px!important;
    height:72px!important;
    margin-inline-start:-8px!important;
    z-index:3;
  }

  /* Dark and accent cards: copy first, illustration second. */
  .product .bento-card--dark,
  .product .bento-card--accent{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "title number"
      "desc desc"
      "visual visual"!important;
    align-items:start!important;
    gap:7px 10px!important;
  }
  .product .bento-card--dark .number,
  .product .bento-card--accent .number{
    grid-area:number!important;
    position:static!important;
    justify-self:end!important;
    margin-top:4px!important;
    font-size:8px!important;
  }
  .product .bento-card--dark h3,
  .product .bento-card--accent h3{
    grid-area:title!important;
    margin:0!important;
    font-size:19px!important;
    line-height:1.35!important;
    text-align:right!important;
  }
  .product .bento-card--dark p,
  .product .bento-card--accent p{
    grid-area:desc!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    font-size:10px!important;
    line-height:1.85!important;
    text-align:right!important;
  }

  .product .page-stack{
    grid-area:visual!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:104px!important;
    margin-top:6px!important;
    overflow:hidden!important;
  }
  .product .page-stack i{
    width:min(62%,170px)!important;
    height:75px!important;
    bottom:8px!important;
  }

  .product .publish-flow{
    grid-area:visual!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    margin-top:9px!important;
    padding:9px 4px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    overflow:hidden!important;
  }
  .product .publish-flow span{
    width:45px!important;
    height:45px!important;
    flex:0 0 45px!important;
    border-radius:14px!important;
  }
  .product .publish-flow>i{
    flex:0 0 auto;
  }

  /* Wide editor card */
  .product .bento-card--wide{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
    align-items:start!important;
  }
  .product .bento-card--wide .bento-copy{
    min-width:0!important;
  }
  .product .bento-card--wide .bento-copy h3{
    margin:6px 0!important;
    font-size:20px!important;
    line-height:1.35!important;
  }
  .product .bento-card--wide .bento-copy p{
    max-width:none!important;
    font-size:10px!important;
    line-height:1.85!important;
  }
  .product .bento-card--wide .bento-copy a{
    min-height:38px;
    margin-top:10px!important;
  }
  .product .editor-mock{
    width:100%!important;
    height:176px!important;
    margin:0!important;
    grid-template-columns:34px minmax(0,1fr) 72px!important;
    border-radius:15px!important;
  }
  .product .editor-mock__sidebar{
    padding:12px 8px!important;
    gap:9px!important;
  }
  .product .editor-mock__canvas{
    min-width:0!important;
    padding:10px!important;
  }
  .product .mock-fields{
    gap:6px!important;
    margin-top:8px!important;
  }
  .product .mock-fields i{
    height:38px!important;
  }
  .product .mock-fields i:nth-child(3){
    height:52px!important;
  }
  .product .tiny-phone{
    width:52px!important;
    height:112px!important;
    border-radius:14px!important;
    border-width:3px!important;
    padding:14px 5px 5px!important;
    gap:5px!important;
  }
  .product .tiny-avatar{
    width:20px!important;
    height:20px!important;
    border-radius:7px!important;
  }
  .product .tiny-phone i{
    height:8px!important;
  }
}

@media (max-width:360px){
  .product .bento-card{
    padding:14px!important;
  }
  .product .bento-card:not(.bento-card--wide):not(.bento-card--dark):not(.bento-card--accent){
    grid-template-columns:42px minmax(0,1fr) auto!important;
    gap:7px 8px!important;
  }
  .product .bento-card:not(.bento-card--wide):not(.bento-card--dark):not(.bento-card--accent) .bento-icon{
    width:42px!important;
    height:42px!important;
  }
  .product .block-cloud{
    gap:5px!important;
  }
  .product .block-cloud span,
  .product .block-cloud span:nth-child(n){
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
  }
  .product .publish-flow{
    gap:6px!important;
  }
  .product .publish-flow span{
    width:41px!important;
    height:41px!important;
    flex-basis:41px!important;
  }
}

/* v1.4.2 — Analytics dependency guard */
@media (max-width:980px){
  #panel-analytics.analytics-mobile-first-v131{width:100%!important;min-width:0!important;overflow:hidden!important}
  #panel-analytics .analytics-header-v131{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  #panel-analytics .analytics-controls-v131{display:grid!important;grid-template-columns:minmax(0,1fr) 44px!important;gap:8px!important}
  #panel-analytics .analytics-range-v131{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;padding:4px!important;border:1px solid #dce7ed!important;border-radius:14px!important;background:#f3f7f9!important}
  #panel-analytics .analytics-range-v131 button{appearance:none;-webkit-appearance:none;min-width:0!important;min-height:44px!important;margin:0!important;padding:0 4px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:#738597!important;font:700 11px/1 "Readex Pro","Cairo",system-ui,sans-serif!important}
  #panel-analytics .analytics-range-v131 button.active{background:#fff!important;color:#2e4263!important;box-shadow:0 3px 12px rgba(30,55,80,.09)!important}
  #panel-analytics .analytics-refresh-v131{appearance:none;-webkit-appearance:none;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;margin:0!important;padding:0!important;display:grid!important;place-items:center!important;border:1px solid #dce7ed!important;border-radius:10px!important;background:#fff!important;color:#315f76!important}
  #panel-analytics .analytics-refresh-v131 span{display:none!important}
  #panel-analytics .analytics-status-v131{display:grid!important;grid-template-columns:8px minmax(0,1fr)!important;gap:6px 9px!important;padding:11px 12px!important;margin:10px 0!important;border:1px solid #dceaf0!important;border-radius:14px!important;background:#f8fcfd!important}
  #panel-analytics .analytics-status-v131>em{grid-column:2!important}
  #panel-analytics .analytics-kpis-v131{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-bottom:10px!important}
  #panel-analytics .analytics-kpi-v131{min-width:0!important;min-height:104px!important;display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;gap:9px!important;padding:12px 11px!important;border:1px solid #e1e9ef!important;border-radius:16px!important;background:#fff!important}
  #panel-analytics .analytics-kpi-share-v131{grid-column:1/-1!important}
  #panel-analytics .analytics-main-v131,#panel-analytics .analytics-secondary-v131{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  #panel-analytics .analytics-card-v131{width:100%!important;min-width:0!important;padding:14px 12px!important;margin:0!important;border:1px solid #e1e9ef!important;border-radius:17px!important;background:#fff!important;overflow:hidden!important}
  #panel-analytics .analytics-chart-v131{width:100%!important;min-width:0!important;min-height:218px!important;overflow:hidden!important}
  #panel-analytics .analytics-chart-v131 svg{display:block!important;width:100%!important;height:auto!important;min-height:218px!important}
}

/* ==========================================================================
   Q-One v1.4.3 — Admin lives inside Account
   Keeps bottom navigation stable; admin entry is role-gated in Account.
   ========================================================================== */
.dashboard-body #adminNav{
  display:none!important;
}
.dashboard-body .account-admin-entry[hidden]{
  display:none!important;
}
.dashboard-body .account-admin-entry{
  width:100%;
  margin-top:12px;
  padding:15px!important;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 38px;
  align-items:center;
  gap:12px;
  color:inherit;
  text-decoration:none;
  border:1px solid rgba(86,194,228,.30)!important;
  background:
    radial-gradient(circle at 88% 20%,rgba(86,194,228,.16),transparent 31%),
    linear-gradient(145deg,#fff,#f7fbfd)!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.dashboard-body .account-admin-entry:hover{
  transform:translateY(-1px);
  border-color:rgba(86,194,228,.52)!important;
  box-shadow:0 9px 28px rgba(31,55,80,.07)!important;
}
.dashboard-body .account-admin-entry__icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#2f708a;
  background:linear-gradient(145deg,#e6f7fb,#dff2f8);
  font-size:18px;
}
.dashboard-body .account-admin-entry__copy{
  min-width:0;
}
.dashboard-body .account-admin-entry__copy small{
  display:block;
  color:#4fa8c1;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
}
.dashboard-body .account-admin-entry__copy b{
  display:block;
  margin-top:3px;
  color:#29435e;
  font-size:14px;
}
.dashboard-body .account-admin-entry__copy em{
  display:block;
  margin-top:4px;
  color:#8092a2;
  font-size:9px;
  line-height:1.6;
  font-style:normal;
}
.dashboard-body .account-admin-entry__arrow{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#4b7890;
  background:#fff;
  border:1px solid #dfe9ee;
}

@media(max-width:520px){
  .dashboard-body .account-admin-entry{
    grid-template-columns:44px minmax(0,1fr) 36px;
    gap:10px;
    padding:13px!important;
    border-radius:16px!important;
  }
  .dashboard-body .account-admin-entry__icon{
    width:44px;
    height:44px;
    border-radius:13px;
    font-size:16px;
  }
  .dashboard-body .account-admin-entry__arrow{
    width:36px;
    height:36px;
  }
  .dashboard-body .account-admin-entry__copy b{
    font-size:13px;
  }
}

/* ==========================================================================
   Q-One v1.4.4 — Link actions + per-account page limits
   ========================================================================== */

/* Link-card actions: in RTL, flex-start keeps the primary pencil action
   directly under the link content instead of drifting to the far left. */
@media(max-width:980px){
  .dashboard-body .link-editor-item .item-actions{
    justify-content:flex-start!important;
  }
  .dashboard-body .link-editor-item .edit-btn{
    color:#2d728b!important;
    border-color:rgba(86,194,228,.48)!important;
    background:#eef9fc!important;
  }

  .dashboard-body .pages-head-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
  }
  .dashboard-body #newPageBtn[hidden]{
    display:none!important;
  }
  .dashboard-body #newPageBtn{
    min-height:40px;
  }
  .dashboard-body .page-card-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .dashboard-body .page-card-actions .danger-page-action{
    grid-column:1/-1;
    color:#a83b49;
    border-color:#f0cfd4;
    background:#fff7f8;
  }
}
@media(max-width:520px){
  .dashboard-body #panel-pages .panel-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .dashboard-body .pages-head-actions{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
  }
  .dashboard-body .page-limit-badge{
    justify-content:flex-start;
  }
}

/* Admin page-limit editor */
.admin-page-limit{
  min-width:138px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.admin-page-limit>span{
  color:#7b8c9d;
  font-size:9px;
  white-space:nowrap;
}
.admin-page-limit>span b{
  color:#334e67;
  font-size:11px;
}
.admin-page-limit label{
  display:grid;
  grid-template-columns:minmax(58px,74px) 34px;
  align-items:center;
  gap:5px;
}
.admin-page-limit input{
  width:100%;
  height:34px;
  min-width:0;
  padding:0 8px;
  border:1px solid #dce6ec;
  border-radius:9px;
  background:#fff;
  color:#2e4263;
  text-align:center;
  font:700 12px/1 "Readex Pro","Cairo",sans-serif;
}
.admin-page-limit button{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid #bfe4ef;
  border-radius:9px;
  background:#eef9fc;
  color:#2f7890;
  cursor:pointer;
}
.admin-page-limit button:disabled{
  opacity:.5;
  cursor:wait;
}
@media(max-width:760px){
  .admin-table td:nth-child(4){
    display:block!important;
  }
  .admin-table td:nth-child(4)::before{
    display:block;
    margin-bottom:6px;
  }
  .admin-page-limit{
    width:100%;
  }
  .admin-page-limit label{
    grid-template-columns:minmax(0,1fr) 40px;
  }
  .admin-page-limit input{
    height:40px;
    font-size:16px;
  }
  .admin-page-limit button{
    width:40px;
    height:40px;
  }
}

/* ==========================================================================
   Q-One v1.4.5 — Background image upload
   ========================================================================== */
.background-upload-button{
  gap:7px!important;
  justify-content:center!important;
}
.background-upload-button.is-loading{
  pointer-events:none;
  opacity:.72;
}
.background-upload-button.is-loading i{
  animation:qSpin .7s linear infinite;
}
.background-upload-status{
  grid-column:1/-1;
  display:block;
  margin:0!important;
  color:#8293a2;
  font-size:9px;
  line-height:1.65;
}
.background-upload-status[data-state="success"]{
  color:#23805f;
}
.background-upload-status[data-state="error"]{
  color:#b24755;
}
.background-upload-status[data-state="loading"]{
  color:#3d7f98;
}
@media(max-width:720px){
  .background-upload-button{
    width:100%;
    min-height:46px!important;
  }
  .background-upload-status{
    padding-inline:2px;
    font-size:9px;
  }
}

/* v1.4.6 — keep custom image background above all legacy theme rules */
.qone-profile.bg-image{
  background-color:var(--bg1)!important;
  background-image:linear-gradient(rgba(0,0,0,var(--image-overlay)),rgba(0,0,0,var(--image-overlay))),var(--bg-image)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.qone-profile.bg-image::before,
.qone-profile.bg-image::after{
  opacity:0!important;
  background:none!important;
}

/* ==========================================================================
   Q-One v1.4.7 — Independent text styling + design-control audit
   ========================================================================== */
.qone-profile .profile-copy h1,
.qone-profile .profile-copy h2{
  color:var(--name-color,rgb(var(--text-rgb)))!important;
  font-size:var(--name-size,var(--title-size))!important;
  font-family:var(--name-font,var(--profile-font))!important;
}
.qone-profile .profile-copy p{
  color:var(--bio-color,rgb(var(--muted-rgb)/.67))!important;
  font-size:var(--bio-size,11px)!important;
  font-family:var(--bio-font,var(--profile-font))!important;
}
.text-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.text-style-card{min-width:0;padding:14px;border:1px solid #e4eaef;border-radius:16px;background:linear-gradient(145deg,#fff,#fbfdfe)}
.text-style-card__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.text-style-icon{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:11px;color:#337c95;background:#eaf8fc}
.text-style-card__head div{min-width:0}.text-style-card__head b{display:block;color:#324b64;font-size:11px}.text-style-card__head small{display:block;margin-top:2px;color:#8b99a6;font-size:8px;line-height:1.55}
.text-style-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.text-color-control{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:6px;align-items:center}
.text-color-control>input[type=color]{width:44px;height:42px;padding:4px;border:1px solid #dfe7ec;border-radius:10px;background:#fff}
.text-color-control>input:not([type=color]){min-width:0;height:42px;padding-inline:10px;border:1px solid #dfe7ec;border-radius:10px;background:#fff;font-size:12px}
.text-color-control .btn{min-height:42px;height:42px;padding-inline:10px!important}
.text-color-control .btn.active{color:#28738d;border-color:#a9ddeb;background:#eaf8fc}
.design-context-control[hidden]{display:none!important}
.control-disabled{position:relative;opacity:.45;filter:saturate(.45)}
.control-disabled::after{content:attr(data-disabled-note);display:block;margin-top:6px;color:#7e8e9d;font-size:8px;line-height:1.45}
.control-disabled input{pointer-events:none}

/* Hover settings now provide press feedback on touch phones too. */
.qone-profile.social-hover-lift .social-row-item:active{transform:translateY(-4px)}
.qone-profile.social-hover-lift .brand-link:active .social-icon{transform:translateY(-3px)}
.qone-profile.social-hover-scale .social-row-item:active{transform:scale(1.10)}
.qone-profile.social-hover-scale .brand-link:active .social-icon{transform:scale(1.10)}
.qone-profile.social-hover-glow .social-row-item:active,
.qone-profile.social-hover-glow .brand-link:active .social-icon{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-color) 18%,transparent),0 0 28px color-mix(in srgb,var(--brand-color) 42%,transparent)!important;filter:saturate(1.1)}
.qone-profile.social-hover-rotate .social-row-item:active{transform:rotate(8deg) scale(1.04)}
.qone-profile.social-hover-rotate .brand-link:active .social-icon{transform:rotate(8deg) scale(1.04)}

/* Continuous motion can coexist with Scroll Reveal on preview and public links. */
.qone-profile.motion-float .profile-link.is-visible:nth-child(odd),
.qone-profile.motion-float .public-link.is-visible:nth-child(odd){animation:q147FloatLink 5.4s ease-in-out infinite!important}
.qone-profile.motion-drift .profile-link.is-visible:nth-of-type(even),
.qone-profile.motion-drift .public-link.is-visible:nth-of-type(even){animation:q147DriftLink 7.8s ease-in-out infinite!important}
.qone-profile.motion-breathe .profile-link.is-visible:nth-of-type(3n),
.qone-profile.motion-breathe .public-link.is-visible:nth-of-type(3n){animation:q147SoftPulse 5.2s ease-in-out infinite!important}
@keyframes q147FloatLink{0%,100%{translate:0 0}50%{translate:0 -2px}}
@keyframes q147DriftLink{0%,100%{translate:0 0}50%{translate:-2px 0}}
@keyframes q147SoftPulse{0%,100%{filter:none}50%{filter:brightness(1.08)}}
@media(max-width:720px){.text-style-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.text-style-card{padding:12px}.text-style-controls{grid-template-columns:minmax(0,1fr)}.text-color-control{grid-template-columns:42px minmax(0,1fr) auto}.text-color-control .btn{padding-inline:8px!important;font-size:9px!important}}
@media(prefers-reduced-motion:reduce){
  .qone-profile.motion-float .profile-link,.qone-profile.motion-float .public-link,
  .qone-profile.motion-drift .profile-link,.qone-profile.motion-drift .public-link,
  .qone-profile.motion-breathe .profile-link,.qone-profile.motion-breathe .public-link{animation:none!important;translate:none!important}
}