/* ============================================================
   WENEED — Design System
   Mobile-first. Tokens + componentes.
   Fonte da verdade: CSS Variables.
   ============================================================ */

:root{
  /* ---------- CORES · BASE ---------- */
  --color-black:#0A0A0A;
  --color-white:#FFFFFF;

  /* ---------- CORES · MARCA ---------- */
  --color-brand-blue:#0057FF;
  --color-brand-blue-deep:#0044CC;

  /* ---------- CORES · NEUTROS ---------- */
  --color-gray-50:#F5F5F5;
  --color-gray-100:#EBEBEB;
  --color-gray-200:#D9D9D9;
  --color-gray-300:#BFBFBF;
  --color-gray-400:#8C8C8C;
  --color-gray-500:#6B6B6B;
  --color-gray-700:#4A4A4A;
  --color-gray-900:#1A1A1A;

  /* ---------- CORES · SISTEMA ---------- */
  --color-success:#12B76A;
  --color-error:#F04438;
  --color-warning:#F79009;
  --color-info:var(--color-brand-blue-deep);

  /* ---------- SEMÂNTICAS · SUPERFÍCIE ---------- */
  --surface-default:var(--color-white);
  --surface-subtle:var(--color-gray-50);
  --surface-inverse:var(--color-black);
  --surface-brand:var(--color-brand-blue);

  /* ---------- SEMÂNTICAS · TEXTO ---------- */
  --text-primary:var(--color-black);
  --text-secondary:var(--color-gray-400);
  --text-tertiary:var(--color-gray-700);
  --text-inverse:var(--color-white);
  --text-link:var(--color-brand-blue-deep);
  --text-brand:var(--color-brand-blue-deep);

  /* ---------- SEMÂNTICAS · BORDA ---------- */
  --border-default:var(--color-gray-200);
  --border-strong:var(--color-black);
  --border-subtle:var(--color-gray-100);
  --border-focus:var(--color-brand-blue);

  /* ---------- TIPOGRAFIA ---------- */
  --font-family-base:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --font-weight-extrabold:800;

  --font-size-xs:12px;
  --font-size-sm:13px;
  --font-size-base:15px;
  --font-size-md:16px;
  --font-size-lg:18px;
  --font-size-xl:20px;
  --font-size-2xl:22px;
  --font-size-3xl:26px;
  --font-size-4xl:32px;
  --font-size-5xl:40px;

  --line-height-tight:1.1;
  --line-height-snug:1.25;
  --line-height-normal:1.5;
  --line-height-relaxed:1.65;

  --tracking-tighter:-0.02em;
  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-wide:0.01em;
  --tracking-wider:0.02em;

  /* ---------- SPACING (base 4) ---------- */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  /* ---------- RADIUS ---------- */
  --radius-none:0;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-2xl:24px;
  --radius-full:9999px;

  /* ---------- BORDAS ---------- */
  --border-width-hairline:1px;
  --border-width-medium:2px;

  /* ---------- SOMBRAS ---------- */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(10,10,10,0.04);
  --shadow-sm:0 2px 4px rgba(10,10,10,0.06);
  --shadow-md:0 4px 12px rgba(10,10,10,0.08);
  --shadow-lg:0 8px 24px rgba(10,10,10,0.10);
  --shadow-focus:0 0 0 3px rgba(0,87,255,0.20);

  /* ---------- LAYOUT ---------- */
  --app-max-width:520px;
  --app-sidebar-width:224px;
  --app-header-height:56px;
  --app-mobile-nav-height:64px;

  /* ---------- Z-INDEX ---------- */
  --z-base:0;
  --z-dropdown:1000;
  --z-sticky:1100;
  --z-overlay:1200;
  --z-modal:1300;
  --z-toast:1500;

  /* ---------- MOTION ---------- */
  --duration-fast:150ms;
  --duration-base:200ms;
  --duration-slow:300ms;
  --ease-out:cubic-bezier(0,0,0.2,1);
  --ease-in-out:cubic-bezier(0.4,0,0.2,1);
}

/* ============================================================
   RESET
   ============================================================ */
