:root{
      /* ===== TEMA ESCURO (default) ===== */
      --bg:#0b1220;
      --card:#0f1b2e;
      --text:#e9eef7;
      --muted:#9fb0c8;
      --line:#20324f;
      --brand:#7c8cff;
      --brand2:#38d9a9;
      --danger:#ff5c7a;
      --shadow:0 15px 40px rgba(0,0,0,.45);
      --radius:16px;
      --search-arrows-gap:12px;
      --search-arrows-width:44px;
      --search-arrows-offset:calc(var(--search-arrows-gap) + var(--search-arrows-width));
      --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }

    /* ===== TEMA CLARO ===== */
    body.light{
      --bg:#f3f6fb;
      --card:#ffffff;
      --text:#0f172a;
      --muted:#4b5563;
      --line:#d7e0ef;
      --brand:#3b5bdb;
      --brand2:#12b886;
      --danger:#e03131;
      --shadow:0 15px 40px rgba(2,6,23,.12);
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:var(--sans);
      background:
        radial-gradient(1200px 800px at 20% -10%, rgba(124,140,255,.25), transparent 60%),
        radial-gradient(900px 700px at 90% 0%, rgba(56,217,169,.14), transparent 55%),
        var(--bg);
      color:var(--text);
      min-height:100vh;
    }
    body.light{
      background:
        radial-gradient(1200px 800px at 20% -10%, rgba(59,91,219,.12), transparent 60%),
        radial-gradient(900px 700px at 90% 0%, rgba(18,184,134,.10), transparent 55%),
        var(--bg);
    }

    header{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter: blur(10px);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
      border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
    }

    .wrap{
      max-width:1100px;
      margin:32px auto 0;
      padding:18px 16px;
    }
    .toprow{
      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap:12px;
    }
    .brandleft{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:240px;
    }
    .appLogo{
      display:flex;
      align-items:center;
    }
    .appLogo img{
      height:34px;
      width:auto;
      display:block;
    }
    .appLogo .logoLight{display:none;}
    body.light .appLogo .logoLight{display:block;}
    body.light .appLogo .logoDark{display:none;}

    .hambBtn{
      width:44px;height:44px;
      display:grid;place-items:center;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
      cursor:pointer;
      user-select:none;
      transition:.15s ease;
    }
    .hambBtn:hover{background: color-mix(in srgb, var(--brand) 16%, transparent)}
    .customizeIcon{width:18px;height:18px}
    body:not(.light) .hambBtn{color:#ffffff}
    .mobileHambBtn{display:none}
    #goToHomeBtn.isHomeView,
    #goToSearchBtn.isSearchView,
    #goToTasksBtn.isTasksView,
    #goToTasksExtraBtn.isTasksView,
    #goToPersonalizationsBtn.isPersonalizationsView,
    #goToDoneTasksBtn.isDoneView,
    #goToUsersBtn.isUsersView{
      background: color-mix(in srgb, var(--brand) 16%, transparent);
      border-color: color-mix(in srgb, var(--brand) 45%, transparent);
    }

    .brandleft h1{
      margin:0;
      font-size:18px;
      font-weight:900;
      letter-spacing:.2px;
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }

    .viewTitleRow{
      display:flex;
      justify-content:center;
      margin:6px 0 32px;
    }

    .authOverlay{
      position:fixed;
      inset:0;
      background: var(--bg);
      display:none;
      align-items:center;
      justify-content:center;
      padding:0;
      z-index:2000;
    }
    .authOverlay.show{display:flex}
    .authShell{
        width:100%;
        height:100%;
        display:grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
        border-radius:0;
        overflow:hidden;
        border:0;
        box-shadow:none;
        background: color-mix(in srgb, var(--card) 70%, transparent);
      }
    .authHero{
        position:relative;
        overflow:hidden;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#0b1220;
        padding:0;
      }
    .authHeroImg{
        width:100%;
        height:100%;
        max-width:100%;
        max-height:100%;
        object-fit:cover;
        object-position:center;
        display:block;
      }
    .authPanel{
      background: #0b1220;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .authPanelInner{
      width:100%;
      max-width:420px;
      padding:36px 40px 32px;
      display:flex;
      flex-direction:column;
      gap:14px;
      font-family:"Bahnschrift","Segoe UI Variable Display","Segoe UI",sans-serif;
    }
    .authBrand{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .authBrandLogo{
      height:34px;
      width:auto;
      display:block;
    }
    .authHeader{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:12px;
      padding:0;
      border:0;
    }
    .authHeader h3{
      margin:0;
      font-size:20px;
      font-weight:900;
      color:#f5f8ff;
    }
    .authBody{
      display:flex;
      flex-direction:column;
      gap:12px;
      color:#e9f0ff;
    }
.authProgress{
      width:100%;
      height:6px;
      border-radius:999px;
      background:rgba(124,140,255,.2);
      overflow:hidden;
      display:none;
    }
    .authProgress.isActive{display:block}
    .authProgressBar{
      height:100%;
      width:40%;
      background:linear-gradient(90deg, rgba(124,140,255,.15), #7c8cff, rgba(124,140,255,.15));
      animation:authProgressSlide 1.2s ease-in-out infinite;
    }
    @keyframes authProgressSlide{
      0%{transform:translateX(-120%)}
      100%{transform:translateX(260%)}
    }
    .authForm{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .authLabel{
      font-size:12px;
      font-weight:800;
      color: rgba(245,248,255,.9);
    }
    .authInput{
      width:100%;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(10,18,32,.55);
      color:#f1f6ff;
      padding:12px 14px;
      border-radius:14px;
      outline:none;
    }
    .authInputWrap{position:relative}
    .authInputWrap .authInput{padding-right:44px}
    .authToggleBtn{
      position:absolute;
      right:12px;
      top:50%;
      transform:translateY(-50%);
      border:0;
      background:transparent;
      color:#1c2a4a;
      padding:4px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      z-index:2;
    }
    .authToggleBtn:hover{color:#0b1a3a}
    .authToggleBtn svg{width:18px;height:18px; display:block}
    .authInput:focus{
      border-color: color-mix(in srgb, var(--brand) 70%, var(--line));
      box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent);
    }
    .authRoleRow{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .authRoleOption{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      font-weight:700;
      color: color-mix(in srgb, var(--text) 82%, transparent);
    }
    .authRoleText{
      font-size:12px;
      font-weight:800;
      color: color-mix(in srgb, var(--text) 88%, transparent);
    }
    .authDivider{
      height:1px;
      margin:8px 0;
      background: rgba(255,255,255,.14);
    }
    .authBackBtn{
      display:none;
    }
    .authCaptcha{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .authCaptchaRow{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .authCaptchaQuestion{
      font-size:12px;
      font-weight:800;
      color: color-mix(in srgb, var(--text) 88%, transparent);
    }
    .authSubmit{
      width:100%;
      margin-top:6px;
      padding:12px 14px;
      border-radius:999px;
    }
    .authActions{
      display:flex;
      justify-content:flex-end;
      gap:8px;
    }
    .authLoginRow{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:10px;
      margin-top:6px;
    }
    .authLoginRow .authSubmit{
      margin-top:0;
    }
    .authLoginRow .btn{
      width:100%;
      padding:12px 14px;
      border-radius:999px;
    }
    .authOr{
      display:flex;
      align-items:center;
      gap:10px;
      color: rgba(225,236,255,.7);
      font-size:12px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .authOr::before,
    .authOr::after{
      content:"";
      flex:1;
      height:1px;
      background: rgba(255,255,255,.16);
    }
    .authGoogleBtn{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.2);
      background: rgba(7,14,28,.6);
      color:#f4f7ff;
      font-weight:800;
    }
    .authGoogleBtn img{
      width:18px;
      height:18px;
      display:block;
    }
    .authLoginDivider{
      height:1px;
      background: rgba(255,255,255,.16);
      margin:16px 0;
    }
    .authPartner{
      font-size:12px;
      color: rgba(225,236,255,.85);
      text-align:center;
    }
    .authCoupon{
      font-size:12px;
      font-weight:700;
      color: rgba(225,236,255,.85);
      text-align:center;
    }
    .authCouponHighlight{
      font-weight:900;
      color: var(--brand2);
    }
    .authError{
      color:#ef4444;
      font-weight:900;
    }
    .authHint{
      color:#ef4444;
      font-weight:900;
    }
    @media (max-width: 900px){
      .authShell{
        grid-template-columns: 1fr;
      }
      .authHero{
        height:240px;
      }
      .authPanelInner{
        max-width:100%;
      }
    }
    .viewTitle{
      font-size:26px;
      font-weight:900;
      letter-spacing:.2px;
      font-family:"Bahnschrift","Segoe UI Variable Text","Segoe UI","Consolas","Arial",sans-serif;
    }
    .pill{
      background:linear-gradient(90deg,var(--brand),var(--brand2));
      color: color-mix(in srgb, var(--bg) 86%, #000);
      padding:4px 10px;
      border-radius:999px;
      font-weight:900;
      font-size:12px;
    }

    .brandright{
      text-align:right;
      color:var(--muted);
      font-weight:900;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px; /* menor */
      flex-wrap:nowrap;
      padding-right:0;
    }
    .userChip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      margin-bottom:0;
      border-radius:999px;
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
      color:var(--text);
      cursor:pointer;
    }
    .userBar{
      width:100%;
      padding:8px 16px 0;
    }
    .userBarInner{
      max-width:1100px;
      margin:0 auto;
      display:flex;
      gap:16px;
      align-items:center;
      justify-content:flex-end;
    }
    .userAvatar,
    .userAvatarPreview{
      width:28px;
      height:28px;
      border-radius:999px;
      background: color-mix(in srgb, var(--line) 70%, transparent);
      display:grid;
      place-items:center;
      overflow:hidden;
      font-size:12px;
      font-weight:700;
      color:var(--text);
    }
    .userAvatar img,
    .userAvatarPreview img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:none;
    }
    .userAvatarFallback{line-height:1;}
    .userName{
      font-size:12px;
      font-weight:600;
      white-space:nowrap;
    }
    .userProfileModal .userAvatarPreview{
      width:56px;
      height:56px;
      font-size:18px;
    }
    /* Holding Sena maior */
    .brandright strong{
      color:var(--text);
      font-weight:950;
      font-size:14px; /* maior */
      letter-spacing:.2px;
    }
    .brandright .sep{opacity:.7; margin:0 2px}

    .miniLogoRow{
      display:flex;
      align-items:center;
      gap:16px; /* >>> solicitado: 16px entre as logos */
      margin-left:2px;
      margin-right:2px;
    }
    .miniLogo{
      width:72px;
      height:72px;
      object-fit:contain;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
      opacity:.95;
    }
    /* >>> Nerdify um pouco maior */
    .miniLogo.dn{
      width:78px;
      height:78px;
    }

    body.light .miniLogo{
      filter: drop-shadow(0 10px 18px rgba(2,6,23,.12));
    }

    .scrollBtns{display:flex;gap:10px;align-items:center;justify-content:flex-end}
    .scrollBtn{
      width:44px;height:44px;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
      display:grid;
      place-items:center;
      cursor:pointer;
      user-select:none;
      transition:.15s ease;
      font-weight:950;
    }
    .scrollBtn:hover{background: color-mix(in srgb, var(--brand) 16%, transparent)}
    .scrollBtn span{display:block;font-size:18px;line-height:1;opacity:.95;transform:translateY(-1px)}
    .scrollBtn, .themeBtn{
      color:#ffffff;
    }
    body.light .scrollBtn, body.light .themeBtn{
      color:#0f172a;
    }

    /* botão tema (sol/lua) */
    .themeBtn{
      width:44px;height:44px;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
      display:grid;
      place-items:center;
      cursor:pointer;
      user-select:none;
      transition:.15s ease;
      font-weight:950;
    }
    .themeBtn:hover{background: color-mix(in srgb, var(--brand) 16%, transparent)}
    .themeBtn span{font-size:18px; line-height:1; transform:translateY(-1px)}
    .iconStroke{
      width:20px;
      height:20px;
      stroke:currentColor;
      stroke-width:2;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .scrollBtn .iconStroke{width:18px;height:18px}
    #themeIcon svg{
      width:20px;
      height:20px;
      stroke:currentColor;
      stroke-width:2;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
      display:block;
    }
    body:not(.light) #themeToggleBtn #themeIcon svg{
      transform:translateY(2.5px);
    }
    #themeToggleBtn #themeIcon{
      display:grid;
      place-items:center;
      width:20px;
      height:20px;
    }
    #themeIconMobile{
      display:grid;
      place-items:center;
      width:20px;
      height:20px;
    }
    #themeIconMobile svg{
      width:20px;
      height:20px;
      stroke:currentColor;
      stroke-width:2;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
      display:block;
    }
    #orderLookupBtn{
      color:#ffffff;
    }
    body.light #orderLookupBtn{
      color:#0f172a;
    }
    .metaIcon{
      width:20px;
      height:20px;
      stroke:currentColor;
      stroke-width:2;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .sakIcon{
      width:20px;
      height:20px;
      display:block;
    }
    .sakIcon .sakFill{
      fill:#ffffff;
    }
    body.light .sakIcon .sakFill{
      fill:#000000;
    }
    .nuvemIcon{
      width:22px;
      height:22px;
      stroke:currentColor;
      stroke-width:3.6;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .waIconBtn{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .waIconLetter{
      position:absolute;
      top:50%;
      left:50%;
      width:20px;
      height:20px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:9px;
      font-weight:900;
      line-height:1;
      color:#0b1b2a;
      pointer-events:none;
      letter-spacing:0.02em;
      transform:translate(-50%, -50%);
    }
    .nuvemIcon .nuvemLeft{
      stroke-dasharray:52 10;
      stroke-dashoffset:10;
      transform-origin:17.5px 26.5px;
      transform:rotate(38deg);
    }

    /* >>> manter como está (você não pediu mudança aqui) */
    .searchrowWrap{
      display:flex;
      gap:var(--search-arrows-gap);
      align-items:center;
      justify-content:center;
    }
    .searchArrows{
      flex-direction:column;
      gap:8px;
      width:var(--search-arrows-width);
    }
    .searchArrows .scrollBtn{
      border:0;
      background:transparent;
    }
    .searchrow{
      flex:0 1 980px;
      width:100%;
      display:flex;
      gap:12px;
      align-items:center;
      background: color-mix(in srgb, var(--card) 85%, transparent);
      border:1px solid color-mix(in srgb, var(--line) 92%, transparent);
      border-radius:0;
      padding:12px 14px;
      box-shadow: 0 12px 30px rgba(0,0,0,.15);
    }
    body.light .searchrow{box-shadow: 0 12px 30px rgba(2,6,23,.06)}
    .searchrow .icon{
      opacity:.9;
      color:#ffffff;
    }
    body.light .searchrow .icon{
      color:#0f172a;
    }
    .filterBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:8px 10px;
      border-radius:10px;
      line-height:1;
    }
    .rightDrawerBtn span{font-size:16px; line-height:1;}
    .tagFilters{
      display:flex;
      flex-wrap:wrap;
      gap:8px 12px;
      align-items:center;
    }
    #searchTagList{
      margin-top:16px;
      margin-bottom:0;
    }
    .searchTagForm{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .searchTagForm #addSearchTagBtn{
      margin-top:0;
      flex:0 0 auto;
    }
    .tagFilterItem{
      display:inline-flex;
      gap:6px;
      align-items:center;
      font-size:12px;
      color:var(--muted);
      font-weight:800;
      text-transform:lowercase;
    }
    .tagItem{
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .tagRemoveBtn{
      border:0;
      background:transparent;
      color:var(--text);
      font-weight:900;
      font-size:12px;
      cursor:pointer;
      padding:0 4px;
      line-height:1;
    }
    .tagRemoveBtn:hover{
      color:color-mix(in srgb, var(--danger) 70%, var(--text));
    }
    .searchrow .filterIcon svg{display:block}
    .searchrow input{
      width:100%;
      border:0;
      outline:0;
      background:transparent;
      color:var(--text);
      font-size:14px;
    }
    .searchInputWrap{
      position:relative;
      flex:1;
      min-width:0;
    }
    .searchInputWrap .icon{
      position:absolute;
      left:12px;
      top:50%;
      transform:translateY(-50%);
      pointer-events:none;
      width:16px;
      height:16px;
    }
    .searchInputWrap .icon svg{
      width:16px;
      height:16px;
      display:block;
    }
    .searchInputWrap input{
      padding-left:calc(12px + 16px + 4px);
    }
    .hint{
      margin-top:10px;
      color:var(--muted);
      font-size:12px;
    }

    main{
      max-width:1100px;
      margin:8px auto 0;
      padding:18px 16px 8px;
    }
    .grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:8px;
      align-items:start;
    }
    .grid.single{
      grid-template-columns:1fr;
    }
    .viewStack{
      position:relative;
      overflow:hidden;
    }
    .homeGrid{
      display:grid;
      grid-template-columns:1fr;
      gap:18px;
    }
    .homeFilterBar{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
      justify-content:center;
    }
    .homeFilterFields{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      justify-content:center;
      align-items:flex-end;
      flex:1;
    }
    .homeFilterGroup{
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width:150px;
    }
    .homeCustomRange{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:flex-end;
    }
    .homeFilterDate{
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width:130px;
    }
    .homeFilterActions{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:center;
    }
    .homeUsersLoading{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      font-size:12px;
      color:var(--muted);
      margin-top:4px;
    }
    .homeUsersLoading[hidden]{
      display:none;
    }
    .homeUsersLoadingBar{
      width:120px;
      height:6px;
      border-radius:999px;
      overflow:hidden;
      background:color-mix(in srgb, var(--line) 70%, transparent);
      position:relative;
    }
    .homeUsersLoadingBar::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, rgba(56,217,169,0.1), rgba(56,217,169,0.7), rgba(56,217,169,0.1));
      animation:homeUsersLoading 1.2s linear infinite;
      transform:translateX(-100%);
    }
    @keyframes homeUsersLoading{
      0%{ transform:translateX(-100%); }
      100%{ transform:translateX(100%); }
    }
    .homeFilterIconBtn{
      display:grid;
      place-items:center;
      background:transparent;
      border:none;
      padding:6px;
      color:var(--text);
      cursor:pointer;
    }
    .homeFilterIconBtn svg{
      width:18px;
      height:18px;
    }
    .homeKpiGrid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
      gap:14px;
    }
    .homeKpiGrid.isCollapsed .homeKpiItem:nth-child(n+11){
      display:none;
    }
    .homeKpiItem{
      background:color-mix(in srgb, var(--card) 70%, transparent);
      border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
      border-radius:12px;
      padding:14px;
      display:flex;
      flex-direction:column;
      min-height:86px;
      position:relative;
    }
    .homeKpiLabel{
      font-size:12px;
      color:var(--muted);
      line-height:1.2;
      min-height:30px;
    }
    .homeKpiDivider{
      margin-top:8px;
      height:1px;
      background:color-mix(in srgb, var(--line) 75%, transparent);
      width:100%;
    }
    .homeKpiValue{
      margin-top:16px;
      text-align:center;
      font-size:22px;
      font-weight:600;
      line-height:1;
    }
    .homeKpiToggle{
      display:flex;
      justify-content:center;
      margin-top:10px;
    }
    .homeKpiToggleBtn{
      background:none;
      border:none;
      color:var(--muted);
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:4px 6px;
      font-size:13px;
    }
    .homeKpiToggleBtn:hover{
      color:var(--text);
    }
    .homeKpiToggleIcon{
      width:16px;
      height:16px;
      stroke:currentColor;
      fill:none;
      stroke-width:2;
    }
    .homeKpiTotalBtn{
      position:absolute;
      top:8px;
      right:8px;
      background:none;
      border:none;
      color:var(--muted);
      padding:4px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }
    .homeKpiTotalBtn:hover{
      color:var(--text);
    }
    .homeKpiTotalIcon{
      width:16px;
      height:16px;
      stroke:currentColor;
      fill:none;
      stroke-width:2;
    }
    .kpiTotalFilterInfo{
      color:var(--muted);
      font-size:12px;
      margin-bottom:8px;
    }
    .kpiTotalSummary{
      font-weight:600;
      margin-bottom:12px;
    }
    .kpiTotalList{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .kpiTotalRow{
      background:color-mix(in srgb, var(--card) 70%, transparent);
      border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
      border-radius:10px;
      padding:10px 12px;
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
      gap:8px 12px;
    }
    .kpiTotalLabel{
      font-size:11px;
      color:var(--muted);
      margin-bottom:2px;
    }
    .kpiTotalValue{
      font-size:13px;
    }
    .homeChartCard{
      overflow:visible;
    }
    .homeChart{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .homeChartLayout{
      display:grid;
      grid-template-columns:46px 1fr;
      grid-template-rows:1fr auto;
      gap:10px 12px;
      align-items:end;
    }
    .homeChartLayout{
      --chart-pad-x: 12px;
      --chart-pad-y: 8px;
      --chart-pad-bottom: 14px;
      --chart-gap: 10px;
    }
    .homeChartYAxis{
      display:grid;
      grid-template-rows:repeat(var(--chart-grid-rows, 5), 1fr);
      align-items:end;
      align-items:flex-end;
      font-size:10px;
      color:var(--muted);
      padding:var(--chart-pad-y) 6px var(--chart-pad-bottom) 0;
      height:220px;
    }
    .homeChartYAxisLabel{
      line-height:1;
      display:flex;
      align-items:flex-end;
    }
    .homeChartBars{
      display:flex;
      align-items:flex-end;
      gap:var(--chart-gap);
      height:220px;
      padding:var(--chart-pad-y) var(--chart-pad-x) var(--chart-pad-bottom);
      overflow:hidden;
      position:relative;
      border-left:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
    }
    .homeChartGrid{
      position:absolute;
      inset:var(--chart-pad-y) var(--chart-pad-x) var(--chart-pad-bottom);
      display:grid;
      grid-template-rows:repeat(var(--chart-grid-rows, 5), 1fr);
      pointer-events:none;
    }
    .homeChartGrid span{
      border-bottom:1px solid color-mix(in srgb, var(--line) 75%, transparent);
    }
    .homeChartAxis{
      grid-column:2;
      padding:0 var(--chart-pad-x) 4px;
    }
    .homeChartAxisLabels{
      display:flex;
      align-items:flex-start;
      gap:var(--chart-gap);
    }
    .homeChartAxisLabel{
      flex:1 1 0;
      min-width:0;
      text-align:center;
      font-size:10px;
      color:var(--muted);
      white-space:nowrap;
    }
    .homeChartAxisLabel.isEmpty{
      visibility:hidden;
    }
    .homeChartLegend{
      display:flex;
      align-items:center;
      gap:16px;
      font-size:11px;
      color:var(--muted);
      margin-bottom:10px;
    }
    .homeChartLegendItem{
      display:flex;
      align-items:center;
      gap:6px;
    }
    .homeChartLegendSwatch{
      width:10px;
      height:10px;
      border-radius:3px;
      background:linear-gradient(180deg, rgba(56,217,169,0.9), rgba(56,217,169,0.2));
      display:inline-block;
    }
    .homeChartLegendSwatch.isCreated{
      background:rgba(56,217,169,0.95);
    }
    .homeChartLegendSwatch.isClosed{
      background:rgba(255,99,99,0.95);
    }
    .homeChartGroup{
      flex:1 1 0;
      min-width:0;
      height:100%;
      position:relative;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      gap:6px;
      z-index:1;
    }
    .homeChartGroup::after{
      content:"";
      position:absolute;
      bottom:-4px;
      width:1px;
      height:6px;
      background:color-mix(in srgb, var(--line) 75%, transparent);
    }
    .homeChartBar{
      width:clamp(8px, 1.2vw, 14px);
      border-radius:2px;
      background:rgba(56,217,169,0.9);
      position:relative;
    }
    .homeChartBar.isCreated{
      background:rgba(56,217,169,0.95);
    }
    .homeChartBar.isClosed{
      background:rgba(255,99,99,0.95);
    }
    .homeChartBar.isPersonalization{
      background:rgba(255,184,77,0.95);
    }
    .homeSwapList,
    .homeUsersList{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .homeSwapItem,
    .homeUserItem{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:10px 12px;
      background:color-mix(in srgb, var(--card) 70%, transparent);
      border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
      border-radius:10px;
    }
    .homeUserMeta{
      align-items:flex-start;
      text-align:left;
    }
    .homeUserMeta{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .homeUserTitle{
      font-weight:600;
    }
    .homeUserSub{
      font-size:12px;
      color:var(--muted);
    }
    .homeDistGrid{
      display:grid;
      grid-template-columns:repeat(3, minmax(180px, 1fr));
      gap:0;
      border:1px solid color-mix(in srgb, var(--line) 75%, transparent);
      border-radius:12px;
      overflow:hidden;
    }
    .homeDistBlock{
      padding:12px;
      border-right:1px solid color-mix(in srgb, var(--line) 75%, transparent);
      border-bottom:1px solid color-mix(in srgb, var(--line) 75%, transparent);
    }
    .homeDistBlock .homeChartTitle{
      padding-bottom:8px;
      margin-bottom:10px;
      border-bottom:1px solid color-mix(in srgb, var(--line) 75%, transparent);
    }
    .homeDistBlock:nth-child(3n){
      border-right:none;
    }
    .homeDistBlock:nth-last-child(-n+3){
      border-bottom:none;
    }
    @media(max-width:1200px){
      .homeDistGrid{
        grid-template-columns:repeat(2, minmax(200px, 1fr));
      }
      .homeDistBlock:nth-child(3n){
        border-right:1px solid color-mix(in srgb, var(--line) 75%, transparent);
      }
      .homeDistBlock:nth-child(2n){
        border-right:none;
      }
      .homeDistBlock:nth-last-child(-n+2){
        border-bottom:none;
      }
    }
    @media(max-width:700px){
      .homeDistGrid{
        grid-template-columns:1fr;
      }
      .homeDistBlock{
        border-right:none;
      }
      .homeDistBlock:nth-last-child(-n+2){
        border-bottom:1px solid color-mix(in srgb, var(--line) 75%, transparent);
      }
      .homeDistBlock:last-child{
        border-bottom:none;
      }
    }
    .homeBarList{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .homeBarItem{
      display:flex;
      flex-direction:column;
      gap:6px;
      padding:8px 0;
      border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);
    }
    .homeBarItem:first-child{
      border-top:none;
      padding-top:0;
    }
    .homeBarRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      font-size:12px;
      color:var(--muted);
    }
    .homeBarRow strong{
      color:var(--text);
      font-weight:600;
      flex:0 0 auto;
    }
    .homeBarRow span{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .homeBarTrack{
      position:relative;
      height:8px;
      border-radius:999px;
      background:color-mix(in srgb, var(--card) 70%, transparent);
      overflow:hidden;
    }
    .homeBarFill{
      position:absolute;
      inset:0 auto 0 0;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(59,91,219,0.9), rgba(116,192,252,0.5));
      width:0%;
    }
    .homeUserActions{
      display:flex;
      gap:10px;
      align-items:center;
    }
    .homeUserSummaryBtn{
      display:grid;
      place-items:center;
      background:transparent;
      border:none;
      padding:4px;
      color:var(--text);
      cursor:pointer;
    }
    .homeUserSummaryBtn svg{
      width:16px;
      height:16px;
    }
    .homeUserStats{
      font-size:12px;
      color:var(--muted);
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .viewScreen{
      position:absolute;
      inset:0;
      width:100%;
      opacity:0;
      transform:none;
      pointer-events:none;
      transition:none;
    }
    .viewScreen.isActive{
      position:relative;
      opacity:1;
      transform:none;
      pointer-events:auto;
    }
    .viewScreen.toLeft{
      opacity:0;
    }
    .viewScreen.toRight{
      opacity:0;
    }
    .viewStack.isInstant .viewScreen{
      transition:none;
    }
    @media(max-width:980px){
      .grid{grid-template-columns:1fr}
      .brandright{display:none}
    }

    .card{
      background: color-mix(in srgb, var(--card) 85%, transparent);
      border:1px solid color-mix(in srgb, var(--line) 92%, transparent);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .card .hd{
      padding:14px 14px 10px;
      border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
    }
    .homeFilterHeader{
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:10px;
    }
    .homeFilterPeriodTop{
      display:flex;
      justify-content:flex-end;
      padding:0 12px 0;
      font-size:12px;
      font-weight:700;
      color:var(--text-muted);
    }
    .homeFilterHeaderSide{
      display:flex;
      align-items:center;
    }
    .homeFilterHeaderSide:last-child{
      justify-content:flex-end;
    }
    .homeFilterRefreshBtn{
      justify-self:center;
    }
    .card .hd h2{margin:0;font-size:14px;font-weight:900}
    .card .bd{padding:14px}
    .resultsCard .hd{
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
    }
    .resultsCard .hd h2{justify-self:start}
    .resultsCard .hd #openQuestionModalBtn{justify-self:center}
    .resultsCard .hd .count{justify-self:end}
    #viewTasks .card .hd{
      display:grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto;
      row-gap:4px;
      column-gap:12px;
      align-items:center;
    }
    .taskHeaderTitle{
      grid-column:1;
      grid-row:1 / span 2;
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .taskHeaderTitle h2{
      margin:0;
    }
    .taskHeaderTitle .count{
      margin-top:16px;
    }
    .taskHeaderActions{
      grid-column:2;
      grid-row:1 / span 2;
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:4px;
    }
    .taskHeaderButtons{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .taskHeaderActions .count{
      text-align:right;
      width:auto;
      align-self:flex-end;
    }
    .taskListTopActions{
      display:flex;
      justify-content:flex-end;
      align-items:center;
      margin-bottom:10px;
      min-height:0;
    }
    .btn.flatBtn{
      background:transparent;
      border:0;
      padding:0;
      font-weight:900;
    }
    .btn.flatBtn:hover{
      background:transparent;
    }

    .btn{
      border:1px solid color-mix(in srgb, var(--line) 92%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
      color:var(--text);
      padding:10px 14px;
      border-radius:12px;
      cursor:pointer;
      font-weight:900;
      transition:.15s ease;
      user-select:none;
          text-decoration:none;
    }
    .btn.hasIcon{
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .btn.hasIcon .iconStroke{
      width:14px;
      height:14px;
    }
    .btn.isLoading{
      opacity:0.6;
      pointer-events:none;
    }
    .btn:hover{background: color-mix(in srgb, var(--brand) 16%, transparent)}
    .btn.primary{
      border:1px solid color-mix(in srgb, var(--line) 92%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
      color:var(--text);
    }
    .btn.danger{
      border-color:color-mix(in srgb, var(--danger) 65%, transparent);
      color: color-mix(in srgb, var(--danger) 70%, var(--text));
    }
    body:not(.light) .btn,
    body:not(.light) .btn.primary,
    body:not(.light) .btn.danger{
      color:#ffffff;
    }
    .btn.small{padding:8px 12px;border-radius:10px;font-size:12px}
    .btn.copyBtn{border:0;background:transparent}
    .copyBtnHidden{visibility:hidden}

    .count{color:var(--muted);font-size:12px;font-weight:900}
    .count .doneCountDaily{color:#0f8f5f;font-weight:900}
    .count .doneCountExtra{color:#ff922b;font-weight:900}
    .count .doneCountPersonal{color:#ff5c7a;font-weight:900}

    .results{display:flex;flex-direction:column;gap:12px}
    .item{
      padding:12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,0.9);
      background: color-mix(in srgb, var(--bg) 65%, transparent);
    }
    body.light .item{background: color-mix(in srgb, var(--card) 92%, transparent)}
    .itemTitle{
      font-weight:950;
      margin:0 0 10px 0;
      font-size:14px;
      line-height:1.25;
    }
    .item .btnrow{
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:nowrap;
    }

    .row{
      display:flex;
      gap:10px;
      align-items:flex-start;
      justify-content:flex-end;
    }
    .results .item .row{
      justify-content:space-between;
      align-items:center;
    }
    .results .item .row .itemTitle{
      text-align:left;
    }
    .row.centerRow{
      justify-content:center;
    }
    .taskModalActions{
      display:flex;
      flex-direction:row;
      align-items:center;
      justify-content:center;
      gap:10px;
      flex-wrap:wrap;
      margin-top:6px;
    }
    .formGrid > div.taskModalActions{
      flex-direction:row;
      align-items:center;
      justify-content:center;
    }
    .taskModalActions .btn{
      width:auto;
      min-width:120px;
      flex:0 0 auto;
    }
    .label{
      font-size:12px;
      color:var(--muted);
      font-weight:900;
      margin:0 0 6px 0;
      display:flex;
      justify-content:flex-start;
      align-items:center;
      gap:10px;
      text-align:left;
    }
    .label .count{
      margin-left:auto;
      text-align:right;
    }
    textarea, input[type="text"], input[type="date"], input[type="time"], input[type="email"], input[type="tel"], select{
      width:100%;
      padding:12px 12px;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 92%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
      color:var(--text);
      outline:none;
      font-family:var(--sans);
      font-size:13px;
      resize:vertical;
    }
    .searchInputWrap{
      --search-icon-left:12px;
      --search-icon-size:16px;
      --search-icon-gap:4px;
    }
    .searchInputWrap .icon{
      left:var(--search-icon-left);
      width:var(--search-icon-size);
      height:var(--search-icon-size);
    }
    .searchInputWrap .icon svg{
      width:var(--search-icon-size);
      height:var(--search-icon-size);
    }
    .searchInputWrap input{
      padding-left:calc(var(--search-icon-left) + var(--search-icon-size) + var(--search-icon-gap));
    }
    body.light textarea, body.light input[type="text"], body.light input[type="date"], body.light input[type="time"], body.light input[type="email"], body.light input[type="tel"], body.light select{
      background: color-mix(in srgb, var(--card) 90%, transparent);
    }
    textarea{min-height:110px}
    .emailMultiField{
      min-height:56px;
    }
    .attentionRow{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .phaseNoTrackRow{
      margin-top:8px;
    }
    .phaseNoTrackDivider{
      border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent);
      margin:10px 0 6px;
    }
    .attentionToggle{
      display:flex;
      align-items:center;
      gap:8px;
      font-weight:900;
      font-size:12px;
      color:var(--muted);
    }
    .attentionNoteWrap{
      display:block;
    }
    select{appearance:none}
    input[type="time"]::-webkit-calendar-picker-indicator{
      filter: invert(1);
      opacity: 0.95;
    }
    body.light input[type="time"]::-webkit-calendar-picker-indicator{
      filter: none;
      opacity: 0.7;
    }

    .formGrid{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .formGrid > div{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      text-align:left;
    }
    .formGrid > div .label{
      align-self:flex-start;
      justify-content:flex-start;
      text-align:left;
      width:100%;
    }
    #phaseEditOverlay .formGrid{gap:0}
    #phaseEditOverlay .formGrid > div + div{margin-top:16px}
    #phaseEditOverlay .formGrid .label{margin-bottom:8px}
    #phaseEditOverlay .label{
      justify-content:flex-start;
      text-align:left;
    }
    .phaseImagesRow{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .phaseImagesList{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-top:8px;
    }
    .phaseImageItem{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:8px 12px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,0.08);
      background:rgba(5,10,25,0.35);
    }
    .phaseImageName{
      font-size:13px;
      color:#d9e6ff;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      flex:1;
    }
    .phaseImageEmpty{
      padding:6px 2px;
    }
    .miniOverlay .label{
      justify-content:flex-start;
      text-align:left;
    }
    .specsAddRow{
      display:flex;
      gap:8px;
      align-items:center;
    }
    .specsAddRow input{flex:1}
    .specsList{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-top:8px;
    }
    .specsItem{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      padding:8px 10px;
      border-radius:10px;
      border:1px solid color-mix(in srgb, var(--line) 75%, transparent);
      background: color-mix(in srgb, var(--bg) 72%, transparent);
      font-size:12px;
      font-weight:800;
      color: color-mix(in srgb, var(--text) 92%, transparent);
    }
    body.light .specsItem{
      background: color-mix(in srgb, var(--card) 92%, transparent);
    }
    .specsRemoveBtn{
      border:0;
      background:transparent;
      color:var(--danger);
      font-weight:900;
      cursor:pointer;
      padding:2px 6px;
      line-height:1;
    }
    .socialExtraRow{
      display:flex;
      gap:8px;
      align-items:center;
      margin-bottom:8px;
    }
    .fieldStack{
      display:flex;
      flex-direction:column;
      gap:4px;
      flex:1;
    }
    .socialExtraRow input,
    .socialExtraRow select{
      flex:1;
    }
    .emailExtraRow{
      display:flex;
      gap:8px;
      align-items:center;
      margin-bottom:8px;
    }
    .emailExtraRow input{
      flex:1;
    }
    .emailExtraRowGroup{
      display:flex;
      flex-direction:column;
      gap:4px;
      margin-bottom:8px;
    }
    .emailPrimaryNote{
      font-size:11px;
      color:color-mix(in srgb, var(--accent) 75%, #ffffff);
      background:color-mix(in srgb, var(--accent) 14%, transparent);
      border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
      border-radius:8px;
      padding:6px 8px;
    }
    #settingsOverlay .formGrid .btn{
      justify-content:center;
      text-align:center;
    }
    .specsActions{
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .specsMoveBtn{
      border:0;
      background:transparent;
      color:var(--text);
      font-weight:900;
      cursor:pointer;
      padding:2px 6px;
      line-height:1;
      opacity:.8;
    }
    .specsMoveBtn:hover{opacity:1}
    .colorPickerList{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-top:6px;
    }
    .colorPickItem{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      padding:8px 10px;
      border-radius:10px;
      border:1px solid color-mix(in srgb, var(--line) 75%, transparent);
      background: color-mix(in srgb, var(--bg) 72%, transparent);
    }
    body.light .colorPickItem{
      background: color-mix(in srgb, var(--card) 92%, transparent);
    }
    .colorPickInfo{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:12px;
      font-weight:800;
      color: color-mix(in srgb, var(--text) 92%, transparent);
    }
    .colorPickSwatch{
      width:14px;
      height:14px;
      border-radius:50%;
      border:1px solid color-mix(in srgb, var(--line) 65%, transparent);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
    }
    .colorPickCheck{
      width:16px;
      height:16px;
      accent-color: var(--brand2);
    }
    .note{color:var(--muted);font-size:12px;line-height:1.35}
    .fieldError{
      margin-top:6px;
      color:var(--danger);
      font-size:12px;
      font-weight:900;
      display:none;
    }

    .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
    .tag{
      font-size:12px;
      padding:4px 10px;
      border-radius:999px;
      border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
      color: color-mix(in srgb, var(--text) 92%, transparent);
      font-weight:800;
    }
    body.light .tag{background: color-mix(in srgb, var(--card) 88%, transparent)}

    .linksBlock{
      margin-top:16px;
      padding-top:12px;
      border-top:1px dashed rgba(255,255,255,0.6);
    }
    .taskCard .linksBlock{
      position:relative;
      padding-top:24px;
    }
    .taskCard .linksBlock.phaseBlock{
      border-top:1px dashed rgba(255,255,255,0.6);
      padding-top:12px;
      margin-top:12px;
    }
    .phaseHeaderRow{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:12px;
    }
    .phaseState{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      font-weight:800;
      letter-spacing:.2px;
    }
    .phaseDot{
      width:8px;
      height:8px;
      border-radius:50%;
      background: #ff5c7a;
      box-shadow: 0 0 10px color-mix(in srgb, #ff5c7a 45%, transparent);
    }
    .phaseState.isActive .phaseDot{
      background: #38d9a9;
      box-shadow: 0 0 10px color-mix(in srgb, #38d9a9 55%, transparent);
    }
    .phaseState.isPersonal .phaseDot{
      background: #f4c2c2;
      box-shadow: 0 0 10px color-mix(in srgb, #f4c2c2 55%, transparent);
    }
    .phaseBtnsRow{
      margin-top:10px;
      margin-bottom:16px;
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
.phaseRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:nowrap;
  margin-top:6px;
}
.phaseRow .phaseTitle{
  margin:0;
}
.phaseRow .label{
  text-align:left;
  margin-right:0;
}
.phaseStateSmall{
  font-size:12px;
}
.taskPhaseMeta{
  margin:12px 0 0px 0;  
  font-size:13px;
  display:flex;
  flex-direction:column;
}
body.light .taskPhaseMeta{
  border-top:0;
}
.taskPhaseMetaRow{
  padding:8px 0;
}
.taskPhaseMetaRow + .taskPhaseMetaRow{
  border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
body.light .taskPhaseMetaRow + .taskPhaseMetaRow{
  border-top:1px solid color-mix(in srgb, var(--line) 85%, transparent);
}
.taskPhaseMeta + .label{  
  padding-top:8px;
  border-top:0;
}
body.light .taskPhaseMeta + .label{
  border-top:0;
}


    /* ===== Observações (Tarefas) — linha tracejada entre as fases ===== */
    /* Estrutura gerada no JS:
       <div class="linksBlock">
         <div class="label">Observações</div>
         <div>...Fase 1...</div>
         <div>...Fase 2...</div>
         ...
       </div>
       Por isso, aplicamos a borda a partir do 3º filho (Fase 2 em diante).
    */
    .phaseDivider{
      margin:12px 0;
      border-top:2px dashed rgba(255,255,255,0.6);
      opacity:0.95;
      height:0;
    }

    .copyRow{
      display:flex;
      gap:10px;
      align-items:flex-start;
      justify-content:flex-end;
    }
    .copyRow > div{
      min-width:0;
    }
    .pre{
      white-space:pre-wrap;
      overflow-wrap:anywhere;
      word-break:break-word;
      font-family:var(--sans);
      font-size:13px;
      line-height:1.45;
      color: color-mix(in srgb, var(--text) 95%, transparent);
    }
    .stepsBtn{
      margin-top:10px;
      display:flex;
      justify-content:flex-end;
      gap:10px;
      flex-wrap:wrap;
    }

    .dashDivider{
      height:0;
      border:0;
      border-top:1px dashed color-mix(in srgb, var(--line) 75%, transparent);
      margin:10px 0;
    }
    #viewSearch .dashDivider{
      border-top-color:rgba(255,255,255,0.9);
    }
    .dashDivider.tagsDivider{
      border-top-color:rgba(255,255,255,0.9);
      margin-top:16px;
    }

    /* ===== Imagens (Pergunta) ===== */
    .qImgsPreviewWrap{
      display:flex;
      flex-direction:column;
      gap:10px;
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
      border-radius:14px;
      padding:10px;
    }
    body.light .qImgsPreviewWrap{background: color-mix(in srgb, var(--card) 92%, transparent)}
    .qImgsPreviewTop{
      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .qImgsPreviewTop .btnrow{display:flex;gap:10px;flex-wrap:wrap}
    .qImgsGrid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:10px;
    }
    @media(max-width:520px){
      .qImgsGrid{grid-template-columns:1fr}
    }
    .qImgBox{
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
      border-radius:12px;
      overflow:hidden;
      min-height:140px;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
    }
    body.light .qImgBox{background: color-mix(in srgb, var(--card) 92%, transparent)}
    .qImgBox img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      background: color-mix(in srgb, var(--bg) 80%, transparent);
    }
    body.light .qImgBox img{background: color-mix(in srgb, var(--card) 94%, transparent)}
    .qImgName{
      position:absolute;
      left:8px; right:8px; bottom:8px;
      font-size:11px;
      color: color-mix(in srgb, var(--text) 90%, transparent);
      background: color-mix(in srgb, var(--bg) 78%, transparent);
      border:1px solid color-mix(in srgb, var(--line) 65%, transparent);
      padding:5px 8px;
      border-radius:10px;
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
      font-weight:800;
    }
    body.light .qImgName{background: color-mix(in srgb, var(--card) 92%, transparent)}

    .qImgDelBtn{
      position:absolute;
      top:8px;
      right:8px;
      width:30px;
      height:30px;
      border-radius:10px;
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--bg) 78%, transparent);
      color: color-mix(in srgb, var(--text) 92%, transparent);
      display:grid;
      place-items:center;
      cursor:pointer;
      user-select:none;
      font-weight:950;
      line-height:1;
      z-index:2;
    }
    .qImgDelBtn:hover{
      background: color-mix(in srgb, var(--danger) 18%, transparent);
      border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
    }
    .qImgsShowGrid{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-top:10px;
    }
    .qImgsShowGrid img{
      width:100%;
      height:auto;
      object-fit:contain;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 65%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
    }
    body.light .qImgsShowGrid img{background: color-mix(in srgb, var(--card) 92%, transparent)}

    /* ===== Links (nome + link) ===== */
    .linkRows{display:flex;flex-direction:column;gap:10px}
    .linkRow{
      display:grid;
      grid-template-columns: 1fr 1.2fr auto;
      gap:10px;
      align-items:center;
    }
    @media(max-width:650px){
      .linkRow{grid-template-columns:1fr; align-items:stretch}
    }
    .linkList{display:flex;flex-direction:column;gap:10px;margin-top:10px}
    .linkItem{
      padding:10px 10px;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 75%, transparent);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
    }
    body.light .linkItem{background: color-mix(in srgb, var(--card) 92%, transparent)}
    .linkItem .nm{
      font-weight:950;
      font-size:13px;
      margin:0 0 6px 0;
      color: color-mix(in srgb, var(--text) 95%, transparent);
    }
    .linkItem a{
      color: color-mix(in srgb, var(--brand) 90%, #000);
      text-decoration:none;
      word-break:break-word;
      font-size:13px;
      font-weight:850;
    }
    .linkItem a:hover{text-decoration:underline}

    /* ===== Modal (o que fazer) ===== */
    .overlay{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.55);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index:1000;
    }
    .overlay.show{display:flex}
    .modal{
      width:min(820px, 100%);
      background: color-mix(in srgb, var(--card) 92%, transparent);
      border:1px solid color-mix(in srgb, var(--line) 92%, transparent);
      border-radius:18px;
      box-shadow:var(--shadow);
      overflow:hidden;
      max-height: min(86vh, 900px);
      display:flex;
      flex-direction:column;
    }
    .modal .mh{
      padding:14px 14px;
      border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
    }
    .modal .mh h3{
      margin-right:auto;
    }
    .modal .mh h3{margin:0;font-size:14px;font-weight:950}
    /* >>> rolagem dentro do popup quando conteúdo é grande */
    .modal .mb{
      padding:14px;
      overflow:auto;
      flex:1 1 auto;
      min-height:0;
    }
    .mf{
      padding:12px 14px;
      border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      display:flex;
      justify-content:flex-end;
      gap:10px;
      flex-wrap:wrap;
      flex:0 0 auto;
    }
    .stepView{display:flex;flex-direction:column;gap:10px}
    .stepNum{margin:0;font-weight:950;font-size:12px;color:var(--muted)}
    .stepName{margin:0;font-weight:950;font-size:14px}
    .text{
      font-size:13px;
      line-height:1.45;
      color: color-mix(in srgb, var(--text) 95%, transparent);
      white-space:pre-wrap;
    }
    .stepView img{
      width:100%;
      height:auto;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
    }
    body.light .stepView img{background: color-mix(in srgb, var(--card) 92%, transparent)}

    footer.appFooter{
      max-width:1100px;
      margin:8px auto 0;
      padding:10px 16px 22px;
      color:var(--muted);
      font-size:12px;
      text-align:center;
      font-weight:800;
    }
    .footerInner{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      padding:10px 0;
    }
    .footerBrand{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:center;
      color:var(--muted);
      font-weight:700;
      font-size:12px;
    }
    .footerLogo{
      width:20px;
      height:20px;
      object-fit:contain;
      display:block;
    }
    .footerLogo.logoLight{
      display:none;
    }
    body.light .footerLogo.logoLight{
      display:block;
    }
    body.light .footerLogo.logoDark{
      display:none;
    }

    .cardsNav{
      max-width:1100px;
      margin:8px auto 0;
      padding:10px 16px 0;
      display:flex;
      justify-content:center;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .card .cardsNav{
      max-width:100%;
      margin:16px 0 0;
      padding:0;
    }

    /* ===== Drawer ===== */
    .drawerBackdrop{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.45);
      display:none;
      z-index:999;
    }
    .drawerBackdrop.show{display:block}
    .drawer{
      position:fixed;
      left:0; top:0; bottom:0;
      width:min(380px, 92vw);
      background: color-mix(in srgb, var(--card) 96%, transparent);
      border-right:1px solid color-mix(in srgb, var(--line) 92%, transparent);
      transform:translateX(-110%);
      transition:.18s ease;
      z-index:1000;
      box-shadow: 18px 0 45px rgba(0,0,0,.35);
      display:flex;
      flex-direction:column;
    }
    body.light .drawer{box-shadow: 18px 0 45px rgba(2,6,23,.10)}
    .drawer.show{transform:translateX(0)}
    .drawer.drawerRight{
      left:auto;
      right:0;
      border-right:0;
      border-left:1px solid color-mix(in srgb, var(--line) 92%, transparent);
      transform:translateX(110%);
      box-shadow:-18px 0 45px rgba(0,0,0,.35);
    }
    .drawer.drawerRight.show{transform:translateX(0)}
    body.light .drawer.drawerRight{box-shadow:-18px 0 45px rgba(2,6,23,.10)}
    .drawerHd{
      padding:14px 14px;
      border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
    }
    .drawerHdActions{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .drawerHd h3{margin:0;font-size:14px;font-weight:950;color: color-mix(in srgb, var(--text) 96%, transparent)}
    .drawerBd{
      padding:12px 12px;
      overflow:auto;
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    /* itens menores */
    .menuCard{
      border:1px solid color-mix(in srgb, var(--line) 75%, transparent);
      background: color-mix(in srgb, var(--bg) 72%, transparent);
      border-radius:14px;
      padding:10px;
    }
    body.light .menuCard{background: color-mix(in srgb, var(--card) 92%, transparent)}
    .menuTop{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:10px;
      justify-content:flex-start;
    }
    .menuIcon{
      width:26px;height:26px; /* menor */
      border-radius:10px;
      border:1px solid color-mix(in srgb, var(--line) 75%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
      display:grid;place-items:center;
      overflow:hidden;
      flex:0 0 auto;
    }
    body.light .menuIcon{background: color-mix(in srgb, var(--card) 92%, transparent)}
    .menuIcon img{width:100%;height:100%;object-fit:cover;display:block}
    .menuIcon .txt{
      font-size:10px; /* menor */
      font-weight:950;
      color:#ffffff;
      letter-spacing:.4px;
      text-transform:uppercase;
    }
    body.light .menuIcon .txt{
      color:#0f172a;
    }
    .menuIconSvg{
      width:16px;
      height:16px;
      stroke:currentColor;
      stroke-width:2;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .menuTitle{
      font-size:12px; /* menor */
      font-weight:950;
      margin:0;
      line-height:1.2;
      flex:1;
      text-align:left;
    }
    .menuBtnsRow{display:flex;gap:10px;flex-wrap:wrap}
    .menuBtnsRow .btn.small{padding:7px 9px;font-size:12px;border-radius:10px}
    .menuSearchFields{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .menuSearchFields input{
      width:100%;
    }
    .menuSearchFields select{
      width:100%;
    }
    .menuSearchAction{
      display:flex;
      justify-content:flex-end;
      gap:4px;
    }
    .mobileHeaderCard{display:none}
    .mobileHeaderActions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:12px;
    }
    .stampsLinksRow{display:contents}
    .extraLinksRow{display:contents}
    .menuTopActions{
      margin-left:auto;
      display:flex;
      align-items:center;
      gap:8px;
    }
    .menuAddBtn{margin-left:0}

    .quickLinksManageRow{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      padding:10px;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 85%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
    }
    .quickLinksManageInfo{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width:0;
    }
    .quickLinksManageTitle{
      font-size:13px;
      font-weight:900;
      color:var(--text);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:320px;
    }
    .quickLinksManageUrl{
      font-size:11px;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:320px;
    }
    .quickLinksManageActions{
      display:flex;
      gap:8px;
      align-items:center;
      flex:0 0 auto;
    }
    .rightDrawerBtn{
      margin-right:0;
    }

    .sizeTablesGrid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap:12px;
    }
    .sizeTableCard{
      border:1px solid color-mix(in srgb, var(--line) 75%, transparent);
      border-radius:14px;
      padding:10px;
      background: color-mix(in srgb, var(--bg) 70%, transparent);
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .sizeTableTitle{
      font-weight:900;
      font-size:13px;
      color: color-mix(in srgb, var(--text) 90%, transparent);
    }
    .sizeTableImg{
      width:100%;
      height:auto;
      border-radius:10px;
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
    }
    .sizeTableActions{
      display:flex;
      justify-content:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .productsModal{
      max-width:min(860px, 95vw);
      max-height:90vh;
      display:flex;
      flex-direction:column;
    }
    .productsModal .mb{
      overflow:auto;
      max-height:calc(90vh - 70px);
    }
    .productsGrid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap:14px;
    }
    .productsCard{
      border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
      border-radius:14px;
      padding:12px;
      background: color-mix(in srgb, var(--bg) 70%, transparent);
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .productsCardTop{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
    }
    .productsTitle{
      font-weight:950;
      font-size:14px;
      letter-spacing:.2px;
      color: color-mix(in srgb, var(--text) 98%, transparent);
      padding-bottom:16px;
      border-bottom:1px dashed color-mix(in srgb, var(--line) 70%, transparent);
    }
    .productsHeader{
      display:grid;
      grid-template-columns: repeat(2, 1fr) auto;
      gap:12px;
      font-size:12px;
      font-weight:900;
      color: color-mix(in srgb, var(--text) 86%, transparent);
      text-transform:uppercase;
      letter-spacing:.6px;
      margin-top:6px;
      padding:8px 10px;
      border:0;
      border-radius:0;
      background:transparent;
    }
    .productsHeader > :nth-child(2){
      text-align:center;
      justify-self:stretch;
      width:100%;
    }
    .productsHeaderActions{
      text-align:right;
    }
    .productsRow{
      display:grid;
      grid-template-columns: repeat(2, 1fr) auto;
      gap:12px;
      align-items:center;
      padding:8px 10px;
      border:0;
      border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent);
      border-radius:0;
      background:transparent;
    }
    .productsRow:last-child{border-bottom:0}
    .productsItem{
      font-size:13px;
      color: color-mix(in srgb, var(--text) 92%, transparent);
    }
    .productsValue{
      font-size:13px;
      font-weight:900;
      color: color-mix(in srgb, var(--text) 96%, transparent);
    }
    .productsValue{
      text-align:center;
      justify-self:stretch;
      width:100%;
    }
    .productsActions{
      display:flex;
      gap:6px;
      justify-content:flex-end;
      flex-wrap:wrap;
    }
    .productsActions .btn.small{
      padding:6px 8px;
      border-radius:10px;
    }
    .iconBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
    }
    .iconBtn .iconStroke{
      width:14px;
      height:14px;
    }
    .productsEmpty{
      padding:6px 10px 10px;
    }
    .productName{
      font-weight:950;
      color: color-mix(in srgb, var(--brand2) 85%, var(--text));
    }

    .menuToolsRow{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
      margin-top:10px;
      border-top:1px dashed color-mix(in srgb, var(--line) 65%, transparent);
      padding-top:10px;
    }

    .pager{
      display:flex;
      justify-content:center;
      gap:10px;
      align-items:center;
      padding:12px 12px;
      border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      margin-bottom:0;
    }
    #viewSearch .pager{
      margin-top:32px;
    }

    /* ===== Modal pequeno (menu / import) ===== */
    .miniOverlay{
      position:fixed; inset:0;
      background:rgba(0,0,0,.60);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
      z-index:1200;
    }
    #popupOverlay{
      z-index:1400;
    }
    #phaseEditOverlay{
      z-index:1300;
    }
    #settingsOverlay{
      z-index:1400;
    }
    #backupOverlay{
      z-index:1450;
    }
    .miniOverlay.show{display:flex}
    .miniModal{
      width:min(720px, 100%);
      background: color-mix(in srgb, var(--card) 96%, transparent);
      border:1px solid color-mix(in srgb, var(--line) 92%, transparent);
      border-radius:18px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
.popupModal{
      max-height:90vh;
      display:flex;
      flex-direction:column;
    }
    .popupModal .mh{
      justify-content:space-between;
    }
    .popupModal.isWide{
      width:min(1100px, 96vw);
    }
    .popupModal.isWider{
      width:min(1280px, 96vw);
    }
    .productModal{
      width:min(900px, 96vw);
      max-height:90vh;
      display:flex;
      flex-direction:column;
    }
    .productModal .mb{
      overflow:auto;
      max-height:calc(90vh - 70px);
    }
    .miniModal .mh{
      padding:14px 14px;
      border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
    }
    .popupModal .mh{
      justify-content:space-between;
    }
    .popupModal .mh h3{
      margin-right:auto;
      text-align:left;
    }
    .productsMenuCard .menuBtnsRow{
      border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent);
      padding-top:14px;
      margin-top:4px;
    }
    body.light .productsMenuCard .menuBtnsRow{
      border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);
    }
    .transportadorasCard .menuBtnsRow{
      padding-top:12px;
    }
    body.light .transportadorasCard .menuBtnsRow{
      padding-top:12px;
    }
    .transportadorasCard .menuTop{
      border-bottom:1px solid color-mix(in srgb, var(--line) 45%, transparent);
      padding-bottom:10px;
    }
    body.light .transportadorasCard .menuTop{
      border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent);
    }
    .miniModal .mh h3{
      margin:0;
      margin-right:auto;
      text-align:left;
      font-size:14px;
      font-weight:950;
    }
    .miniModal .mb{padding:14px}
    .popupModal .mb{
      padding:0px 14px;
      overflow:visible;
      max-height:calc(90vh - 120px);
    }
    .popupModal .mb .popupMessage{
      padding-top:16px;
    }
    .popupModal.isKpiTotal .mb{
      overflow:auto;
      max-height:calc(90vh - 120px);
    }
    .popupModal.isKpiTotal .popupMessage{
      padding-right:8px;
    }
    .popupModal.isSummary .mb{
      overflow:hidden;
    }
    .popupModal.isSummary .popupMessage{
      max-height:calc(90vh - 170px);
      overflow:auto;
      padding-right:8px;
    }
    .popupModal.isCentered{
      display:flex;
      flex-direction:column;
    }
    .popupModal.isCentered .mh{
      margin-top:4px;
    }
    .popupModal.isCentered .mb{
      margin-bottom:auto;
    }
    .popupModal.isMessageCentered{
      display:flex;
      flex-direction:column;
    }
    .popupModal.isMessageCentered .mb{
      display:flex;
      align-items:center;
      justify-content:center;
      flex:1 1 auto;
      min-height:0;
    }
    .tasksAllPopupList{
      display:flex;
      flex-direction:column;
      gap:12px;
      max-height:420px;
      overflow:auto;
      overflow-x:hidden;
      padding:0 16px 4px 0;
      box-sizing:border-box;
    }
    .tasksAllPopupSection{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .tasksAllPopupSectionTitle{
      font-size:13px;
      font-weight:800;
      letter-spacing:0.2px;
      opacity:0.75;
      margin-bottom:16px;
    }
    #tasksAllExtrasTitle,
    #tasksAllPersonalTitle{
      margin-top:16px;
    }
    .tasksAllPopupSectionTitle.isPrimary{
      font-size:13px;
      line-height:1.3;      
    }
    .tasksAllPopupSectionRows{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .tasksAllPopupRow{
      display:grid;
      grid-template-columns: minmax(170px, 1.6fr) repeat(4, minmax(110px, 1fr)) minmax(120px, 1fr) minmax(200px, 1.4fr) minmax(96px, 0.7fr);
      gap:16px;
      align-items:center;
      padding:10px;
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background:color-mix(in srgb, var(--card) 92%, transparent);
      border-radius:12px;
      box-sizing:border-box;
    }
    .tasksAllPopupRow.isOverdue{
      border-color: color-mix(in srgb, var(--danger) 70%, var(--line));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent);
    }
    .tasksAllPopupCell{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width:0;
      text-align:center;
      padding:0 4px;
    }
    .tasksAllPopupCellStatus{
      align-items:center;
    }
    .tasksAllPopupLabel{
      font-size:11px;
      opacity:0.7;
      font-weight:600;
      white-space:nowrap;
    }
    .tasksAllPopupValue{
      font-size:13px;
      font-weight:700;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .tasksAllPopupValue.withCopy{
      display:flex;
      align-items:center;
      gap:6px;
      justify-content:center;
    }
    .tasksAllPopupHeader{
      font-size:16px;
      font-weight:800;
      margin:0;
      opacity:0.9;
    }
    .tasksAllPopupHeaderRow{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      margin-bottom:10px;
    }
    .tasksAllPopupFilter{
      display:flex;
      flex-direction:row;
      align-items:flex-end;
      gap:12px;
      font-size:12px;
      color: color-mix(in srgb, var(--text) 78%, transparent);
      justify-content:center;
    }
    .tasksAllPopupFilterGroup{
      display:flex;
      flex-direction:column;
      gap:6px;
      min-width:160px;
    }
    .tasksAllPopupFilterGroup label{
      font-size:12px;
      color: color-mix(in srgb, var(--text) 78%, transparent);
    }
    .tasksAllPopupFilter select{
      height:30px;
      padding:4px 10px;
      border-radius:10px;
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--card) 92%, transparent);
      color: var(--text);
      outline:none;
    }
    .tasksAllPopupLink{
      color:#6ecbff;
      text-decoration:underline;
      text-underline-offset:2px;
    }
    .tasksAllPopupActions{
      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap:8px;
      flex-wrap:nowrap;
      padding:0 4px;
      justify-self:end;
    }
    .tasksAllPopupIconBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0;
      border:none;
      background:transparent;
      box-shadow:none;
      min-width:auto;
      height:auto;
      line-height:1;
      color:#e8f1ff;
      opacity:0.85;
    }
    .tasksAllPopupIconBtn:hover{
      opacity:1;
      background:transparent;
    }
    body.light .tasksAllPopupIconBtn{
      color:#0f172a;
    }
    .tasksAllPopupRow.isCompleted{
      position:relative;
      opacity:0.7;
    }
    .tasksAllPopupRow.isCompleted::after{
      content:"";
      position:absolute;
      left:12px;
      right:12px;
      top:calc(56% + 6px);
      height:1px;
      background:color-mix(in srgb, var(--text) 65%, transparent);
      z-index:2;
      pointer-events:none;
    }
    .tasksAllPopupCell,
    .tasksAllPopupActions{
      position:relative;
      z-index:1;
    }
    .calDetailRow.isClosed .title,
    .calDetailRow.isClosed .meta{
      text-decoration:line-through;
      opacity:0.75;
    }
    .tasksAllPopupEye{
      padding:0;
      border:none;
      background:transparent;
      box-shadow:none;
      min-width:auto;
      height:auto;
    }
    .tasksAllPopupEye:hover{
      background:transparent;
    }
    @media (max-width: 820px){
      .popupModal.isWide{
        width:min(900px, 96vw);
      }
      .popupModal.isWider{
        width:min(980px, 96vw);
      }
      .tasksAllPopupRow{
        grid-template-columns: 1fr;
      }
      .tasksAllPopupActions{
        justify-content:flex-start;
      }
    }
    #backupOverlay .miniModal .mb{
      display:flex;
      justify-content:center;
      align-items:center;
    }
    #backupOverlay .miniModal .mb .note{
      text-align:center !important;
      margin:0 auto;
      width:auto;
    }
    #sizeTablesOverlay .miniModal{
      max-height:90vh;
      display:flex;
      flex-direction:column;
    }
    #sizeTablesOverlay .miniModal .mb{
      overflow:auto;
      max-height:calc(90vh - 70px);
    }
    #closeTaskOverlay .miniModal{
      display:flex;
      flex-direction:column;
    }
    #closeTaskOverlay .miniModal .mb{
      display:flex;
      align-items:center;
      justify-content:center;
      flex:1 1 auto;
      min-height:0;
    }
    #sizeTablesOverlay .sizeTablesHint{
      margin-bottom:16px;
    }
    #phaseEditOverlay .miniModal{
      max-height:90vh;
      display:flex;
      flex-direction:column;
    }
    .phaseActionDivider{
      margin:12px 0 8px 0;
      border-top:1px dashed rgba(255,255,255,0.6);
      opacity:0.9;
      height:0;
    }
    #phaseEditOverlay.isCalendarContext{
      z-index:1300;
    }
    #phaseEditOverlay.isTaskContext{
      z-index:1400;
    }
    #phaseEditOverlay .miniModal .mb{
      overflow:auto;
      max-height:calc(90vh - 120px);
    }
    #questionOverlay .miniModal{
      max-height:90vh;
      display:flex;
      flex-direction:column;
    }
    #questionOverlay .miniModal .mb{
      overflow:auto;
      max-height:calc(90vh - 120px);
    }
    #taskOverlay .miniModal{
      max-height:90vh;
      display:flex;
      flex-direction:column;
    }
    #taskOverlay.isCalendarContext{
      z-index:1300;
    }
    #taskOverlay .miniModal .mb{
      overflow:auto;
      max-height:calc(90vh - 120px);
    }
    #productManageOverlay .miniModal{
      max-height:90vh;
      display:flex;
      flex-direction:column;
    }
    #productManageOverlay .miniModal .mb{
      overflow:auto;
      max-height:calc(90vh - 120px);
    }
    #productManageOverlay{
      align-items:stretch;
      justify-content:stretch;
      padding:0;
    }
    #productManageOverlay .miniModal{
      width:100vw;
      height:100vh;
      max-height:none;
      border-radius:0;
    }
    #productManageOverlay .miniModal .mb{
      max-height:calc(100vh - 120px);
    }
    .miniModal .mf{
      padding:12px 14px;
      border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
    }
    .recurrenceModal{
      width:min(420px, 94vw);
    }
    .recurrenceGroup{
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    .recurrenceInline{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .recurrenceStepInput{
      width:70px;
      text-align:center;
    }
    .recurrenceSelect{
      min-width:120px;
    }
    .recurrenceDays{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    .recurrenceDayBtn{
      width:30px;
      height:30px;
      border-radius:999px;
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background:color-mix(in srgb, var(--bg) 75%, transparent);
      color:color-mix(in srgb, var(--text) 92%, transparent);
      font-weight:800;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }
    .recurrenceDayBtn.isActive{
      background:#22c55e;
      color:#0f172a;
      border-color:transparent;
    }
    .recurrenceEndGroup{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .recurrenceMonthlyWrap{
      display:none;
    }
    .recurrenceOptionRow{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:13px;
      color:color-mix(in srgb, var(--text) 92%, transparent);
    }
    .recurrenceDateInput{
      min-width:150px;
    }
    .recurrenceCountInput{
      width:90px;
      text-align:center;
    }
    .recurrenceModal input[type="number"]{
      appearance:auto;
      -moz-appearance:auto;
      -webkit-appearance:auto;
    }
    .recurrenceModal input[type="number"]::-webkit-inner-spin-button,
    .recurrenceModal input[type="number"]::-webkit-outer-spin-button{
      opacity:1;
    }
    .repeatRow{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .repeatRow select{
      flex:1 1 auto;
    }
    #popupActions.mf{
      justify-content:center !important;
    }
    #popupActions .btn{
      padding:8px 12px;
      font-size:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;      
    }
    #popupActions.isHidden{
      display:none !important;
    }
    .popupMessage{      
      font-size:13px;
      line-height:1.4;
      color: color-mix(in srgb, var(--text) 94%, transparent);
      text-align:center;
      white-space:pre-wrap;
      overflow-wrap:anywhere;
      margin-top:0px;
      margin-bottom:20px;
    }
    .popupSummary{
      display:flex;
      flex-direction:column;
      gap:14px;
      text-align:left;
      padding-bottom:14px;
    }
    .summaryPhase{
      display:flex;
      flex-direction:column;
      gap:10px;
      padding:12px;
      border-radius:14px;
      border:1px solid color-mix(in srgb, var(--line) 65%, transparent);
      background: color-mix(in srgb, var(--bg) 62%, transparent);
    }
    .summaryPhaseHeader{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      padding-bottom:8px;
      border-bottom:1px dashed color-mix(in srgb, var(--line) 60%, transparent);
    }
    .summaryPhaseTitle{
      font-weight:900;
      font-size:12px;
      letter-spacing:.4px;
      text-transform:uppercase;
      padding:4px 8px;
      border-radius:999px;
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
    }
    .summaryPhaseStatus{
      font-weight:900;
      font-size:13px;
      color: color-mix(in srgb, var(--text) 96%, transparent);
      text-align:right;
    }
    .summaryMetaGrid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:10px 16px;
    }
    .summaryMetaItem{
      font-size:12px;
      color: color-mix(in srgb, var(--text) 92%, transparent);
      display:flex;
      flex-direction:column;
      gap:4px;
      padding:8px 10px;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 65%, transparent);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
    }
    .summaryNote{
      font-size:12px;
      line-height:1.35;
      color: color-mix(in srgb, var(--text) 92%, transparent);
      padding:10px 12px;
      border-radius:12px;
      border:1px dashed color-mix(in srgb, var(--line) 60%, transparent);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
      text-align:left;
      white-space:pre-wrap;
      overflow-wrap:anywhere;
    }
    .popupSummaryLabel{
      font-weight:900;
      color: color-mix(in srgb, var(--text) 96%, transparent);
    }
    .popupSummaryDivider{
      height:1px;
      background: color-mix(in srgb, var(--line) 70%, transparent);
      opacity:.8;
    }
    .popupSummaryItem{
      padding:0;
    }
    .popupInputWrap{
      margin-top:12px;
    }
    .popupInput{
      width:100%;
      padding:12px 12px;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 92%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
      color:var(--text);
      outline:none;
      font-family:var(--sans);
      font-size:13px;
    }
    .popupSelect{
      width:100%;
      padding:12px 12px;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 92%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
      color:var(--text);
      outline:none;
      font-family:var(--sans);
      font-size:13px;
    }
    .popupTextarea{
      width:100%;
      min-height:220px;
      padding:12px 12px;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 92%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
      color:var(--text);
      outline:none;
      font-family:var(--sans);
      font-size:13px;
      resize:vertical;
    }
    .popupShortcutHint{
      margin-top:8px;
      font-size:11px;
      color:var(--muted);
      text-align:center;
    }
    .popupImagesWrap{
      margin-top:8px;
      margin-bottom:8px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .popupImagesLabel{
      font-size:12px;
      font-weight:800;
      color: color-mix(in srgb, var(--text) 90%, transparent);
      margin-top: 16px;
    }
    .popupImagesInput{
      width:100%;
      margin-top: 8px;
      margin-bottom: 8px;
    }
    .popupImagesHint{
      font-size:11px;
      color:var(--muted);
      margin-bottom:16px;
    }
    .popupImageList{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .popupImageItem{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:12px;
      padding:8px 10px;
      border-radius:10px;
      border:1px solid color-mix(in srgb, var(--line) 60%, transparent);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
      font-size:12px;
    }
    .popupImageName{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .popupImageRemove{
      border:0;
      background:transparent;
      color:color-mix(in srgb, var(--danger) 85%, var(--text));
      font-weight:800;
      cursor:pointer;
      padding:0 4px;
      line-height:1;
    }
    .popupInlineActions{
      margin-top:12px;
      margin-bottom:12px;
      padding-bottom:6px;
      display:flex;
      gap:10px;
      justify-content:center;
      flex-wrap:wrap;
    }
    .popupInlineActions .btn{
      padding:8px 12px;
      font-size:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
    }
    .popupQuickPick{
      margin-top:10px;
      display:flex;
      flex-direction:column;
      gap:8px;
      padding:8px 10px;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
    }
    .popupQuickPickTitle{
      font-size:12px;
      font-weight:900;
      color:var(--muted);
    }
    .popupQuickPickOptions{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      justify-content:center;
    }
    .popupQuickPickOptions .btn{
      padding:6px 10px;
      font-size:12px;
    }
    body.light .popupInput{
      background: color-mix(in srgb, var(--card) 90%, transparent);
    }
    body.light .popupTextarea{
      background: color-mix(in srgb, var(--card) 90%, transparent);
    }
    body.light .popupSelect{
      background: color-mix(in srgb, var(--card) 90%, transparent);
    }
    .orderLookupMenu{
      display:grid;
      gap:12px;
    }
    .orderLookupMenu .menuBtnsRow{
      gap:8px;
      margin-top:0;
      padding-bottom:16px;
    }
    .emailBtn{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:4px;
      line-height:1.1;
      padding:0;
      border:0;
      background:transparent;
    }
    #emailMenuOverlay .menuBtnsRow{
      align-items:flex-start;
      flex-direction:column;
      gap:10px;
    }
    .emailBtnGroup{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:flex-start;
    }
    .emailBtnRow{
      display:flex;
      align-items:center;
      gap:8px;
      width:100%;
    }
    .emailBtnActions{
      margin-top:6px;
      width:100%;
      display:flex;
      justify-content:flex-start;
    }
    .emailBtnTitle{
      font-weight:900;
    }
    .emailBtnTitleRow{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .emailBtnAddr{
      font-size:11px;
      font-weight:700;
      color:color-mix(in srgb, var(--muted) 90%, var(--text));
      word-break:break-word;
    }
    .emailOpenIcon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:18px;
      height:18px;
      border-radius:6px;
      border:0;
      background:transparent;
      color:var(--text);
      transition:.15s ease;
    }
    .emailOpenIcon:hover{
      background:transparent;
    }
    body:not(.light) .emailOpenIcon{
      color:#ffffff;
    }
.usersCards{
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .usersHeader{
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      width:100%;
      gap:10px;
    }
    .usersHeaderTitle{
      justify-self:start;
    }
    .usersHeaderActions{
      justify-self:center;
      display:flex;
      align-items:center;
      gap:8px;
    }
    .usersHeaderMeta{
      justify-self:end;
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:2px;
    }
    .usersHeaderCount{
      white-space:nowrap;
    }
    .usersRefreshStatus{
      min-height:14px;
      font-size:11px;
      color: color-mix(in srgb, var(--brand2) 65%, var(--text));
      opacity:0;
      transition:opacity .2s ease;
      white-space:nowrap;
    }
    .usersRefreshStatus.isVisible{
      opacity:1;
    }
    .usersRefreshStatus.isError{
      color: color-mix(in srgb, var(--danger) 70%, var(--text));
    }
    #usersRefreshBtn .iconStroke{
      transform-origin:50% 50%;
    }
    #usersRefreshBtn.isLoading{
      pointer-events:none;
      opacity:0.7;
    }
    #usersRefreshBtn.isLoading .iconStroke{
      animation: usersRefreshSpin 0.8s linear infinite;
    }
    #usersRefreshBtn.isSuccess{
      border-color: color-mix(in srgb, var(--brand2) 55%, var(--line));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand2) 25%, transparent);
    }
    #usersRefreshBtn.isError{
      border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent);
    }
    @keyframes usersRefreshSpin{
      to{transform:rotate(360deg);}
    }
    @media (max-width: 640px){
      .usersHeader{
        grid-template-columns:1fr;
        justify-items:center;
      }
      .usersHeaderTitle,
      .usersHeaderActions,
      .usersHeaderMeta{
        justify-self:center;
      }
      .usersHeaderMeta{
        align-items:center;
      }
    }
    .userCard{
      border-radius:18px;
      border:1px solid rgba(255,255,255,.09);
      background:linear-gradient(140deg, rgba(12,34,44,.95), rgba(9,24,32,.95));
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:12px;
      box-shadow:0 14px 24px rgba(0,0,0,.2);
    }
    .userCardHead{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
    }
    .userCardTitle{
      font-size:17px;
      font-weight:800;
      color:#e8f1ff;
      word-break:break-word;
    }
    .userTitleRow{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .userActivityBtn{
      padding:4px 6px;
      line-height:1;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .userPresence{
      width:12px;
      height:12px;
      border-radius:50%;
      border:2px solid rgba(255,255,255,.2);
      box-shadow:0 0 0 4px rgba(0,0,0,.12);
    }
    .userPresenceWrap{
      display:flex;
      align-items:center;
      flex-direction:row;
      flex-wrap:nowrap;
      gap:10px;
      white-space:nowrap;
    }
    .userPresenceWrap .userPresenceLabel{
      order:0;
    }
    .userPresenceWrap .userPresence{
      order:1;
    }
    .userPresenceLabel{
      font-size:11px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.05em;
      color:#cfe1ff;
    }
    .userPresence.presenceActive{
      background:#22c55e;
      border-color:rgba(34,197,94,.55);
      box-shadow:0 0 0 4px rgba(34,197,94,.18);
    }
    .userPresence.presenceIdle{
      background:#facc15;
      border-color:rgba(250,204,21,.55);
      box-shadow:0 0 0 4px rgba(250,204,21,.18);
    }
    .userPresence.presenceStopped{
      background:#a855f7;
      border-color:rgba(168,85,247,.6);
      box-shadow:0 0 0 4px rgba(168,85,247,.2);
    }
    .userPresence.presenceLoggedOut{
      background:#ef4444;
      border-color:rgba(239,68,68,.55);
      box-shadow:0 0 0 4px rgba(239,68,68,.18);
    }
    .userPresence.presenceBlocked{
      background:#7b4a12;
      border-color:rgba(123,74,18,.65);
      box-shadow:0 0 0 4px rgba(123,74,18,.2);
    }
    .userPresence.presencePending{
      background:#38bdf8;
      border-color:rgba(56,189,248,.6);
      box-shadow:0 0 0 4px rgba(56,189,248,.2);
    }
    .userPresence.presencePauseGeneral{
      background:#fb923c;
      border-color:rgba(251,146,60,.6);
      box-shadow:0 0 0 4px rgba(251,146,60,.2);
    }
    .userPresence.presencePauseLunch{
      background:#f59e0b;
      border-color:rgba(245,158,11,.6);
      box-shadow:0 0 0 4px rgba(245,158,11,.2);
    }
    .userCardBody{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .userRowDivider{
      height:1px;
      background:rgba(255,255,255,.08);
      border-radius:999px;
    }
    .userRow{
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:flex-start;
      flex-wrap:wrap;
    }
    .userRowLabel{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.04em;
      color:#9fb0c8;
      font-weight:700;
    }
    .userRowValue{
      font-size:13px;
      color:#e2ecff;
      word-break:break-word;
      margin-left:auto;
      text-align:right;
    }
    .userRowActions{
      align-items:center;
      justify-content:space-between;
    }
    .userActionButtons{
      display:flex;
      gap:8px;
      align-items:center;
      margin-left:auto;
    }
.userBlockBtn.isBlocked{
  border-color:rgba(239,68,68,.6);
  color:#ef4444;
}
.userUsersAccessBtn.isActive{
  border-color:rgba(125,196,255,.8);
  color:#7dc4ff;
}
    .userHash{
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:12px;
      color:#9fb0c8;
      word-break:break-all;
      background:rgba(255,255,255,.04);
      padding:6px 8px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.07);
    }
    .userNameLink{
      background:none;
      border:0;
      padding:0;
      color:inherit;
      font:inherit;
      cursor:pointer;
      text-align:left;
    }
    .userNameLink:hover{
      text-decoration:underline;
    }
    .userActivityModal{
      max-width:760px;
      max-height:80vh;
      height:80vh;
      display:flex;
      flex-direction:column;
    }
    .userActivityModal .mb{
      overflow:auto;
      flex:1 1 auto;
      min-height:0;
      padding-right:10px;
    }
    .userActivitySummary{
      display:grid;
      gap:8px;
      margin-bottom:18px;
      color:#cfe1ff;
      font-size:13px;
    }
    .userActivityHeaderRow{
      display:grid;
      grid-template-columns: 1fr auto 1fr;
      align-items:center;
      gap:12px;
      width:100%;
    }
    .userActivityDateTop{
      justify-self:center;
    }
    #userActivityBackBtn{
      justify-self:end;
    }
    .userActivityTitleBlock{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:6px;
      min-width:0;
    }
    .userActivityDateTop{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:6px;
      flex:0 0 auto;
    }
    .userActivityTitleBlock.mini{
      gap:6px;
    }
    .userActivityDateOnly{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:6px;
    }
    .userActivityPager{
      margin-top:12px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:6px;
    }
    .userActivityRangeLabel{
      font-weight:700;
      color:#9fb5d6;
      font-size:12px;
    }
    .userActivityRangeControls{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }
    .userActivityDateOnly input[type="date"],
    .userActivityDateTop input[type="date"]{
      background:rgba(10,18,32,.7);
      border:1px solid rgba(255,255,255,.12);
      color:#e6f1ff;
      padding:4px 8px;
      border-radius:8px;
      font-size:12px;
    }
    .userActivityDateOnly input[type="date"],
    .userActivityDateTop input[type="date"]{
      min-width:138px;
    }
    .userActivityTitleBlock.mini .userActivityRangeLabel{
      font-size:11px;
    }
    .userActivityTitleBlock.mini .userActivityDateOnly input[type="date"]{
      padding:3px 6px;
      font-size:11px;
    }
    .activitySummaryGrid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap:12px;
    }
    .activitySummaryItem{
      border-radius:12px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(140deg, rgba(12,34,44,.9), rgba(9,24,32,.9));
      padding:10px 12px;
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .activitySummaryLabel{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:#95a8c2;
      font-weight:700;
    }
    .activitySummaryValue{
      font-size:13px;
      font-weight:700;
      color:#e6f1ff;
    }
    .userActivityList{
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .userActivityList .activitySection{
      padding-right:6px;
    }
    .activitySection{
      border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(140deg, rgba(12,34,44,.9), rgba(9,24,32,.9));
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .activitySectionTitle{
      font-weight:800;
      color:#e8f1ff;
      font-size:14px;
    }
    .activityItem{
      display:flex;
      flex-direction:column;
      gap:10px;
      padding:12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(140deg, rgba(12,34,44,.85), rgba(9,24,32,.9));
    }
    .activityItemPeriod{
      background:rgba(8,16,30,.6);
    }
    .activityItemPeriod .activityMetaItem,
    .activityItemPeriod .activityRow{
      justify-content:space-between;
    }
    .activityItemPeriod .activityRowValue{
      margin-left:auto;
      text-align:right;
    }
    .activityItemHead{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }
    .activityDuration{
      font-size:12px;
      font-weight:700;
      color:#cfe1ff;
      padding:4px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.05);
      white-space:nowrap;
    }
    .activityMetaGrid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap:8px 14px;
      border-top:1px solid rgba(255,255,255,.08);
      padding-top:8px;
    }
    .activityMetaGridStack{
      grid-template-columns: 1fr;
    }
    .activityMetaItem{
      display:flex;
      justify-content:flex-start;
      gap:12px;
      flex-wrap:wrap;
      font-size:13px;
      color:#dbe7ff;
    }
    .activityRow{
      display:flex;
      justify-content:flex-start;
      gap:12px;
      flex-wrap:wrap;
      font-size:13px;
      color:#dbe7ff;
    }
    .activityActionItem{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:10px 12px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(8,16,30,.6);
      font-size:13px;
      color:#dbe7ff;
    }
    .activityActionInfo{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:6px;
    }
    .activityActionTime{
      font-size:12px;
      color:#9fb5d6;
      white-space:nowrap;
    }
    .activityActionMeta{
      display:flex;
      align-items:center;
      gap:8px;
      margin-left:auto;
    }
    .activityActionBtn{
      padding:4px 6px;
    }
    .activityActionLabel{
      font-weight:700;
      color:#e6f1ff;
    }
    .activityActionDetail{
      color:#b9c9e6;
      font-weight:500;
    }
    .activityRowLabel{
      color:#9fb0c8;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.04em;
      font-size:11px;
    }
    .activityBadge{
      font-size:11px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.05em;
      padding:4px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      width:max-content;
    }
    .copyIconBtn{
      width:30px;
      height:30px;
      border-radius:8px;
      border:0;
      background:none;
      display:grid;
      place-items:center;
      cursor:pointer;
      color:var(--text);
      padding:0;
    }
    .copyIconBtn:hover{
      background:none;
      color:var(--brand);
    }
    .copyIconBtn:disabled{
      opacity:0.45;
      cursor:not-allowed;
    }
    .copyIconBtn svg{
      width:16px;
      height:16px;
      stroke:currentColor;
      stroke-width:2;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    
    .copiedFlash{
      animation: copiedFlash 0.35s ease;
    }
    @keyframes copiedFlash{
      0%{transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent);}
      60%{transform:scale(1.06); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 30%, transparent);}
      100%{transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent);}
    }
    .attentionBtn{
      border-color: color-mix(in srgb, var(--danger) 70%, transparent);
      color:var(--danger);
    }
    .attentionBtn:hover{
      background: color-mix(in srgb, var(--danger) 12%, transparent);
    }
    .emailOpenBtn{
      align-self:flex-start;
    }
    .orderLookupMenu .menuTop{
      margin-bottom:4px;
    }
    .orderLookupMenu .menuTop{
      align-items:center;
    }
    #emailMenuOverlay .menuTop{
      padding-bottom:10px;
      border-bottom:1px solid rgba(255,255,255,0.08);
      margin-bottom:32px;
    }
    .orderLookupMenu .menuIcon img{
      width:51px;
      height:51px;
      object-fit:contain;
      display:block;
    }
    #orderLookupLogoDn{
      width:76px;
      height:76px;
    }
    .orderLookupMenu .menuIcon{
      width:54px;
      height:54px;
      border-radius:12px;
      border:0;
    }
    .orderLookupMenu .menuIcon.logoDn{
      width:76px;
      height:76px;
    }
    .orderLookupMenu .menuIcon.logoDn img{
      width:76px;
      height:76px;
    }
    .orderLookupMenu .orderLookupDn .menuTitle{
      display:flex;
      align-items:center;
      height:76px;
      line-height:1;
    }
    .nuvemList{
      display:flex;
      flex-direction:column;
      gap:8px;
      align-items:stretch;
    }
    .nuvemHeaderRight{
      display:flex;
      align-items:center;
      gap:10px;
      margin-left:auto;
    }
    .nuvemMenuTop{
      border-bottom:1px solid rgba(255,255,255,0.08);
      padding-bottom:12px;
      margin-bottom:12px;
    }
    .nuvemItemRow{
      display:flex;
      gap:8px;
      align-items:center;
      border-bottom:1px solid rgba(255,255,255,0.08);
      padding-bottom:12px;
      margin-bottom:12px;
    }
    .nuvemItemRow.isLast{
      border-bottom:0;
      padding-bottom:0;
      margin-bottom:0;
    }
    .nuvemItemRow .btn{
      text-align:center;
      flex:1;
    }
    .nuvemActions{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .nuvemActionDivider{
      width:1px;
      height:36px;
      background:rgba(255,255,255,0.08);
    }
    .nuvemEditIcon{
      width:34px;
      height:34px;
      border:0;
      background:transparent;
      color:var(--text);
      display:grid;
      place-items:center;
      cursor:pointer;
      padding:0;
    }
    .nuvemMoveGroup{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .nuvemMoveBtn{
      width:26px;
      height:26px;
      border:0;
      background:transparent;
      color:var(--text);
      display:grid;
      place-items:center;
      cursor:pointer;
      padding:0;
      opacity:0.85;
    }
    .nuvemMoveBtn[disabled]{
      opacity:0.35;
      cursor:default;
    }
    .nuvemMoveBtn svg{
      width:14px;
      height:14px;
      stroke:currentColor;
      stroke-width:2;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .nuvemEditIcon svg{
      width:16px;
      height:16px;
      stroke:currentColor;
      stroke-width:2;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .nuvemPager{
      display:flex;
      gap:8px;
      align-items:center;
      justify-content:center;
      margin-top:auto;
      padding-top:12px;
    }
    .nuvemPager .btn{
      border:0;
    }
    #nuvemLinksOverlay .menuCard{
      display:flex;
      flex-direction:column;
    }
    #nuvemLinksOverlay .menuBtnsRow{
      display:flex;
      flex-direction:column;
      flex:1;
      padding-top:16px;
    }
    #nuvemLinksOverlay .miniModal .mb{
      max-height:70vh;
      overflow:auto;
    }
    #storesConfigOverlay .miniModal .mb{
      max-height:70vh;
      overflow:auto;
    }
    #storesConfigOverlay .formGrid .label:not(:first-child){
      border-top:1px solid color-mix(in srgb, var(--line) 65%, transparent);
      margin-top:12px;
      padding-top:12px;
    }
    .storeLinksModal{
      width:min(560px, 92vw);
    }
    .socialHubModal{
      width:min(860px, 96vw);
      background: linear-gradient(160deg, rgba(17,27,45,.9), rgba(12,16,30,.98));
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
    }
    body.light .socialHubModal{
      background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(246,248,252,.98));
    }
    .socialHubHeader{
      align-items:flex-end;
      gap:16px;
    }
    .socialHubTitle{display:flex;flex-direction:column;gap:6px;width:100%}
    .socialHubTitleRow{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:12px;
      width:100%;
    }
    .socialHubEyebrow{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.18em;
      color:color-mix(in srgb, var(--brand2) 60%, var(--text));
      font-weight:900;
    }
    .socialHubSubtitle{
      max-width:520px;
      opacity:.85;
      margin:0;
    }
    .socialHubHighlights{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:14px;
    }
    .socialHubPill{
      padding:6px 10px;
      border-radius:999px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.04em;
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
    }
    .storeLinksGrid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap:12px;
    }
    .storeLinksGridSocial{
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap:14px;
    }
    .storeLinksGrid[data-count="1"]{
      grid-template-columns: minmax(200px, 360px);
      justify-content:center;
    }
    .storeLinkCard{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
      border:1px solid color-mix(in srgb, var(--line) 75%, transparent);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
      border-radius:14px;
      padding:12px;
      text-decoration:none;
      transition:transform .1s ease, box-shadow .1s ease;
      justify-content:center;
      min-height:240px;
    }
    .storeLinkMedia{
      flex:1 1 auto;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      width:100%;
    }
    .storeLinkActions{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      min-height:40px;
    }
    body.light .storeLinkCard{background: color-mix(in srgb, var(--card) 92%, transparent)}
    .storeLinkCard:hover{
      transform:translateY(-1px);
      box-shadow: 0 8px 18px rgba(0,0,0,.18);
    }
    body.light .storeLinkCard:hover{box-shadow: 0 8px 18px rgba(2,6,23,.10)}
    .storeLinkLogo{
      width:140px;
      height:140px;
      object-fit:contain;
      filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
      opacity:.95;
    }
    .storeLinkLogo.dn{
      width:150px;
      height:150px;
    }
    body.light .storeLinkLogo{filter: drop-shadow(0 10px 18px rgba(2,6,23,.12))}
    .storeLinkName{
      font-size:13px;
      font-weight:950;
      color: color-mix(in srgb, var(--text) 95%, transparent);
      text-align:center;
      min-height:18px;
    }
    .storeLinkName.isHidden{
      display:none;
    }
    .storeLinkSiteBtn{
      margin-top:10px;
      align-self:center;
    }
    .socialLinksCard{
      min-height:0;
      padding:14px;
      text-align:center;
    }
    .socialHubModal .socialLinksCard{
      text-align:left;
      min-height:220px;
      padding:16px;
      background: linear-gradient(160deg, rgba(21,33,55,.96), rgba(12,16,30,.96));
      border:1px solid color-mix(in srgb, var(--line) 65%, transparent);
      position:relative;
      overflow:hidden;
    }
    body.light .socialHubModal .socialLinksCard{
      background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(241,245,252,.98));
      border:1px solid color-mix(in srgb, var(--line) 75%, transparent);
    }
    .socialHubModal .socialLinksCard::before{
      content:"";
      position:absolute;
      inset:0;
      background: radial-gradient(120px 120px at 20% 20%, rgba(56,217,169,.12), transparent 60%);
      pointer-events:none;
    }
    .socialHubModal .storeLinkMedia{
      align-items:center;
      gap:6px;
    }
    .socialHubModal .storeLinkLogo{
      margin:0 auto;
    }
    .socialHubModal .storeLinkLogo{
      width:120px;
      height:120px;
    }
    .socialHubModal .storeLinkLogo.dn{
      width:130px;
      height:130px;
    }
    .socialHubModal .storeLinkName{
      font-size:14px;
      font-weight:900;
      letter-spacing:.02em;
    }
    .socialLinksCard .storeLinkLogo{
      width:140px;
      height:140px;
    }
    .socialLinksCard .storeLinkLogo.dn{
      width:150px;
      height:150px;
    }
    .socialLinksActions{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      justify-content:center;
    }
    .socialHubModal .socialLinksActions{
      justify-content:flex-start;
      width:100%;
    }
    .socialHubModal .socialLinksActions .btn{
      flex:1 1 120px;
      justify-content:center;
      text-align:center;
    }
    .socialHubModal .storeLinkCard:hover{
      transform:translateY(-2px);
      box-shadow: 0 10px 24px rgba(0,0,0,.28);
    }

    .productDetailsMeta{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap:10px;
      margin-bottom:12px;
    }
    @media(max-width:720px){
      .productDetailsMeta{grid-template-columns:1fr}
    }
    .productMetaItem{
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
      border-radius:12px;
      padding:10px;
    }
    body.light .productMetaItem{background: color-mix(in srgb, var(--card) 92%, transparent)}
    .productMetaItem .label{
      margin:0 0 4px 0;
      font-size:11px;
      color:var(--muted);
    }
    .productMetaItem strong{
      font-size:13px;
      font-weight:950;
      color: color-mix(in srgb, var(--text) 96%, transparent);
    }
    .productDetailsSection{
      margin-top:12px;
      padding-top:12px;
      border-top:1px dashed color-mix(in srgb, var(--line) 65%, transparent);
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .productDetailsStampsRow{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      flex-wrap:wrap;
    }
    .productDetailsStampsText{
      font-size:12px;
      font-weight:800;
      color: color-mix(in srgb, var(--text) 86%, transparent);
    }
    .productDetailsDivider{
      height:0;
      border-top:1px dashed color-mix(in srgb, var(--line) 65%, transparent);
    }
    .dangerOutline{
      border:1px solid #ff6b6b;
      color:#ffb3b3;
      background: transparent;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
    }
    .dangerOutline:hover{
      background: transparent;
    }
    .productDetailsTopActions{
      display:flex;
      justify-content:flex-end;
      gap:8px;
      margin-bottom:10px;
      flex-wrap:wrap;
    }
    .productDetailsStore{
      margin-right:auto;
      font-size:12px;
      font-weight:900;
      color: color-mix(in srgb, var(--text) 86%, transparent);
    }
    .productDetailsGroup + .productDetailsGroup{
      margin-top:16px;
    }
    .productDetailsHeader{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      flex-wrap:wrap;
    }
    .productDetailsGroup{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .productDetailsGroupTitle{
      font-size:12px;
      font-weight:900;
      color: color-mix(in srgb, var(--text) 88%, transparent);
      text-transform:uppercase;
      letter-spacing:.5px;
    }
    .productDetailsList{
      margin:0;
      padding-left:18px;
      display:flex;
      flex-direction:column;
      gap:6px;
      font-size:13px;
      color: color-mix(in srgb, var(--text) 92%, transparent);
    }
    .productAdvList{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .productAdvItem{
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
      border-radius:12px;
      padding:10px;
    }
    body.light .productAdvItem{background: color-mix(in srgb, var(--card) 92%, transparent)}
    .productAdvTitle{
      font-weight:950;
      font-size:13px;
      margin:0 0 6px 0;
      color: color-mix(in srgb, var(--text) 96%, transparent);
    }
    .productAdvText{
      font-size:13px;
      color: color-mix(in srgb, var(--text) 92%, transparent);
      line-height:1.4;
    }
    .nuvemEditActions{
      justify-content:center !important;
      gap:10px;
    }
    .nuvemEditActionsMain{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:center;
    }
    .phaseEditActions{
      position:relative;
      justify-content:center !important;
    }
    .phaseEditActionsMain{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:center;
      margin:0 auto;
    }
    .phaseEditDeleteBtn{
      position:absolute;
      left:14px;
      top:50%;
      transform:translateY(-50%);
    }
    .closeTaskActions{
      justify-content:center !important;
    }
    .questionStoreBlock{
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      margin:6px 0 10px;
    }
    .questionStoreLogo{
      height:45px;
      width:auto;
      display:block;
    }
    .questionStoreLabel{
      margin-top:8px;
      font-size:12px;
      font-weight:900;
      color: color-mix(in srgb, var(--text) 86%, transparent);
    }
    .productColorsList{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .productColorRow{
      display:grid;
      grid-template-columns: auto 1fr auto auto;
      gap:10px;
      align-items:center;
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
      border-radius:12px;
      padding:8px 10px;
    }
    body.light .productColorRow{background: color-mix(in srgb, var(--card) 92%, transparent)}
    .productColorSwatch{
      width:16px;
      height:16px;
      border-radius:6px;
      border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
      background: #fff;
    }
    .productColorName{
      font-size:13px;
      font-weight:900;
      color: color-mix(in srgb, var(--text) 96%, transparent);
    }
    .productColorHex{
      font-size:12px;
      font-weight:900;
      color: color-mix(in srgb, var(--text) 90%, transparent);
      letter-spacing:.4px;
    }
    .productTableImg{
      width:100%;
      height:auto;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
    }
    body.light .productTableImg{background: color-mix(in srgb, var(--card) 92%, transparent)}
    .productVideoRow{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }
    .productVideoInput{
      flex:1 1 240px;
    }

    /* ===== TAREFAS DIÁRIAS (UI) ===== */
    .viewHidden{display:none !important;}
    .taskGrid{
      display:grid;
      grid-template-columns: .9fr 1.1fr;
      gap:16px;
      align-items:start;
    }
    .taskPageActions{
      display:flex;
      justify-content:flex-end;
      align-items:center;
      margin-bottom:10px;
    }
    .taskColumn{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .miniCalendarGrid{
      display:grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap:6px;
    }
    .miniCalWeekHeader{
      display:grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap:6px;
      margin-bottom:6px;
      font-size:10px;
      font-weight:800;
      text-align:center;
      opacity:.7;
      color: color-mix(in srgb, var(--text) 85%, transparent);
    }
    .miniCalWeekHeader > div{
      padding:4px 2px;
      border-radius:8px;
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--bg) 60%, transparent);
    }
    body.light .miniCalWeekHeader > div{ background: color-mix(in srgb, var(--card) 90%, transparent); }
    .miniCalCell{
      border:1px solid color-mix(in srgb, var(--line) 75%, transparent);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
      border-radius:10px;
      padding:6px;
      min-height:54px;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:11px;
      color: color-mix(in srgb, var(--text) 90%, transparent);
      cursor:pointer;
    }
    body.light .miniCalCell{
      background: color-mix(in srgb, var(--card) 92%, transparent);
    }
    .miniCalCell.isBlank{
      border:0;
      background:transparent;
      cursor:default;
    }
    .miniCalCell.isOtherMonth{
      cursor:default;
    }
    .miniCalCount{
      min-width:16px;
      height:16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:10px;
      font-weight:900;
      color:#0b1220;
      border-radius:999px;
    }
    .miniCalDay{
      position:absolute;
      top:6px;
      left:6px;
      font-weight:900;
      color: color-mix(in srgb, var(--text) 90%, transparent);
    }
    .miniCalCell.isOtherMonth .miniCalDay{
      opacity:.45;
    }
    .miniCalCounts{
      display:flex;
      gap:6px;
      align-items:center;
      justify-content:center;
      position:absolute;
      left:50%;
      bottom:6px;
      transform:translateX(-50%);
    }
    .miniCalCountMain{
      background:#38d9a9;
    }
    .miniCalCountExtra{
      background:#ff922b;
    }
    .miniCalCountPersonal{
      background:#f4c2c2;
    }
    .miniCalCell.isToday{
      border-color: color-mix(in srgb, var(--brand) 60%, var(--line));
    }
    .miniCalCell:focus{
      outline:2px solid color-mix(in srgb, var(--brand) 60%, transparent);
      outline-offset:2px;
    }
    @media(max-width:980px){
      .taskGrid{grid-template-columns:1fr}
    }

    .taskList{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .doneTaskList{
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .doneTaskCard{
      padding:16px;
      border-radius:14px;
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--card) 80%, transparent);
      box-shadow:var(--shadow);
    }
    body.light .doneTaskCard{background: color-mix(in srgb, var(--card) 92%, transparent)}
    .doneTaskStack{
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .doneTaskHeader{
      display:flex;
      align-items:flex-start;
      justify-content:flex-end;
      gap:10px;
    }
    .doneTaskTitle{
      font-weight:800;
      font-size:14px;
    }
    .doneTaskTag{
      font-size:11px;
      padding:4px 8px;
      border-radius:999px;
      background: color-mix(in srgb, var(--brand) 20%, transparent);
      border:1px solid color-mix(in srgb, var(--brand) 40%, transparent);
      color:var(--text);
      white-space:nowrap;
    }
    .doneTaskExtra .doneTaskTag{
      background: color-mix(in srgb, #ff922b 20%, transparent);
      border-color: color-mix(in srgb, #ff922b 40%, transparent);
    }
    .doneMetaRow{
      margin-top:16px;
      display:flex;
      flex-wrap:wrap;
      gap:16px;
    }
    .donePill{
      background: color-mix(in srgb, var(--card) 80%, transparent);
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      color:var(--text);
    }
    .donePillExtra{
      background: color-mix(in srgb, #ff922b 25%, transparent);
      border-color: color-mix(in srgb, #ff922b 60%, transparent);
      color:#ffd8a8;
    }
    .donePillNormal{
      background: color-mix(in srgb, #0f8f5f 22%, transparent);
      border-color: color-mix(in srgb, #0f8f5f 60%, transparent);
      color:#d3f9d8;
    }
    .doneTaskMeta{
      margin-top:4px;
      font-size:12px;
      color:var(--muted);
    }
    .doneTaskTag{
      font-size:11px;
      padding:4px 8px;
      border-radius:999px;
      background: color-mix(in srgb, var(--brand) 20%, transparent);
      border:1px solid color-mix(in srgb, var(--brand) 40%, transparent);
      color:var(--text);
      white-space:nowrap;
    }
    .doneTaskExtra .doneTaskTag{
      background: color-mix(in srgb, #ff922b 20%, transparent);
      border-color: color-mix(in srgb, #ff922b 40%, transparent);
    }
    .doneTaskInfo{
      display:grid;
      gap:6px;
      margin-top:8px;
      font-size:12px;
      color:var(--muted);
    }
    .doneTaskInfo span{
      color:var(--text);
      font-weight:600;
    }
    .doneTaskDetail{
      margin-top:16px;
      display:flex;
      flex-wrap:wrap;
      gap:16px;
      font-size:12px;
      color:var(--text);
      white-space:pre-wrap;
      word-break:break-word;
    }
    .phaseListAll{
      display:none;
    }
    .linksBlock.isExpanded .phaseListAll{
      display:block;
    }
    .linksBlock.isExpanded .phaseListCurrent{
      display:none;
    }
    .phaseItem{scroll-margin-top:80px}
    .phaseItem + .phaseItem{
      border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      margin-top:12px;
      padding-top:12px;
    }
    .phaseItem.phaseFocus{
      outline:2px solid color-mix(in srgb, var(--brand2) 55%, transparent);
      border-radius:10px;
      padding:6px;
    }
    .phaseToggleIconClosed{
      display:none;
    }
    .linksBlock.isExpanded .phaseToggleIconOpen{
      display:none;
    }
    .linksBlock.isExpanded .phaseToggleIconClosed{
      display:inline;
    }

    .taskCard{
      padding:12px;
      border-radius:14px;
      border:1px solid #38d9a9;
      background: color-mix(in srgb, var(--bg) 65%, transparent);
      position:relative;
    }
    body.light .taskCard{background: color-mix(in srgb, var(--card) 92%, transparent)}
    .taskCard.taskExtra{
      border-color:#ff922b;
    }

    .taskTopRow{
      display:grid;
      grid-template-columns: 1fr auto;
      align-items:start;
      column-gap:12px;
    }
    .taskMainInfo{
      min-width:0;
    }
    .taskLogoWrap{
      display:flex;
      align-items:center;
      justify-content:flex-end;
    }

    .taskTitle{
      margin:0;
      font-weight:950;
      font-size:15px;
      line-height:1.25;
      color: color-mix(in srgb, var(--brand2) 80%, var(--text));
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .taskTitleRow{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .taskRepeatIcon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:20px;
      height:20px;
      color:#ffffff;
    }
    body.light .taskRepeatIcon{
      color:#0f172a;
    }
    .taskTitle.extraTitle{
      color:#ff922b;
    }

    .taskMeta{
      margin-top:8px;
      display:flex;
      gap:16px;
      flex-wrap:wrap;
      align-items:center;
    }
    .taskMeta{
      margin-top:8px;
      display:flex;
      gap:16px;
      flex-wrap:wrap;
      align-items:center;
    }
    .taskSubMeta{
      display:flex;
      flex-direction:row;
      gap:8px;
      flex-wrap:wrap;
    }
    .taskSubLine{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:6px;
      overflow-wrap:anywhere;
      word-break:break-word;
    }

    #calStoreFilter{
      padding:6px 10px;
      border-radius:10px;
      border:1px solid color-mix(in srgb, var(--line) 75%, transparent);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
      color: var(--text);
      font-weight:800;
      font-size:12px;
    }
    .taskSubLine:not(:first-child)::before{
      content:"-";
      margin:0 6px 0 2px;
      opacity:.75;
    }

    .pillMini{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
      background: color-mix(in srgb, var(--bg) 70%, transparent);
      font-weight:900;
      font-size:12px;
      color: color-mix(in srgb, var(--text) 92%, transparent);
      white-space:nowrap;
    }
    body.light .pillMini{background: color-mix(in srgb, var(--card) 88%, transparent)}

    .statusPill{
      border:0;
      color: color-mix(in srgb, var(--bg) 88%, #000);
      background: linear-gradient(90deg, var(--brand), var(--brand2));
    }

    .taskDueToday{
      border-color: color-mix(in srgb, var(--brand2) 55%, var(--line));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand2) 25%, transparent);
    }

    .taskOverdue{
      border-color: color-mix(in srgb, var(--danger) 70%, var(--line));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent);
    }

    .taskActions{
      position:relative;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
      margin-top:16px;
      padding-top:0;
    }
    .taskActions .nuvemIcon{
      width:16px;
      height:16px;
      stroke-width:3;
    }
    .taskActions .sakIcon{
      width:16px;
      height:16px;
    }

    .filterBtn .iconFilled{ display:none; fill:currentColor; width:20px; height:20px; }
    .filterBtn.isActive .iconStroke{ display:none; }
    .filterBtn.isActive .iconFilled{ display:inline; }

    .miniCalHeaderNav{
      display:inline-flex;
      align-items:center;
      gap:6px;
      margin-top:16px;
    }
    .miniCalendarBody{
      display:flex;
      flex-direction:column;
    }
    .miniCalendarBody .miniCalHeaderNav{
      order:3;
      justify-content:center;
      width:100%;
    }
    .miniCalendarBody .miniCalWeekHeader{
      order:1;
    }
    .miniCalendarBody .miniCalendarGrid{
      order:2;
    }
    .miniCalendarBody .miniCalHeaderNav{
      margin-top:16px;
    }
    .miniCalHeaderNav .count{
      min-width:110px;
      text-align:center;
    }
    .taskHeaderActions{
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .taskAddBtnMain{
      border:1px solid #38d9a9;
      box-shadow:0 0 0 1px color-mix(in srgb, #38d9a9 45%, transparent);
    }
    .taskAddBtnExtra{
      border:1px solid #ff922b;
      box-shadow:0 0 0 1px color-mix(in srgb, #ff922b 45%, transparent);
    }
    #miniCalPrev,
    #miniCalNext{
      background:transparent;
      border:0;
      box-shadow:none;
    }
    #miniCalPrev:hover,
    #miniCalNext:hover{
      background:transparent;
    }

    /* ===== CALENDÁRIO (visualização) ===== */
    .calModal{
      width:min(1020px, 100%);
      max-height:90vh;
      display:flex;
      flex-direction:column;
      border:0;
    }
    .calModal .mh{
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
    }
    .calModal .mh h3{
      justify-self:start;
    }
    .calModal .mh .calNavRow{
      justify-content:center;
      margin:0 auto;
    }
    .calModal .mh .calCloseBtn{
      justify-self:end;
    }
    .calHeaderActions{
      position:relative;
      display:flex;
      align-items:center;
      gap:8px;
      justify-self:end;
    }
    .calFilterPanel{
      position:absolute;
      top:calc(100% + 8px);
      right:0;
      z-index:5;
      min-width:220px;
      padding:10px;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 75%, transparent);
      background: color-mix(in srgb, var(--bg) 85%, transparent);
      box-shadow: 0 12px 30px rgba(0,0,0,0.2);
      display:none;
    }
    .calFilterPanel .label{
      margin-bottom:6px;
      font-size:12px;
      opacity:.8;
      font-weight:800;
    }
    .calFilterPanel #calStoreFilter{
      width:100%;
    }
    .calModal .mb{
      overflow:auto;
      max-height:calc(90vh - 70px);
    }
    .calLayout{
      display:grid;
      grid-template-columns: 1fr;
      gap:14px;
      align-items:start;
    }
    @media(max-width:980px){
      .calLayout{ grid-template-columns: 1fr; }
    }

    .calWeekHeader{
      display:grid;
      grid-template-columns: repeat(7, 1fr);
      gap:8px;
      margin-bottom:8px;
      font-weight:800;
      opacity:.9;
      font-size:12px;
      text-align:center;
    }
    .calWeekHeader > div{
      padding:8px 6px;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 65%, transparent);
      background: color-mix(in srgb, var(--bg) 55%, transparent);
    }
    body.light .calWeekHeader > div{ background: color-mix(in srgb, var(--card) 85%, transparent); }

    .calGrid{
      display:grid;
      grid-template-columns: repeat(7, 1fr);
      gap:8px;
    }
    .calNavRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:center;
      align-items:center;
    }
    .calNavRow #calMonthLabel{
      min-width:160px;
      text-align:center;
    }
    .calGridNote{
      height:75px;
      border:1px solid color-mix(in srgb, var(--line) 65%, transparent);
      border-radius:14px;
      background: color-mix(in srgb, var(--bg) 55%, transparent);
      color:var(--muted);
      font-size:12px;
      line-height:1.35;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      margin-top:10px;
      width:100%;
    }
    .calGrid .calGridNote{
      grid-column:1 / -1;
    }

    .calCell{
      border:1px solid color-mix(in srgb, var(--line) 65%, transparent);
      background: color-mix(in srgb, var(--bg) 55%, transparent);
      border-radius:14px;
      padding:8px;
      aspect-ratio:1 / 1;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      cursor:pointer;
      transition: transform .08s ease, box-shadow .08s ease;
    }
    body.light .calCell{ background: color-mix(in srgb, var(--card) 88%, transparent); }
    .calCell:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.14); }
    body.light .calCell:hover{ box-shadow: 0 8px 18px rgba(2,6,23,.10); }
    .calCell.isBlank{ opacity:.35; cursor:default; }
    .calCell.isBlank:hover{ transform:none; box-shadow:none; }
    .calCell.isOtherMonth{
      cursor:default;
    }
    .calCell.isOtherMonth .calDayNum span{
      opacity:.45;
    }
    .calCell.isSelected{
      border-color: color-mix(in srgb, var(--brand2) 55%, var(--line));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand2) 18%, transparent);
    }

    .calDayNum{
      font-weight:950;
      font-size:11px;
      margin:0 0 6px 0;
      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap:10px;
    }
    .calPersBadge{
      min-width:18px;
      height:18px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      font-size:10px;
      font-weight:900;
      color:#0b1220;
      background:#f4c2c2;
    }
    .calTodayDot{
      width:8px;height:8px;border-radius:999px;
      background: var(--brand2);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand2) 25%, transparent);
    }

    .calItems{
      display:flex;
      flex-direction:column;
      gap:6px;
      overflow:hidden;
    }
    .calCountsMobile{
      display:none;
    }
    .calCountMobile{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:10px;
      font-weight:900;
    }
    .calCountMobileNormal{
      color:#38d9a9;
    }
    .calCountMobileExtra{
      color:#ff922b;
    }
    .calItem{
      font-size:12px;
      line-height:1.25;
      font-weight:700;
      padding:6px 8px;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 55%, transparent);
      background: color-mix(in srgb, var(--card) 85%, transparent);
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      display:block;
    }
    .calItem.open{ color:#0f8f5f; border-color: color-mix(in srgb, #0f8f5f 35%, var(--line)); }
    .calItem.closed{ color:#e03131; border-color: color-mix(in srgb, #e03131 35%, var(--line)); }
    .calItem.extra{
      color:#ff922b;
      border-color: color-mix(in srgb, #ff922b 35%, var(--line));
    }
    .calItem.extra.closed{
      color:#e03131;
      border-color: color-mix(in srgb, #e03131 35%, var(--line));
    }

    .calSide{
      border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--bg) 55%, transparent);
      border-radius:16px;
      padding:12px;
      display:none;
    }
    #calAddSimpleBtn{
      border-color:#ff922b;
    }
    .calSide.isVisible{ display:block; }
    body.light .calSide{ background: color-mix(in srgb, var(--card) 92%, transparent); }
    .calSideHeader{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin:0 0 10px 0;
      padding-bottom:10px;
      border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent);
    }
    .calSideHeader .label{
      justify-content:flex-start;
      text-align:left;
      margin-right:auto;
    }
    .calSideActions{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .calDayDetails{ display:flex; flex-direction:column; gap:10px; }
    .calDayEmpty{
      text-align:center;
      margin:10px 0 4px;
    }

    .calDetailRow{
      display:flex;
      gap:10px;
      align-items:flex-start;
      flex-wrap:wrap;
      border:1px solid color-mix(in srgb, var(--line) 65%, transparent);
      background: color-mix(in srgb, var(--card) 85%, transparent);
      border-radius:14px;
      padding:10px;
    }
    .calDetailRow.calSimpleRow{
      align-items:flex-start;
    }
    .calDetailRow.calOverdue{
      border-color: color-mix(in srgb, var(--danger) 70%, var(--line));
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent);
    }
    .calDetailRow.isFocus{
      outline:2px solid color-mix(in srgb, var(--brand2) 55%, transparent);
      box-shadow: 0 8px 18px rgba(0,0,0,.18);
    }

    /* ===== Mobile ===== */
    @media(max-width:980px) and (min-width:721px){
      .wrap{
        margin:18px auto 0;
        padding:12px;
      }
      .toprow{
        display:grid;
        grid-template-columns:44px 1fr 44px;
        align-items:center;
        gap:8px;
      }
      .brandleft{
        min-width:0;
        justify-self:center;
        justify-content:center;
      }
      .brandright{
        display:flex;
        justify-self:end;
      }
      .scrollBtns{
        justify-content:flex-end;
      }
      .scrollBtns > *{
        display:none;
      }
      .scrollBtns #goToTasksBtn{
        display:grid;
      }
      .mobileHambBtn{
        display:grid;
      }
      .appLogo img{
        height:30px;
      }
      .viewTitleRow{
        margin-bottom:32px;
      }
      .viewTitle{
        font-size:20px;
      }
      .searchArrows{
        display:none;
      }
      .searchrowWrap{
        flex-direction:column;
        gap:8px;
        align-items:stretch;
      }
      .searchrow{
        display:grid;
        grid-template-columns:auto 1fr;
        align-items:center;
        column-gap:10px;
        row-gap:0;
        padding:10px 12px;
        position:relative;
        width:100%;
      }
      .searchInputWrap{
        grid-column:2;
        grid-row:1;
        width:100%;
      }
      .searchrow .filterBtn{
        grid-column:1;
        grid-row:1;
        width:40px;
        height:40px;
        padding:0;
        border-radius:10px;
        justify-self:start;
      }
      .searchrow input{
        width:100%;
        padding-left:36px;
      }
      .searchrow #searchClearBtn{
        display:none;
      }
    }
    @media(max-width:720px){
      .wrap{
        margin:18px auto 0;
        padding:12px;
      }
      .toprow{
        display:grid;
        grid-template-columns:44px 1fr 44px;
        align-items:center;
        gap:8px;
      }
      .brandleft{
        min-width:0;
        justify-self:center;
        justify-content:center;
      }
      .brandright{
        display:flex;
        justify-self:end;
      }
      .scrollBtns{
        justify-content:flex-end;
      }
      .scrollBtns > *{
        display:none;
      }
      .scrollBtns #goToTasksBtn{
        display:grid;
      }
      .mobileHambBtn{
        display:grid;
      }
      .appLogo img{
        height:30px;
      }
      .viewTitleRow{
        margin-bottom:32px;
      }
      .viewTitle{
        font-size:20px;
      }
      .searchArrows{
        display:none;
      }
      .searchrowWrap{
        flex-direction:column;
        gap:8px;
        align-items:stretch;
      }
      .searchrow{
        display:grid;
        grid-template-columns:auto 1fr;
        align-items:center;
        column-gap:10px;
        row-gap:0;
        padding:10px 12px;
        position:relative;
        width:100%;
      }
      .searchInputWrap{
        grid-column:2;
        grid-row:1;
        width:100%;
      }
      .searchrow .filterBtn{
        grid-column:1;
        grid-row:1;
        width:40px;
        height:40px;
        padding:0;
        border-radius:10px;
        justify-self:start;
      }
      .searchrow input{
        width:100%;
        padding-left:36px;
      }
      .searchrow #searchClearBtn{
        display:none;
      }
      .resultsCard .hd,
      #viewTasks .card .hd{
        grid-template-columns:1fr auto;
        row-gap:6px;
      }
      .resultsCard .hd{
        grid-template-columns:1fr auto 1fr;
      }
      .resultsCard .hd #openQuestionModalBtn{
        justify-self:center;
      }
      .resultsCard .hd .count{
        justify-self:end;
        grid-column:auto;
      }
      #viewTasks .card .hd .count{
        justify-self:start;
        grid-column:auto;
      }
      #miniCalPrev{
        padding-left:12px;
      }
      #viewTasks .miniCalendarBody .miniCalHeaderNav{
        order:3;
        margin-top:8px;
      }
      #viewTasks .miniCalendarBody .miniCalHeaderNav .count{
        min-width:0;
        text-align:center;
      }
      .card .bd{
        padding:12px;
      }
      .taskTopRow{
        display:grid;
        grid-template-columns: 1fr auto;
        align-items:start;
        column-gap:12px;
      }
      .taskMainInfo{
        min-width:0;
      }
      .taskMeta .pillMini{
        white-space:normal;
      }
      .taskSubMeta{
        display:block;
      }
      .taskSubLine:not(:first-child)::before{
        content:"";
        margin:0;
      }
      .taskSubLine{
        display:block;
        width:100%;
      }
      .linksBlock{
        gap:10px;
      }
      .phaseBtnsRow{
        flex-wrap:wrap;
      }
      .miniOverlay{
        padding:0;
        align-items:stretch;
        justify-content:stretch;
      }
      .miniModal{
        width:100vw;
        height:100vh;
        max-height:100vh;
        border-radius:0;
        display:flex;
        flex-direction:column;
      }
      .miniModal .mh{
        flex-wrap:wrap;
        gap:8px;
      }
      .miniModal .mb{
        padding:12px;
        overflow:auto;
        flex:1 1 auto;
        min-height:0;
      }
      .miniModal .mf{
        flex-direction:column;
        align-items:stretch;
      }
      .miniModal .mf .btn{
        width:100%;
      }
      #popupActions .btn{
        width:auto;
      }
      #popupActions.mf{
        flex-direction:row;
        justify-content:center;
        align-items:center;
        gap:10px;
      }
      .storeLinksGrid{
        grid-template-columns:1fr;
      }
      .storeLinksGridSocial{
        grid-template-columns:1fr;
      }
      .socialHubModal .storeLinkCard{
        min-height:200px;
      }
      .summaryRow{
        grid-template-columns:1fr;
      }
      .summaryRow > div{
        border-bottom:1px dashed color-mix(in srgb, var(--line) 60%, transparent);
      }
      .summaryText{
        text-align:left;
      }
      .overlay{
        padding:0;
        align-items:stretch;
        justify-content:stretch;
      }
      .modal{
        width:100vw;
        height:100vh;
        max-height:100vh;
        border-radius:0;
      }
      .productsModal,
      .productModal,
      .calModal{
        width:100vw;
        height:100vh;
        max-height:100vh;
        border-radius:0;
      }
      #sizeTablesOverlay .miniModal,
      #productsOverlay .productsModal,
      #questionOverlay .miniModal,
      #phaseEditOverlay .miniModal,
      #taskOverlay .miniModal{
        width:100vw;
        height:100vh;
        max-width:100vw;
        max-height:100vh;
        border-radius:0;
      }
      .productsModal .mb,
      .productModal .mb,
      .calModal .mb,
      #sizeTablesOverlay .miniModal .mb,
      #phaseEditOverlay .miniModal .mb,
      #questionOverlay .miniModal .mb,
      #taskOverlay .miniModal .mb,
      #productManageOverlay .miniModal .mb{
        max-height:none;
        overflow:auto;
        flex:1 1 auto;
        min-height:0;
      }
      .calModal{
        max-height:100vh;
      }
      .calWeekHeader{
        font-size:11px;
        gap:6px;
      }
      .calGrid{
        gap:6px;
      }
      .calNavRow{
        justify-content:center;
        margin-left:0;
        width:100%;
        margin-top:10px;
      }
      .calModal .mh{
        grid-template-columns:1fr auto;
      }
      .phaseEditActions{
        position:static;
        flex-direction:column;
        gap:10px;
        align-items:stretch;
      }
      .phaseEditActionsMain{
        margin:0;
        justify-content:center;
      }
      .phaseEditDeleteBtn{
        position:static;
        transform:none;
        align-self:flex-start;
      }
      .calCell{
        padding:6px;
      }
      .calDayNum{
        font-size:10px;
        margin-bottom:4px;
      }
      .calItems{
        display:none;
      }
      .calCountsMobile{
        display:inline-flex;
        gap:6px;
        align-items:center;
        justify-content:center;
        margin-top:auto;
        align-self:center;
      }
      .calCell::after{
        content: attr(data-count);
        display:none;
        align-items:center;
        justify-content:center;
        font-size:10px;
        font-weight:900;
        color:#38d9a9;
        align-self:center;
        margin-top:auto;
      }
      .calCell:not([data-count])::after{
        content:"";
        display:none;
      }
      .calDetailRow{
        flex-direction:column;
        align-items:flex-start;
      }
      .miniCalCount{
        min-width:0;
        height:auto;
        border-radius:0;
        color:#38d9a9;
        background:transparent;
      }
      .miniCalCountExtra{
        color:#ff922b;
      }
      .calDetailRow .txt{
        width:100%;
      }
      .mobileHeaderCard{
        display:block;
      }
    }

    @media(max-width:520px){
      .btn{
        padding:9px 12px;
        font-size:12px;
      }
      .pillMini{
        font-size:11px;
      }
      .taskActions{
        padding-top:18px;
        gap:8px;
      }
      .searchrow .btn.small{
        padding:9px 12px;
      }
      .drawer{
        width:100vw;
        height:100vh;
        max-height:100vh;
        border-radius:0;
      }
      .drawer.drawerRight{
        width:100vw;
      }
      .calWeekHeader{
        grid-template-columns: repeat(7, minmax(0, 1fr));
      }
      .calDayDetails{
        gap:8px;
      }
      .summaryMetaGrid{
        grid-template-columns:1fr;
      }
    }
    .calDetailRow .dot{ width:10px; height:10px; border-radius:999px; margin-top:4px; }
    .calDetailRow .dot.open{ background:#0f8f5f; }
    .calDetailRow .dot.closed{ background:#e03131; }
    .calDetailRow .dot.extra{ background:#ff922b; }
    .calDetailRow.isClosed .dot.extra{ background:#e03131; }
    .calDetailRow .dot.personal{ background:#f4c2c2; }
    .calDetailRow.isClosed .extraMeta,
    .calDetailRow.isClosed .extraMeta .extraValue{
      color:#e03131;
    }
    .calDetailRow .dot.overdue{ background:#845ef7; }
    .calDetailRow.calSimpleRow .calSimpleActions{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
      align-items:flex-start;
    }
    .calDetailRow .txt{ flex:1; min-width:220px; }
    .calDetailRow.calSimpleRow .txt{
      min-width:0;
    }
    .calDetailRow.calSimpleRow .txt .title{
      margin-top:0;
    }
    .calDetailRow .txt .title{ font-weight:950; margin-top:0; font-size:13px; }
    .calDetailRow .txt .extraMeta{ color:#ff922b; }
    .calDetailRow .txt .extraMeta .extraValue{
      color:var(--text);
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .calDetailRow .txt .meta{
      margin:4px 0 0 0;
      font-size:12px;
      opacity:.85;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .calDetailRow.calSimpleRow .txt .meta{
      margin:8px 0 0 0;
    }
    .calDetailRow .txt .meta > div{font-weight:600}
    .calDetailRow .txt .meta > div > span{font-weight:800}
    .calDetailRow .txt .meta a{
      color:#6ecbff;
      text-decoration:none;
    }
    .calPhoneLink{
      padding:0;
      border:0;
      background:transparent;
      cursor:pointer;
      color:#6ecbff;
      text-decoration:none;
      font:inherit;
    }

/* ===== Ícone do calendário (inputs type=date) — branco no tema escuro ===== */
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: 0.9;
  cursor: pointer;
}

/* Fase - tamanho personalizado */
#phaseEditSizeFromCustom,
#phaseEditSizeToCustom{
  margin-top:8px;
  width:100%;
}
#phaseEditSizeWrap .label{
  margin:16px 0 8px;
}

/* Personalizacoes */
.userNotifyBtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  cursor:pointer;
}
.userNotifyBtn .iconStroke{
  width:18px;
  height:18px;
}
.userPauseWrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.userPauseBtn{
  margin-left:0;
}
.userPauseBtn .playIcon{
  display:none;
}
.userPauseBtn.isPaused .pauseIcon{
  display:none;
}
.userPauseBtn.isPaused .playIcon{
  display:block;
}
.userPauseBtn .pauseIcon,
.userPauseBtn .playIcon{
  width:18px;
  height:18px;
}
.userPauseMenu{
  position:absolute;
  top:46px;
  right:0;
  min-width:160px;
  padding:8px;
  display:none;
  flex-direction:column;
  gap:6px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  box-shadow:var(--shadow);
  z-index:50;
}
.userPauseMenu.show{
  display:flex;
}
.userPauseMenu .btn{
  justify-content:flex-start;
}
.pauseModal{
  width:320px;
}
.pauseOptions{
  display:flex;
  gap:12px;
  justify-content:center;
}
.pauseOptions .btn{
  flex:1;
}
.pauseAlertModal{
  width:360px;
}
.pauseAlertActions{
  display:flex;
  justify-content:center;
  margin-top:12px;
}
.miniOverlay#pauseOverlay{
  z-index:1200;
}
.miniOverlay#pauseAlertOverlay{
  z-index:1300;
}
.notifyBadge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:999px;
  display:none;
  align-items:center;
  justify-content:center;
  background:#ff5c7a;
  color:#0b1220;
  font-size:11px;
  font-weight:700;
}
.notifyDrawer .drawerBd{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:calc(100vh - 90px);
  overflow-y:auto;
}
.notifyDrawer{
  width:480px;
  max-width:90vw;
}
.notifyList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.notifyItem{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--line) 65%, transparent);
  background:rgba(8, 16, 30, 0.6);
}
.notifyItemBody{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.notifyLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  color:color-mix(in srgb, var(--text) 90%, transparent);
  white-space:nowrap;
}
.notifyLabel{
  color:var(--muted);
  white-space:nowrap;
}
.notifyValue{
  color:var(--text);
  font-weight:600;
  text-align:right;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.notifyDivider{
  height:1px;
  width:100%;
  background:color-mix(in srgb, var(--line) 70%, transparent);
  margin:4px 0;
}
.notifyItem.isUnread{
  border-color:rgba(124, 140, 255, 0.55);
  box-shadow:0 0 0 1px rgba(124, 140, 255, 0.12);
}
.notifyItemTitle{
  font-weight:700;
  color:var(--text);
}
.notifyDrawer .drawerHd{
  align-items:center;
}
.notifyDrawer .drawerHd h3{
  margin:0;
  display:flex;
  align-items:center;
}
.notifyDrawer .drawerHdActions{
  display:flex;
  align-items:center;
  gap:12px;
}
.notifyItemHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.notifyItemTitle{
  text-align:left;
  font-weight:700;
}
.notifyLine{
  font-weight:400;
}
.notifyLabel::after{
  content:":";
}
.notifyValue{
  font-weight:400;
}
.notifyItemHeaderActions{
  display:flex;
  align-items:center;
  gap:8px;
}
.notifyItemHeaderActions .notifyEyeBtn,
.notifyItemHeaderActions .notifyMarkBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.notifyMarkBtn{
  border:none;
  background:transparent;
  padding:4px 6px;
  color:var(--muted);
}
.notifyMarkBtn:hover{
  color:var(--text);
}
.notifyEyeBtn{
  border:none;
  background:transparent;
  color:var(--text);
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.notifyEyeBtn .iconStroke{
  width:18px;
  height:18px;
}
.notifyEyeBtn:hover{
  color:var(--brand2);
}
.notifyItemDetail{
  color:color-mix(in srgb, var(--text) 82%, transparent);
  font-size:13px;
}
.notifyItemMeta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  font-size:12px;
  color:color-mix(in srgb, var(--text) 65%, transparent);
}
.notifyEmpty{
  padding:14px;
  border-radius:12px;
  background:rgba(8, 16, 30, 0.6);
  border:1px dashed color-mix(in srgb, var(--line) 50%, transparent);
  text-align:center;
  color:color-mix(in srgb, var(--text) 70%, transparent);
}

.personalizationsList{
  display:flex;
  flex-direction:column;
  gap:0;
}
.personalizationsGrid{
  justify-items:start;
}
.personalizationsGrid{
  margin-top:32px;
}
.personalizationsPageActions{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  margin-bottom:16px;
}
.personalizationsCard{
  width:100%;
}
.personalizationsHeaderActions{
  display:flex;
  align-items:center;
  gap:10px;
}
.personalizationCard{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:16px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.personalizationDivider{
  height:1px;
  background:color-mix(in srgb, var(--line) 60%, transparent);
  margin:8px 0;
}
.personalizationCard.isNew{
  box-shadow:none;
}
.personalizationHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}
.personalizationTitle{
  font-weight:700;
  font-size:15px;
  text-align:left;
}
.personalizationBadge{
  background:#7c8cff;
  color:#0b1220;
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
  font-weight:700;
}
.personalizationStage{
  background:color-mix(in srgb, var(--brand) 18%, transparent);
  color:var(--text);
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
  font-weight:700;
  border:1px solid color-mix(in srgb, var(--brand) 45%, transparent);
}
.personalizationMeta{
  color:var(--muted);
  font-size:13px;
}
.personalizationActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.personalizationModal .mb{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-height:none;
  overflow:auto;
  flex:1 1 auto;
  min-height:0;
}
.personalizationModal{
  width:min(1280px, 96vw);
  max-height:92vh;
  display:flex;
  flex-direction:column;
}
.personalizationLayout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 520px);
  gap:16px;
  align-items:start;
}
.personalizationInfo{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.personalizationPreviewGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  align-items:stretch;
}
.personalizationPreviewCard{
  border:1px solid var(--border);
  border-radius:14px;
  padding:0;
  background:#dfe4ec;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  min-height:320px;
  aspect-ratio:3 / 4;
  position:relative;
  overflow:hidden;
  min-width:0;
}
.personalizationPreviewTitle{
  font-size:12px;
  font-weight:700;
  color:#1c2433;
  position:absolute;
  top:8px;
  left:0;
  right:0;
  text-align:center;
  z-index:2;
  margin:0;
  pointer-events:none;
}
.personalizationPreviewCard img{
  position:absolute;
  top:8px;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:calc(100% - 8px);
  object-fit:cover;
  border-radius:0;
  display:block;
}
.personalizationPreviewEmpty{
  color:#6b778c;
  font-size:12px;
  text-align:center;
  position:absolute;
  top:8px;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  z-index:1;
  line-height:1.3;
}
.personalizationPreviewCard.hasPreview .personalizationPreviewEmpty{
  display:none;
}
.personalizationDetails{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.personalizationDetailRow{
  display:grid;
  grid-template-columns:120px minmax(0, 1fr) auto;
  gap:8px;
  align-items:flex-start;
  font-size:13px;
  padding:6px 0;
  border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.personalizationDetailRow:last-child{
  border-bottom:0;
}
.personalizationDetailRow.detailNoCopy{
  grid-template-columns:120px minmax(0, 1fr);
}
.personalizationDetailRow.personalizationColorRow,
.personalizationDetailRow.personalizationSizeRow{
  padding-top:8px;
  padding-bottom:8px;
  align-items:center;
}
.personalizationDetailRow.personalizationColorRow .detailLabel,
.personalizationDetailRow.personalizationColorRow .detailValue,
.personalizationDetailRow.personalizationSizeRow .detailLabel,
.personalizationDetailRow.personalizationSizeRow .detailValue{
  padding-top:0;
}
.personalizationDetailRow.personalizationColorRow .detailValue{
  white-space:normal;
}
.personalizationDetailRow.personalizationColorRow .copyIconBtn,
.personalizationDetailRow.personalizationSizeRow .copyIconBtn{
  align-self:center;
  margin-top:0;
}
.personalizationDetailRow .detailLabel{
  color:var(--muted);
  padding-top:2px;
}
.personalizationDetailRow .detailValue{
  word-break:break-word;
  white-space:pre-wrap;
  padding-top:2px;
}
.personalizationDetailRow.detailNoWrap .detailValue{
  white-space:normal;
}
.personalizationDetailRow .detailValue .personalizationFontDownload{
  margin-left:8px;
  vertical-align:middle;
}
.personalizationColorMeta{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 12px;
}
.personalizationColorName{
  color:var(--text);
  font-weight:600;
}
.personalizationColorHexWrap{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
}
.personalizationColorHex{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing:0.02em;
}
.personalizationDetailRow .copyIconBtn{
  width:28px;
  height:28px;
  align-self:flex-start;
  margin-top:2px;
}
.personalizationPhone{
  background:none;
  border:none;
  color:#6ecbff;
  text-decoration:underline;
  cursor:pointer;
  padding:0;
  font:inherit;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
}
.personalizationDownloads{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
}
.personalizationActionsRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.personalizationFilesStatus{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.2px;
  color:var(--muted);
  padding:0 6px;
}
.personalizationActionsDivider{
  height:1px;
  background:color-mix(in srgb, var(--line) 65%, transparent);
  opacity:0.6;
}
.btn.iconOnly{
  padding:6px 8px;
  width:34px;
  height:34px;
}
.btn.iconOnly .iconStroke{
  width:16px;
  height:16px;
}
.btn.iconOnly.iconBare{
  background:none;
  border:0;
  box-shadow:none;
}
.btn.iconOnly.iconBare:hover{
  background:none;
  color:var(--brand);
}
@media (max-width: 860px){
  .personalizationLayout{
    grid-template-columns:1fr;
  }
  .personalizationPreviewGrid{
    grid-template-columns:1fr;
  }
  .personalizationPreviewCard img{
    max-height:260px;
  }
}
body.light input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(0);
}


    /* garante que <a class='btn'> não fique sublinhado */
    a, a:visited{ color:#6ecbff; text-decoration:none !important; }
    a:hover{ text-decoration:none !important; }
    a.btn, a.btn:hover, a.btn:visited{ text-decoration:none; color:inherit; }
    .authLink,
    .authLink:visited,
    .authLink:hover{
      font-size:12px;
      font-weight:700;
      color:#6ecbff !important;
      text-decoration: underline !important;
    }
    :root{
      --sideMenuW:220px;
      --sideMenuCollapsedW:96px;
    }
    body.hasSideMenu{
      padding-left:var(--sideMenuW);
    }
    body.sideMenuCollapsed{
      padding-left:var(--sideMenuCollapsedW);
    }
    .sideMenu{
      position:fixed;
      top:0;
      left:0;
      bottom:0;
      width:var(--sideMenuW);
      background: color-mix(in srgb, var(--card) 85%, transparent);
      border-right:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      box-shadow:var(--shadow);
      display:flex;
      flex-direction:column;
      padding:12px 10px;
      gap:12px;
      z-index:1200;
    }
    .sideMenu.isCollapsed{
      width:var(--sideMenuCollapsedW);
    }
    .sideToggle{
      width:40px;
      height:40px;
      border-radius:12px;
      border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
      background: color-mix(in srgb, var(--bg) 75%, transparent);
      color:var(--text);
      display:grid;
      place-items:center;
      cursor:pointer;
    }
    .sideMenu.isCollapsed .sideToggle svg{transform:rotate(180deg)}
    .sideTop{
      display:flex;
      align-items:center;
      gap:10px;
      padding:6px 6px 2px;
    }
    .sideMenu.isCollapsed .sideTop{
      flex-direction:column;
      gap:6px;
      align-items:center;
    }
    .sideMenu.isCollapsed .sideLogo{order:-1;}
    .sideLogo{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .sideLogo img{height:28px;width:auto;display:block;}
    .sideLogo .logoCompact{display:none;}
    .sideMenu.isCollapsed .sideLogo .logoFull{display:none;}
    .sideMenu.isCollapsed .sideLogo .logoCompact{display:block;}
    .sideMenu.isCollapsed .sideLogo .logoCompact.logoLight{display:none;}
    .sideMenu.isCollapsed .sideLogo .logoCompact.logoDark{display:block;}
    .sideLogo .logoLight{display:none;}
    body.light .sideLogo .logoLight{display:block;}
    body.light .sideLogo .logoDark{display:none;}
    body.light .sideMenu.isCollapsed .sideLogo .logoCompact.logoLight{display:block;}
    body.light .sideMenu.isCollapsed .sideLogo .logoCompact.logoDark{display:none;}
    .sideMenuBtns{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px}
    .sideBtn{
      display:flex;
      align-items:center;
      gap:12px;
      width:100%;
      justify-content:flex-start;
      padding:8px 6px;
      border-radius:12px;
      border:none;
      background:transparent;
      color:var(--text);
      font-family:"Segoe UI Variable Text","Segoe UI","Arial",sans-serif;
      font-size:14px;
      font-weight:400;
    }
    .sideBtn .iconStroke{width:18px;height:18px}
    .sideLabel{font-size:14px !important;font-weight:400;white-space:nowrap}
    .sideCount{
      margin-left:auto;
      min-width:14px;
      height:14px;
      padding:0 5px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:10px !important;
      line-height:1;
      font-weight:600;
      color:var(--text);
      background: color-mix(in srgb, var(--line) 65%, transparent);
    }
    .sideDivider{height:1px;background:color-mix(in srgb, var(--line) 70%, transparent);margin:4px 6px}
    .sideMenu.isCollapsed .sideLabel{display:none}
    .sideMenu.isCollapsed .sideCount{display:none}
    .sideMenu.isCollapsed .sideBtn{justify-content:center}
    @media (max-width: 1024px){
      body.hasSideMenu{padding-left:0}
      .sideMenu{display:none}
      .userBar{display:none}
    }


/* ===== MANUAL DO USUARIO ===== */
.manualLayout{
  display:grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap:16px;
}
.manualNav{
  position:sticky;
  top:96px;
  align-self:start;
  max-height:calc(100vh - 120px);
  overflow:auto;
}
.manualIntro{
  font-size:13px;
  color:var(--muted);
  margin-bottom:12px;
}
.manualNavList{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.manualNavList a{
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid transparent;
  background: color-mix(in srgb, var(--card) 80%, transparent);
}
.manualNavList a:hover{
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.manualContent{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.manualSection .bd{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.manualList{
  margin:0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.manualCallout{
  border:1px dashed color-mix(in srgb, var(--brand) 35%, transparent);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  padding:10px 12px;
  border-radius:12px;
  color:var(--text);
}
@media (max-width: 980px){
  .manualLayout{
    grid-template-columns: 1fr;
  }
  .manualNav{
    position:static;
    max-height:none;
  }
}