*,
*::before,
*::after{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html{
  -webkit-text-size-adjust:100%;
}

html,body{
  margin:0;
  padding:0;
}

body{
  background:var(--surface-subtle);
  color:var(--text-primary);
  font-family:var(--font-family-base);
  font-size:var(--font-size-base);
  line-height:var(--line-height-normal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100vh;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

h1,h2,h3,h4{
  margin:0;
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--tracking-tight);
  line-height:var(--line-height-snug);
}

img,video,svg{ max-width:100%; display:block; }

/* Acessibilidade: foco visível apenas para teclado */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--color-brand-blue);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* Seleção de texto */
::selection{
  background:rgba(0,87,255,0.20);
  color:var(--color-black);
}

/* Scrollbar discreta (WebKit) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--color-gray-200);
  border-radius:var(--radius-full);
  border:2px solid var(--surface-subtle);
}
::-webkit-scrollbar-thumb:hover{ background:var(--color-gray-300); }

/* Respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   LAYOUT · MOBILE-FIRST
   ============================================================ */

.container-mobile{
  width:100%;
  max-width:var(--app-max-width);
  margin:0 auto;
  min-height:100vh;
  background:var(--surface-subtle);
}

.container-card{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:var(--space-5);
  background:var(--surface-subtle);
}

/* App shell — mobile: bloco único; desktop: grid com sidebar */
.app-shell{
  display:block;
  min-height:100vh;
  padding-bottom:calc(var(--app-mobile-nav-height) + var(--space-6) + env(safe-area-inset-bottom));
}

/* Sidebar escondida por padrão (mobile-first) */
.sidebar{ display:none; }

/* Conteúdo principal */
.main-content{
  padding:var(--space-5) var(--space-4) var(--space-8);
  max-width:100%;
}

/* ============================================================
   HEADER ESCURO
   ============================================================ */
.header-dark{
  background:var(--surface-inverse);
  color:var(--text-inverse);
  padding:var(--space-5) var(--space-5) var(--space-6);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}

.header-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:var(--space-4);
  gap:var(--space-3);
}

.brand{
  font-weight:var(--font-weight-extrabold);
  font-size:var(--font-size-md);
  letter-spacing:var(--tracking-tighter);
  color:var(--color-white);
}
.brand .dot{ color:var(--color-brand-blue); }

.pill-link{
  display:inline-flex;
  align-items:center;
  font-size:var(--font-size-xs);
  font-weight:var(--font-weight-medium);
  color:var(--color-gray-400);
  border:1px solid rgba(255,255,255,0.18);
  padding:7px 12px;
  border-radius:var(--radius-full);
  background:none;
  transition:background var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out),
             color var(--duration-fast) var(--ease-out);
}
.pill-link:hover{
  border-color:rgba(255,255,255,0.32);
  color:var(--color-white);
  background:rgba(255,255,255,0.06);
}

/* Progresso em etapas */
.step-track{
  display:flex;
  gap:6px;
  margin-top:var(--space-4);
}
.step-dot{
  flex:1;
  height:4px;
  border-radius:var(--radius-full);
  background:rgba(255,255,255,0.16);
  transition:background var(--duration-base);
}
.step-dot.done{ background:var(--color-brand-blue); }

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--surface-default);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
}
.card + .card{ margin-top:var(--space-3); }

.card-label{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-bold);
  color:var(--text-primary);
  letter-spacing:var(--tracking-tight);
  margin-bottom:var(--space-4);
}
.card-label .dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--color-brand-blue);
  flex-shrink:0;
}
.card-note{
  font-size:var(--font-size-sm);
  color:var(--text-secondary);
  line-height:var(--line-height-normal);
  margin:calc(-1 * var(--space-2)) 0 var(--space-4);
}

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.field{ margin-bottom:var(--space-4); }
.field:last-child{ margin-bottom:0; }

.field-row{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
}

label{
  display:block;
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-semibold);
  color:var(--text-primary);
  margin-bottom:var(--space-2);
  line-height:var(--line-height-snug);
}

input,
select,
textarea{
  width:100%;
  font-family:var(--font-family-base);
  font-size:16px; /* evita zoom automático no iOS */
  color:var(--text-primary);
  background:var(--surface-subtle);
  border:1.5px solid transparent;
  border-radius:var(--radius-sm);
  padding:14px;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color var(--duration-fast) var(--ease-out),
             background   var(--duration-fast) var(--ease-out),
             box-shadow   var(--duration-fast) var(--ease-out);
}
input:focus,
select:focus,
textarea:focus{
  border-color:var(--border-focus);
  background:var(--surface-default);
  box-shadow:var(--shadow-focus);
}
input:read-only,
textarea:read-only{
  color:var(--text-secondary);
  cursor:not-allowed;
}
textarea{
  min-height:100px;
  resize:vertical;
  line-height:var(--line-height-normal);
}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
  padding-right:42px;
}

/* Autofill não invade o visual do input */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text-primary);
  -webkit-box-shadow:0 0 0 1000px var(--surface-default) inset;
  transition:background-color 9999s ease-in-out 0s;
}

.helper{
  font-size:var(--font-size-xs);
  color:var(--text-secondary);
  margin-top:6px;
  line-height:var(--line-height-normal);
}

/* ============================================================
   CHIPS
   ============================================================ */
.chip-select{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-semibold);
  padding:9px 15px;
  border:1.5px solid var(--border-default);
  background:var(--surface-subtle);
  border-radius:var(--radius-full);
  color:var(--text-secondary);
  cursor:pointer;
  user-select:none;
  line-height:1.2;
  transition:background var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out),
             color var(--duration-fast) var(--ease-out);
}
.chip:hover{
  border-color:var(--color-black);
  color:var(--color-black);
}
.chip.selected{
  background:var(--color-black);
  color:var(--color-white);
  border-color:var(--color-black);
}
.chip.selected.brand{
  background:var(--color-brand-blue-deep);
  border-color:var(--color-brand-blue-deep);
  color:var(--color-white);
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  border:none;
  padding:16px 20px;
  font-family:var(--font-family-base);
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-base);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  border-radius:var(--radius-sm);
  text-decoration:none;
  cursor:pointer;
  transition:opacity var(--duration-fast) var(--ease-out),
             background var(--duration-fast) var(--ease-out),
             transform var(--duration-fast) var(--ease-out);
}
.btn:active{ transform:scale(0.98); opacity:0.9; }
.btn:disabled{ opacity:0.55; cursor:not-allowed; }
.btn .icon{ width:16px; height:16px; stroke-width:2; }

.btn-primary{ background:var(--color-black); color:var(--color-white); }
.btn-primary:hover:not(:disabled){ background:var(--color-gray-900); }

.btn-brand{ background:var(--color-brand-blue-deep); color:var(--color-white); }
.btn-brand:hover:not(:disabled){ background:var(--color-brand-blue); }

.btn-outline{
  background:transparent;
  border:1.5px solid var(--color-black);
  color:var(--color-black);
}
.btn-outline:hover:not(:disabled){
  background:var(--color-black);
  color:var(--color-white);
}

.btn-ghost{
  width:auto;
  background:none;
  color:var(--text-secondary);
  font-weight:var(--font-weight-semibold);
  font-size:var(--font-size-sm);
  padding:var(--space-2);
  text-transform:none;
  letter-spacing:0;
}

.btn.w-auto{ width:auto; }

/* ============================================================
   AVATARES
   ============================================================ */
.avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--surface-subtle);
  border:1px solid var(--border-default);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-weight:var(--font-weight-bold);
  color:var(--text-primary);
  overflow:hidden;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-sm{ width:34px; height:34px; font-size:var(--font-size-base); }
.avatar-md{ width:44px; height:44px; font-size:var(--font-size-lg); }
.avatar-lg{ width:56px; height:56px; font-size:var(--font-size-xl); }

/* ============================================================
   BADGES · PERFIL
   ============================================================ */
.role-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--tracking-wider);
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:var(--radius-full);
  white-space:nowrap;
}
.role-badge.cliente{
  background:var(--color-black);
  color:var(--color-white);
}
.role-badge.prestador{
  background:var(--color-white);
  color:var(--color-black);
  border:1px solid var(--color-black);
}

/* ============================================================
   BADGES · STATUS
   ============================================================ */
.status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--tracking-wider);
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:var(--radius-full);
  white-space:nowrap;
}
.status-agendado{
  background:var(--color-gray-100);
  color:var(--color-gray-700);
}
.status-andamento{
  background:var(--color-brand-blue-deep);
  color:var(--color-white);
}
.status-concluido{
  background:var(--color-black);
  color:var(--color-white);
}
.status-cancelado{
  background:var(--color-gray-50);
  color:var(--color-gray-400);
  border:1px solid var(--color-gray-200);
}

/* ============================================================
   DETALHES
   ============================================================ */
.detail-lines{
  border-top:1px solid var(--border-default);
  padding-top:var(--space-3);
}
.detail-line{
  display:flex;
  justify-content:space-between;
  gap:var(--space-3);
  padding:7px 0;
  font-size:var(--font-size-sm);
}
.detail-line span:first-child{ color:var(--text-secondary); }
.detail-line span:last-child{
  font-weight:var(--font-weight-semibold);
  text-align:right;
}

/* ============================================================
   TOPBAR (páginas internas)
   ============================================================ */
.page-topbar{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.page-topbar h1{
  font-size:var(--font-size-2xl);
  font-weight:var(--font-weight-extrabold);
  letter-spacing:var(--tracking-tighter);
  margin:0 0 var(--space-1);
}
.page-topbar .sub{
  font-size:var(--font-size-sm);
  color:var(--text-secondary);
  line-height:var(--line-height-normal);
}
.page-topbar .btn{ width:100%; }

/* ============================================================
   TOOLBAR / BUSCA
   ============================================================ */
.toolbar{
  display:flex;
  gap:var(--space-3);
  margin:var(--space-5) 0 var(--space-4);
  flex-wrap:wrap;
  align-items:center;
}
.search-input{
  flex:1;
  min-width:0;
  width:100%;
  font-family:var(--font-family-base);
  font-size:16px; /* evita zoom no iOS */
  padding:14px;
  border:1.5px solid transparent;
  border-radius:var(--radius-sm);
  background:var(--surface-default);
  outline:none;
  box-shadow:var(--shadow-xs);
  -webkit-appearance:none;
  appearance:none;
  transition:border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.search-input:focus{
  border-color:var(--border-focus);
  box-shadow:var(--shadow-focus);
}

/* ============================================================
   LIST ROWS
   ============================================================ */
.list-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3);
  background:var(--surface-default);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  margin-bottom:var(--space-2);
  transition:box-shadow var(--duration-fast);
  text-decoration:none;
  color:inherit;
}
.list-row:hover{ box-shadow:var(--shadow-md); }
.list-row:active{ transform:scale(0.995); }

.list-row-main{
  flex:1;
  min-width:0;
}
.list-row-title{
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-base);
  letter-spacing:var(--tracking-tight);
  margin-bottom:4px;
  word-break:break-word;
}
.list-row-sub{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-size:var(--font-size-sm);
  color:var(--text-secondary);
  line-height:var(--line-height-normal);
}
.list-row-sub .sep{ color:var(--border-default); }

/* Mobile: o "lado" vira linha abaixo */
.list-row-side{
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-3);
  margin-top:var(--space-2);
  padding-top:var(--space-3);
  border-top:1px solid var(--border-subtle);
  flex-wrap:wrap;
}
.list-row-value{
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-base);
  letter-spacing:var(--tracking-tight);
}
.list-row-date{
  font-size:var(--font-size-xs);
  color:var(--text-secondary);
}
.list-row-action{
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-bold);
  color:var(--text-link);
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state{
  text-align:center;
  padding:var(--space-12) var(--space-5);
  color:var(--text-secondary);
}
.empty-state h3{
  font-size:var(--font-size-lg);
  color:var(--text-primary);
  margin-bottom:var(--space-2);
}
.empty-state p{
  font-size:var(--font-size-sm);
  line-height:var(--line-height-normal);
  max-width:36ch;
  margin:0 auto var(--space-4);
}

/* ============================================================
   INFO BOX
   ============================================================ */
.info-box{
  display:flex;
  gap:var(--space-3);
  font-size:var(--font-size-xs);
  line-height:var(--line-height-normal);
  color:var(--text-secondary);
  padding:var(--space-3) var(--space-4);
  background:var(--surface-subtle);
  border-radius:var(--radius-sm);
  border-left:3px solid var(--color-brand-blue);
}
.info-box .icon{
  flex-shrink:0;
  color:var(--color-brand-blue);
}
.info-box b{
  color:var(--text-primary);
  font-weight:var(--font-weight-semibold);
}

/* ============================================================
   ICON SYSTEM
   ============================================================ */
.icon{
  width:16px; height:16px;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  flex-shrink:0;
  display:block;
}
.icon-sm{ width:14px; height:14px; stroke-width:2; }
.icon-md{ width:18px; height:18px; stroke-width:1.75; }
.icon-lg{ width:22px; height:22px; stroke-width:1.5; }
.icon-xl{ width:28px; height:28px; stroke-width:1.5; }

/* ============================================================
   SIDEBAR (base — funciona em qualquer breakpoint)
   No mobile fica oculta pela regra @media (max-width:1023px)
   ============================================================ */
.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:10px 12px;
  border-radius:var(--radius-sm);
  font-size:var(--font-size-base);
  color:var(--color-gray-400);
  border-left:2px solid transparent;
  text-decoration:none;
  transition:background var(--duration-fast) var(--ease-out),
             color var(--duration-fast) var(--ease-out),
             border-color var(--duration-fast) var(--ease-out);
}
.nav-item:hover{
  color:var(--color-white);
  background:rgba(255,255,255,0.06);
}
.nav-item.active{
  color:var(--color-white);
  background:rgba(0,87,255,0.14);
  border-left:2px solid var(--color-brand-blue);
  font-weight:var(--font-weight-semibold);
}

.nav-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  color:inherit;
  flex-shrink:0;
}

.sidebar-foot{
  margin-top:auto;
  padding-top:var(--space-5);
  border-top:1px solid rgba(255,255,255,0.12);
  font-size:var(--font-size-xs);
  color:var(--color-gray-500);
  line-height:var(--line-height-normal);
}

.role-tag{
  display:inline-block;
  margin-top:var(--space-2);
  font-size:10px;
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--tracking-wider);
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:var(--radius-full);
}
.role-tag.cliente{
  color:var(--color-white);
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.24);
}
.role-tag.prestador{
  color:var(--color-brand-blue);
  background:rgba(0,87,255,0.10);
  border:1px solid rgba(0,87,255,0.40);
}

/* ============================================================
   MOBILE NAV (base — só aparece em < 1024px)
   ============================================================ */
.mobile-nav{
  display:none;
  grid-template-columns:repeat(5, 1fr);
  position:fixed;
  bottom:0; left:0; right:0;
  height:var(--app-mobile-nav-height);
  background:var(--surface-default);
  border-top:1px solid var(--border-default);
  align-items:stretch;
  z-index:var(--z-sticky);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 20px rgba(10,10,10,.05);
  isolation:isolate;
}
.mobile-nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  text-decoration:none;
  color:var(--color-gray-400);
  font-size:11px;
  font-weight:var(--font-weight-semibold);
  height:100%;
  position:relative;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
  transition:color var(--duration-base) var(--ease-out),
             transform var(--duration-fast) var(--ease-out);
}
.mobile-nav-item:active{ transform:scale(0.88); }
.mobile-nav-item.active{ color:var(--color-brand-blue-deep); }
.mobile-nav-item.active::before{
  content:'';
  position:absolute;
  top:6px; left:50%;
  transform:translateX(-50%);
  width:5px; height:5px;
  background:var(--color-brand-blue);
  border-radius:50%;
}

/* ============================================================
   UTILITÁRIOS
   ============================================================ */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.save-btn{ display:block; margin:var(--space-5) auto 0; }

/* ============================================================
   BREAKPOINTS · TABLET (≥ 640px)
   ============================================================ */
@media (min-width:640px){
  .field-row{ grid-template-columns:1fr 1fr; }

  .page-topbar{
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-end;
  }
  .page-topbar .btn{ width:auto; }

  .list-row{ flex-wrap:nowrap; }
  .list-row-side{
    width:auto;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:6px;
    margin-top:0;
    padding-top:0;
    border-top:none;
    flex-shrink:0;
  }
}

/* ============================================================
   BREAKPOINTS · DESKTOP (≥ 1024px)
   ============================================================ */
@media (min-width:1024px){
  /* App shell vira grid com sidebar */
  .app-shell{
    display:grid;
    grid-template-columns:var(--app-sidebar-width) 1fr;
    padding-bottom:0;
  }

  /* Sidebar visível */
  .sidebar{
    display:flex;
    flex-direction:column;
    gap:var(--space-8);
    background:var(--surface-inverse);
    color:var(--color-white);
    padding:var(--space-6) var(--space-5);
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
  }

  .main-content{
    padding:var(--space-8) var(--space-10) var(--space-16);
    max-width:980px;
  }

  /* Mobile nav desaparece */
  .mobile-nav{ display:none !important; }
}

/* ============================================================
   BLINDAGEM · separação estrita mobile × desktop
   ============================================================ */
@media (max-width:1023px){
  .sidebar{ display:none !important; }
  .app-shell{
    display:block !important;
    grid-template-columns:none !important;
  }
  .mobile-nav{ display:grid !important; }
}