:root {
    --bg:            #060913;
    --surface:       rgba(255,255,255,.04);
    --surface-hover: rgba(255,255,255,.07);
    --glass:         rgba(255,255,255,.05);
    --glass-border:  rgba(255,255,255,.08);
    --sidebar-w:     264px;

    --blue-dark:   #0d1d42;
    --blue-mid:    #1a3870;
    --blue:        #284d94;
    --blue-bright: #4a7fd4;
    --blue-light:  #95b3de;

    --text:      #f0f2f8;
    --text-sub:  #7a8bb0;
    --text-dim:  #3d4d6b;
    --red:       #ef4444;
    --red-bg:    rgba(239,68,68,.08);
    --red-border:rgba(239,68,68,.2);
    --green:     #22c55e;

    --r-card:   20px;
    --r-bubble: 18px;
    --font: 'Plus Jakarta Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --glow-blue: 0 0 32px rgba(40,77,148,.45), 0 0 8px rgba(40,77,148,.3);
    --glow-sm:   0 0 20px rgba(40,77,148,.25);
  }

  html {
    overflow: hidden;
    height: 100%;
    width: 100%;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: var(--font);
    background: var(--bg);
    width: 100%;
    max-width: 100vw;
    height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    position: fixed; /* prevents iOS Safari rubber-band scroll */
    top: 0; left: 0;
  }
  body::before, body::after {
    content: ''; position: fixed; border-radius: 50%;
    pointer-events: none; z-index: 0; filter: blur(80px);
  }
  body::before {
    width: min(800px, 90vw); height: min(800px, 90vw); top:-280px; right:-140px;
    background: radial-gradient(circle, rgba(40,77,148,.32) 0%, rgba(26,56,112,.12) 45%, transparent 70%);
  }
  body::after {
    width: min(640px, 85vw); height: min(640px, 85vw); bottom:-200px; left:-120px;
    background: radial-gradient(circle, rgba(250,131,29,.16) 0%, rgba(200,100,20,.06) 45%, transparent 70%);
  }

  /* ════ SCREENS ════ */
  .screen { display: none; position: relative; z-index: 10; }
  .screen.active { display: flex; align-items: center; justify-content: center; width: 100%; height: 100dvh; max-width: 100vw; overflow: hidden; }
  /* App shell: stretch to fill, don't center */
  #screen-app.active { align-items: stretch; justify-content: flex-start; }

  /* ════ SNACKBAR ════ */
  #snackbar {
    position: fixed; bottom: 32px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1a2b1a; border: 1px solid rgba(34,197,94,.3);
    border-radius: 12px; padding: 13px 20px;
    display: flex; align-items: center; gap: 10px;
    color: #86efac; font-size: 14px; font-weight: 500;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    z-index: 9999; opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s; white-space: nowrap;
  }
  #snackbar.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  #snackbar.error { background: #1f1212; border-color: rgba(239,68,68,.3); color: #fca5a5; }
  .snack-icon { width:18px; height:18px; flex-shrink:0; }

  /* ════ LOADING ════ */
  #screen-loading { flex-direction: column; gap: 36px; }
  .loading-logo-wrap {
    display:flex; flex-direction:column; align-items:center; gap:36px;
    animation: logoEntrance .9s cubic-bezier(.16,1,.3,1) both;
    position: relative;
  }
  /* Glow ambiente atrás da logo */
  .loading-logo-wrap::before {
    content:''; position:absolute;
    width:420px; height:200px; top:40%; left:50%;
    transform:translate(-50%,-50%);
    background:radial-gradient(ellipse, rgba(41,171,226,.14) 0%, rgba(40,77,148,.07) 50%, transparent 72%);
    pointer-events:none; border-radius:50%; filter:blur(18px);
  }
  .loading-logo-wrap img {
    height: clamp(120px, 22vh, 280px);
    width: auto; max-width: 80vw;
    display:block; position:relative; z-index:1;
    animation: logoPulse 3.2s ease-in-out infinite;
    filter: drop-shadow(0 4px 32px rgba(41,171,226,.32));
  }
  .loading-dots { display:flex; gap:7px; }
  .loading-dot { width:7px; height:7px; border-radius:50%; background:var(--blue-bright); opacity:.25; animation:loadDot 1.5s ease-in-out infinite; }
  .loading-dot:nth-child(2) { animation-delay:.22s; }
  .loading-dot:nth-child(3) { animation-delay:.44s; }
  @keyframes logoPulse {
    0%,100% { opacity:1;   filter:drop-shadow(0 2px 18px rgba(41,171,226,.22)); }
    50%      { opacity:.88; filter:drop-shadow(0 4px 28px rgba(41,171,226,.40)); }
  }
  @keyframes logoEntrance {
    from { opacity:0; transform:translateY(24px) scale(.93); }
    to   { opacity:1; transform:none; }
  }
  @keyframes loadDot {
    0%,100% { opacity:.25; transform:scale(1); }
    50%     { opacity:1;   transform:scale(1.5); }
  }
  /* ── Logo transparente — usa direto no dark theme ── */
  .logo-dark      { display:block; width:auto; }
  .logo-dark.lg   { height:112px; filter:drop-shadow(0 2px 16px rgba(41,171,226,.24)); }
  .logo-dark.sm   { height:64px; }
  .logo-dark.xs   { height:48px; }

  /* ════ AUTH CARD ════ */
  .auth-card {
    width: 420px;
    background: rgba(12,16,32,.88);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
    overflow: hidden;
    animation: fadeUp .4s cubic-bezier(.16,1,.3,1);
  }
  .auth-header {
    padding: 40px 40px 32px;
    background: linear-gradient(150deg,#0a1628 0%,#102040 40%,#1a3870 75%,#1e3f7a 100%);
    position: relative; overflow: hidden;
  }
  .auth-header::after {
    content:''; position:absolute; width:320px; height:320px;
    top:-120px; right:-80px;
    background: radial-gradient(circle,rgba(74,127,212,.35) 0%,rgba(40,77,148,.1) 50%,transparent 70%);
    pointer-events:none;
  }
  .auth-header::before {
    content:''; position:absolute; width:200px; height:200px;
    bottom:-80px; left:-60px;
    background: radial-gradient(circle,rgba(250,131,29,.1) 0%,transparent 65%);
    pointer-events:none;
  }
  .auth-brand { display:flex; align-items:center; gap:12px; margin-bottom:24px; position:relative; z-index:1; }
  .auth-brand-icon {
    width:42px; height:42px; background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18); border-radius:13px;
    display:flex; align-items:center; justify-content:center;
  }
  .auth-brand-icon svg { width:20px; height:20px; color:#fff; }
  .auth-brand-name { color:#fff; font-weight:700; font-size:18px; }
  .auth-brand-tag  { color:rgba(255,255,255,.5); font-size:11px; margin-top:1px; }
  .auth-title    { color:#fff; font-size:24px; font-weight:700; letter-spacing:-.4px; position:relative; z-index:1; }
  .auth-subtitle { color:rgba(255,255,255,.5); font-size:13px; margin-top:6px; line-height:1.5; position:relative; z-index:1; }
  .auth-body { padding:28px 40px 36px; display:flex; flex-direction:column; gap:14px; }

  .field label { display:block; color:var(--text-sub); font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; margin-bottom:7px; }
  .field input {
    width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
    border-radius:12px; padding:13px 16px; color:var(--text); font-family:var(--font); font-size:15px;
    outline:none; transition:border-color .2s,background .2s,box-shadow .2s;
  }
  .field input::placeholder { color:var(--text-dim); }
  .field input:focus { border-color:var(--blue-bright); background:rgba(74,127,212,.08); box-shadow:0 0 0 3px rgba(74,127,212,.15); }
  .field input.error { border-color:var(--red); box-shadow:0 0 0 3px var(--red-bg); }

  .select-wrap { position:relative; }
  .select-wrap select {
    width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
    border-radius:12px; padding:13px 42px 13px 16px; color:var(--text);
    font-family:var(--font); font-size:15px; appearance:none; -webkit-appearance:none;
    outline:none; cursor:pointer; transition:border-color .2s,background .2s,box-shadow .2s;
    color-scheme:dark;
  }
  .select-wrap select:focus { border-color:var(--blue-bright); background:rgba(74,127,212,.08); box-shadow:0 0 0 3px rgba(74,127,212,.15); }
  .select-wrap select.error { border-color:var(--red); box-shadow:0 0 0 3px var(--red-bg); }
  .select-wrap select option { background:#0f1828; color:var(--text); }
  .select-wrap select option[value=""] { color:var(--text-dim); }
  .select-arrow { position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--text-sub); }
  .select-arrow svg { width:16px; height:16px; display:block; }

  .error-msg { background:var(--red-bg); border:1px solid var(--red-border); border-radius:10px; color:#fca5a5; font-size:13px; padding:10px 14px; display:none; }
  .error-msg.visible { display:block; }
  .info-msg  { background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.2); border-radius:10px; color:#86efac; font-size:13px; padding:10px 14px; display:none; }
  .info-msg.visible  { display:block; }

  .btn-primary {
    margin-top:4px; width:100%; padding:15px;
    background:linear-gradient(145deg,#1e3d80 0%,#284d94 35%,#3d66bc 70%,#4a7fd4 100%);
    border:none; border-radius:13px; color:#fff; font-family:var(--font);
    font-size:15px; font-weight:700; cursor:pointer;
    box-shadow:0 8px 28px rgba(40,77,148,.5), inset 0 1px 0 rgba(255,255,255,.18);
    transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .15s,opacity .15s;
    display:flex; align-items:center; justify-content:center; gap:8px;
    letter-spacing:-.1px;
  }
  .btn-primary:hover   { transform:translateY(-2px); box-shadow:0 14px 36px rgba(40,77,148,.6), inset 0 1px 0 rgba(255,255,255,.2); }
  .btn-primary:active  { transform:translateY(0) scale(.98); opacity:.92; }
  .btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }
  .btn-ghost {
    background:rgba(255,255,255,.04); border:1px solid var(--glass-border);
    border-radius:12px; padding:12px 16px; color:var(--text-sub);
    font-family:var(--font); font-size:13px; font-weight:500;
    cursor:pointer; width:100%; text-align:center; transition:background .15s,color .15s;
  }
  .btn-ghost:hover { background:var(--surface-hover); color:var(--text); }
  .auth-divider { display:flex; align-items:center; gap:12px; }
  .auth-divider hr { flex:1; border:none; border-top:1px solid var(--glass-border); }
  .auth-divider span { color:var(--text-dim); font-size:12px; white-space:nowrap; }
  .auth-switch { text-align:center; color:var(--text-sub); font-size:13px; }
  .auth-switch a { color:var(--blue-light); text-decoration:none; font-weight:500; cursor:pointer; transition:color .15s; }
  .auth-switch a:hover { color:var(--blue-bright); }
  .forgot-link { text-align:right; margin-top:-6px; font-size:12px; color:var(--text-dim); cursor:pointer; transition:color .15s; }
  .forgot-link:hover { color:var(--blue-light); }
  .spinner { width:16px; height:16px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:none; }
  .btn-primary.loading .spinner { display:block; }
  .btn-primary.loading .btn-label { opacity:.6; }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* ── Custom Select ── */
  .csel { position:relative; }
  .csel-trigger {
    width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
    border-radius:12px; padding:13px 42px 13px 16px; color:var(--text);
    font-family:var(--font); font-size:15px; cursor:pointer; text-align:left;
    display:flex; align-items:center; position:relative; outline:none;
    transition:border-color .2s,background .2s,box-shadow .2s; box-sizing:border-box;
  }
  .csel-trigger[data-empty="true"] { color:var(--text-dim); }
  .csel.open .csel-trigger,
  .csel-trigger:focus { border-color:var(--blue-bright); background:rgba(74,127,212,.08); box-shadow:0 0 0 3px rgba(74,127,212,.15); }
  .csel-trigger.error { border-color:var(--red) !important; box-shadow:0 0 0 3px var(--red-bg) !important; }
  .csel-chevron { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-sub); transition:transform .2s ease; pointer-events:none; }
  .csel.open .csel-chevron { transform:translateY(-50%) rotate(180deg); }
  .csel-list {
    position:absolute; top:calc(100% + 6px); left:0; right:0;
    background:#0d1528; border:1px solid var(--glass-border); border-radius:12px;
    box-shadow:0 12px 40px rgba(0,0,0,.6); z-index:10000; overflow:hidden;
    opacity:0; transform:translateY(-6px); pointer-events:none;
    transition:opacity .15s ease,transform .15s ease;
  }
  .csel.open .csel-list { opacity:1; transform:translateY(0); pointer-events:all; }
  .csel-option { padding:11px 16px; cursor:pointer; color:var(--text); transition:background .12s; border-bottom:1px solid rgba(255,255,255,.05); }
  .csel-option:last-child { border-bottom:none; }
  .csel-option:hover { background:rgba(74,127,212,.12); }
  .csel-option.selected { color:var(--blue-bright); background:rgba(74,127,212,.08); }
  .csel-option-label { font-size:14px; }
  .csel-option-desc  { font-size:11px; color:var(--text-dim); margin-top:2px; }

  /* ── Calendar date picker ── */
  #nocal-popup {
    position:fixed; z-index:1200; width:272px;
    background:#0d1424; border:1px solid var(--glass-border);
    border-radius:14px; padding:14px;
    box-shadow:0 12px 40px rgba(0,0,0,.65);
    user-select:none;
  }
  .nocal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .nocal-month-label { font-size:13px; font-weight:700; color:var(--text); letter-spacing:.2px; }
  .nocal-nav {
    background:none; border:none; color:var(--text-sub); font-size:22px; line-height:1;
    cursor:pointer; padding:2px 8px; border-radius:7px; transition:background .12s,color .12s;
  }
  .nocal-nav:hover { background:rgba(255,255,255,.07); color:var(--text); }
  .nocal-day-hdrs {
    display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px;
  }
  .nocal-day-hdrs span {
    text-align:center; font-size:9.5px; font-weight:700; color:var(--text-dim);
    letter-spacing:.3px; text-transform:uppercase; padding:2px 0;
  }
  .nocal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
  .nocal-cell {
    text-align:center; padding:5px 2px; font-size:12.5px; color:var(--text-sub);
    border-radius:7px; cursor:pointer; transition:background .1s,color .1s;
  }
  .nocal-cell:hover { background:rgba(74,127,212,.18); color:var(--blue-bright); }
  .nocal-cell.other { color:rgba(255,255,255,.2); }
  .nocal-cell.other:hover { background:rgba(74,127,212,.08); color:rgba(255,255,255,.4); }
  .nocal-cell.today { color:var(--blue-bright); font-weight:700; background:rgba(74,127,212,.1); }
  .nocal-cell.selected { background:var(--blue-bright); color:#fff; font-weight:700; }
  .nocal-cell.selected:hover { background:#5a8fe4; }
  .nocal-footer {
    display:flex; gap:8px; margin-top:10px; padding-top:10px;
    border-top:1px solid var(--glass-border);
  }
  .nocal-today-btn, .nocal-clear-btn {
    flex:1; padding:7px; border-radius:8px; font-size:11.5px;
    cursor:pointer; font-family:var(--font); transition:background .13s;
  }
  .nocal-today-btn { background:rgba(74,127,212,.15); color:var(--blue-bright); border:1px solid rgba(74,127,212,.25); }
  .nocal-today-btn:hover { background:rgba(74,127,212,.28); }
  .nocal-clear-btn { background:rgba(255,255,255,.04); color:var(--text-dim); border:1px solid var(--glass-border); }
  .nocal-clear-btn:hover { background:rgba(255,255,255,.09); }

  /* ── Shake validation ── */
  @keyframes shake {
    0%,100% { transform:translateX(0); }
    20%     { transform:translateX(-7px); }
    40%     { transform:translateX(7px); }
    60%     { transform:translateX(-4px); }
    80%     { transform:translateX(4px); }
  }
  .field.shake > input, .field.shake .csel-trigger {
    animation:shake .35s ease;
    border-color:var(--red) !important;
    box-shadow:0 0 0 3px var(--red-bg) !important;
  }

  /* ── User search bar ── */
  .usr-search { padding:0 20px 12px; }
  .usr-search-inner { position:relative; }
  .usr-search-inner svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-dim); pointer-events:none; }
  .usr-search input {
    width:100%; background:rgba(255,255,255,.04); border:1px solid var(--glass-border);
    border-radius:11px; padding:9px 14px 9px 38px; color:var(--text);
    font-family:var(--font); font-size:13px; outline:none; box-sizing:border-box;
    transition:border-color .2s,background .2s;
  }
  .usr-search input:focus { border-color:rgba(74,127,212,.6); background:rgba(74,127,212,.06); }
  .usr-search input::placeholder { color:var(--text-dim); }

  /* ── Improved permission toggle ── */
  .perm-toggle { position:relative; width:42px; height:24px; flex-shrink:0; cursor:pointer; display:block; }
  .perm-toggle input { opacity:0; width:0; height:0; position:absolute; }
  .perm-toggle-bg {
    position:absolute; inset:0; border-radius:12px;
    background:rgba(255,255,255,.1);
    transition:background .25s cubic-bezier(.4,0,.2,1);
  }
  .perm-toggle-bg::after {
    content:''; position:absolute; top:4px; left:4px;
    width:16px; height:16px; border-radius:50%; background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.4);
    transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  }
  .perm-toggle input:checked ~ .perm-toggle-bg { background:var(--blue); }
  .perm-toggle input:checked ~ .perm-toggle-bg::after { transform:translateX(18px); }

  /* ════ APP SHELL ════ */
  #screen-app {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    animation: fadeUp .5s cubic-bezier(.16,1,.3,1);
  }
  .app-layout {
    display: flex;
    width: 100%;
    height: 100%;
  }

  /* ── SIDEBAR ── */
  .sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: rgba(8,12,24,.92);
    border-right: 1px solid var(--glass-border);
    backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
    display: flex; flex-direction: column; overflow: hidden;
  }
  .sidebar-top { padding:22px 20px 16px; border-bottom:1px solid var(--glass-border); }
  .sidebar-brand { display:flex; align-items:center; justify-content:center; width:100%; height:130px; }
  .sidebar-brand .logo-dark { width:100% !important; height:100% !important; object-fit:contain !important; object-position:center center; }
  .sidebar-brand-icon {
    width:38px; height:38px; background:linear-gradient(145deg,#1a3870 0%,#284d94 60%,#3d66bc 100%);
    border-radius:11px; display:flex; align-items:center; justify-content:center;
    box-shadow:var(--glow-sm), inset 0 1px 0 rgba(255,255,255,.12); flex-shrink:0;
  }
  .sidebar-brand-icon svg { width:17px; height:17px; color:#fff; }
  .sidebar-brand-name { color:#fff; font-weight:700; font-size:15px; }
  .sidebar-brand-tag  { color:var(--text-sub); font-size:10px; margin-top:1px; }

  .sidebar-section { padding:16px 22px 0; flex:1; display:flex; flex-direction:column; overflow:hidden; }
  .sidebar-label { color:var(--text-dim); font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }

  .sidebar-user-card {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:16px; padding:13px;
    display:flex; align-items:center; gap:11px;
  }
  .user-avatar {
    width:38px; height:38px; border-radius:11px;
    background:linear-gradient(145deg,#1a3870 0%,#284d94 50%,#4a7fd4 100%);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:13px; font-weight:700; flex-shrink:0;
    box-shadow:var(--glow-sm), inset 0 1px 0 rgba(255,255,255,.15);
  }
  .user-info-name  { color:var(--text); font-size:13px; font-weight:600; }
  .user-info-email { color:var(--text-sub); font-size:11px; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:138px; }
  .cargo-badge {
    display:inline-flex; align-items:center;
    background:rgba(74,127,212,.15); border:1px solid rgba(74,127,212,.25);
    color:var(--blue-light); font-size:10px; font-weight:600;
    letter-spacing:.5px; text-transform:uppercase;
    padding:2px 8px; border-radius:20px; margin-top:3px;
  }

  .sidebar-status-badge {
    display:flex; align-items:center; gap:8px; margin-top:10px; padding:8px 12px;
    background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.15); border-radius:10px;
  }
  .status-dot-green { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(34,197,94,.7); flex-shrink:0; }
  .status-label { color:#4ade80; font-size:12px; font-weight:500; }

  /* Recent conversations in sidebar */
  .sidebar-convs { margin-top:16px; flex:1; overflow-y:auto; min-height:0; }
  .sidebar-convs::-webkit-scrollbar { width:3px; }
  .sidebar-convs::-webkit-scrollbar-thumb { background:rgba(255,255,255,.07); border-radius:3px; }

  .conv-item {
    display:flex; align-items:center; gap:10px; padding:9px 10px;
    border-radius:12px; cursor:pointer; transition:background .15s;
  }
  .conv-item:hover { background:var(--surface-hover); }
  .conv-item.active { background:rgba(74,127,212,.1); }
  .conv-cat-dot {
    width:8px; height:8px; border-radius:50%; flex-shrink:0;
  }
  .conv-info { flex:1; min-width:0; }
  .conv-title { color:var(--text-sub); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .conv-item.active .conv-title { color:var(--text); font-weight:500; }
  .conv-date { color:var(--text-dim); font-size:10px; margin-top:1px; }

  .sidebar-bottom { padding:16px 22px; border-top:1px solid var(--glass-border); display:flex; flex-direction:column; gap:8px; }
  .btn-new-chat {
    width:100%; background:rgba(74,127,212,.12); border:1px solid rgba(74,127,212,.22);
    border-radius:11px; padding:11px 14px; color:var(--blue-light);
    font-family:var(--font); font-size:13px; font-weight:600;
    cursor:pointer; display:flex; align-items:center; gap:8px;
    transition:background .2s, color .15s, border-color .2s, box-shadow .2s;
  }
  .btn-new-chat:hover { background:rgba(74,127,212,.22); color:#fff; border-color:rgba(74,127,212,.4); box-shadow:0 2px 12px rgba(40,77,148,.2); }
  .btn-new-chat svg { width:14px; height:14px; flex-shrink:0; }
  .btn-logout {
    width:100%; background:rgba(255,255,255,.04); border:1px solid var(--glass-border);
    border-radius:11px; padding:10px 14px; color:var(--text-sub);
    font-family:var(--font); font-size:13px; font-weight:500;
    cursor:pointer; display:flex; align-items:center; gap:8px;
    transition:background .15s,color .15s,border-color .15s;
  }
  .btn-logout:hover { background:rgba(255,80,80,.08); color:#ff6b6b; border-color:rgba(255,80,80,.2); }
  .btn-logout svg { width:14px; height:14px; flex-shrink:0; }

  /* ════ APP CONTENT (swappable views) ════ */
  .app-content { display:flex; flex-direction:column; overflow:hidden; position:relative; height:100%; flex:1; min-width:0; }

  /* ── HOME VIEW ── */
  #view-home {
    flex:1; overflow-y:auto; display:none;
    background: linear-gradient(160deg, #090e1e 0%, #060913 100%);
    position:relative;
  }
  #view-home.active { display:flex; flex-direction:column; }
  #view-home::before {
    content:''; position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
    background-size:40px 40px; pointer-events:none; z-index:0;
  }
  .home-main {
    position:relative; z-index:1;
    flex:1; display:flex; flex-direction:column;
    padding:40px 40px 32px;
    justify-content:center;
  }
  .home-greeting { margin-bottom:32px; }
  .home-greeting h1 {
    color:var(--text); font-size:32px; font-weight:800; letter-spacing:-.8px; line-height:1.15;
  }
  .home-greeting p { color:var(--text-sub); font-size:15px; margin-top:8px; line-height:1.55; font-weight:400; }

  /* ── Aplicador dashboard banner ── */
  #aplic-banner { display:none; background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:12px 16px; margin-bottom:16px; }
  #aplic-banner.visible { display:flex; align-items:center; gap:12px; }
  .aplic-banner-count { font-size:28px; font-weight:800; color:var(--blue-light); line-height:1; }
  .aplic-banner-label { font-size:12px; color:var(--text-sub); }
  .aplic-banner-label strong { display:block; font-size:14px; color:var(--text); font-weight:600; }
  /* Ajuda modal */
  .ajuda-modal-overlay { display:none; position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,.65); align-items:flex-end; justify-content:center; }
  .ajuda-modal-overlay.open { display:flex; }
  /* Modal upload foto serviço */
  .sv-foto-overlay { display:none; position:fixed; inset:0; z-index:3100; background:rgba(0,0,0,.7); align-items:flex-end; justify-content:center; }
  .sv-foto-overlay.open { display:flex; }
  .sv-foto-modal { background:var(--surface); border-radius:20px 20px 0 0; width:100%; max-width:520px; padding:24px 20px 36px; display:flex; flex-direction:column; gap:16px; }
  .sv-foto-modal-title { font-size:17px; font-weight:700; color:var(--text); }
  .sv-foto-modal-sub { font-size:13px; color:var(--text-sub); margin-top:-10px; }
  .sv-foto-preview { width:100%; aspect-ratio:16/9; border-radius:12px; background:var(--glass); border:2px dashed var(--glass-border); display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; position:relative; }
  .sv-foto-preview img, .sv-foto-preview video { width:100%; height:100%; object-fit:cover; border-radius:10px; }
  .sv-foto-preview-placeholder { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text-sub); font-size:13px; pointer-events:none; }
  .sv-foto-preview-placeholder svg { opacity:.4; }
  .sv-foto-actions { display:flex; gap:10px; }
  .sv-foto-btn-cancel { flex:1; padding:13px; border-radius:12px; border:1px solid var(--glass-border); background:transparent; color:var(--text-sub); font-size:15px; font-weight:600; cursor:pointer; }
  .sv-foto-btn-upload { flex:2; padding:13px; border-radius:12px; border:none; background:var(--blue); color:#fff; font-size:15px; font-weight:700; cursor:pointer; }
  .sv-foto-btn-upload:disabled { opacity:.5; cursor:default; }
  .ajuda-modal { background:var(--surface); border-radius:20px 20px 0 0; width:100%; max-width:520px; padding:24px 20px 32px; display:flex; flex-direction:column; gap:16px; }
  .ajuda-modal-title { font-size:17px; font-weight:700; color:var(--text); }
  .cat-card[data-cat="ajuda"]::before { background:radial-gradient(ellipse at 0 0,rgba(251,146,60,.08) 0%,transparent 70%); }

  .cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .cat-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 24px;
    cursor: pointer;
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .2s, background .2s;
    position: relative; overflow: hidden;
    will-change: transform;
    text-align: left; font-family: var(--font); color: inherit;
    touch-action: manipulation;
  }
  .cat-card:hover {
    transform: translateY(-4px) scale(1.015);
    background: rgba(255,255,255,.065);
  }
  .cat-card::before {
    content:''; position:absolute; inset:0; border-radius:20px; opacity:0;
    transition:opacity .2s;
  }
  .cat-card:hover::before { opacity:1; }
  .cat-card[data-cat="problema"]::before { background:radial-gradient(ellipse at 0 0,rgba(239,68,68,.08) 0%,transparent 70%); }
  .cat-card[data-cat="producao"]::before { background:radial-gradient(ellipse at 0 0,rgba(74,127,212,.1) 0%,transparent 70%); }
  .cat-card[data-cat="obras"]::before    { background:radial-gradient(ellipse at 0 0,rgba(245,158,11,.08) 0%,transparent 70%); }
  .cat-card[data-cat="geral"]::before    { background:radial-gradient(ellipse at 0 0,rgba(34,197,94,.08) 0%,transparent 70%); }

  .cat-card:hover { border-color:rgba(255,255,255,.12); }
  .cat-card[data-cat="problema"]:hover { border-color:rgba(239,68,68,.25); box-shadow:0 8px 32px rgba(239,68,68,.1); }
  .cat-card[data-cat="producao"]:hover { border-color:rgba(74,127,212,.3);  box-shadow:0 8px 32px rgba(74,127,212,.15); }
  .cat-card[data-cat="obras"]:hover    { border-color:rgba(245,158,11,.25); box-shadow:0 8px 32px rgba(245,158,11,.1); }
  .cat-card[data-cat="geral"]:hover    { border-color:rgba(34,197,94,.25);  box-shadow:0 8px 32px rgba(34,197,94,.1); }

  .cat-icon {
    width:44px; height:44px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:16px; position:relative; z-index:1;
  }
  .cat-icon svg { width:22px; height:22px; }
  .cat-icon.problema { background:rgba(239,68,68,.15);  color:#fca5a5; }
  .cat-icon.producao { background:rgba(74,127,212,.18); color:var(--blue-light); }
  .cat-icon.obras    { background:rgba(245,158,11,.15); color:#fcd34d; }
  .cat-icon.geral    { background:rgba(34,197,94,.12);  color:#86efac; }

  .cat-titulo { color:var(--text); font-size:15px; font-weight:600; position:relative; z-index:1; }
  .cat-desc   { color:var(--text-sub); font-size:13px; margin-top:5px; line-height:1.5; position:relative; z-index:1; }

  .cat-arrow {
    position:absolute; bottom:20px; right:20px; z-index:1;
    color:var(--text-dim); opacity:0; transform:translateX(-4px);
    transition:opacity .2s, transform .2s;
  }
  .cat-card:hover .cat-arrow { opacity:1; transform:translateX(0); }
  .cat-arrow svg { width:16px; height:16px; }

  /* ── CHAT VIEW ── */
  #view-chat {
    flex:1; display:none; flex-direction:column;
    background: linear-gradient(160deg,#090e1e 0%,#060913 100%);
    position:relative; overflow:hidden;
  }
  #view-chat.active { display:flex; }
  #view-chat::before {
    content:''; position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.013) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.013) 1px,transparent 1px);
    background-size:40px 40px; pointer-events:none; z-index:0;
  }

  /* Topbar */
  .chat-topbar {
    position:relative; z-index:5;
    display:flex; align-items:center; gap:12px; padding:16px 24px;
    background:rgba(8,12,24,.8); border-bottom:1px solid var(--glass-border);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  }
  .topbar-back {
    width:34px; height:34px; background:var(--glass); border:1px solid var(--glass-border);
    border-radius:10px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .15s; flex-shrink:0;
  }
  .topbar-back:hover { background:var(--surface-hover); }
  .topbar-back svg { width:15px; height:15px; color:var(--text-sub); }

  .topbar-avatar {
    width:38px; height:38px; border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--glow-blue); flex-shrink:0;
  }
  .topbar-avatar svg { width:18px; height:18px; color:#fff; }

  .topbar-info { flex:1; }
  .topbar-name   { color:var(--text); font-size:14px; font-weight:600; }
  .topbar-status { color:#4ade80; font-size:11px; display:flex; align-items:center; gap:5px; margin-top:2px; }
  .topbar-status::before {
    content:''; width:5px; height:5px; border-radius:50%;
    background:var(--green); box-shadow:0 0 5px rgba(34,197,94,.8); display:inline-block;
  }
  .topbar-cat-badge {
    padding:4px 12px; border-radius:20px; font-size:11px; font-weight:600;
    letter-spacing:.3px; text-transform:uppercase;
  }

  /* Messages */
  .messages {
    position:relative; z-index:1; flex:1; overflow-y:auto;
    padding:20px 24px 10px;
    display:flex; flex-direction:column; gap:4px; scroll-behavior:smooth;
  }
  .messages::-webkit-scrollbar { width:4px; }
  .messages::-webkit-scrollbar-thumb { background:rgba(255,255,255,.07); border-radius:4px; }

  .date-divider { text-align:center; margin:8px 0 10px; }
  .date-divider span {
    background:var(--glass); border:1px solid var(--glass-border);
    color:var(--text-sub); font-size:11px; font-weight:500;
    padding:4px 14px; border-radius:20px;
  }
  .history-sep { text-align:center; padding:6px 0 14px; }
  .history-sep span { color:var(--text-dim); font-size:11px; border-bottom:1px solid var(--glass-border); padding-bottom:10px; display:block; }

  .msg-row { display:flex; align-items:flex-end; gap:9px; animation:msgIn .28s cubic-bezier(.16,1,.3,1); max-width:72%; }
  .msg-row.bot  { align-self:flex-start; max-width:90%; }
  .msg-row.user { align-self:flex-end; flex-direction:row-reverse; }

  .msg-avatar {
    width:28px; height:28px; border-radius:9px;
    background:linear-gradient(145deg,#1a3870 0%,#284d94 50%,#4a7fd4 100%);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; box-shadow:var(--glow-sm), inset 0 1px 0 rgba(255,255,255,.12);
  }
  .msg-avatar svg { width:13px; height:13px; color:#fff; }
  .bubble-wrap { display:flex; flex-direction:column; }

  .msg-row.bot .bubble {
    background:linear-gradient(135deg,rgba(13,29,66,.96) 0%,rgba(26,56,112,.9) 100%);
    border:1px solid rgba(74,127,212,.18);
    border-radius:var(--r-bubble) var(--r-bubble) var(--r-bubble) 5px;
    color:var(--text); padding:12px 16px; font-size:14px; line-height:1.65;
    box-shadow:var(--glow-sm),0 4px 20px rgba(0,0,0,.3);
  }
  .msg-row.user .bubble {
    background:rgba(235,236,240,.96);
    border-radius:var(--r-bubble) var(--r-bubble) 5px var(--r-bubble);
    color:#0a0d1a; padding:12px 16px; font-size:14px; line-height:1.65;
    box-shadow:0 4px 20px rgba(0,0,0,.2);
  }
  .msg-meta { display:flex; align-items:center; gap:4px; margin-top:4px; }
  .msg-row.bot  .msg-meta { justify-content:flex-start; padding-left:4px; }
  .msg-row.user .msg-meta { justify-content:flex-end;   padding-right:4px; }
  .msg-time  { color:var(--text-dim); font-size:11px; }
  .msg-check svg { width:12px; height:12px; color:var(--blue-light); }
  .msg-feedback { display:flex; gap:2px; margin-top:2px; padding-left:4px; opacity:0; transition:opacity .2s; }
  .msg-row.bot:hover .msg-feedback, .msg-feedback[data-rated] { opacity:1; }
  .msg-feedback button { background:none; border:1px solid transparent; cursor:pointer; font-size:13px; padding:1px 5px; border-radius:5px; color:var(--text-dim); transition:all .15s; line-height:1.4; }
  .msg-feedback button:hover:not(:disabled) { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); color:var(--text-muted); }
  .msg-feedback button.fb-active { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); }
  .msg-feedback button:disabled { cursor:default; }

  .typing-row { display:none; align-items:flex-end; gap:9px; align-self:flex-start; animation:msgIn .28s cubic-bezier(.16,1,.3,1); }
  .typing-bubble {
    background:linear-gradient(135deg,rgba(13,29,66,.96),rgba(26,56,112,.9));
    border:1px solid rgba(74,127,212,.18);
    border-radius:var(--r-bubble) var(--r-bubble) var(--r-bubble) 5px;
    padding:14px 17px; display:flex; gap:5px; align-items:center; box-shadow:var(--glow-sm);
  }
  .typing-dot { width:5px; height:5px; border-radius:50%; background:var(--blue-bright); animation:typingBounce 1.3s ease-in-out infinite; opacity:.5; }
  .typing-dot:nth-child(2) { animation-delay:.18s; }
  .typing-dot:nth-child(3) { animation-delay:.36s; }

  /* Input */
  .input-area {
    position:relative; z-index:5; padding:12px 24px 20px;
    background:rgba(8,12,24,.82); border-top:1px solid var(--glass-border);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    flex-shrink: 0;
  }
  .input-card {
    display:flex; align-items:flex-end; gap:8px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    border-radius:20px; padding:10px 10px 10px 12px;
    transition:border-color .2s,box-shadow .25s;
  }
  .input-card:focus-within { border-color:rgba(74,127,212,.45); box-shadow:0 0 0 4px rgba(74,127,212,.1),0 4px 24px rgba(40,77,148,.15); }
  .input-field {
    flex:1; background:transparent; border:none; outline:none;
    color:var(--text); font-family:var(--font); font-size:14px; line-height:1.5;
    resize:none; min-height:22px; max-height:120px; padding:0;
  }
  .input-field::placeholder { color:var(--text-dim); }
  .btn-send {
    width:38px; height:38px; background:linear-gradient(145deg,#284d94 0%,#3d66bc 50%,#4a7fd4 100%);
    border:none; border-radius:12px; touch-action:manipulation;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 4px 16px rgba(40,77,148,.5), inset 0 1px 0 rgba(255,255,255,.15);
    transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .15s,opacity .15s; flex-shrink:0;
  }
  .btn-send:hover   { transform:translateY(-2px) scale(1.05); box-shadow:0 8px 24px rgba(40,77,148,.65); }
  .btn-send:active  { transform:scale(.9); }
  .btn-send:disabled { opacity:.35; cursor:not-allowed; transform:none; box-shadow:none; }
  .btn-send svg { width:14px; height:14px; color:#fff; }
  .input-hint { text-align:center; color:var(--text-dim); font-size:11px; margin-top:7px; }

  /* ── Media toolbar ── */
  .media-toolbar {
    display:flex; gap:8px; padding:0 0 10px;
    min-width: 0; flex-shrink: 0;
  }
  .btn-media {
    display:flex; align-items:center; gap:7px;
    padding:9px 18px; border-radius:24px;
    min-width: 0; flex-shrink: 1; white-space: nowrap;
    font-family:var(--font); font-size:13px; font-weight:600;
    cursor:pointer; transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, background .15s, border-color .15s; border:1.5px solid;
    min-height:44px; flex:1; justify-content:center;
    -webkit-tap-highlight-color:transparent;
    will-change: transform;
  }
  .btn-media:active { transform:scale(.95) !important; }
  .btn-media svg { flex-shrink:0; }
  .btn-camera {
    background:rgba(74,127,212,.1);
    border-color:rgba(74,127,212,.28);
    color:#7aabf0;
    flex:0.85;
  }
  .btn-camera:hover { background:rgba(74,127,212,.22); border-color:rgba(74,127,212,.5); transform:translateY(-1px); }
  .btn-gallery {
    background:rgba(80,200,140,.08);
    border-color:rgba(80,200,140,.25);
    color:#5ecb98;
    flex:0.85;
  }
  .btn-gallery:hover { background:rgba(80,200,140,.18); border-color:rgba(80,200,140,.48); transform:translateY(-1px); }
  /* Áudio = ação primária — mais destaque */
  .btn-audio {
    background: linear-gradient(135deg, rgba(239,68,68,.22) 0%, rgba(220,38,38,.16) 100%);
    border-color:rgba(239,68,68,.5);
    color:#fca5a5;
    flex:1.3;
    box-shadow: 0 2px 12px rgba(239,68,68,.12);
    user-select:none; -webkit-user-select:none;
    touch-action:none;
  }
  .btn-audio:hover { background:linear-gradient(135deg,rgba(239,68,68,.32) 0%,rgba(220,38,38,.24) 100%); border-color:rgba(239,68,68,.7); transform:translateY(-1px); box-shadow:0 4px 16px rgba(239,68,68,.2); }
  .btn-audio.recording {
    background:linear-gradient(135deg,rgba(239,68,68,.38) 0%,rgba(185,28,28,.3) 100%);
    border-color:rgba(239,68,68,.85);
    color:#fff;
    box-shadow: 0 0 20px rgba(239,68,68,.3);
    animation:audioPulse 1s ease-in-out infinite;
  }
  @keyframes audioPulse {
    0%,100% { box-shadow:0 0 0 0 rgba(239,68,68,.4); }
    50%      { box-shadow:0 0 0 8px rgba(239,68,68,.0); }
  }
  .btn-media:disabled { opacity:.35; cursor:not-allowed; }
  .media-toolbar.hidden { display:none !important; }
  .bubble-img { max-width:200px; border-radius:10px; display:block; margin-top:4px; }

  /* ── Focus visible (accessibility) ── */
  :focus-visible { outline: 2px solid rgba(74,127,212,.7); outline-offset: 2px; border-radius: 4px; }

  /* ════ Rich Message Components ════ */
  /* Bot bubble padding increase for richer content */
  .msg-row.bot .bubble { padding: 14px 18px; }

  /* — Headers — */
  .msg-row.bot .bubble .msg-h1 {
    font-size:15px; font-weight:700; color:#fff; letter-spacing:-.2px;
    margin:0 0 10px; padding-bottom:9px;
    border-bottom:1px solid rgba(74,127,212,.22);
    line-height:1.3;
  }
  .msg-row.bot .bubble .msg-h1:first-child { margin-top:0; }
  .msg-row.bot .bubble .msg-h2 {
    font-size:11px; font-weight:700; color:var(--blue-light);
    text-transform:uppercase; letter-spacing:.7px;
    margin:14px 0 6px;
    display:flex; align-items:center; gap:6px;
  }
  .msg-row.bot .bubble .msg-h2::before {
    content:''; width:3px; height:11px; border-radius:2px;
    background:var(--blue-bright); flex-shrink:0; display:inline-block;
  }
  .msg-row.bot .bubble .msg-h2:first-child { margin-top:0; }
  .msg-row.bot .bubble .msg-h3 {
    font-size:13px; font-weight:600; color:var(--text);
    margin:12px 0 5px;
  }
  .msg-row.bot .bubble .msg-h3:first-child { margin-top:0; }

  /* — Paragraph & Spacer — */
  .msg-row.bot .bubble .msg-p { margin:0 0 5px; line-height:1.65; }
  .msg-row.bot .bubble .msg-p:last-child { margin-bottom:0; }
  .msg-row.bot .bubble .msg-spacer { height:5px; }

  /* — Divider — */
  .msg-row.bot .bubble .msg-hr {
    border:none; border-top:1px solid rgba(74,127,212,.18); margin:10px 0;
  }

  /* — Lists — */
  .msg-row.bot .bubble .msg-list {
    padding-left:18px; margin:4px 0 8px;
  }
  .msg-row.bot .bubble .msg-list:last-child { margin-bottom:0; }
  .msg-row.bot .bubble .msg-list li {
    margin:5px 0; line-height:1.55; color:var(--text);
    opacity:0; animation:fadeSlideUp .22s ease both;
  }
  .msg-row.bot .bubble .msg-list li:nth-child(1)  { animation-delay:.03s; }
  .msg-row.bot .bubble .msg-list li:nth-child(2)  { animation-delay:.08s; }
  .msg-row.bot .bubble .msg-list li:nth-child(3)  { animation-delay:.13s; }
  .msg-row.bot .bubble .msg-list li:nth-child(4)  { animation-delay:.18s; }
  .msg-row.bot .bubble .msg-list li:nth-child(5)  { animation-delay:.23s; }
  .msg-row.bot .bubble .msg-list li:nth-child(6)  { animation-delay:.28s; }
  .msg-row.bot .bubble .msg-list li:nth-child(7)  { animation-delay:.33s; }
  .msg-row.bot .bubble .msg-list li:nth-child(8)  { animation-delay:.38s; }
  .msg-row.bot .bubble .msg-list li:nth-child(n+9){ animation-delay:.42s; }
  .msg-row.bot .bubble .msg-list li::marker { color:var(--blue-bright); }
  .msg-row.bot .bubble .msg-olist { list-style:decimal; }

  /* — Blockquote — */
  .msg-row.bot .bubble .msg-quote {
    border-left:3px solid var(--blue-bright);
    background:rgba(74,127,212,.07);
    padding:8px 12px; border-radius:0 8px 8px 0;
    margin:6px 0; font-style:italic;
    color:var(--text-sub); font-size:13px;
  }

  /* — Inline code — */
  .msg-row.bot .bubble .inline-code {
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);
    border-radius:4px; padding:1px 6px;
    font-family:'SF Mono',Consolas,monospace;
    font-size:12px; color:#95b3de;
  }

  /* — Callout boxes — */
  .msg-row.bot .bubble .callout {
    padding:10px 13px; border-radius:10px;
    margin:7px 0; font-size:13px; line-height:1.5; font-weight:500;
    animation:fadeSlideUp .28s ease both;
  }
  .msg-row.bot .bubble .callout:first-child { margin-top:0; }
  .callout-danger  { background:rgba(239,68,68,.11);  border:1px solid rgba(239,68,68,.28);  color:#fca5a5; }
  .callout-warning { background:rgba(245,158,11,.1);  border:1px solid rgba(245,158,11,.28); color:#fcd34d; }
  .callout-success { background:rgba(34,197,94,.1);   border:1px solid rgba(34,197,94,.28);  color:#86efac; }
  .callout-info    { background:rgba(74,127,212,.12); border:1px solid rgba(74,127,212,.28); color:#93c5fd; }

  /* — Status badges — */
  .status-badge {
    display:inline-flex; align-items:center;
    padding:1px 7px; border-radius:20px;
    font-size:11px; font-weight:700; letter-spacing:.4px;
    text-transform:uppercase; vertical-align:middle; margin:0 2px;
  }
  .badge-danger  { background:rgba(239,68,68,.2);  border:1px solid rgba(239,68,68,.4);  color:#fca5a5; }
  .badge-warning { background:rgba(245,158,11,.18); border:1px solid rgba(245,158,11,.4); color:#fcd34d; }
  .badge-success { background:rgba(34,197,94,.18);  border:1px solid rgba(34,197,94,.4);  color:#86efac; }
  .badge-info    { background:rgba(74,127,212,.2);  border:1px solid rgba(74,127,212,.4); color:#93c5fd; }

  /* — Inline highlights — */
  .pct-highlight { font-weight:700; color:var(--blue-bright); }
  .metric-val    { font-weight:600; color:#a0c8ff; }

  /* — Progress bars — */
  .msg-progress-wrap {
    margin:8px 0;
    animation:fadeSlideUp .3s ease both;
  }
  .msg-progress-wrap:last-child { margin-bottom:0; }
  .msg-progress-label {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:6px; font-size:12px; color:var(--text-sub); font-weight:500;
  }
  .msg-progress-pct { font-weight:700; color:var(--blue-bright); font-size:13px; }
  .msg-progress-track {
    height:5px; background:rgba(255,255,255,.07); border-radius:99px; overflow:hidden;
  }
  .msg-progress-bar {
    height:100%; border-radius:99px; width:0;
    background:linear-gradient(90deg,#284d94,#4a7fd4);
    animation:growBar 1s cubic-bezier(.16,1,.3,1) .15s both;
  }
  .msg-progress-bar.bar-danger  { background:linear-gradient(90deg,#991b1b,#ef4444); }
  .msg-progress-bar.bar-warning { background:linear-gradient(90deg,#92400e,#f59e0b); }
  .msg-progress-bar.bar-success { background:linear-gradient(90deg,#14532d,#22c55e); }

  /* — Tables — */
  .msg-row.bot .bubble .table-wrap {
    overflow-x:auto; margin:8px 0;
    border-radius:10px; border:1px solid rgba(74,127,212,.2);
    animation:fadeSlideUp .32s ease both;
  }
  .msg-row.bot .bubble .table-wrap:last-child { margin-bottom:0; }
  .msg-row.bot .bubble .msg-table {
    width:100%; border-collapse:collapse; font-size:13px;
  }
  .msg-table thead { background:rgba(26,56,112,.55); }
  .msg-table th {
    padding:8px 12px; text-align:left;
    color:var(--blue-light); font-weight:600;
    font-size:11px; letter-spacing:.5px; text-transform:uppercase;
    border-bottom:1px solid rgba(74,127,212,.2); white-space:nowrap;
  }
  .msg-table td {
    padding:8px 12px; color:var(--text);
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .msg-table tr:last-child td { border-bottom:none; }
  .msg-table tr:hover td { background:rgba(74,127,212,.06); }

  /* ════ Cat cards stagger animation ════ */
  .cat-grid.animated .cat-card {
    animation: catCardIn .4s cubic-bezier(.16,1,.3,1) both;
  }
  .cat-grid.animated .cat-card:nth-child(1) { animation-delay:.05s; }
  .cat-grid.animated .cat-card:nth-child(2) { animation-delay:.1s; }
  .cat-grid.animated .cat-card:nth-child(3) { animation-delay:.15s; }
  .cat-grid.animated .cat-card:nth-child(4) { animation-delay:.2s; }
  @keyframes catCardIn {
    from { opacity:0; transform:translateY(14px) scale(.97); }
    to   { opacity:1; transform:translateY(0) scale(1); }
  }

  /* ════ Animations ════ */
  @keyframes fadeUp {
    from { opacity:0; transform:translateY(20px) scale(.97); }
    to   { opacity:1; transform:none; }
  }
  @keyframes msgIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
  }
  @keyframes fadeSlideUp {
    from { opacity:0; transform:translateY(5px); }
    to   { opacity:1; transform:translateY(0); }
  }
  @keyframes growBar {
    from { width:0; }
    to   { width:var(--w,0%); }
  }
  @keyframes typingBounce {
    0%,60%,100% { transform:translateY(0) scale(1); opacity:.4; }
    30%          { transform:translateY(-6px) scale(1.1); opacity:1; }
  }

  /* ══ GRID BACKGROUND COMPARTILHADO — todos os views ══ */
  #view-obras, #view-qualidade, #view-diario, #view-clientes, #view-cliente-detalhe, #view-custos, #view-kpi, #view-planejamento, #view-nova-obra, #view-novo-cliente, #view-colaboradores, #view-orcamento, #view-usuarios, #view-logs, #view-obra-detalhe, #view-servicos, #view-servico-detalhe {
    background: linear-gradient(160deg, #090e1e 0%, #060913 100%);
    position: relative;
  }
  #view-obras::before, #view-qualidade::before, #view-diario::before,
  #view-clientes::before, #view-cliente-detalhe::before, #view-custos::before, #view-kpi::before, #view-planejamento::before, #view-nova-obra::before, #view-novo-cliente::before, #view-colaboradores::before, #view-orcamento::before, #view-usuarios::before, #view-logs::before, #view-obra-detalhe::before, #view-servicos::before, #view-servico-detalhe::before {
    content:''; position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
    background-size:40px 40px; pointer-events:none; z-index:0;
  }

  /* ══ CUSTOS VIEW ══ */
  #view-custos { display:none; flex-direction:column; height:100%; overflow:hidden; position:relative; }
  #view-custos.active { display:flex; }

  .custos-topbar {
    display:flex; align-items:center; gap:12px;
    padding:16px 20px; border-bottom:1px solid var(--glass-border);
    background:rgba(8,12,24,.92); flex-shrink:0;
  }
  .custos-topbar-title { font-size:17px; font-weight:700; color:var(--text); flex:1; }
  .custos-topbar-sub   { font-size:11px; color:var(--text-dim); margin-top:1px; }

  /* Stats strip */
  .custos-stats {
    display:flex; gap:1px; flex-shrink:0; border-bottom:1px solid var(--glass-border);
    background:var(--glass-border); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .custos-stats::-webkit-scrollbar { display:none; }
  .custos-stat {
    flex:1; min-width:80px; display:flex; flex-direction:column; align-items:center;
    padding:10px 8px; background:rgba(8,12,24,.92); gap:2px; text-align:center;
  }
  .custos-stat-val { font-size:16px; font-weight:800; color:var(--text); }
  .custos-stat-lbl { font-size:9px; color:var(--text-sub); text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
  .cs-custo .custos-stat-val { color:#f59e0b; }
  .cs-ok    .custos-stat-val { color:#22c55e; }
  .cs-alert .custos-stat-val { color:#ef4444; }
  .cs-cpm2  .custos-stat-val { color:var(--blue-bright); }

  /* Breadcrumb */
  .custos-nav {
    display:flex; align-items:center; gap:4px;
    padding:8px 16px; border-bottom:1px solid var(--glass-border); flex-shrink:0;
    background:rgba(8,12,24,.7); overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .custos-nav::-webkit-scrollbar { display:none; }
  .custos-nav-item {
    font-size:12px; color:var(--text-dim); cursor:pointer; white-space:nowrap;
    padding:3px 8px; border-radius:8px; transition:background .12s;
  }
  .custos-nav-item:hover { background:var(--glass); color:var(--text); }
  .custos-nav-item.active { color:var(--text); font-weight:600; pointer-events:none; }
  .custos-nav-sep { color:var(--text-dim); font-size:11px; flex-shrink:0; user-select:none; }

  /* Body */
  .custos-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:80px; }

  /* ── Nível 1: Obra card ── */
  .custos-obra-card {
    margin:10px 14px 0;
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:14px; padding:14px 16px; cursor:pointer;
    transition:border-color .15s, background .15s;
    border-left:3px solid transparent;
  }
  .custos-obra-card:hover { background:rgba(74,127,212,.04); border-color:rgba(74,127,212,.35); }
  .custos-obra-card.c-alerta { border-left-color:#ef4444; }
  .custos-obra-card.c-ok     { border-left-color:#22c55e; }
  .custos-obra-card.c-warn   { border-left-color:#f59e0b; }
  .custos-obra-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
  .custos-obra-dot  { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .custos-obra-nome { font-size:14px; font-weight:700; color:var(--text); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .custos-obra-total{ font-size:14px; font-weight:800; color:#f59e0b; white-space:nowrap; }
  .custos-barra-wrap { margin-bottom:8px; }
  .custos-barra-top  { display:flex; justify-content:space-between; margin-bottom:3px; }
  .custos-barra-lbl  { font-size:10px; color:var(--text-dim); }
  .custos-barra-pct  { font-size:10px; font-weight:700; }
  .custos-barra-pct.ok   { color:#22c55e; }
  .custos-barra-pct.warn { color:#f59e0b; }
  .custos-barra-pct.over { color:#ef4444; }
  .custos-barra-track{ height:5px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
  .custos-barra-fill { height:100%; border-radius:3px; transition:width .4s ease; background:#22c55e; }
  .custos-barra-fill.warn { background:#f59e0b; }
  .custos-barra-fill.over { background:#ef4444; }
  .custos-obra-meta  { display:flex; gap:14px; flex-wrap:wrap; }
  .custos-obra-meta-item { font-size:11px; color:var(--text-dim); }
  .custos-obra-meta-item strong { color:var(--text); }

  /* ── Nível 2: Serviço card ── */
  .custos-serv-card {
    margin:10px 14px 0;
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:14px; padding:14px 16px; cursor:pointer;
    transition:border-color .15s;
  }
  .custos-serv-card:hover { border-color:rgba(74,127,212,.4); }
  .custos-serv-head  { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .custos-serv-icone { font-size:15px; flex-shrink:0; }
  .custos-serv-nome  { font-size:13px; font-weight:700; color:var(--text); flex:1; }
  .custos-serv-total { font-size:15px; font-weight:800; color:#f59e0b; }
  .custos-serv-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
  .csb {
    font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px; border:1px solid;
  }
  .csb-mo    { background:rgba(74,127,212,.1);  border-color:rgba(74,127,212,.25);  color:var(--blue-light); }
  .csb-mat   { background:rgba(34,197,94,.1);   border-color:rgba(34,197,94,.25);   color:#22c55e; }
  .csb-log   { background:rgba(245,158,11,.1);  border-color:rgba(245,158,11,.25);  color:#f59e0b; }
  .csb-emer  { background:rgba(239,68,68,.12);  border-color:rgba(239,68,68,.3);    color:#ef4444; }
  .csb-outro { background:rgba(156,163,175,.1); border-color:rgba(156,163,175,.2);  color:var(--text-dim); }
  .custos-margem-row {
    display:flex; align-items:center; justify-content:space-between;
    padding-top:8px; border-top:1px solid var(--glass-border);
  }
  .custos-margem-lbl { font-size:11px; color:var(--text-dim); display:flex; align-items:center; gap:6px; }
  .custos-margem-val { font-size:12px; font-weight:700; }
  .custos-margem-val.positiva { color:#22c55e; }
  .custos-margem-val.negativa { color:#ef4444; }
  .custos-margem-val.sem-dado { color:var(--text-dim); font-weight:400; }
  .custos-receita-input {
    background:transparent; border:none; border-bottom:1px dashed var(--glass-border);
    color:var(--text-dim); font-size:11px; font-family:var(--font);
    width:90px; outline:none; text-align:right; padding:1px 2px;
  }
  .custos-receita-input:focus { border-color:var(--blue-mid); color:var(--text); }

  /* ── Nível 3: Registros ── */
  .custos-reg-item {
    display:flex; align-items:center; gap:10px;
    margin:8px 14px 0;
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:12px; padding:10px 13px;
    border-left:3px solid transparent;
  }
  .custos-reg-item.reg-emer { border-left-color:#ef4444; background:rgba(239,68,68,.03); }
  .custos-reg-cat {
    width:30px; height:30px; border-radius:9px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:14px;
  }
  .crc-mo    { background:rgba(74,127,212,.15); }
  .crc-mat   { background:rgba(34,197,94,.15); }
  .crc-log   { background:rgba(245,158,11,.15); }
  .crc-emer  { background:rgba(239,68,68,.15); }
  .crc-outro { background:rgba(156,163,175,.1); }
  .custos-reg-info  { flex:1; min-width:0; }
  .custos-reg-desc  { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .custos-reg-sub   { font-size:11px; color:var(--text-dim); margin-top:1px; }
  .custos-reg-valor { font-size:14px; font-weight:700; color:#f59e0b; white-space:nowrap; flex-shrink:0; }
  .custos-reg-del   { background:none; border:none; color:var(--text-dim); cursor:pointer; padding:4px; touch-action:manipulation; flex-shrink:0; }
  .custos-reg-del:hover { color:#ef4444; }

  /* Section head */
  .custos-section-head {
    padding:14px 18px 8px;
    font-size:10px; font-weight:700; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:.6px;
    display:flex; align-items:center; gap:8px;
  }
  .custos-section-head::after { content:''; flex:1; height:1px; background:var(--glass-border); }

  /* FAB */
  .custos-fab {
    position:absolute; bottom:20px; right:20px;
    width:52px; height:52px; border-radius:50%;
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    border:none; color:#fff; font-size:26px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 4px 20px rgba(59,130,246,.5);
    transition:transform .15s, box-shadow .15s; touch-action:manipulation; z-index:10;
  }
  .custos-fab:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(59,130,246,.65); }

  /* Modal de registro */
  .custos-modal-overlay {
    position:absolute; inset:0; background:rgba(0,0,0,.7);
    display:none; align-items:flex-end; z-index:50;
  }
  .custos-modal-overlay.open { display:flex; }
  .custos-modal {
    width:100%; background:#0d1326; border-top:1px solid var(--glass-border);
    border-radius:20px 20px 0 0; padding:20px 20px 32px;
    max-height:90vh; overflow-y:auto;
  }
  .custos-modal-title {
    font-size:16px; font-weight:700; color:var(--text);
    margin-bottom:18px; display:flex; align-items:center; gap:8px;
  }
  .custos-modal-close { background:none; border:none; color:var(--text-dim); cursor:pointer; padding:2px; margin-left:auto; touch-action:manipulation; }
  .cm-field  { display:flex; flex-direction:column; gap:5px; margin-bottom:14px; }
  .cm-label  { font-size:10px; font-weight:700; color:var(--text-sub); text-transform:uppercase; letter-spacing:.5px; }
  .cm-input, .cm-select {
    background:rgba(255,255,255,.05); border:1px solid var(--glass-border);
    border-radius:10px; padding:11px 13px; color:var(--text);
    font-size:14px; font-family:var(--font); outline:none; transition:border-color .15s;
    width:100%; box-sizing:border-box;
  }
  .cm-input:focus, .cm-select:focus { border-color:var(--blue-mid); }
  .cm-select option { background:#0d1326; }
  .cm-row { display:flex; gap:10px; }
  .cm-row .cm-field { flex:1; }
  .cm-cat-chips { display:flex; gap:7px; flex-wrap:wrap; }
  .cm-cat-chip {
    padding:6px 12px; border-radius:20px; cursor:pointer; font-size:12px; font-weight:600;
    border:1px solid var(--glass-border); background:transparent; color:var(--text-dim);
    font-family:var(--font); transition:all .12s; touch-action:manipulation;
  }
  .cm-cat-chip.sel { border-color:var(--blue-mid); background:rgba(74,127,212,.15); color:var(--blue-light); }
  .cm-cat-chip.sel-emer { border-color:#ef4444; background:rgba(239,68,68,.15); color:#ef4444; }
  .btn-cm-salvar {
    width:100%; padding:14px; border-radius:14px;
    background:rgba(74,127,212,.2); border:1px solid rgba(74,127,212,.4);
    color:var(--blue-light); font-size:15px; font-weight:700; font-family:var(--font);
    cursor:pointer; transition:background .15s; touch-action:manipulation; margin-top:4px;
  }
  .btn-cm-salvar:hover { background:rgba(74,127,212,.35); }

  /* Empty */
  .custos-empty {
    display:flex; flex-direction:column; align-items:center;
    gap:10px; padding:48px 24px; color:var(--text-dim); text-align:center;
  }
  .custos-empty svg { opacity:.3; }
  .custos-empty-title { font-size:14px; font-weight:600; color:var(--text-sub); }
  .custos-empty-sub   { font-size:12px; }

  /* ══ KPI DASHBOARD ══ */
  #view-kpi { display:none; flex-direction:column; height:100%; overflow:hidden; }
  #view-kpi.active { display:flex; }

  .kpi-topbar {
    display:flex; align-items:center; gap:12px;
    padding:16px 20px; border-bottom:1px solid var(--glass-border);
    background:rgba(8,12,24,.92); flex-shrink:0;
  }
  .kpi-topbar-title { font-size:17px; font-weight:700; color:var(--text); flex:1; }
  .kpi-topbar-sub   { font-size:11px; color:var(--text-dim); margin-top:1px; }

  .kpi-body {
    flex:1; overflow-y:auto; padding:16px 20px 32px;
    -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:16px;
  }

  /* Section title */
  .kpi-section {
    font-size:11px; font-weight:700; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:.6px;
    display:flex; align-items:center; gap:8px; margin-bottom:-4px;
  }
  .kpi-section::after { content:''; flex:1; height:1px; background:var(--glass-border); }

  /* Hero metrics row */
  .kpi-hero { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .kpi-hero-card {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:4px;
  }
  .kpi-hero-card.accent-amber  { background:rgba(245,158,11,.06); border-color:rgba(245,158,11,.2); }
  .kpi-hero-card.accent-blue   { background:rgba(74,127,212,.06); border-color:rgba(74,127,212,.2); }
  .kpi-hero-card.accent-green  { background:rgba(34,197,94,.05);  border-color:rgba(34,197,94,.15); }
  .kpi-hero-card.accent-red    { background:rgba(239,68,68,.05);  border-color:rgba(239,68,68,.15); }
  .kpi-hero-icon { font-size:18px; margin-bottom:4px; }
  .kpi-hero-val  { font-size:22px; font-weight:800; color:var(--text); line-height:1; }
  .kpi-hero-lbl  { font-size:11px; color:var(--text-sub); margin-top:2px; }

  /* Progress KPI card */
  .kpi-progress-card {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px;
  }
  .kpi-prog-header { display:flex; align-items:center; justify-content:space-between; }
  .kpi-prog-title  { font-size:13px; font-weight:700; color:var(--text); }
  .kpi-prog-pct    { font-size:14px; font-weight:800; }
  .kpi-prog-bar    { height:7px; background:var(--glass-border); border-radius:7px; overflow:hidden; }
  .kpi-prog-fill   { height:100%; border-radius:7px; transition:width .6s cubic-bezier(.4,0,.2,1); }
  .kpi-prog-meta   { display:flex; align-items:center; justify-content:space-between; }
  .kpi-prog-label  { font-size:11px; color:var(--text-sub); }

  /* Obra ranking list */
  .kpi-obra-row {
    display:flex; align-items:center; gap:12px;
    padding:12px 0; border-bottom:1px solid var(--glass-border);
  }
  .kpi-obra-row:last-child { border-bottom:none; }
  .kpi-obra-rank {
    width:22px; height:22px; border-radius:50%;
    background:var(--glass-border); display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; color:var(--text-sub); flex-shrink:0;
  }
  .kpi-obra-rank.gold   { background:rgba(245,158,11,.2); color:#fcd34d; }
  .kpi-obra-rank.silver { background:rgba(255,255,255,.1); color:var(--text); }
  .kpi-obra-rank.bronze { background:rgba(205,127,50,.15); color:#d97706; }
  .kpi-obra-info { flex:1; min-width:0; }
  .kpi-obra-nome { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .kpi-obra-sub  { font-size:11px; color:var(--text-sub); margin-top:1px; }
  .kpi-obra-val  { font-size:13px; font-weight:700; white-space:nowrap; }

  /* Fase donut legend */
  .kpi-fase-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .kpi-fase-chip {
    display:flex; align-items:center; gap:8px;
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:12px; padding:10px 12px;
  }
  .kpi-fase-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .kpi-fase-info { flex:1; }
  .kpi-fase-label { font-size:12px; font-weight:600; color:var(--text); }
  .kpi-fase-count { font-size:18px; font-weight:800; color:var(--text); line-height:1.1; }

  /* Velocity card */
  .kpi-velocity-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
  .kpi-vel-card {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:14px; padding:12px; text-align:center;
    display:flex; flex-direction:column; gap:3px;
  }
  .kpi-vel-val { font-size:18px; font-weight:800; color:var(--text); }
  .kpi-vel-lbl { font-size:10px; color:var(--text-sub); text-transform:uppercase; letter-spacing:.4px; }

  /* Mini sparkline (pure CSS bar chart) */
  .kpi-bar-chart { display:flex; align-items:flex-end; gap:4px; height:48px; }
  .kpi-bar-col   { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
  .kpi-bar       { width:100%; border-radius:4px 4px 0 0; min-height:3px; transition:height .4s cubic-bezier(.4,0,.2,1); }
  .kpi-bar-lbl   { font-size:9px; color:var(--text-dim); white-space:nowrap; }

  .kpi-list-card {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:16px; padding:4px 16px;
  }

  .kpi-empty {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:32px 20px; color:var(--text-dim); text-align:center;
  }
  .kpi-empty svg { opacity:.3; }

  /* ════ Reduced Motion ════ */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ════ AUDIO RECORDER ════ */
  .audio-recorder {
    display:none; align-items:center; gap:10px; padding:0 0 10px;
  }
  .audio-recorder.active { display:flex; animation:recSlideIn .28s cubic-bezier(.16,1,.3,1); }
  @keyframes recSlideIn {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
  }
  .btn-audio-action {
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid; cursor:pointer; flex-shrink:0;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .15s;
    -webkit-tap-highlight-color:transparent;
  }
  .btn-audio-action:active { transform:scale(.85) !important; }
  .btn-audio-cancel { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); color:#f87171; }
  .btn-audio-cancel:hover { background:rgba(239,68,68,.24); }
  .btn-audio-pause  { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:var(--text-sub); }
  .btn-audio-pause:hover { background:rgba(255,255,255,.13); }
  .btn-audio-pause.paused { color:var(--blue-bright); border-color:rgba(74,127,212,.4); background:rgba(74,127,212,.1); }
  .btn-audio-send {
    background:linear-gradient(145deg,#15803d 0%,#16a34a 50%,#22c55e 100%);
    border-color:transparent; color:#fff;
    box-shadow:0 4px 16px rgba(34,197,94,.35), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .btn-audio-send:hover { transform:scale(1.1) !important; box-shadow:0 6px 22px rgba(34,197,94,.5); }

  .audio-rec-center {
    flex:1; display:flex; align-items:center; gap:10px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    border-radius:26px; padding:8px 14px; min-width:0; overflow:hidden;
  }
  .audio-rec-dot {
    width:8px; height:8px; border-radius:50%; background:#ef4444; flex-shrink:0;
    animation:recDotPulse 1s ease-in-out infinite;
  }
  .audio-rec-dot.paused { animation:none; background:var(--text-dim); }
  @keyframes recDotPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.3; transform:scale(.55); }
  }
  .audio-timer {
    color:var(--text); font-size:14px; font-weight:600;
    letter-spacing:1px; font-variant-numeric:tabular-nums; flex-shrink:0;
  }
  .audio-waveform-canvas { flex:1; height:32px; display:block; min-width:0; }

  /* ════ CAMERA MODAL (redesigned) ════ */
  #camera-modal {
    display:none; position:fixed; inset:0; z-index:200;
    background:#000; flex-direction:column; overflow:hidden;
  }
  #camera-modal.open { display:flex; animation:fadeUp .28s cubic-bezier(.16,1,.3,1); }

  #camera-video {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; background:#000;
  }

  .cam-topbar {
    position:absolute; top:0; left:0; right:0;
    padding:max(env(safe-area-inset-top),14px) 20px 20px;
    display:flex; align-items:center; justify-content:space-between;
    z-index:10; background:linear-gradient(to bottom,rgba(0,0,0,.65),transparent);
  }
  .cam-mode-tabs {
    display:flex; gap:3px;
    background:rgba(255,255,255,.14); backdrop-filter:blur(8px);
    border-radius:22px; padding:3px;
  }
  .btn-cam-mode {
    padding:5px 18px; border-radius:18px; border:none;
    font-family:var(--font); font-size:13px; font-weight:600;
    color:rgba(255,255,255,.65); background:transparent;
    cursor:pointer; transition:background .2s, color .2s;
  }
  .btn-cam-mode.active { background:#fff; color:#000; }
  .btn-cam-close {
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2);
    cursor:pointer; color:#fff; display:flex; align-items:center; justify-content:center;
    transition:background .15s; flex-shrink:0;
  }
  .btn-cam-close:hover { background:rgba(255,255,255,.28); }
  .btn-cam-close svg  { width:18px; height:18px; }

  /* Recording timer badge */
  .cam-rec-timer {
    position:absolute; top:max(env(safe-area-inset-top),14px); left:50%; transform:translateX(-50%);
    display:none; align-items:center; gap:6px; z-index:11;
    background:rgba(185,28,28,.9); backdrop-filter:blur(6px); border-radius:20px; padding:5px 14px;
  }
  .cam-rec-timer.active { display:flex; }
  .cam-rec-dot { width:7px; height:7px; border-radius:50%; background:#fff; animation:recDotPulse 1s ease-in-out infinite; }
  .cam-rec-time { color:#fff; font-size:13px; font-weight:700; letter-spacing:.5px; font-variant-numeric:tabular-nums; }

  /* Bottom shutter bar */
  .cam-bottom {
    position:absolute; bottom:0; left:0; right:0;
    padding:20px 32px max(env(safe-area-inset-bottom),28px);
    display:flex; align-items:center; justify-content:space-between;
    background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
    z-index:10;
  }
  .cam-side-btn {
    width:46px; height:46px; border-radius:50%;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
    cursor:pointer; color:#fff; display:flex; align-items:center; justify-content:center;
    transition:background .15s, transform .2s cubic-bezier(.34,1.56,.64,1);
  }
  .cam-side-btn:hover { background:rgba(255,255,255,.22); }
  .cam-side-btn:active { transform:scale(.88); }
  .cam-side-btn svg { width:20px; height:20px; }

  .cam-shutter {
    width:74px; height:74px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
    transition:transform .18s;
  }
  .cam-shutter:active { transform:scale(.88); }
  /* Photo shutter */
  .cam-shutter.photo-mode {
    background:rgba(255,255,255,.12); border:3.5px solid #fff;
  }
  .cam-shutter.photo-mode::after {
    content:''; width:58px; height:58px; border-radius:50%; background:#fff; display:block;
    transition:transform .12s, opacity .12s;
  }
  .cam-shutter.photo-mode:active::after { transform:scale(.88); opacity:.8; }
  /* Video shutter */
  .cam-shutter.video-mode {
    background:rgba(239,68,68,.18); border:3.5px solid rgba(255,255,255,.7);
  }
  .cam-shutter.video-mode::after {
    content:''; width:52px; height:52px; border-radius:50%; background:#ef4444; display:block;
    transform:scale(1); transition:border-radius .28s cubic-bezier(.34,1.56,.64,1), transform .28s cubic-bezier(.34,1.56,.64,1);
  }
  .cam-shutter.video-mode.recording::after { border-radius:10px; transform:scale(0.577); }

  /* Capture preview */
  .cam-preview {
    display:none; position:absolute; inset:0; z-index:12; background:#000;
    flex-direction:column;
  }
  .cam-preview.active { display:flex; animation:fadeUp .22s ease; }
  #cam-preview-img, #cam-preview-vid {
    flex:1; width:100%; object-fit:contain; background:#000;
  }
  .cam-preview-actions {
    padding:16px 24px max(env(safe-area-inset-bottom),20px);
    display:flex; gap:12px;
    background:rgba(0,0,0,.6); backdrop-filter:blur(12px);
    flex-shrink:0;
  }
  .btn-cam-retake {
    flex:1; padding:14px; border-radius:14px;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
    color:#fff; font-family:var(--font); font-size:15px; font-weight:600;
    cursor:pointer; transition:background .15s;
  }
  .btn-cam-retake:hover { background:rgba(255,255,255,.2); }
  .btn-cam-confirm {
    flex:1; padding:14px; border-radius:14px;
    background:linear-gradient(145deg,#15803d,#22c55e);
    border:none; color:#fff; font-family:var(--font); font-size:15px; font-weight:700;
    cursor:pointer; box-shadow:0 4px 20px rgba(34,197,94,.35), inset 0 1px 0 rgba(255,255,255,.2);
    transition:transform .2s, box-shadow .15s;
    display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .btn-cam-confirm:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(34,197,94,.5); }

  /* ════ GALLERY MODAL ════ */
  #gallery-modal {
    display:none; position:fixed; inset:0; z-index:201;
    background:rgba(0,0,0,.55); backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    align-items:flex-end; justify-content:center;
  }
  #gallery-modal.open { display:flex; animation:galleryBgIn .25s ease; }
  @keyframes galleryBgIn { from { opacity:0; } to { opacity:1; } }

  .gallery-sheet {
    width:100%; max-width:620px;
    background:#0c1020; border-radius:28px 28px 0 0;
    border:1px solid rgba(255,255,255,.08); border-bottom:none;
    max-height:88dvh; display:flex; flex-direction:column;
    animation:sheetUp .32s cubic-bezier(.16,1,.3,1);
    overflow:hidden; overscroll-behavior:contain;
  }
  @keyframes sheetUp { from { transform:translateY(100%); } to { transform:translateY(0); } }

  .gallery-handle {
    width:36px; height:4px; border-radius:99px; background:rgba(255,255,255,.12);
    margin:12px auto 0; flex-shrink:0;
  }
  .gallery-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 22px 14px; border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0;
  }
  .gallery-title-wrap { display:flex; align-items:baseline; gap:8px; }
  .gallery-title { color:var(--text); font-size:17px; font-weight:700; }
  .gallery-count-badge {
    background:rgba(74,127,212,.18); border:1px solid rgba(74,127,212,.28);
    color:var(--blue-light); font-size:12px; font-weight:700;
    padding:1px 9px; border-radius:20px; display:none;
  }
  .gallery-count-badge.visible { display:inline-block; }
  .btn-gallery-close {
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
    cursor:pointer; color:var(--text-sub); display:flex; align-items:center; justify-content:center;
    transition:background .15s;
  }
  .btn-gallery-close:hover { background:rgba(255,255,255,.14); }
  .btn-gallery-close svg { width:14px; height:14px; }

  .gallery-pickers {
    display:flex; gap:10px; padding:14px 22px;
    flex-shrink:0; border-bottom:1px solid rgba(255,255,255,.06);
  }
  .btn-picker {
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px; border-radius:14px;
    font-family:var(--font); font-size:13px; font-weight:600;
    cursor:pointer; transition:background .15s, transform .2s cubic-bezier(.34,1.56,.64,1);
    -webkit-tap-highlight-color:transparent;
  }
  .btn-picker:active { transform:scale(.95); }
  .btn-picker-images { background:rgba(74,127,212,.1); border:1.5px solid rgba(74,127,212,.28); color:#7aabf0; }
  .btn-picker-images:hover { background:rgba(74,127,212,.2); }
  .btn-picker-docs { background:rgba(245,158,11,.08); border:1.5px solid rgba(245,158,11,.25); color:#fcd34d; }
  .btn-picker-docs:hover { background:rgba(245,158,11,.18); }
  .btn-picker svg { width:18px; height:18px; flex-shrink:0; }
  .btn-picker span { font-size:13px; }

  .gallery-preview-area {
    flex:1; overflow-y:auto; padding:14px 22px;
    min-height:120px;
  }
  .gallery-preview-area::-webkit-scrollbar { width:3px; }
  .gallery-preview-area::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px; }

  .gallery-empty {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; padding:32px 20px; text-align:center; min-height:140px;
  }
  .gallery-empty svg { width:44px; height:44px; color:var(--text-dim); opacity:.5; }
  .gallery-empty p { color:var(--text-dim); font-size:13px; line-height:1.5; }

  .gallery-grid {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
  }
  .gallery-thumb {
    position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden;
    border:1px solid rgba(255,255,255,.08); cursor:pointer;
    animation:catCardIn .22s cubic-bezier(.16,1,.3,1);
    background:rgba(255,255,255,.04);
  }
  .gallery-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .gallery-thumb-doc {
    width:100%; height:100%; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:6px; padding:10px;
  }
  .gallery-thumb-doc svg { width:26px; height:26px; opacity:.65; }
  .gallery-thumb-doc-ext {
    font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    color:var(--text-sub);
  }
  .gallery-thumb-doc-name {
    font-size:10px; color:var(--text-dim); text-align:center;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    word-break:break-all; line-height:1.3;
  }
  .gallery-thumb-remove {
    position:absolute; top:5px; right:5px;
    width:22px; height:22px; border-radius:50%;
    background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.25);
    cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff;
    transition:background .15s;
  }
  .gallery-thumb-remove:hover { background:rgba(239,68,68,.8); }
  .gallery-thumb-remove svg { width:10px; height:10px; }

  .gallery-footer {
    padding:14px 22px max(env(safe-area-inset-bottom),14px);
    border-top:1px solid rgba(255,255,255,.07); flex-shrink:0;
  }
  .btn-gallery-send {
    width:100%; padding:15px;
    background:linear-gradient(145deg,#15803d 0%,#16a34a 50%,#22c55e 100%);
    border:none; border-radius:14px; color:#fff;
    font-family:var(--font); font-size:15px; font-weight:700;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
    box-shadow:0 6px 24px rgba(34,197,94,.3), inset 0 1px 0 rgba(255,255,255,.2);
    transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .15s, opacity .15s;
  }
  .btn-gallery-send:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(34,197,94,.45); }
  .btn-gallery-send:active { transform:scale(.97); opacity:.92; }
  .btn-gallery-send:disabled { opacity:.32; cursor:not-allowed; transform:none; box-shadow:none; }
  .gallery-send-count {
    background:rgba(255,255,255,.22); border-radius:20px;
    padding:2px 9px; font-size:13px; font-weight:700;
  }

  /* ════ Responsive — Mobile First ════ */

  /* ── Sidebar drawer overlay (mobile) ── */
  .sidebar-backdrop {
    display:none; position:fixed; inset:0; z-index:100;
    background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  }
  .sidebar-backdrop.open { display:block; }

  /* ── Mobile hamburger button ── */
  .btn-hamburger {
    display:none; width:36px; height:36px;
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:10px; align-items:center; justify-content:center;
    cursor:pointer; transition:background .15s; flex-shrink:0;
  }
  .btn-hamburger:hover { background:var(--surface-hover); }
  .btn-hamburger svg { width:16px; height:16px; color:var(--text-sub); }

  /* ── Mobile recent convs in home ── */
  .home-convs-mobile {
    display:none; margin-top:24px; padding-top:20px;
    border-top:1px solid var(--glass-border);
  }
  .home-convs-mobile .sidebar-label { margin-bottom:10px; }

  /* ── Mobile (< 640px) ── */
  @media (max-width:639px) {
    /* Auth */
    .auth-card    { width:100vw; min-height:100dvh; border-radius:0; overflow-y:auto; }
    .auth-header  { padding:28px 22px 24px; }
    .auth-body    { padding:22px 22px 32px; gap:13px; }

    /* App shell: full screen, flat */
    #screen-app {
      width:100vw; height:100dvh;
      max-width:100vw; overflow:hidden;
      border-radius:0; box-shadow:none;
    }

    /* Layout: sidebar is fixed/out-of-flow on mobile, content fills width */
    .app-layout { /* flex layout: sidebar is position:fixed, app-content fills */ }

    /* Sidebar: hidden by default, slide-in drawer on mobile */
    .sidebar {
      position:fixed; top:0; left:0; bottom:0;
      width:min(300px, 85vw); z-index:110;
      transform:translateX(-100%);
      transition:transform .28s cubic-bezier(.16,1,.3,1);
    }
    .sidebar.open { transform:translateX(0); }

    /* Hamburger visible on mobile */
    .btn-hamburger { display:flex; }

    /* Home */
    .home-main    { padding:20px 18px 24px; justify-content:flex-start; }
    .home-greeting { margin-bottom:20px; display:flex; align-items:center; gap:12px; }
    .home-greeting-text h1 { font-size:22px; letter-spacing:-.5px; font-weight:800; }
    .home-greeting-text p  { font-size:13px; margin-top:4px; }

    /* Cat grid: 2 cols, compact */
    .cat-grid  { grid-template-columns:1fr 1fr; gap:10px; }
    .cat-card  { padding:16px 14px 18px; border-radius:16px; }
    .cat-icon  { width:38px; height:38px; border-radius:12px; margin-bottom:11px; }
    .cat-icon svg { width:18px; height:18px; }
    .cat-titulo { font-size:13px; }
    .cat-desc   { font-size:11.5px; margin-top:4px; }
    .cat-arrow  { display:none; }

    /* Show mobile conv history in home */
    .home-convs-mobile { display:block; }

    /* Chat topbar */
    .chat-topbar { padding:11px 14px; gap:9px; }
    .topbar-name { font-size:13px; }
    .topbar-cat-badge { font-size:10px; padding:3px 8px; }

    /* Messages */
    .messages { padding:14px 12px 8px; gap:3px; }
    .msg-row.bot  { max-width:95%; }
    .msg-row.user { max-width:85%; }
    .msg-row.bot .bubble { padding:12px 14px; font-size:13.5px; }
    .msg-row.user .bubble { padding:10px 14px; font-size:13.5px; }

    /* Input area */
    .input-area { padding:8px 12px calc(16px + env(safe-area-inset-bottom)); }
    .input-hint { display:none; }
    .media-toolbar { gap:8px; }
    .btn-media { padding:10px 14px; font-size:12px; min-height:44px; border-radius:22px; flex:1; justify-content:center; }
    .btn-media span { display:none; } /* hide text labels on mobile, icon only */
    .btn-media svg  { width:18px; height:18px; flex-shrink:0; }
    .input-card { padding:9px 9px 9px 14px; }

    /* Snackbar: topo no mobile */
    #snackbar {
      bottom:auto; top:14px;
      max-width:calc(100vw - 28px);
      white-space:normal;
    }
  }

  /* ── Tablet (640px – 1023px) ── */
  @media (min-width:640px) and (max-width:1023px) {
    .app-layout { /* flex: sidebar width set via --sidebar-w (220px override below) */ }
    :root { --sidebar-w: 220px; }
    .home-main { padding:32px 28px 24px; }
    .cat-grid  { grid-template-columns:1fr 1fr; gap:14px; }
    .cat-card  { padding:20px; }
    .messages  { padding:18px 20px 8px; }
    .input-area { padding:10px 18px 18px; }
  }

  /* ── Desktop padrão (1024px – 1439px) ── */
  @media (min-width:1024px) {
    /* Home: conteúdo centralizado em coluna */
    .home-main {
      align-items: center;
      padding: 0 40px;
      justify-content: center;
    }
    .home-main-col {
      width: 100%;
      max-width: 640px;
    }
    .home-greeting  { margin-bottom: 32px; }
    .cat-grid  { grid-template-columns:1fr 1fr; gap:18px; }
    .cat-card  { padding:24px 22px 26px; }

    /* Chat: topbar e input full-width, mensagens em coluna centralizada */
    #view-chat { align-items: center; }
    .chat-topbar  { width:100%; max-width:860px; border-left:none; border-right:none; }
    .messages     { width:100%; max-width:860px; padding:24px 32px 10px; }
    .input-area   { width:100%; max-width:860px; padding:14px 32px 22px; border-left:none; border-right:none; border-top:1px solid var(--glass-border); }

    .sidebar-section { padding:20px 22px 0; }
  }

  /* ── Telas grandes / laptops wide (≥1440px) ── */
  @media (min-width:1440px) {
    :root { --sidebar-w: 300px; }
    .sidebar-top    { padding:32px 28px 22px; }
    .sidebar-section{ padding:22px 28px 0; }

    /* Home */
    .home-main-col  { max-width: 720px; }
    .home-greeting-text h1 { font-size:clamp(28px,2.2vw,40px); }
    .cat-grid  { gap:22px; }
    .cat-card  { padding:28px 26px 30px; border-radius:22px; }
    .cat-titulo { font-size:16px; }
    .cat-desc   { font-size:13px; }

    /* Chat */
    .chat-topbar  { max-width:960px; }
    .messages     { max-width:960px; padding:28px 40px 12px; }
    .input-area   { max-width:960px; padding:16px 40px 26px; }

    .bubble    { font-size:15px; }
    .logo-dark.sm { height:38px; }
  }

  /* ── TV / monitor ultra-wide (≥1920px) ── */
  @media (min-width:1920px) {
    :root { --sidebar-w: 360px; }
    .sidebar-top    { padding:40px 36px 26px; }
    .sidebar-section{ padding:24px 36px 0; }

    /* Home */
    .home-main-col  { max-width: 900px; }
    .home-greeting-text h1 { font-size:clamp(36px,2.4vw,52px); }
    .home-greeting p { font-size:17px; }
    .cat-grid  { grid-template-columns:1fr 1fr 1fr; gap:26px; }
    .cat-card  { padding:34px 30px 36px; border-radius:24px; }
    .cat-icon  { width:58px; height:58px; border-radius:18px; margin-bottom:18px; }
    .cat-icon svg { width:26px; height:26px; }
    .cat-titulo { font-size:18px; }
    .cat-desc   { font-size:14px; margin-top:8px; }

    /* Chat */
    .chat-topbar  { max-width:1100px; }
    .messages     { max-width:1100px; padding:36px 56px 16px; gap:6px; }
    .input-area   { max-width:1100px; padding:20px 56px 32px; }

    .bubble    { font-size:16px; line-height:1.7; }
    .input-field { font-size:16px; }
    .btn-send  { width:46px; height:46px; border-radius:14px; }
    .logo-dark.sm { height:46px; }
    .auth-card { width:500px; }
  }

  /* ══ OBRAS VIEW ══ */
  #view-obras { display:none; flex-direction:column; height:100%; overflow:hidden; }
  #view-obras.active { display:flex; }

  .obras-topbar {
    display:flex; align-items:center; gap:12px;
    padding:16px 20px; border-bottom:1px solid var(--glass-border);
    background:rgba(8,12,24,.92); flex-shrink:0;
  }
  .obras-topbar-title { font-size:17px; font-weight:700; color:var(--text); flex:1; }
  .btn-refresh-obras {
    width:36px; height:36px; border-radius:10px;
    border:1px solid var(--glass-border); background:var(--glass);
    color:var(--text-sub); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:color .15s, background .15s;
  }
  .btn-refresh-obras:hover { color:var(--blue-bright); background:rgba(74,127,212,.1); }
  .btn-refresh-obras svg { width:16px; height:16px; }
  .btn-refresh-obras.spinning svg { animation:spin .7s linear infinite; }

  .obras-stats {
    display:flex; gap:0; padding:0 20px;
    border-bottom:1px solid var(--glass-border);
    flex-shrink:0; overflow-x:auto; scrollbar-width:none;
  }
  .obras-stats::-webkit-scrollbar { display:none; }
  .obras-stat {
    display:flex; flex-direction:column; align-items:center;
    padding:12px 16px; gap:2px; min-width:68px;
  }
  .obras-stat-val {
    font-size:20px; font-weight:800;
    font-variant-numeric:tabular-nums; line-height:1.1; color:var(--text);
  }
  .obras-stat-lbl {
    font-size:10px; font-weight:600; text-transform:uppercase;
    letter-spacing:.04em; color:var(--text-dim); white-space:nowrap;
  }
  .obras-stat.s-realizando .obras-stat-val { color:var(--blue-bright); }
  .obras-stat.s-parado     .obras-stat-val { color:#f59e0b; }
  .obras-stat.s-comecar    .obras-stat-val { color:#10b981; }
  .obras-stat.s-valor      .obras-stat-val { color:#22c55e; }

  .obras-filters {
    display:flex; gap:6px; padding:12px 20px;
    border-bottom:1px solid var(--glass-border);
    flex-shrink:0; overflow-x:auto; scrollbar-width:none;
  }
  .obras-filters::-webkit-scrollbar { display:none; }
  .obras-filter-btn {
    padding:5px 14px; border-radius:20px;
    border:1px solid var(--glass-border); background:transparent;
    color:var(--text-sub); font-size:12px; font-weight:600;
    cursor:pointer; white-space:nowrap; font-family:var(--font);
    transition:color .15s, background .15s, border-color .15s;
  }
  .obras-filter-btn:hover { color:var(--text); border-color:var(--text-sub); }
  .obras-filter-btn.active {
    background:var(--blue); border-color:var(--blue); color:#fff;
  }

  .obras-body { flex:1; overflow-y:auto; padding:20px; }
  .obras-grid {
    display:grid; grid-template-columns:1fr; gap:12px;
  }
  @media (min-width:600px)  { .obras-grid { grid-template-columns:1fr 1fr; } }
  @media (min-width:1024px) { .obras-grid { grid-template-columns:1fr 1fr 1fr; } }
  @media (min-width:1440px) { .obras-grid { grid-template-columns:1fr 1fr 1fr 1fr; } }

  .obras-empty {
    grid-column:1/-1; text-align:center;
    color:var(--text-dim); font-size:14px; padding:48px 0;
  }

  /* Obra card */
  @keyframes cardIn {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
  }
  .obra-card {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:16px; padding:16px 16px 14px; cursor:pointer;
    transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s, border-color .22s;
    display:flex; flex-direction:column; gap:8px;
    animation:cardIn .3s ease both;
    animation-delay:calc(var(--i,0) * 40ms);
    position:relative; overflow:hidden;
  }
  .obra-card:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.3); border-color:var(--blue-bright); }
  /* Obras problemáticas não recebem lift — o hover reforça atenção */
  .obra-card.oc-parado:hover    { transform:none; box-shadow:0 0 0 2px #f59e0b66; border-color:#f59e0b; }
  .obra-card.oc-cancelado:hover { transform:none; box-shadow:0 0 0 2px #ef444466; border-color:#ef4444; opacity:.8; }

  /* Phase accent bar */
  .obra-card::before {
    content:''; position:absolute;
    left:0; top:0; bottom:0; width:3px;
    border-radius:16px 0 0 16px;
  }
  .obra-card.oc-realizando::before { background:var(--blue-bright); }
  .obra-card.oc-parado::before     { background:#f59e0b; }
  .obra-card.oc-comecar::before    { background:#10b981; }
  .obra-card.oc-pronto::before     { background:#6b7280; }
  .obra-card.oc-cancelado::before  { background:#ef4444; }

  .obra-card-header {
    display:flex; align-items:flex-start;
    justify-content:space-between; gap:8px;
  }
  .obra-nome {
    font-size:14px; font-weight:700; color:var(--text);
    line-height:1.3; flex:1;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .obra-fase-badge {
    font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.05em; padding:3px 8px; border-radius:20px;
    white-space:nowrap; flex-shrink:0;
  }
  .obra-fase-badge.fb-realizando { background:rgba(74,127,212,.2);  color:var(--blue-bright); }
  .obra-fase-badge.fb-parado     { background:rgba(245,158,11,.15); color:#f59e0b; }
  .obra-fase-badge.fb-comecar    { background:rgba(16,185,129,.15); color:#10b981; }
  .obra-fase-badge.fb-pronto     { background:rgba(107,114,128,.15);color:#9ca3af; }
  .obra-fase-badge.fb-cancelado  { background:rgba(239,68,68,.12);  color:#ef4444; }

  /* Subtítulo cliente */
  .obra-cliente-sub {
    font-size:11px; color:var(--text-dim); margin-top:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  /* Chips compactos */
  .obra-chips { display:flex; flex-wrap:wrap; gap:5px; }
  .obra-chip {
    display:inline-flex; align-items:center; gap:4px;
    font-size:10px; font-weight:500; color:var(--text-sub);
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
    border-radius:6px; padding:3px 7px; white-space:nowrap;
  }
  .obra-chip svg { flex-shrink:0; opacity:.7; }

  .obra-meta { display:flex; flex-direction:column; gap:4px; }
  .obra-meta-row {
    display:flex; align-items:center; gap:6px;
    font-size:12px; color:var(--text-dim);
  }
  .obra-meta-row svg { width:11px; height:11px; flex-shrink:0; }
  .obra-meta-val { color:var(--text-sub); font-weight:500; }
  .obra-prazo-alert { color:#ef4444 !important; font-weight:700 !important; }

  .card-progress-track {
    height:3px; background:rgba(255,255,255,.06);
    border-radius:4px; overflow:hidden;
  }
  .card-progress-fill {
    height:100%; border-radius:4px;
    transition:width .5s ease;
  }
  .obra-card.oc-realizando .card-progress-fill { background:var(--blue-bright); }
  .obra-card.oc-parado     .card-progress-fill { background:#f59e0b; }
  .obra-card.oc-comecar    .card-progress-fill { background:#10b981; }
  .obra-card.oc-pronto     .card-progress-fill { background:#6b7280; }
  .obra-card.oc-cancelado  .card-progress-fill { background:#ef4444; }

  .obra-footer {
    display:flex; align-items:center; justify-content:space-between;
  }
  .obra-valor {
    font-size:13px; font-weight:700;
    font-variant-numeric:tabular-nums; color:var(--text);
  }
  .obra-dias-rest { font-size:11px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
  .obra-dias-alert { color:#f59e0b !important; font-weight:600 !important; }

  /* Responsavel */
  .obra-responsavel {
    display:flex; align-items:center; gap:5px;
    font-size:10.5px; color:var(--text-dim);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .obra-responsavel svg { flex-shrink:0; opacity:.55; }

  /* Progresso m2 */
  .obra-m2-row {
    display:flex; align-items:center; gap:8px;
    font-size:10.5px; color:var(--text-dim);
  }
  .obra-m2-row .card-progress-track { flex:1; }
  .obra-m2-label { white-space:nowrap; font-variant-numeric:tabular-nums; }
  .obra-m2-pct { font-weight:700; color:var(--text-sub); min-width:30px; text-align:right; font-variant-numeric:tabular-nums; }

  /* Footer melhorado */
  .obra-footer-left, .obra-footer-right {
    display:flex; align-items:center; gap:4px;
  }
  .obra-footer-right { gap:3px; }
  .obra-footer-icon { width:11px; height:11px; opacity:.5; flex-shrink:0; }
  .obra-data-inicio { font-size:10px; color:var(--text-dim); font-variant-numeric:tabular-nums; }

  /* Skeleton */
  .obra-skel {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px;
  }
  @keyframes shimmer { to { background-position:-200% 0; } }
  .skel-ln {
    border-radius:6px;
    background:linear-gradient(90deg, var(--glass) 25%, rgba(255,255,255,.06) 50%, var(--glass) 75%);
    background-size:200% 100%;
    animation:shimmer 1.5s ease infinite;
  }
  .skel-h  { height:13px; }
  .skel-sm { height:9px; }

  /* Sidebar nav */
  .sidebar-nav { display:flex; flex-direction:column; gap:2px; margin:12px 0 0; overflow-y:auto; flex-shrink:1; min-height:0; }
  .sidebar-nav::-webkit-scrollbar { width:3px; }
  .sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.07); border-radius:3px; }
  .sidebar-nav-item {
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; border-radius:10px; cursor:pointer;
    font-size:13px; font-weight:500; color:var(--text-sub);
    transition:background .15s, color .15s; user-select:none;
    position:relative;
  }
  .sidebar-nav-item:hover { background:var(--glass); color:var(--text); }
  .sidebar-nav-item.sni-active { background:rgba(40,77,148,.2); color:var(--blue-bright); font-weight:600; }
  .sidebar-nav-item svg { width:15px; height:15px; flex-shrink:0; }
  .sni-badge {
    margin-left:auto; background:#f59e0b; color:#000;
    font-size:10px; font-weight:800; padding:1px 6px;
    border-radius:10px; min-width:18px; text-align:center; line-height:16px;
  }

  /* Obra detalhe drawer */
  .obra-drawer-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,.5);
    z-index:300; opacity:0; pointer-events:none; transition:opacity .25s;
  }
  .obra-drawer-backdrop.od-open { opacity:1; pointer-events:auto; }
  .obra-drawer {
    position:fixed; right:0; top:0; bottom:0;
    width:min(480px,100vw);
    background:rgba(8,12,24,.98);
    border-left:1px solid var(--glass-border);
    z-index:301; display:flex; flex-direction:column;
    transform:translateX(100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1); overflow:hidden;
  }
  .obra-drawer.od-open { transform:translateX(0); }
  .obra-drawer-topbar {
    display:flex; align-items:center; gap:12px;
    padding:16px 20px; border-bottom:1px solid var(--glass-border); flex-shrink:0;
  }
  .obra-drawer-fase { /* badge inside drawer */ }
  .obra-drawer-title {
    font-size:15px; font-weight:700; color:var(--text); flex:1;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .btn-close-drawer {
    width:32px; height:32px; border-radius:8px; border:none;
    background:var(--glass); color:var(--text-sub); cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:color .15s;
    flex-shrink:0;
  }
  .btn-close-drawer:hover { color:var(--text); }
  .btn-close-drawer svg { width:16px; height:16px; }
  .obra-drawer-body {
    flex:1; overflow-y:auto; padding:16px;
    display:flex; flex-direction:column; gap:12px;
  }
  .od-section-title {
    font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.07em; color:var(--text-dim); margin:16px 0 10px;
  }
  .od-section-title:first-child { margin-top:0; }
  .od-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .od-field { display:flex; flex-direction:column; gap:3px; }
  .od-label {
    font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.05em; color:var(--text-dim);
  }
  .od-value { font-size:13px; color:var(--text); font-weight:500; }
  .od-value.od-muted { color:var(--text-sub); }
  .od-progress-wrap { display:flex; flex-direction:column; gap:6px; }
  .od-progress-bar { height:6px; background:rgba(255,255,255,.06); border-radius:6px; overflow:hidden; }
  .od-progress-fill { height:100%; border-radius:6px; background:var(--blue-bright); transition:width .5s; }
  .od-obs {
    font-size:13px; color:var(--text-sub); line-height:1.5;
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:12px; padding:12px;
  }
  .obra-drawer-footer {
    padding:14px 20px 18px; border-top:1px solid var(--glass-border); flex-shrink:0;
    display:flex; flex-direction:column; gap:12px;
  }

  /* ── Ação principal ── */
  .btn-conversar-obra {
    width:100%; padding:13px; border-radius:14px; border:none;
    background:linear-gradient(135deg,var(--blue-mid),var(--blue-bright));
    color:#fff; font-size:14px; font-weight:600; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font); transition:opacity .15s, transform .15s;
    box-shadow:0 2px 12px rgba(74,127,212,.25);
  }
  .btn-conversar-obra:hover { opacity:.9; transform:translateY(-1px); }
  .btn-conversar-obra:active { transform:translateY(0); }
  .btn-conversar-obra svg { width:16px; height:16px; }

  /* ── Separador visual ── */
  .od-footer-divider {
    height:1px; background:var(--glass-border); margin:0;
  }

  /* ── Status rápido ── */
  .od-status-section { display:flex; flex-direction:column; gap:8px; }
  .od-status-label {
    font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:var(--text-dim);
  }
  .od-status-pills { display:flex; gap:6px; flex-wrap:wrap; }
  .od-status-btn {
    padding:6px 12px; border-radius:20px; border:1px solid var(--glass-border);
    background:var(--surface); color:var(--text-sub); font-size:11px; font-weight:600;
    cursor:pointer; font-family:var(--font); transition:background .15s, color .15s, border-color .15s, transform .1s;
    white-space:nowrap;
  }
  .od-status-btn:hover { background:var(--surface-hover); color:var(--text); transform:scale(1.03); }
  .od-status-btn:active { transform:scale(.97); }
  .od-status-btn.active[data-status="planejada"]  { background:rgba(16,185,129,.2);  color:#10b981; border-color:rgba(16,185,129,.35); }
  .od-status-btn.active[data-status="realizando"] { background:rgba(74,127,212,.2);  color:var(--blue-bright); border-color:rgba(74,127,212,.35); }
  .od-status-btn.active[data-status="parada"]     { background:rgba(245,158,11,.15); color:#f59e0b; border-color:rgba(245,158,11,.3); }
  .od-status-btn.active[data-status="concluida"]  { background:rgba(107,114,128,.15);color:#9ca3af; border-color:rgba(107,114,128,.3); }
  .od-status-btn.active[data-status="cancelada"]  { background:rgba(239,68,68,.12);  color:#ef4444; border-color:rgba(239,68,68,.25); }

  /* ── Ações secundárias ── */
  .od-secondary-actions { display:flex; gap:8px; }

  /* ══ OBRA DRAWER v3 — Visual Overhaul ══ */

  /* KPI cards */
  .od-kpi-row  { display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:10px; margin-bottom:20px; }
  .od-kpi-card { position:relative; overflow:hidden; background:linear-gradient(145deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 100%); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:16px 10px; text-align:center; transition:border-color .2s; }
  .od-kpi-card::after { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); }
  .od-kpi-val  { font-size:22px; font-weight:800; color:var(--text); line-height:1.1; margin-bottom:5px; font-feature-settings:"tnum"; }
  .od-kpi-lbl  { font-size:10px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }
  .od-kpi-card.od-kpi-hi  { border-color:rgba(74,127,212,.35); box-shadow:0 0 18px rgba(74,127,212,.1); }
  .od-kpi-card.od-kpi-hi  .od-kpi-val { color:var(--blue-bright); }
  .od-kpi-card.od-kpi-done { border-color:rgba(16,185,129,.35); box-shadow:0 0 18px rgba(16,185,129,.1); }
  .od-kpi-card.od-kpi-done .od-kpi-val { color:#10b981; }

  /* Status pills (obra overview) */
  .od-status-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
  .od-status-pill  { font-size:11px; font-weight:700; padding:5px 12px; border-radius:20px; letter-spacing:.02em; }

  /* Service cards */
  .od-sv-card {
    position:relative;
    background:linear-gradient(145deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.015) 100%);
    border:1px solid rgba(255,255,255,.08);
    border-left:3px solid rgba(148,163,184,.25);
    border-radius:14px; padding:16px 16px 12px; cursor:pointer;
    transition:background .18s, border-left-color .2s, transform .18s, box-shadow .2s;
    margin-bottom:10px;
  }
  .od-sv-card::after { content:''; position:absolute; top:0; left:0; right:0; height:1px; border-radius:14px 14px 0 0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); }
  .od-sv-card:hover { background:rgba(255,255,255,.07); transform:translateX(3px); box-shadow:0 4px 20px rgba(0,0,0,.3); }
  .od-sv-card[data-status="em_execucao"] { border-left-color:var(--blue-bright); }
  .od-sv-card[data-status="concluido"]   { border-left-color:#10b981; }
  .od-sv-card[data-status="atrasado"]    { border-left-color:#ef4444; }
  .od-sv-card[data-status="planejado"]   { border-left-color:rgba(148,163,184,.4); }
  .od-sv-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
  .od-sv-card-nome   { font-size:14px; font-weight:700; color:var(--text); line-height:1.35; }
  .od-sv-card-tipo   { font-size:11px; color:var(--text-dim); margin-top:2px; }
  .od-sv-card-stats  { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px; }
  .od-sv-card-stat   { background:rgba(255,255,255,.04); border-radius:10px; padding:9px 10px; }
  .od-sv-card-stat-val { font-size:14px; font-weight:800; color:var(--text); line-height:1; margin-bottom:3px; font-feature-settings:"tnum"; }
  .od-sv-card-stat-lbl { font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }
  .od-sv-card-bar      { height:6px; background:rgba(255,255,255,.06); border-radius:6px; overflow:hidden; margin-bottom:12px; }
  .od-sv-card-bar-fill { height:100%; border-radius:6px; background:linear-gradient(90deg,var(--blue-mid),var(--blue-bright)); transition:width .5s .1s; }
  .od-sv-card-bar-fill.sv-done { background:linear-gradient(90deg,#059669,#10b981); }
  .od-sv-card-footer   { display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid rgba(255,255,255,.05); }

  /* Service detail */
  .od-detail-back {
    display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
    color:var(--text-sub); cursor:pointer; padding:7px 12px 7px 8px;
    border-radius:10px; border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04); font-family:var(--font);
    margin-bottom:18px; transition:all .18s;
  }
  .od-detail-back:hover { color:var(--text); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); }
  .od-detail-back svg { width:14px; height:14px; }
  .od-detail-hero { background:linear-gradient(135deg,rgba(40,77,148,.2) 0%,rgba(255,255,255,.03) 100%); border:1px solid rgba(74,127,212,.18); border-radius:16px; padding:18px; margin-bottom:16px; }
  .od-detail-nome { font-size:18px; font-weight:800; color:var(--text); margin-bottom:6px; line-height:1.3; }
  .od-detail-sub  { font-size:12px; color:var(--text-sub); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .od-detail-bar  { height:10px; background:rgba(255,255,255,.07); border-radius:10px; overflow:hidden; margin:14px 0 5px; }
  .od-detail-fill { height:100%; border-radius:10px; background:linear-gradient(90deg,var(--blue-mid),var(--blue-bright)); transition:width .6s; }
  .od-detail-fill.od-fill-done { background:linear-gradient(90deg,#059669,#10b981); }
  .od-detail-pct-row { display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); margin-bottom:2px; }

  /* Pill tabs */
  .od-tabs { display:flex; gap:4px; margin:0 0 2px; background:rgba(255,255,255,.04); border-radius:14px; padding:4px; overflow-x:auto; scrollbar-width:none; }
  .od-tabs::-webkit-scrollbar { display:none; }
  .od-tab-btn { padding:8px 15px; border:none; background:none; font-family:var(--font); font-size:12px; font-weight:600; color:var(--text-dim); cursor:pointer; border-radius:10px; white-space:nowrap; transition:all .2s; flex-shrink:0; }
  .od-tab-btn:hover { color:var(--text-sub); background:rgba(255,255,255,.05); }
  .od-tab-btn.active { background:rgba(74,127,212,.25); color:var(--blue-bright); box-shadow:0 2px 8px rgba(74,127,212,.2); }
  .od-tab-panel { display:none; padding:16px 0 0; }
  .od-tab-panel.active { display:block; }

  /* Curva S */
  .od-curva-wrap { background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:18px; margin-top:8px; }
  .od-curva-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-dim); margin-bottom:16px; }
  .od-curva-bar-prev,.od-curva-bar-real { height:22px; background:rgba(255,255,255,.05); border-radius:8px; overflow:hidden; }
  .od-curva-fill-prev { height:100%; border-radius:8px; background:rgba(74,127,212,.3); transition:width .6s; }
  .od-curva-fill-real { height:100%; border-radius:8px; background:linear-gradient(90deg,var(--blue-mid),var(--blue-bright)); transition:width .6s .1s; }
  .od-curva-fill-real.cv-done { background:linear-gradient(90deg,#059669,#10b981); }
  .od-curva-pct { font-size:36px; font-weight:800; line-height:1; letter-spacing:-.02em; }

  /* Diário */
  .od-reg-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.05); }
  .od-reg-item:last-child { border-bottom:none; }
  .od-reg-date-col { flex-shrink:0; width:52px; text-align:right; }
  .od-reg-date { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-dim); line-height:1.3; }
  .od-reg-m2   { font-size:12px; font-weight:700; color:var(--blue-bright); margin-top:3px; }
  .od-reg-body { flex:1; font-size:13px; color:var(--text-sub); line-height:1.5; }

  /* Especificações */
  .od-espec-item { padding:13px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-left:2px solid rgba(74,127,212,.45); border-radius:12px; margin-bottom:8px; }
  .od-espec-tit  { font-size:13px; font-weight:700; color:var(--text); margin-bottom:3px; }
  .od-espec-desc { font-size:12px; color:var(--text-sub); line-height:1.5; }
  .od-espec-m2   { font-size:13px; color:var(--blue-bright); font-weight:700; white-space:nowrap; }
  .od-espec-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
  .od-espec-tag  { font-size:10px; font-weight:600; padding:3px 8px; border-radius:20px; background:rgba(255,255,255,.06); color:var(--text-sub); border:1px solid rgba(255,255,255,.09); }
  .od-espec-tag.tg-etapa { background:rgba(74,127,212,.14); color:#7bb3f0; border-color:rgba(74,127,212,.28); }

  /* Materiais */
  .od-mat-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:13px; }
  .od-mat-row:last-child { border-bottom:none; }

  /* Consumo */
  .od-consumo-grid { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden; }
  .od-consumo-hdr  { display:grid; grid-template-columns:1fr 100px 90px; font-size:10px; font-weight:700; color:var(--text-dim); padding:9px 14px; background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.07); text-transform:uppercase; letter-spacing:.05em; gap:8px; }
  .od-consumo-row  { display:grid; grid-template-columns:1fr 100px 90px; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.04); font-size:12px; align-items:center; gap:8px; transition:background .15s; }
  .od-consumo-row:last-child { border-bottom:none; }
  .od-consumo-row:hover { background:rgba(255,255,255,.03); }
  .od-consumo-nome { color:var(--text); font-weight:500; }
  .od-consumo-qtd  { color:var(--text-sub); text-align:right; white-space:nowrap; }
  .od-consumo-m2   { color:var(--blue-bright); font-weight:700; text-align:right; white-space:nowrap; font-size:11px; }

  /* ══ DRAWER SUMMARY — map + quick info ══ */
  /* ── Drawer: Hero metric (% concluído) ── */
  .od-hero-metric {
    display:flex; align-items:center; gap:14px;
    padding:12px 14px; border-radius:14px;
    background:linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
    border:1px solid rgba(255,255,255,.08);
  }
  .od-hero-pct {
    font-size:32px; font-weight:800; line-height:1;
    font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  }
  .od-hero-pct.pct-green  { color:#4ade80; }
  .od-hero-pct.pct-amber  { color:#f59e0b; }
  .od-hero-pct.pct-red    { color:#ef4444; }
  .od-hero-pct.pct-blue   { color:var(--blue-bright); }
  .od-hero-pct.pct-dim    { color:var(--text-dim); }
  .od-hero-detail { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
  .od-hero-bar { height:4px; border-radius:4px; background:rgba(255,255,255,.06); overflow:hidden; }
  .od-hero-bar-fill { height:100%; border-radius:4px; transition:width .5s ease; }
  .od-hero-bar-fill.bar-green { background:#4ade80; }
  .od-hero-bar-fill.bar-amber { background:#f59e0b; }
  .od-hero-bar-fill.bar-red   { background:#ef4444; }
  .od-hero-bar-fill.bar-blue  { background:var(--blue-bright); }
  .od-hero-sub { font-size:11px; color:var(--text-dim); font-variant-numeric:tabular-nums; }

  /* ── Drawer: Prazo row ── */
  .od-prazo-row {
    display:flex; align-items:center; gap:8px; justify-content:space-between;
    font-size:12px; color:var(--text-sub);
  }
  .od-prazo-alert { color:#f59e0b; font-weight:700; }
  .od-prazo-ok { color:var(--text-dim); }

  /* ── Drawer: Serviços pills ── */
  .od-sv-pills { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }

  /* ── Drawer: Map embed compacto ── */
  .od-map-compact {
    height:120px; border-radius:10px; overflow:hidden;
    background:rgba(255,255,255,.03); border:1px solid var(--glass-border);
    position:relative;
  }
  .od-map-compact iframe { width:100%; height:100%; border:none; pointer-events:none; }
  .od-map-compact:hover iframe { pointer-events:auto; }
  .od-map-compact-addr {
    position:absolute; bottom:0; left:0; right:0;
    padding:5px 10px; background:linear-gradient(transparent, rgba(0,0,0,.75));
    display:flex; align-items:center; gap:5px;
    font-size:10px; color:rgba(255,255,255,.85); font-weight:500;
  }
  .od-map-compact-addr svg { width:10px; height:10px; flex-shrink:0; }
  .od-map-empty {
    display:flex; align-items:center; justify-content:center;
    gap:6px; color:var(--text-dim); font-size:11px;
    height:44px; border-radius:10px;
    background:rgba(255,255,255,.03); border:1px solid var(--glass-border);
  }
  .od-map-empty svg { width:14px; height:14px; opacity:.4; }

  /* ── Drawer: Mini service cards ── */
  .od-sv-mini { display:flex; flex-direction:column; gap:6px; }
  .od-sv-mini-card {
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; border-radius:10px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  }
  .od-sv-mini-info { flex:1; min-width:0; }
  .od-sv-mini-nome { font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .od-sv-mini-meta { font-size:10px; color:var(--text-dim); margin-top:1px; }
  .od-sv-mini-badge { font-size:9px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:2px 7px; border-radius:12px; flex-shrink:0; white-space:nowrap; }
  .od-sv-mini-badge.sv-planejado   { background:rgba(148,163,184,.15); color:#94a3b8; }
  .od-sv-mini-badge.sv-em_execucao { background:rgba(74,127,212,.18); color:#7bb3f0; }
  .od-sv-mini-badge.sv-concluido   { background:rgba(34,197,94,.15); color:#4ade80; }
  .od-sv-mini-badge.sv-atrasado    { background:rgba(239,68,68,.15); color:#f87171; }

  /* ── Drawer: Mini stats row ── */
  .od-stats-row {
    display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;
  }
  .od-stat {
    text-align:center; padding:8px 4px; border-radius:10px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  }
  .od-stat-val {
    font-size:15px; font-weight:800; color:var(--text);
    font-variant-numeric:tabular-nums; line-height:1.2;
  }
  .od-stat-val.stat-green { color:#4ade80; }
  .od-stat-val.stat-amber { color:#f59e0b; }
  .od-stat-val.stat-red   { color:#ef4444; }
  .od-stat-val.stat-blue  { color:var(--blue-bright); }
  .od-stat-lbl {
    font-size:9px; font-weight:600; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:.04em; margin-top:2px;
  }

  /* ── Drawer: Timeline registros do dia ── */
  .od-timeline { display:flex; flex-direction:column; gap:0; }
  .od-timeline-title {
    font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:var(--text-dim); margin-bottom:6px;
  }
  .od-tl-item {
    display:flex; gap:10px; padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,.04);
    font-size:11px; color:var(--text-sub);
  }
  .od-tl-item:last-child { border-bottom:none; }
  .od-tl-dot {
    width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:3px;
    background:var(--blue-bright);
  }
  .od-tl-dot.tl-manha    { background:#f59e0b; }
  .od-tl-dot.tl-tarde    { background:#f97316; }
  .od-tl-dot.tl-integral { background:var(--blue-bright); }
  .od-tl-dot.tl-noturno  { background:#8b5cf6; }
  .od-tl-content { flex:1; min-width:0; }
  .od-tl-meta { font-size:10px; color:var(--text-dim); margin-top:1px; }
  .od-tl-empty { font-size:11px; color:var(--text-dim); text-align:center; padding:8px 0; }

  /* ── Drawer: Section separator ── */
  .od-drawer-sep {
    height:1px; background:rgba(255,255,255,.06); margin:2px 0;
  }

  /* ── Drawer: Cliente row ── */
  .od-cliente-row {
    display:flex; align-items:center; gap:6px;
    font-size:11px; color:var(--text-dim);
  }
  .od-cliente-row svg { width:12px; height:12px; opacity:.45; flex-shrink:0; }

  /* ══ FULL PAGE — view-obra-detalhe ══ */
  #view-obra-detalhe { display:none; flex-direction:column; height:100%; overflow:hidden; background:linear-gradient(160deg,#090e1e 0%,#060913 100%); position:relative; }
  #view-obra-detalhe.active { display:flex; }

  .vod-topbar { display:flex; align-items:center; gap:12px; padding:12px 24px; border-bottom:1px solid var(--glass-border); background:rgba(8,12,24,.92); flex-shrink:0; position:relative; z-index:1; }
  .vod-breadcrumb { font-size:13px; color:var(--text-dim); display:flex; align-items:center; gap:6px; flex:1; }
  .vod-breadcrumb a { color:var(--blue-light); text-decoration:none; cursor:pointer; transition:color .15s; font-weight:500; }
  .vod-breadcrumb a:hover { color:var(--text); }
  .vod-breadcrumb .vod-bc-sep { color:var(--text-dim); opacity:.5; }
  .vod-breadcrumb .vod-bc-current { color:var(--text); font-weight:600; }

  .vod-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:28px 28px 100px; position:relative; z-index:1; display:flex; flex-direction:column; gap:0; max-width:900px; }
  @media (max-width:640px) { .vod-body { padding:20px 16px 100px; } }

  /* Header */
  .vod-header { margin-bottom:24px; }
  .vod-header-row { display:flex; align-items:center; gap:12px; }
  .vod-header h1 { font-size:24px; font-weight:800; color:var(--text); margin:0; line-height:1.2; letter-spacing:-.02em; }
  .vod-header .obra-fase-badge { margin-left:4px; }
  .vod-subtitle { font-size:13px; color:var(--text-dim); margin-top:4px; }

  /* KPI row */
  .vod-kpi-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:28px; }
  @media (max-width:500px) { .vod-kpi-row { grid-template-columns:repeat(2, 1fr); } }
  .vod-kpi { text-align:center; padding:14px 8px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
  .vod-kpi-val { font-size:20px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; line-height:1.1; }
  .vod-kpi-val.kpi-green { color:#4ade80; }
  .vod-kpi-val.kpi-amber { color:#f59e0b; }
  .vod-kpi-val.kpi-red   { color:#ef4444; }
  .vod-kpi-val.kpi-blue  { color:var(--blue-bright); }
  .vod-kpi-lbl { font-size:10px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }

  /* Sections */
  .vod-section { margin-bottom:24px; }
  .vod-section-title {
    font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.08em; color:var(--text-dim); margin-bottom:12px;
    padding-bottom:6px; border-bottom:1px solid rgba(255,255,255,.06);
  }

  /* Info rows — label: value inline */
  .vod-info-list { display:flex; flex-direction:column; gap:6px; }
  .vod-info-item { display:flex; align-items:baseline; gap:8px; font-size:13px; }
  .vod-info-label { color:var(--text-dim); font-size:11px; font-weight:500; min-width:80px; flex-shrink:0; }
  .vod-info-val { color:var(--text); font-weight:500; }
  .vod-info-val a { color:var(--blue-light); text-decoration:none; }
  .vod-info-val a:hover { text-decoration:underline; }

  /* 2 column info grid */
  .vod-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
  @media (max-width:640px) { .vod-info-grid { grid-template-columns:1fr; gap:24px; } }

  /* Contatos compact */
  .vod-contato { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-sub); padding:4px 0; }
  .vod-contato-role { font-size:10px; color:var(--text-dim); font-weight:600; text-transform:uppercase; letter-spacing:.04em; min-width:75px; }
  .vod-contato-name { font-weight:600; color:var(--text); }
  .vod-contato-tel { color:var(--text-dim); }

  /* Service cards (full page) */
  .vod-sv-card {
    padding:14px; border-radius:12px; cursor:pointer;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
    transition:border-color .15s, background .15s; margin-bottom:8px;
  }
  .vod-sv-card:hover { border-color:rgba(74,127,212,.3); background:rgba(74,127,212,.04); }
  .vod-sv-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
  .vod-sv-nome { font-size:13px; font-weight:700; color:var(--text); }
  .vod-sv-meta { font-size:11px; color:var(--text-dim); display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .vod-sv-meta span { display:inline-flex; align-items:center; gap:3px; }
  .vod-sv-bar { height:3px; border-radius:3px; background:rgba(255,255,255,.06); margin-top:8px; overflow:hidden; }
  .vod-sv-bar-fill { height:100%; border-radius:3px; transition:width .5s; }
  .vod-sv-bar-fill.bar-blue  { background:var(--blue-bright); }
  .vod-sv-bar-fill.bar-green { background:#4ade80; }
  .vod-sv-bar-fill.bar-amber { background:#f59e0b; }
  .vod-sv-bar-fill.bar-red   { background:#ef4444; }
  .vod-sv-actions { display:flex; gap:4px; flex-shrink:0; }

  /* Diário timeline (full page) */
  .vod-tl-item { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.04); }
  .vod-tl-item:last-child { border-bottom:none; }
  .vod-tl-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px; background:var(--blue-bright); }
  .vod-tl-dot.tl-manha { background:#f59e0b; }
  .vod-tl-dot.tl-tarde { background:#f97316; }
  .vod-tl-dot.tl-noturno { background:#8b5cf6; }
  .vod-tl-content { flex:1; }
  .vod-tl-text { font-size:12px; color:var(--text-sub); }
  .vod-tl-meta { font-size:10px; color:var(--text-dim); margin-top:2px; }

  /* Footer actions */
  .vod-footer-section { display:flex; flex-direction:column; gap:12px; padding-top:8px; border-top:1px solid rgba(255,255,255,.06); margin-top:8px; }
  .vod-footer-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .vod-footer-status { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .vod-footer-danger { margin-left:auto; }

  /* ══ CLIENTES VIEW ══ */
  #view-clientes { display:none; flex-direction:column; height:100%; overflow:hidden; }
  #view-clientes.active { display:flex; }

  /* ══ SERVIÇOS PAGE ══ */
  #view-servicos { display:none; flex-direction:column; height:100%; overflow:hidden; }
  #view-servicos.active { display:flex; }

  .sv-page-header { padding:20px 24px 0; flex-shrink:0; }
  .sv-page-title { font-size:20px; font-weight:800; color:var(--text); margin:0 0 16px; }
  .btn-sv-novo {
    display:flex; align-items:center; gap:6px; flex-shrink:0;
    background:var(--blue); border:none; border-radius:10px;
    padding:8px 16px; color:#fff; font-size:12.5px; font-weight:700;
    cursor:pointer; font-family:var(--font); letter-spacing:.3px;
    transition:background .15s, box-shadow .15s;
    box-shadow:0 2px 10px rgba(59,157,255,.3);
  }
  .btn-sv-novo:hover { background:var(--blue-bright); box-shadow:0 4px 16px rgba(59,157,255,.45); }

  .sv-filters { display:flex; flex-wrap:wrap; gap:8px; padding:0 24px 16px; flex-shrink:0; }
  .sv-filter-select {
    padding:7px 12px; border-radius:10px; border:1px solid var(--glass-border);
    background:var(--surface); color:var(--text-sub); font-size:12px; font-weight:500;
    font-family:var(--font); cursor:pointer; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center; padding-right:28px;
  }
  .sv-filter-select:focus { border-color:var(--blue-bright); outline:none; }
  .sv-filter-search {
    padding:7px 12px 7px 32px; border-radius:10px; border:1px solid var(--glass-border);
    background:var(--surface); color:var(--text); font-size:12px; font-family:var(--font);
    flex:1; min-width:150px; max-width:280px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:10px center;
  }
  .sv-filter-search:focus { border-color:var(--blue-bright); outline:none; }

  .sv-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; padding:0 24px 16px; flex-shrink:0; }
  .sv-kpi {
    text-align:center; padding:12px 8px; border-radius:12px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  }
  .sv-kpi-val { font-size:20px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; line-height:1.1; }
  .sv-kpi-val.kpi-green { color:#4ade80; }
  .sv-kpi-val.kpi-amber { color:#f59e0b; }
  .sv-kpi-val.kpi-red   { color:#ef4444; }
  .sv-kpi-val.kpi-blue  { color:var(--blue-bright); }
  .sv-kpi-lbl { font-size:9px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-top:3px; }

  .sv-list { flex:1; overflow-y:auto; padding:0 24px 24px; display:flex; flex-direction:column; gap:8px; }

  .sv-card {
    padding:14px 16px; border-radius:12px; cursor:pointer;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
    transition:border-color .15s, background .15s;
    display:flex; flex-direction:column; gap:8px;
    position:relative;
  }
  .sv-card:hover { border-color:rgba(74,127,212,.3); background:rgba(74,127,212,.03); }

  .sv-card::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:12px 0 0 12px;
  }
  .sv-card.svc-em_execucao::before { background:var(--blue-bright); }
  .sv-card.svc-planejado::before   { background:#94a3b8; }
  .sv-card.svc-concluido::before   { background:#4ade80; }
  .sv-card.svc-atrasado::before    { background:#ef4444; }

  .sv-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .sv-card-id { flex:1; min-width:0; }
  .sv-card-nome { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sv-card-obra { font-size:11px; color:var(--text-dim); margin-top:1px; }
  .sv-card-badge { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 8px; border-radius:12px; white-space:nowrap; flex-shrink:0; }
  .sv-card-badge.svb-planejado   { background:rgba(148,163,184,.15); color:#94a3b8; }
  .sv-card-badge.svb-em_execucao { background:rgba(74,127,212,.18); color:#7bb3f0; }
  .sv-card-badge.svb-concluido   { background:rgba(34,197,94,.15); color:#4ade80; }
  .sv-card-badge.svb-atrasado    { background:rgba(239,68,68,.15); color:#f87171; }

  .sv-card-metrics { display:flex; gap:16px; font-size:11px; color:var(--text-sub); flex-wrap:wrap; }
  .sv-card-metric { display:flex; flex-direction:column; gap:1px; }
  .sv-card-metric-val { font-weight:700; font-size:13px; color:var(--text); font-variant-numeric:tabular-nums; }
  .sv-card-metric-val.mv-green { color:#4ade80; }
  .sv-card-metric-val.mv-amber { color:#f59e0b; }
  .sv-card-metric-val.mv-red   { color:#ef4444; }
  .sv-card-metric-lbl { font-size:9px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }

  .sv-card-bar { height:3px; border-radius:3px; background:rgba(255,255,255,.06); overflow:hidden; }
  .sv-card-bar-fill { height:100%; border-radius:3px; transition:width .5s; }
  .sv-card-bar-fill.bf-blue  { background:var(--blue-bright); }
  .sv-card-bar-fill.bf-green { background:#4ade80; }
  .sv-card-bar-fill.bf-amber { background:#f59e0b; }
  .sv-card-bar-fill.bf-red   { background:#ef4444; }

  .sv-card-alerts { display:flex; flex-wrap:wrap; gap:4px; }
  .sv-alert-tag {
    font-size:9px; font-weight:700; padding:2px 6px; border-radius:6px;
    text-transform:uppercase; letter-spacing:.03em;
  }
  .sv-alert-tag.at-red    { background:rgba(239,68,68,.12); color:#f87171; }
  .sv-alert-tag.at-amber  { background:rgba(245,158,11,.12); color:#f59e0b; }

  .sv-card-prazo { display:flex; align-items:center; gap:6px; font-size:11px; }
  .sv-prazo-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
  .sv-prazo-dot.pd-green { background:#4ade80; }
  .sv-prazo-dot.pd-amber { background:#f59e0b; }
  .sv-prazo-dot.pd-red   { background:#ef4444; }
  .sv-prazo-dot.pd-gray  { background:#6b7280; }

  .sv-empty { text-align:center; padding:48px 20px; color:var(--text-dim); font-size:13px; }

  /* ══ SERVIÇO DETALHE PAGE ══ */
  #view-servico-detalhe { display:none; flex-direction:column; height:100%; overflow:hidden; }
  #view-servico-detalhe.active { display:flex; }

  .svd-topbar { display:flex; align-items:center; gap:12px; padding:12px 24px; border-bottom:1px solid var(--glass-border); background:rgba(8,12,24,.92); flex-shrink:0; }
  .svd-breadcrumb { font-size:13px; color:var(--text-dim); display:flex; align-items:center; gap:6px; flex:1; }
  .svd-breadcrumb a { color:var(--blue-light); text-decoration:none; cursor:pointer; font-weight:500; }
  .svd-breadcrumb a:hover { color:var(--text); }
  .svd-breadcrumb .svd-sep { color:var(--text-dim); opacity:.5; }
  .svd-breadcrumb .svd-current { color:var(--text); font-weight:600; }

  .svd-body { flex:1; overflow-y:auto; padding:24px 28px 100px; display:flex; flex-direction:column; gap:0; max-width:900px; }
  @media (max-width:640px) { .svd-body { padding:20px 16px 100px; } }

  .svd-header { margin-bottom:20px; }
  .svd-header-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .svd-header h1 { font-size:22px; font-weight:800; color:var(--text); margin:0; line-height:1.2; letter-spacing:-.02em; }
  .svd-subtitle { font-size:13px; color:var(--text-dim); margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .svd-actions { display:flex; gap:8px; margin-left:auto; flex-shrink:0; }

  .svd-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:8px; margin-bottom:24px; }
  .svd-kpi { text-align:center; padding:14px 8px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
  .svd-kpi-val { font-size:20px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; line-height:1.1; }
  .svd-kpi-val.sk-green { color:#4ade80; }
  .svd-kpi-val.sk-amber { color:#f59e0b; }
  .svd-kpi-val.sk-red   { color:#ef4444; }
  .svd-kpi-val.sk-blue  { color:var(--blue-bright); }
  .svd-kpi-lbl { font-size:9px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }

  .svd-progress { margin-bottom:24px; }
  .svd-progress-bar { height:6px; border-radius:6px; background:rgba(255,255,255,.06); overflow:hidden; }
  .svd-progress-fill { height:100%; border-radius:6px; transition:width .5s; }
  .svd-progress-labels { display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim); margin-top:4px; }

  .svd-section { margin-bottom:24px; }
  .svd-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-bottom:10px; padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.06); }

  .svd-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  @media (max-width:640px) { .svd-info-grid { grid-template-columns:1fr; } }
  .svd-info-list { display:flex; flex-direction:column; gap:6px; }
  .svd-info-item { display:flex; align-items:baseline; gap:8px; font-size:13px; }
  .svd-info-label { color:var(--text-dim); font-size:11px; font-weight:500; min-width:85px; flex-shrink:0; }
  .svd-info-val { color:var(--text); font-weight:500; }

  .svd-espec { padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); margin-bottom:6px; }
  .svd-espec-title { font-size:12px; font-weight:700; color:var(--text); }
  .svd-espec-meta { font-size:11px; color:var(--text-dim); margin-top:2px; }

  .svd-mat-item { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:12px; color:var(--text-sub); border-bottom:1px solid rgba(255,255,255,.04); }
  .svd-mat-item:last-child { border-bottom:none; }
  .svd-mat-nome { flex:1; font-weight:500; color:var(--text); }
  .svd-mat-qty { color:var(--text-dim); }

  .svd-gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:8px; }
  .svd-gallery-item { aspect-ratio:1; border-radius:8px; overflow:hidden; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); cursor:pointer; }
  .svd-gallery-item img { width:100%; height:100%; object-fit:cover; }
  .svd-gallery-empty { font-size:12px; color:var(--text-dim); text-align:center; padding:16px; }

  .svd-alerts { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px; }
  .svd-alert { font-size:11px; font-weight:600; padding:5px 10px; border-radius:8px; display:flex; align-items:center; gap:5px; }
  .svd-alert.sa-red { background:rgba(239,68,68,.1); color:#f87171; border:1px solid rgba(239,68,68,.2); }
  .svd-alert.sa-amber { background:rgba(245,158,11,.1); color:#f59e0b; border:1px solid rgba(245,158,11,.2); }
  .svd-alert.sa-green { background:rgba(34,197,94,.1); color:#4ade80; border:1px solid rgba(34,197,94,.2); }

  .svd-contato { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-sub); padding:4px 0; }
  .svd-contato-role { font-size:10px; color:var(--text-dim); font-weight:600; text-transform:uppercase; letter-spacing:.04em; min-width:80px; }
  .svd-contato-name { font-weight:600; color:var(--text); }

  .svd-tl-item { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.04); }
  .svd-tl-item:last-child { border-bottom:none; }
  .svd-tl-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:4px; background:var(--blue-bright); }
  .svd-tl-text { font-size:12px; color:var(--text-sub); }
  .svd-tl-meta { font-size:10px; color:var(--text-dim); margin-top:2px; }

  .svd-footer { display:flex; flex-direction:column; gap:12px; padding-top:8px; border-top:1px solid rgba(255,255,255,.06); margin-top:8px; }
  .svd-footer-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

  /* ══ CLIENTE DETALHE PAGE ══ */
  #view-cliente-detalhe { display:none; flex-direction:column; height:100%; overflow:hidden; }
  #view-cliente-detalhe.active { display:flex; }

  .cld-topbar { display:flex; align-items:center; gap:12px; padding:12px 24px; border-bottom:1px solid var(--glass-border); background:rgba(8,12,24,.92); flex-shrink:0; }
  .cld-breadcrumb { font-size:13px; color:var(--text-dim); display:flex; align-items:center; gap:6px; flex:1; }
  .cld-breadcrumb a { color:var(--blue-light); text-decoration:none; cursor:pointer; font-weight:500; }
  .cld-breadcrumb a:hover { color:var(--text); }
  .cld-breadcrumb .cld-sep { color:var(--text-dim); opacity:.5; }
  .cld-breadcrumb .cld-current { color:var(--text); font-weight:600; }

  .cld-body { flex:1; overflow-y:auto; padding:24px 28px 100px; display:flex; flex-direction:column; gap:0; max-width:960px; }
  @media (max-width:640px) { .cld-body { padding:20px 16px 100px; } }

  .cld-header { margin-bottom:20px; }
  .cld-header-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .cld-header h1 { font-size:22px; font-weight:800; color:var(--text); margin:0; line-height:1.2; }
  .cld-tipo-badge { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 10px; border-radius:20px; background:rgba(74,127,212,.15); color:var(--blue-bright); }
  .cld-subtitle { font-size:12px; color:var(--text-dim); margin-top:5px; display:flex; flex-wrap:wrap; gap:12px; }
  .cld-subtitle span { display:inline-flex; align-items:center; gap:4px; }
  .cld-actions { display:flex; gap:8px; margin-left:auto; flex-shrink:0; }

  .cld-logo { width:56px; height:56px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
  .cld-logo img { width:100%; height:100%; object-fit:cover; }
  .cld-logo-placeholder { font-size:22px; font-weight:800; color:var(--text-dim); }

  .cld-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; margin-bottom:24px; }
  .cld-kpi { text-align:center; padding:14px 8px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
  .cld-kpi-val { font-size:20px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; line-height:1.1; }
  .cld-kpi-val.ck-green { color:#4ade80; }
  .cld-kpi-val.ck-amber { color:#f59e0b; }
  .cld-kpi-val.ck-red   { color:#ef4444; }
  .cld-kpi-val.ck-blue  { color:var(--blue-bright); }
  .cld-kpi-lbl { font-size:9px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }

  .cld-section { margin-bottom:24px; }
  .cld-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-bottom:10px; padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.06); }

  .cld-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
  @media (max-width:640px) { .cld-info-grid { grid-template-columns:1fr; } }
  .cld-info-list { display:flex; flex-direction:column; gap:6px; }
  .cld-info-item { display:flex; align-items:baseline; gap:8px; font-size:13px; }
  .cld-info-label { color:var(--text-dim); font-size:11px; font-weight:500; min-width:80px; flex-shrink:0; }
  .cld-info-val { color:var(--text); font-weight:500; }

  .cld-obra-card { padding:12px 14px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); cursor:pointer; transition:border-color .15s; margin-bottom:6px; display:flex; align-items:center; gap:12px; }
  .cld-obra-card:hover { border-color:rgba(74,127,212,.3); }
  .cld-obra-info { flex:1; min-width:0; }
  .cld-obra-nome { font-size:13px; font-weight:700; color:var(--text); }
  .cld-obra-meta { font-size:11px; color:var(--text-dim); margin-top:2px; }
  .cld-obra-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .cld-obra-pct { font-size:14px; font-weight:800; font-variant-numeric:tabular-nums; }
  .cld-obra-bar { width:60px; height:4px; border-radius:4px; background:rgba(255,255,255,.06); overflow:hidden; }
  .cld-obra-bar-fill { height:100%; border-radius:4px; background:var(--blue-bright); }

  .cld-contato { padding:8px 0; border-bottom:1px solid rgba(255,255,255,.04); display:flex; align-items:center; gap:10px; font-size:12px; }
  .cld-contato:last-child { border-bottom:none; }
  .cld-contato-nome { font-weight:600; color:var(--text); }
  .cld-contato-cargo { font-size:10px; color:var(--text-dim); text-transform:uppercase; font-weight:600; letter-spacing:.04em; }
  .cld-contato-info { color:var(--text-dim); }

  .cld-alerts { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
  .cld-alert { font-size:11px; font-weight:600; padding:5px 10px; border-radius:8px; }
  .cld-alert.ca-red { background:rgba(239,68,68,.1); color:#f87171; border:1px solid rgba(239,68,68,.2); }
  .cld-alert.ca-amber { background:rgba(245,158,11,.1); color:#f59e0b; border:1px solid rgba(245,158,11,.2); }
  .cld-alert.ca-green { background:rgba(34,197,94,.1); color:#4ade80; border:1px solid rgba(34,197,94,.2); }

  .cld-footer { display:flex; gap:8px; flex-wrap:wrap; padding-top:8px; border-top:1px solid rgba(255,255,255,.06); margin-top:8px; }

  /* ══ COLABORADORES ══ */
  #view-colaboradores { display:none; flex-direction:column; height:100%; overflow:hidden; }
  #view-colaboradores.active { display:flex; }

  /* ══ ORÇAMENTO ══ */
  #view-orcamento { display:none; flex-direction:column; height:100%; overflow:hidden; }
  #view-orcamento.active { display:flex; }

  :root { --orc:#00d4aa; --orc-dim:rgba(0,212,170,.15); --orc-border:rgba(0,212,170,.25); }

  .orc-topbar { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--glass-border); background:rgba(8,12,24,.92); flex-shrink:0; position:relative; z-index:1; }
  .orc-topbar-title { font-size:17px; font-weight:700; color:var(--text); flex:1; }
  .btn-orc-novo { display:flex; align-items:center; gap:7px; padding:8px 16px; border-radius:10px; background:var(--orc-dim); border:1px solid var(--orc-border); color:var(--orc); font-size:13px; font-weight:600; cursor:pointer; transition:background .15s,border-color .15s; }
  .btn-orc-novo:hover { background:rgba(0,212,170,.25); border-color:rgba(0,212,170,.5); }
  .btn-orc-hist { display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; background:var(--glass); border:1px solid var(--glass-border); color:var(--text-sub); font-size:12px; font-weight:600; cursor:pointer; transition:background .15s; }
  .btn-orc-hist:hover { background:rgba(255,255,255,.06); }

  .orc-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 0 120px; position:relative; z-index:1; }

  /* IA panel */
  .orc-ia-panel { margin:16px 20px 0; background:rgba(0,212,170,.06); border:1px solid var(--orc-border); border-radius:16px; overflow:hidden; transition:all .25s; }
  .orc-ia-header { display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; user-select:none; }
  .orc-ia-icon { width:32px; height:32px; border-radius:10px; background:var(--orc-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .orc-ia-icon svg { width:16px; height:16px; stroke:var(--orc); }
  .orc-ia-title { font-size:14px; font-weight:700; color:var(--orc); flex:1; }
  .orc-ia-badge { font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; background:var(--orc-dim); color:var(--orc); text-transform:uppercase; letter-spacing:.5px; }
  .orc-ia-chevron { width:16px; height:16px; stroke:var(--text-dim); transition:transform .2s; }
  .orc-ia-chevron.open { transform:rotate(180deg); }
  .orc-ia-body { padding:0 16px 16px; display:none; }
  .orc-ia-body.open { display:block; }
  .orc-ia-desc { font-size:12px; color:var(--text-dim); margin-bottom:12px; line-height:1.5; }
  .orc-ia-textarea { width:100%; min-height:72px; background:rgba(0,0,0,.25); border:1px solid var(--glass-border); border-radius:10px; padding:10px 14px; color:var(--text); font-size:13px; font-family:var(--font); resize:none; outline:none; transition:border-color .2s; box-sizing:border-box; line-height:1.5; }
  .orc-ia-textarea:focus { border-color:var(--orc-border); }
  .orc-ia-textarea::placeholder { color:var(--text-dim); }
  .orc-ia-actions { display:flex; gap:8px; margin-top:10px; }
  .btn-orc-ia-interpretar { flex:1; padding:10px; border-radius:10px; background:var(--orc-dim); border:1px solid var(--orc-border); color:var(--orc); font-size:13px; font-weight:700; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:7px; }
  .btn-orc-ia-interpretar:hover { background:rgba(0,212,170,.22); }
  .btn-orc-ia-interpretar:disabled { opacity:.5; cursor:not-allowed; }
  .btn-orc-ia-interpretar svg { width:14px; height:14px; }

  /* Seções do formulário */
  .orc-section { margin:16px 20px 0; background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; overflow:hidden; }
  .orc-section-header { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--glass-border); }
  .orc-section-num { width:24px; height:24px; border-radius:50%; background:var(--orc-dim); border:1px solid var(--orc-border); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--orc); flex-shrink:0; }
  .orc-section-title { font-size:13px; font-weight:700; color:var(--text); flex:1; }
  .orc-section-hint { font-size:11px; color:var(--text-dim); }
  .orc-section-body { padding:16px; display:flex; flex-direction:column; gap:14px; }

  .orc-field { display:flex; flex-direction:column; gap:6px; }
  .orc-label { font-size:12px; font-weight:600; color:var(--text-sub); display:flex; align-items:center; justify-content:space-between; }
  .orc-label-req { color:var(--orc); font-size:10px; }
  .orc-input { background:rgba(0,0,0,.2); border:1px solid var(--glass-border); border-radius:10px; padding:10px 14px; color:var(--text); font-size:14px; font-family:var(--font); outline:none; transition:border-color .2s,box-shadow .2s; width:100%; box-sizing:border-box; }
  .orc-input:focus { border-color:var(--orc-border); box-shadow:0 0 0 3px rgba(0,212,170,.08); }
  .orc-input::placeholder { color:var(--text-dim); }
  .orc-select { background:rgba(0,0,0,.2); border:1px solid var(--glass-border); border-radius:10px; padding:10px 14px; color:var(--text); font-size:14px; font-family:var(--font); outline:none; transition:border-color .2s,box-shadow .2s; width:100%; box-sizing:border-box; appearance:none; cursor:pointer; }
  .orc-select:focus { border-color:var(--orc-border); box-shadow:0 0 0 3px rgba(0,212,170,.08); }
  option { background:#111827; }
  .orc-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .orc-hint { font-size:11px; color:var(--text-dim); padding:6px 10px; background:rgba(255,255,255,.03); border-radius:8px; }
  .orc-hint strong { color:var(--orc); }

  /* Estimativa rápida inline */
  .orc-quick-est { display:none; margin-top:4px; padding:10px 14px; background:rgba(0,212,170,.07); border:1px solid var(--orc-border); border-radius:10px; }
  .orc-quick-est.show { display:flex; align-items:center; gap:12px; animation:orcFadeIn .25s ease; }
  .orc-quick-est-item { display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; }
  .orc-quick-est-val { font-size:18px; font-weight:800; color:var(--orc); line-height:1; }
  .orc-quick-est-lbl { font-size:10px; color:var(--text-dim); text-align:center; }
  .orc-quick-est-sep { width:1px; height:32px; background:var(--orc-border); }

  /* Resultado final */
  .orc-result-card { margin:16px 20px 0; border-radius:16px; overflow:hidden; opacity:0; transform:translateY(12px); transition:opacity .4s ease,transform .4s ease; pointer-events:none; }
  .orc-result-card.show { opacity:1; transform:translateY(0); pointer-events:auto; }
  .orc-result-top { padding:20px 20px 16px; background:linear-gradient(135deg,rgba(0,212,170,.12) 0%,rgba(0,212,170,.04) 100%); border:1px solid var(--orc-border); border-radius:16px 16px 0 0; }
  .orc-semaforo-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  .orc-semaforo-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; transition:background .5s,box-shadow .5s; }
  .orc-semaforo-dot.verde  { background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.5); }
  .orc-semaforo-dot.amarelo{ background:#eab308; box-shadow:0 0 8px rgba(234,179,8,.5); }
  .orc-semaforo-dot.vermelho{ background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,.5); }
  .orc-semaforo-label { font-size:12px; font-weight:700; flex:1; transition:color .5s; }
  .orc-semaforo-label.verde  { color:#22c55e; }
  .orc-semaforo-label.amarelo{ color:#eab308; }
  .orc-semaforo-label.vermelho{ color:#ef4444; }
  .orc-margem-val { font-size:28px; font-weight:800; transition:color .5s; }
  .orc-margem-val.verde  { color:#22c55e; }
  .orc-margem-val.amarelo{ color:#eab308; }
  .orc-margem-val.vermelho{ color:#ef4444; }
  .orc-price-row { display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
  .orc-price-big { font-size:26px; font-weight:800; color:var(--text); }
  .orc-price-unit { font-size:13px; color:var(--text-dim); }
  .orc-price-total { font-size:13px; color:var(--text-sub); }

  .orc-breakdown { padding:16px 20px; background:rgba(8,12,24,.7); border:1px solid var(--orc-border); border-top:none; }
  .orc-bd-title { font-size:11px; font-weight:700; color:var(--text-sub); text-transform:uppercase; letter-spacing:.5px; margin-bottom:12px; }
  .orc-bd-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.04); }
  .orc-bd-row:last-child { border-bottom:none; }
  .orc-bd-label { font-size:12px; color:var(--text-dim); }
  .orc-bd-val { font-size:13px; font-weight:600; color:var(--text-sub); }
  .orc-bd-total { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:rgba(0,212,170,.06); border:1px solid var(--orc-border); border-top:none; }
  .orc-bd-total-label { font-size:12px; font-weight:700; color:var(--text-sub); }
  .orc-bd-total-val { font-size:16px; font-weight:800; color:var(--orc); }

  .orc-result-actions { display:flex; gap:8px; padding:14px 20px; background:rgba(8,12,24,.7); border:1px solid var(--orc-border); border-top:none; border-radius:0 0 16px 16px; }
  .btn-orc-save { flex:1; padding:11px; border-radius:10px; background:var(--orc-dim); border:1px solid var(--orc-border); color:var(--orc); font-size:13px; font-weight:700; cursor:pointer; transition:all .15s; }
  .btn-orc-save:hover { background:rgba(0,212,170,.22); }
  .btn-orc-revisar { flex:1; padding:11px; border-radius:10px; background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.3); color:#c4b5fd; font-size:13px; font-weight:700; cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:6px; }
  .btn-orc-revisar:hover { background:rgba(139,92,246,.22); }
  .btn-orc-revisar:disabled { opacity:.5; cursor:not-allowed; }

  /* Histórico */
  .orc-hist-list { margin:16px 20px 0; display:flex; flex-direction:column; gap:10px; }
  .orc-hist-card { background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:14px 16px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:border-color .15s,background .15s; }
  .orc-hist-card:hover { border-color:var(--orc-border); background:rgba(0,212,170,.04); }
  .orc-hist-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .orc-hist-info { flex:1; min-width:0; }
  .orc-hist-titulo { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .orc-hist-sub { font-size:11px; color:var(--text-dim); margin-top:2px; }
  .orc-hist-preco { font-size:14px; font-weight:800; color:var(--orc); }

  /* Campo preço manual */
  .orc-preco-manual-wrap { margin:16px 20px 0; background:rgba(139,92,246,.06); border:1px solid rgba(139,92,246,.2); border-radius:14px; padding:14px 16px; }
  .orc-preco-manual-label { font-size:11px; font-weight:700; color:#c4b5fd; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
  .orc-preco-manual-desc { font-size:11px; color:var(--text-dim); margin-bottom:10px; line-height:1.4; }

  /* Revisão IA */
  .orc-ia-review { margin:12px 20px 0; background:rgba(139,92,246,.06); border:1px solid rgba(139,92,246,.2); border-radius:14px; padding:14px 16px; display:none; }
  .orc-ia-review.show { display:block; animation:orcFadeIn .3s ease; }
  .orc-ia-review-title { font-size:12px; font-weight:700; color:#c4b5fd; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
  .orc-ia-review-body { font-size:13px; color:var(--text-sub); line-height:1.6; white-space:pre-wrap; }

  @keyframes orcFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
  @keyframes orcCountUp { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }

  .colab-topbar { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--glass-border); background:rgba(8,12,24,.92); flex-shrink:0; position:relative; z-index:1; }
  .colab-topbar-title { font-size:17px; font-weight:700; color:var(--text); flex:1; }
  .btn-add-colab { display:flex; align-items:center; gap:7px; padding:8px 16px; border-radius:10px; background:rgba(139,92,246,.15); border:1px solid rgba(139,92,246,.3); color:#c4b5fd; font-size:13px; font-weight:600; cursor:pointer; transition:background .15s,border-color .15s; }
  .btn-add-colab:hover { background:rgba(139,92,246,.25); border-color:rgba(139,92,246,.5); }
  .btn-add-colab svg { width:14px; height:14px; }

  .colab-search-bar { padding:12px 20px; border-bottom:1px solid var(--glass-border); flex-shrink:0; position:relative; z-index:1; }
  .colab-search-input { width:100%; background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; padding:10px 16px; color:var(--text); font-size:14px; font-family:var(--font); outline:none; transition:border-color .2s; box-sizing:border-box; }
  .colab-search-input::placeholder { color:var(--text-dim); }
  .colab-search-input:focus { border-color:rgba(139,92,246,.5); }
  .colab-cargo-chips { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
  .colab-cargo-chip { background:transparent; border:1px solid var(--glass-border); border-radius:20px; color:var(--text-dim); font-size:11px; font-family:var(--font); font-weight:500; padding:3px 10px; cursor:pointer; transition:all .15s; }
  .colab-cargo-chip:hover { border-color:rgba(139,92,246,.4); color:var(--text); }
  .colab-cargo-chip.active { background:rgba(139,92,246,.18); border-color:rgba(139,92,246,.5); color:#c4b5fd; }

  .colab-stats { display:flex; gap:1px; flex-shrink:0; border-bottom:1px solid var(--glass-border); background:var(--glass-border); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; position:relative; z-index:1; }
  .colab-stats::-webkit-scrollbar { display:none; }
  .colab-stat { flex:1; min-width:90px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px 8px; background:rgba(8,12,24,.85); font-family:var(--font); }
  .colab-stat-val { font-size:22px; font-weight:800; color:var(--text); line-height:1; }
  .colab-stat-lbl { font-size:10px; color:var(--text-sub); text-transform:uppercase; letter-spacing:.5px; margin-top:3px; }
  .colab-stat.s-ativo .colab-stat-val { color:#22c55e; }
  .colab-stat.s-inativo .colab-stat-val { color:#ef4444; }

  .colab-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 20px; position:relative; z-index:1; }
  .colab-list { display:flex; flex-direction:column; gap:0; }
  .colab-row { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--glass-border); cursor:pointer; transition:all .12s; }
  .colab-row:hover { background:rgba(255,255,255,.02); border-radius:10px; padding:12px 10px; margin:0 -10px; }
  .colab-row:last-child { border-bottom:none; }

  .colab-avatar { width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff; letter-spacing:-.5px; }
  .colab-avatar.cargo-aplsr { background:linear-gradient(135deg,#7c3aed,#8b5cf6); }
  .colab-avatar.cargo-aplpl { background:linear-gradient(135deg,#1d4ed8,#3b82f6); }
  .colab-avatar.cargo-aux   { background:linear-gradient(135deg,#047857,#22c55e); }
  .colab-avatar.cargo-sup   { background:linear-gradient(135deg,#b45309,#f59e0b); }
  .colab-avatar.cargo-adm   { background:linear-gradient(135deg,#374151,#6b7280); }

  .colab-row-main { flex:1; min-width:0; }
  .colab-row-nome { font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .colab-row-sub  { display:flex; align-items:center; gap:6px; margin-top:3px; flex-wrap:wrap; }

  .colab-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; }
  .colab-badge.cargo-aplsr { background:rgba(139,92,246,.15); border:1px solid rgba(139,92,246,.3); color:#c4b5fd; }
  .colab-badge.cargo-aplpl { background:rgba(59,130,246,.15);  border:1px solid rgba(59,130,246,.3); color:#93c5fd; }
  .colab-badge.cargo-aux   { background:rgba(34,197,94,.12);   border:1px solid rgba(34,197,94,.25); color:#86efac; }
  .colab-badge.cargo-sup   { background:rgba(245,158,11,.12);  border:1px solid rgba(245,158,11,.3); color:#fcd34d; }
  .colab-badge.cargo-adm   { background:rgba(107,114,128,.12); border:1px solid rgba(107,114,128,.3);color:#9ca3af; }

  .colab-row-tel { font-size:11px; color:var(--text-dim); }
  .colab-row-right { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
  .colab-row-obras { font-size:12px; color:var(--text-sub); }
  .colab-row-obras span { color:var(--text); font-weight:700; }
  .colab-row-status { width:8px; height:8px; border-radius:50%; }
  .colab-row-status.ativo   { background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,.5); }
  .colab-row-status.inativo { background:#ef4444; }

  .colab-empty { text-align:center; padding:60px 20px; color:var(--text-dim); }
  .colab-empty svg { width:48px; height:48px; opacity:.3; margin-bottom:12px; display:block; margin-left:auto; margin-right:auto; }
  .colab-empty p { font-size:14px; margin:0 0 8px; }
  .colab-empty small { font-size:12px; }

  /* Modal colaborador */
  .colab-modal-overlay { display:none; position:fixed; inset:0; z-index:900; background:rgba(0,0,0,.7); align-items:flex-end; justify-content:center; }
  .colab-modal-overlay.open { display:flex; }
  .colab-modal-box { background:#0d1322; border:1px solid var(--glass-border); border-radius:24px 24px 0 0; width:100%; max-width:540px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 -8px 40px rgba(0,0,0,.5); }
  .colab-modal-header { display:flex; align-items:center; padding:18px 20px; border-bottom:1px solid var(--glass-border); flex-shrink:0; }
  .colab-modal-title { flex:1; font-size:16px; font-weight:700; color:var(--text); }
  .colab-modal-close { width:30px; height:30px; border-radius:50%; background:var(--glass); border:none; color:var(--text-dim); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .colab-modal-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .colab-modal-tabs { display:flex; border-bottom:1px solid var(--glass-border); flex-shrink:0; background:rgba(8,12,24,.8); }
  .colab-modal-tab { flex:1; padding:12px 8px; text-align:center; font-size:12px; font-weight:600; color:var(--text-dim); border:none; background:transparent; cursor:pointer; font-family:var(--font); border-bottom:2px solid transparent; transition:all .15s; }
  .colab-modal-tab.active { color:#c4b5fd; border-bottom-color:#8b5cf6; }
  .colab-tab-content { display:none; padding:20px; }
  .colab-tab-content.active { display:block; }

  .colab-form-row { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
  .colab-form-label { font-size:11px; font-weight:600; color:var(--text-sub); text-transform:uppercase; letter-spacing:.5px; }
  .colab-form-input, .colab-form-select { background:var(--glass); border:1px solid var(--glass-border); border-radius:10px; padding:10px 14px; color:var(--text); font-size:14px; font-family:var(--font); outline:none; transition:border-color .2s; width:100%; box-sizing:border-box; }
  .colab-form-input::placeholder { color:var(--text-dim); }
  .colab-form-input:focus, .colab-form-select:focus { border-color:rgba(139,92,246,.5); }
  .colab-form-select { cursor:pointer; }
  .colab-form-select option { background:#0d1322; }
  .colab-form-2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .colab-modal-footer { padding:16px 20px; border-top:1px solid var(--glass-border); display:flex; gap:10px; flex-shrink:0; }
  .btn-colab-save { flex:1; padding:13px; border-radius:12px; background:linear-gradient(135deg,rgba(139,92,246,.6),rgba(99,57,210,.8)); border:1px solid rgba(139,92,246,.4); color:#fff; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font); transition:opacity .15s; }
  .btn-colab-save:hover { opacity:.85; }
  .btn-colab-cancel { padding:13px 20px; border-radius:12px; background:var(--glass); border:1px solid var(--glass-border); color:var(--text-sub); font-size:14px; cursor:pointer; font-family:var(--font); }

  .colab-detail-header { display:flex; align-items:center; gap:16px; padding:20px; border-bottom:1px solid var(--glass-border); }
  .colab-detail-nome { font-size:18px; font-weight:700; color:var(--text); }
  .colab-detail-cargo-row { display:flex; align-items:center; gap:8px; margin-top:5px; }
  .colab-info-section { padding:20px; }
  .colab-info-row { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.04); }
  .colab-info-row:last-child { border-bottom:none; }
  .colab-info-label { font-size:11px; color:var(--text-dim); min-width:100px; flex-shrink:0; padding-top:1px; }
  .colab-info-value { font-size:13px; color:var(--text); font-weight:500; }
  .colab-obra-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.04); }
  .colab-obra-item:last-child { border-bottom:none; }
  .colab-obra-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .colab-obra-nome { font-size:13px; font-weight:600; color:var(--text); flex:1; }
  .colab-obra-fase { font-size:11px; color:var(--text-dim); }
  .colab-action-row { display:flex; gap:10px; padding:20px; }
  .btn-colab-edit { flex:1; padding:11px; border-radius:10px; background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.25); color:#c4b5fd; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font); }
  .btn-colab-toggle { flex:1; padding:11px; border-radius:10px; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25); color:#86efac; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font); }
  .btn-colab-toggle.desativar { background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.25); color:#fcd34d; }
  .btn-colab-del { padding:11px 14px; border-radius:10px; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); color:#fca5a5; font-size:13px; cursor:pointer; font-family:var(--font); }

  /* Calculadora de composição */
  .calc-modal-overlay { display:none; position:fixed; inset:0; z-index:950; background:rgba(0,0,0,.75); align-items:flex-end; justify-content:center; }
  .calc-modal-overlay.open { display:flex; }
  .calc-modal-box { background:#0d1322; border:1px solid var(--glass-border); border-radius:24px 24px 0 0; width:100%; max-width:540px; max-height:92vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 -8px 40px rgba(0,0,0,.5); }
  .calc-header { display:flex; align-items:center; padding:18px 20px; border-bottom:1px solid var(--glass-border); flex-shrink:0; }
  .calc-header-title { flex:1; font-size:16px; font-weight:700; color:var(--text); }
  .calc-close { width:30px; height:30px; border-radius:50%; background:var(--glass); border:none; color:var(--text-dim); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .calc-body { flex:1; overflow-y:auto; padding:20px; -webkit-overflow-scrolling:touch; }
  .calc-row { margin-bottom:16px; }
  .calc-label { font-size:11px; font-weight:600; color:var(--text-sub); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; display:block; }
  .calc-select, .calc-input { width:100%; background:var(--glass); border:1px solid var(--glass-border); border-radius:10px; padding:10px 14px; color:var(--text); font-size:14px; font-family:var(--font); outline:none; transition:border-color .2s; box-sizing:border-box; }
  .calc-select:focus, .calc-input:focus { border-color:rgba(139,92,246,.5); }
  .calc-select option { background:#0d1322; }
  .calc-ajustes { display:flex; flex-direction:column; gap:8px; }
  .calc-ajuste-item { display:flex; align-items:center; gap:10px; }
  .calc-ajuste-item input[type=checkbox] { accent-color:#8b5cf6; width:16px; height:16px; flex-shrink:0; }
  .calc-ajuste-label { font-size:13px; color:var(--text); flex:1; }
  .calc-ajuste-val { font-size:12px; font-weight:600; }
  .calc-ajuste-val.pos { color:#22c55e; }
  .calc-ajuste-val.neg { color:#ef4444; }

  .calc-resultado { margin-top:20px; background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.2); border-radius:14px; padding:16px; }
  .calc-res-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
  .calc-res-item { display:flex; flex-direction:column; gap:3px; }
  .calc-res-val { font-size:26px; font-weight:800; color:#c4b5fd; line-height:1; }
  .calc-res-lbl { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; }
  .calc-res-composicao { font-size:12px; color:var(--text-sub); padding-top:10px; border-top:1px solid rgba(139,92,246,.15); }
  .calc-fonte-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.2); border-radius:20px; padding:3px 10px; font-size:10px; color:#fcd34d; margin-top:8px; }
  .btn-calc-usar { width:100%; padding:12px; border-radius:10px; background:rgba(139,92,246,.2); border:1px solid rgba(139,92,246,.3); color:#c4b5fd; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font); margin-top:12px; display:none; }
  .btn-calc-usar.visible { display:block; }
  .btn-calc-calcular { width:100%; padding:13px; border-radius:12px; background:linear-gradient(135deg,rgba(139,92,246,.6),rgba(99,57,210,.8)); border:1px solid rgba(139,92,246,.4); color:#fff; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font); margin-top:4px; }
  .btn-calc-ref { display:flex; align-items:center; gap:6px; background:transparent; border:none; color:#c4b5fd; font-size:12px; cursor:pointer; font-family:var(--font); padding:0; }
  .btn-calc-ref svg { width:12px; height:12px; }

  .clientes-topbar {
    display:flex; align-items:center; gap:12px;
    padding:16px 20px; border-bottom:1px solid var(--glass-border);
    background:rgba(8,12,24,.92); flex-shrink:0;
  }
  .clientes-topbar-title { font-size:17px; font-weight:700; color:var(--text); flex:1; }

  .btn-add-cliente {
    display:flex; align-items:center; gap:7px;
    padding:8px 16px; border-radius:10px;
    background:rgba(74,127,212,.15); border:1px solid rgba(74,127,212,.3);
    color:var(--blue-bright); font-size:13px; font-weight:600;
    cursor:pointer; transition:background .15s, border-color .15s;
  }
  .btn-add-cliente:hover { background:rgba(74,127,212,.25); border-color:rgba(74,127,212,.5); }
  .btn-add-cliente svg { width:14px; height:14px; }

  .cli-view-toggle {
    display:flex; align-items:center; gap:2px;
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:9px; padding:3px;
  }
  .cli-view-btn {
    display:flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:6px; background:transparent;
    border:none; cursor:pointer; color:var(--text-dim); transition:all .15s;
  }
  .cli-view-btn svg { width:15px; height:15px; }
  .cli-view-btn:hover { color:var(--text); }
  .cli-view-btn.active { background:rgba(74,127,212,.2); color:var(--blue-light); }

  /* ── Lista view ── */
  .clientes-grid.view-list {
    display:flex; flex-direction:column; gap:0;
    grid-template-columns:unset;
  }
  .cli-list-row {
    display:flex; align-items:center; gap:14px;
    padding:10px 16px; border-bottom:1px solid var(--glass-border);
    cursor:pointer; transition:background .12s;
    border-left:3px solid transparent;
  }
  .cli-list-row:hover { background:rgba(255,255,255,.03); }
  .cli-list-row:last-child { border-bottom:none; }
  .cli-list-row.alerta   { border-left-color:#ef4444; background:rgba(239,68,68,.04); }
  .cli-list-row.alerta:hover { background:rgba(239,68,68,.08); }

  /* Semáforo — coluna esquerda */
  .cli-list-sem-dot {
    width:10px; height:10px; border-radius:50%; flex-shrink:0;
  }

  /* Avatar */
  .cli-list-avatar {
    width:32px; height:32px; border-radius:8px;
    background:var(--glass); border:1px solid var(--glass-border);
    font-size:13px; font-weight:700; color:var(--blue-light);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }

  /* Identidade */
  .cli-list-main { flex:1; min-width:0; }
  .cli-list-nome { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cli-list-sub  { display:flex; align-items:center; gap:6px; margin-top:2px; flex-wrap:wrap; }
  .cli-list-tipo { font-size:10px; font-weight:600; padding:1px 6px; border-radius:20px; background:rgba(74,127,212,.1); border:1px solid rgba(74,127,212,.18); color:var(--blue-light); white-space:nowrap; }
  .cli-list-local{ font-size:11px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* Coluna de obras */
  .cli-list-ops { display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .cli-list-op  { display:flex; align-items:center; gap:4px; }
  .cli-list-op .n { font-size:13px; font-weight:700; }
  .cli-list-op .l { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.3px; }
  .cli-list-op.parada .n { color:#ef4444; }
  .cli-list-op.ativa  .n { color:#22c55e; }
  .cli-list-op.proxima .n { color:#3b82f6; }

  /* Carteira */
  .cli-list-carteira {
    font-size:13px; font-weight:700; color:#22c55e;
    min-width:80px; text-align:right; flex-shrink:0;
  }
  .cli-list-carteira.vazio { color:var(--text-dim); font-weight:400; font-size:12px; }

  .clientes-search-bar {
    padding:12px 20px; border-bottom:1px solid var(--glass-border); flex-shrink:0;
  }
  .clientes-search-input {
    width:100%; background:var(--glass); border:1px solid var(--glass-border);
    border-radius:12px; padding:10px 16px; color:var(--text); font-size:14px;
    font-family:var(--font); outline:none; transition:border-color .2s;
  }
  .clientes-search-input::placeholder { color:var(--text-dim); }
  .clientes-search-input:focus { border-color:var(--blue-mid); }

  .cli-tipo-chips {
    display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;
  }
  .cli-tipo-chip {
    background:transparent; border:1px solid var(--glass-border); border-radius:20px;
    color:var(--text-dim); font-size:11px; font-family:var(--font); font-weight:500;
    padding:3px 10px; cursor:pointer; transition:all .15s; letter-spacing:.02em;
  }
  .cli-tipo-chip:hover { border-color:var(--blue-mid); color:var(--text); }
  .cli-tipo-chip.active {
    background:rgba(74,127,212,.18); border-color:var(--blue-mid);
    color:var(--blue-light);
  }

  .clientes-stats {
    display:flex; gap:1px; flex-shrink:0;
    border-bottom:1px solid var(--glass-border); background:var(--glass-border);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .clientes-stats::-webkit-scrollbar { display:none; }
  .clientes-stat {
    flex:1; min-width:100px;
    display:flex; flex-direction:column; align-items:center;
    padding:14px 10px; background:rgba(8,12,24,.92);
    gap:3px;
  }
  .clientes-stat-val { font-size:22px; font-weight:800; color:var(--text); }
  .clientes-stat-lbl { font-size:10px; color:var(--text-sub); text-transform:uppercase; letter-spacing:.6px; white-space:nowrap; }
  .cs-ativas .clientes-stat-val { color:var(--blue-bright); }
  .cs-valor  .clientes-stat-val { color:#22c55e; }

  .clientes-body {
    flex:1; overflow-y:auto; padding:16px 20px;
    display:flex; flex-direction:column; gap:0;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:var(--glass-border) transparent;
  }

  @keyframes cli-in {
    from { opacity:0; transform:translateY(6px) scale(.98); }
    to   { opacity:1; transform:translateY(0) scale(1); }
  }
  @keyframes cli-out {
    from { opacity:1; transform:translateY(0) scale(1); }
    to   { opacity:0; transform:translateY(-4px) scale(.98); }
  }
  .clientes-grid {
    display:grid; gap:12px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  .clientes-grid.cli-animating { pointer-events:none; animation:cli-out .14s ease forwards; }
  .clientes-grid.cli-entering  { animation:cli-in  .18s ease forwards; }

  .cliente-card {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:var(--r-card); padding:18px 20px;
    cursor:pointer; transition:border-color .2s, transform .18s, box-shadow .2s;
    position:relative; overflow:hidden;
    display:flex; flex-direction:column; gap:12px;
  }
  .cliente-card::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 0 0, rgba(74,127,212,.06) 0%, transparent 70%);
    pointer-events:none;
  }
  .cliente-card:hover {
    border-color:rgba(74,127,212,.35); transform:translateY(-2px);
    box-shadow:0 8px 32px rgba(0,0,0,.3), 0 0 0 1px rgba(74,127,212,.1);
  }

  .cliente-card-head {
    display:flex; align-items:flex-start; gap:12px;
  }
  .cliente-avatar {
    width:42px; height:42px; border-radius:12px; flex-shrink:0;
    background:rgba(74,127,212,.15); border:1px solid rgba(74,127,212,.25);
    display:flex; align-items:center; justify-content:center;
    font-size:17px; font-weight:800; color:var(--blue-bright);
    text-transform:uppercase;
  }
  .cliente-info { flex:1; min-width:0; }
  .cliente-nome {
    font-size:14px; font-weight:700; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .cliente-local { font-size:12px; color:var(--text-sub); margin-top:2px; }

  .cliente-badges { display:flex; gap:6px; flex-wrap:wrap; }
  .cliente-badge {
    font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px;
    text-transform:uppercase; letter-spacing:.4px;
  }
  .cb-ativa   { background:rgba(74,127,212,.18); color:var(--blue-bright); }
  .cb-parada  { background:rgba(245,158,11,.15);  color:#fcd34d; }
  .cb-proxima { background:rgba(16,185,129,.15);  color:#6ee7b7; }
  .cb-pronto  { background:rgba(34,197,94,.1);    color:#86efac; }

  .cliente-stats-row {
    display:flex; gap:16px; border-top:1px solid var(--glass-border); padding-top:12px;
  }
  .cliente-stat-item { display:flex; flex-direction:column; gap:2px; }
  .cliente-stat-item .val { font-size:15px; font-weight:700; color:var(--text); }
  .cliente-stat-item .lbl { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; }
  .cliente-stat-item .val.green { color:#22c55e; }
  .cliente-stat-item .val.blue  { color:var(--blue-bright); }

  /* Cliente Drawer */
  .cli-drawer-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,.5);
    z-index:300; opacity:0; pointer-events:none; transition:opacity .25s;
  }
  .cli-drawer-backdrop.cd-open { opacity:1; pointer-events:auto; }

  .cli-drawer {
    position:fixed; right:0; top:0; bottom:0;
    width:min(500px,100vw);
    background:rgba(10,15,30,.97); border-left:1px solid var(--glass-border);
    display:flex; flex-direction:column; z-index:301;
    transform:translateX(100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1); overflow:hidden;
  }
  .cli-drawer.cd-open { transform:translateX(0); }

  .cli-drawer-topbar {
    display:flex; align-items:center; gap:12px;
    padding:16px 20px; border-bottom:1px solid var(--glass-border); flex-shrink:0;
  }
  .cli-drawer-title { font-size:15px; font-weight:700; color:var(--text); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cli-drawer-body { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; }

  .cli-drawer-section { display:flex; flex-direction:column; gap:8px; }
  .cli-drawer-section-title { font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.6px; padding-bottom:4px; border-bottom:1px solid var(--glass-border); }

  .cli-obra-row {
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    background:var(--glass); border:1px solid var(--glass-border); border-radius:12px;
    cursor:pointer; transition:border-color .15s;
  }
  .cli-obra-row:hover { border-color:rgba(74,127,212,.3); }
  .cli-obra-row-info { flex:1; min-width:0; }
  .cli-obra-row-nome { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cli-obra-row-sub  { font-size:11px; color:var(--text-sub); margin-top:2px; }

  /* ══ Add Cliente Wizard Modal ══ */
  .cliente-modal-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,.65);
    z-index:400; opacity:0; pointer-events:none;
    transition:opacity .2s; display:flex; align-items:center; justify-content:center;
  }
  .cliente-modal-backdrop.cm-open { opacity:1; pointer-events:auto; }
  .cliente-modal {
    background:#0c1222; border:1px solid var(--glass-border);
    border-radius:20px; width:min(520px, 94vw);
    display:flex; flex-direction:column; max-height:90vh;
    transform:scale(.95); transition:transform .2s;
  }
  .cliente-modal-backdrop.cm-open .cliente-modal { transform:scale(1); }

  /* Wizard header */
  .cm-wiz-header { padding:22px 24px 16px; flex-shrink:0; }
  .cm-wiz-title { font-size:17px; font-weight:700; color:var(--text); margin-bottom:18px; }
  .cm-wiz-steps { display:flex; align-items:center; }
  .cm-wiz-step { display:flex; flex-direction:column; align-items:center; gap:5px; }
  .cm-wiz-dot {
    width:28px; height:28px; border-radius:50%;
    border:2px solid var(--glass-border); background:var(--glass);
    color:var(--text-dim); font-size:12px; font-weight:700;
    display:flex; align-items:center; justify-content:center; transition:all .2s;
  }
  .cm-wiz-step.active .cm-wiz-dot  { border-color:var(--blue); background:var(--blue); color:#fff; }
  .cm-wiz-step.done  .cm-wiz-dot  { border-color:var(--blue); background:rgba(74,127,212,.15); color:var(--blue-mid); }
  .cm-wiz-step-lbl { font-size:10px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
  .cm-wiz-step.active .cm-wiz-step-lbl { color:var(--blue-mid); }
  .cm-wiz-step.done  .cm-wiz-step-lbl { color:var(--text-sub); }
  .cm-wiz-line { flex:1; height:2px; background:var(--glass-border); margin:0 8px; margin-bottom:16px; transition:background .3s; }
  .cm-wiz-line.done { background:var(--blue); }

  /* Step panels */
  .cm-wiz-body { padding:18px 24px 8px; overflow-y:auto; flex:1; }
  .cm-step-panel { display:none; flex-direction:column; gap:14px; }
  .cm-step-panel.active { display:flex; }

  /* Step 0 — Modo */
  .cm-step-intro { font-size:13px; color:var(--text-sub); margin:0; }
  .cm-mode-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .cm-mode-card {
    padding:18px 14px; border-radius:14px; border:1.5px solid var(--glass-border);
    background:var(--glass); cursor:pointer; text-align:center;
    transition:border-color .2s, background .2s; font-family:var(--font);
    display:flex; flex-direction:column; align-items:center; gap:6px;
  }
  .cm-mode-card:hover  { border-color:var(--blue-mid); background:rgba(74,127,212,.07); }
  .cm-mode-card.selected { border-color:var(--blue); background:rgba(74,127,212,.13); }
  .cm-mode-icon { font-size:26px; line-height:1; }
  .cm-mode-title { font-size:13px; font-weight:700; color:var(--text); }
  .cm-mode-sub { font-size:11px; color:var(--text-dim); line-height:1.4; }
  .cm-doc-zone { display:none; flex-direction:column; gap:12px; }
  .cm-submode-row { display:flex; gap:8px; }
  .cm-submode-btn {
    flex:1; padding:8px 12px; border-radius:10px;
    border:1px solid var(--glass-border); background:var(--glass);
    color:var(--text-sub); font-size:12px; font-weight:600;
    cursor:pointer; font-family:var(--font); transition:all .2s;
  }
  .cm-submode-btn.active { border-color:var(--blue); background:rgba(74,127,212,.1); color:var(--blue-mid); }
  .cm-dropzone {
    border:2px dashed var(--glass-border); border-radius:14px; padding:28px 20px;
    text-align:center; cursor:pointer; transition:border-color .2s, background .2s;
  }
  .cm-dropzone:hover, .cm-dropzone.drag-over { border-color:var(--blue); background:rgba(74,127,212,.07); }
  .cm-dropzone-icon { color:var(--text-dim); margin-bottom:8px; }
  .cm-dropzone-txt  { display:block; font-size:13px; font-weight:600; color:var(--text-sub); }
  .cm-dropzone-hint { display:block; font-size:11px; color:var(--text-dim); margin-top:4px; }
  .cm-file-chip {
    display:flex; align-items:center; gap:8px; padding:8px 12px;
    background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.25);
    border-radius:10px; font-size:13px; color:var(--text);
  }
  .cm-file-chip-name { flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .btn-cm-remove-file { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:18px; line-height:1; }
  .btn-cm-process {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px; border-radius:12px; border:none; background:var(--blue);
    color:#fff; font-size:14px; font-weight:700; cursor:pointer;
    font-family:var(--font); transition:background .15s; width:100%;
  }
  .btn-cm-process:hover { background:var(--blue-bright); }
  .cm-processing { display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px; }
  .cm-spinner { width:34px; height:34px; border:3px solid var(--glass-border); border-top-color:var(--blue); border-radius:50%; animation:cm-spin .75s linear infinite; }
  @keyframes cm-spin { to { transform:rotate(360deg); } }
  .cm-processing-txt { font-size:13px; color:var(--text-sub); }
  .cm-extracted-list {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:6px;
  }
  .cm-extracted-row { display:flex; gap:10px; align-items:baseline; font-size:13px; }
  .cm-extracted-key { color:var(--text-dim); font-size:10px; font-weight:700; min-width:72px; text-transform:uppercase; letter-spacing:.5px; flex-shrink:0; }
  .cm-extracted-val { color:var(--text); font-weight:500; }
  .cm-extracted-miss { color:var(--text-dim); font-style:italic; }

  /* Fields */
  .cm-section { font-size:10px; font-weight:700; letter-spacing:.8px; color:var(--text-dim);
    text-transform:uppercase; padding-bottom:6px; border-bottom:1px solid var(--glass-border); }
  .cm-field { display:flex; flex-direction:column; gap:5px; }
  .cm-label { font-size:12px; font-weight:600; color:var(--text-sub); }
  .cm-label .cm-req { color:var(--blue-mid); }
  .cm-input, .cm-select, .cm-textarea {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:12px; padding:11px 14px; color:var(--text); font-size:14px;
    font-family:var(--font); outline:none; transition:border-color .2s, background .2s; width:100%;
  }
  .cm-input:focus, .cm-select:focus, .cm-textarea:focus { border-color:var(--blue-mid); }
  .cm-input.cm-filled { background:rgba(99,102,241,.07); border-color:rgba(99,102,241,.25); color:var(--text-sub); }
  .cm-input.cm-err   { border-color:#ef4444 !important; background:rgba(239,68,68,.05); }
  .cm-err-msg { font-size:11px; color:#f87171; margin-top:2px; display:none; }
  .cm-err-msg.visible { display:block; }
  .cm-select { appearance:none; -webkit-appearance:none; cursor:pointer; color-scheme:dark; }
  .cm-select option { background:#0c1222; color:var(--text); }
  .cm-textarea { resize:vertical; min-height:68px; }
  .cm-row { display:flex; gap:12px; }
  .cm-row .cm-field { flex:1; }

  /* CEP */
  .cm-cep-loading { opacity:.5; pointer-events:none; }

  /* Contacts */
  .cm-contact-list { display:flex; flex-direction:column; gap:10px; }
  .cm-contact-card {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:14px; padding:14px 14px 12px; display:flex; flex-direction:column; gap:10px; position:relative;
  }
  .cm-contact-card-row { display:flex; gap:10px; }
  .cm-contact-card-row .cm-field { flex:1; }
  .btn-cm-rm-contact {
    position:absolute; top:10px; right:10px; background:none; border:none;
    color:var(--text-dim); cursor:pointer; font-size:18px; line-height:1; padding:2px 6px;
    border-radius:6px; transition:color .15s, background .15s;
  }
  .btn-cm-rm-contact:hover { color:#f87171; background:rgba(248,113,113,.1); }
  .btn-cm-add-contact {
    display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 14px;
    border-radius:12px; border:1px solid rgba(74,127,212,.35);
    background:rgba(74,127,212,.08); color:var(--blue-mid); font-size:13px; font-weight:700;
    cursor:pointer; font-family:var(--font); transition:background .15s, border-color .15s, color .15s; width:100%;
  }
  .btn-cm-add-contact:hover { background:rgba(74,127,212,.18); border-color:var(--blue-mid); color:var(--text); }

  /* Footer nav */
  .cm-wiz-footer {
    padding:12px 24px 20px; display:flex; gap:10px;
    border-top:1px solid var(--glass-border); flex-shrink:0;
  }
  .btn-cm-cancel, .btn-cm-back {
    padding:10px 18px; border-radius:12px; border:1px solid var(--glass-border);
    background:transparent; color:var(--text-sub); font-size:14px; font-weight:600;
    cursor:pointer; transition:border-color .15s, color .15s; font-family:var(--font);
  }
  .btn-cm-cancel:hover, .btn-cm-back:hover { border-color:var(--text-dim); color:var(--text); }
  .btn-cm-next, .btn-cm-save {
    flex:1; padding:10px; border-radius:12px; border:none;
    background:var(--blue); color:#fff; font-size:14px; font-weight:700;
    cursor:pointer; transition:background .15s; font-family:var(--font);
  }
  .btn-cm-next:hover, .btn-cm-save:hover { background:var(--blue-bright); }

  /* ── Fase bar (barra proporcional no card) ── */
  .cli-fase-bar {
    display:flex; height:4px; border-radius:4px; overflow:hidden; gap:2px;
    background:var(--glass-border);
  }
  .cli-fase-seg { height:100%; border-radius:4px; transition:width .4s; }
  .cli-fase-seg.r { background:var(--blue-bright); }
  .cli-fase-seg.p { background:#f59e0b; }
  .cli-fase-seg.c { background:#10b981; }
  .cli-fase-seg.d { background:#22c55e; }
  .cli-fase-seg.x { background:#6b7280; }

  /* ── Serviço chips ── */
  .cli-servicos { display:flex; flex-wrap:wrap; gap:5px; }
  .cli-serv-chip {
    font-size:10px; font-weight:600; padding:3px 8px; border-radius:20px;
    background:rgba(74,127,212,.1); border:1px solid rgba(74,127,212,.18);
    color:var(--blue-light); white-space:nowrap;
    text-overflow:ellipsis; overflow:hidden; max-width:150px;
  }
  .cli-serv-chip.mais { background:transparent; border-color:var(--glass-border); color:var(--text-dim); }

  /* ── Chip de prazo urgente no card ── */
  .cli-prazo-chip {
    font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px;
    background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.25);
    color:#fbbf24; white-space:nowrap;
  }
  .cli-prazo-chip.vencido {
    background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.25); color:#ef4444;
  }

  /* ── Drawer: lista de obras (itens clicáveis) ── */
  .cd-obras-list { display:flex; flex-direction:column; gap:1px; }
  .cd-obra-item {
    display:flex; align-items:center; gap:10px; justify-content:space-between;
    padding:10px 8px; border-radius:10px; border:1px solid transparent;
    transition:background .12s, border-color .12s;
  }
  .cd-obra-item.clickable { cursor:pointer; }
  .cd-obra-item.clickable:hover { background:var(--surface-hover); border-color:var(--glass-border); }
  .cd-obra-main { display:flex; flex-direction:column; gap:3px; min-width:0; }
  .cd-obra-nome { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cd-obra-sub  { font-size:11px; color:var(--text-dim); }
  .cd-obra-right { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
  .cd-obra-valor { font-size:12px; font-weight:700; color:#22c55e; }
  .cd-obra-prazo { font-size:10px; color:var(--text-dim); }

  /* ── Drawer: tabela de obras (legacy, mantida mas oculta) ── */
  .cli-obras-table { width:100%; border-collapse:collapse; font-size:12px; }
  .cli-obras-table th {
    text-align:left; padding:6px 8px; font-size:10px; font-weight:700;
    color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px;
    border-bottom:1px solid var(--glass-border);
  }
  .cli-obras-table td {
    padding:9px 8px; border-bottom:1px solid rgba(255,255,255,.04);
    color:var(--text-sub); vertical-align:middle;
  }
  .cli-obras-table tr:last-child td { border-bottom:none; }
  .cli-obras-table tr:hover td { background:rgba(255,255,255,.025); cursor:pointer; }
  .cli-obras-table .td-serv { color:var(--text); font-weight:500; font-size:11px; max-width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cli-obras-table .td-val  { color:#22c55e; font-weight:600; white-space:nowrap; }
  .cli-obras-table .td-pct  { color:var(--blue-bright); font-weight:600; white-space:nowrap; }

  /* ── Drawer: summary mini-cards ── */
  .cli-summary-cards {
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  }
  .cli-sum-card {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:3px;
  }
  .cli-sum-val { font-size:16px; font-weight:800; color:var(--text); }
  .cli-sum-lbl { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.4px; }
  .cli-sum-val.blue  { color:var(--blue-bright); }
  .cli-sum-val.green { color:#22c55e; font-size:13px; }

  /* ── Drawer: fase pills row ── */
  .cli-fase-pills { display:flex; flex-wrap:wrap; gap:6px; }
  .cli-fase-pill {
    display:flex; align-items:center; gap:5px;
    font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px;
  }
  .cfp-r { background:rgba(74,127,212,.15); color:var(--blue-bright); }
  .cfp-p { background:rgba(245,158,11,.15);  color:#fcd34d; }
  .cfp-c { background:rgba(16,185,129,.15);  color:#6ee7b7; }
  .cfp-d { background:rgba(34,197,94,.1);    color:#86efac; }
  .cfp-x { background:rgba(107,114,128,.1);  color:#9ca3af; }
  .cli-fase-pill .dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
  .cfp-r .dot { background:var(--blue-bright); }
  .cfp-p .dot { background:#f59e0b; }
  .cfp-c .dot { background:#10b981; }
  .cfp-d .dot { background:#22c55e; }
  .cfp-x .dot { background:#6b7280; }

  /* ══ DIÁRIO DE OBRA ══ */
  #view-diario { display:none; flex-direction:column; height:100%; overflow:hidden; }
  #view-diario.active { display:flex; }

  .diario-topbar {
    display:flex; align-items:center; gap:12px;
    padding:16px 20px; border-bottom:1px solid var(--glass-border);
    background:rgba(8,12,24,.92); flex-shrink:0;
  }
  .diario-topbar-title { font-size:17px; font-weight:700; color:var(--text); flex:1; }

  .btn-add-registro {
    display:flex; align-items:center; gap:7px;
    padding:8px 16px; border-radius:10px;
    background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.3);
    color:#86efac; font-size:13px; font-weight:600;
    cursor:pointer; transition:background .15s;
  }
  .btn-add-registro:hover { background:rgba(34,197,94,.25); }
  .btn-add-registro svg { width:14px; height:14px; }
  .btn-add-registro:disabled { opacity:.4; cursor:not-allowed; }

  /* Obra selector */
  .diario-selector-wrap {
    flex-shrink:0; border-bottom:1px solid var(--glass-border);
    background:rgba(8,12,24,.7);
  }
  .diario-selector-label {
    padding:10px 20px 4px; font-size:10px; font-weight:700;
    color:var(--text-dim); text-transform:uppercase; letter-spacing:.6px;
  }
  .diario-obra-list {
    display:flex; gap:8px; overflow-x:auto; padding:0 20px 12px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .diario-obra-list::-webkit-scrollbar { display:none; }
  .diario-obra-chip {
    flex-shrink:0; display:flex; align-items:center; gap:8px;
    padding:8px 14px; border-radius:12px; cursor:pointer;
    border:1px solid var(--glass-border); background:var(--glass);
    transition:border-color .15s, background .15s; white-space:nowrap;
  }
  .diario-obra-chip:hover { border-color:rgba(74,127,212,.3); }
  .diario-obra-chip.selected {
    background:rgba(74,127,212,.18); border-color:var(--blue-bright);
  }
  .doc-nome { font-size:12px; font-weight:600; color:var(--text); }
  .doc-sub  { font-size:10px; color:var(--text-sub); }
  .doc-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

  /* Stats strip da obra selecionada */
  .diario-stats {
    display:flex; gap:1px; flex-shrink:0; border-bottom:1px solid var(--glass-border);
    background:var(--glass-border); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .diario-stats::-webkit-scrollbar { display:none; }
  .diario-stat {
    flex:1; min-width:90px; display:flex; flex-direction:column; align-items:center;
    padding:12px 8px; background:rgba(8,12,24,.92); gap:2px;
  }
  .diario-stat-val { font-size:18px; font-weight:800; color:var(--text); }
  .diario-stat-lbl { font-size:10px; color:var(--text-sub); text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
  .ds-m2 .diario-stat-val   { color:var(--blue-bright); }
  .ds-pct .diario-stat-val  { color:#22c55e; }
  .ds-dias .diario-stat-val { color:#f59e0b; }

  /* Progress bar */
  .diario-progress-bar {
    height:3px; background:var(--glass-border); flex-shrink:0;
  }
  .diario-progress-fill {
    height:100%; background:linear-gradient(90deg, var(--blue-mid), var(--blue-bright));
    transition:width .6s cubic-bezier(.4,0,.2,1);
  }

  /* Timeline */
  .diario-body {
    flex:1; overflow-y:auto; padding:16px 20px;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--glass-border) transparent;
  }
  .diario-empty {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; padding:60px 20px; color:var(--text-dim); text-align:center;
  }
  .diario-empty svg { opacity:.3; }
  .diario-empty-title { font-size:15px; font-weight:600; color:var(--text-sub); }
  .diario-empty-sub   { font-size:13px; }

  .diario-day-group { margin-bottom:20px; }
  .diario-day-label {
    font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase;
    letter-spacing:.6px; margin-bottom:8px; display:flex; align-items:center; gap:8px;
  }
  .diario-day-label::after { content:''; flex:1; height:1px; background:var(--glass-border); }

  .diario-entry {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:16px; padding:14px 16px; margin-bottom:8px;
    display:flex; flex-direction:column; gap:10px;
    position:relative; overflow:hidden;
  }
  .diario-entry::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--blue-bright); border-radius:3px 0 0 3px;
  }
  .diario-entry-head {
    display:flex; align-items:flex-start; gap:10px;
  }
  .diario-entry-ambiente {
    font-size:14px; font-weight:700; color:var(--text); flex:1;
  }
  .diario-entry-m2 {
    font-size:18px; font-weight:800; color:var(--blue-bright); flex-shrink:0;
  }
  .diario-entry-m2 span { font-size:11px; color:var(--text-sub); font-weight:400; }
  .diario-entry-meta {
    display:flex; flex-wrap:wrap; gap:8px;
  }
  .dem-chip {
    display:flex; align-items:center; gap:5px;
    font-size:11px; color:var(--text-sub); padding:3px 8px;
    background:rgba(255,255,255,.04); border-radius:8px;
  }
  .dem-chip svg { width:11px; height:11px; flex-shrink:0; }
  .diario-entry-obs {
    font-size:12px; color:var(--text-sub); line-height:1.5;
    padding:8px 10px; background:rgba(255,255,255,.025); border-radius:10px;
  }
  .diario-entry-actions {
    display:flex; justify-content:flex-end; gap:8px;
  }
  .btn-entry-del {
    font-size:11px; color:var(--text-dim); padding:4px 10px;
    border-radius:8px; border:1px solid var(--glass-border);
    background:transparent; cursor:pointer; transition:color .15s, border-color .15s;
  }
  .btn-entry-del:hover { color:var(--red); border-color:rgba(239,68,68,.3); }

  /* Add Registro Sheet */
  .registro-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,.65);
    z-index:500; display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .25s;
  }
  .registro-backdrop.rg-open { opacity:1; pointer-events:auto; }
  .registro-sheet {
    background:#0c1222; border:1px solid var(--glass-border);
    border-radius:20px; width:100%; max-width:560px;
    max-height:85dvh; display:flex; flex-direction:column; overflow:hidden;
    transform:translateY(24px) scale(.97); opacity:0;
    transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .22s;
  }
  .registro-backdrop.rg-open .registro-sheet { transform:translateY(0) scale(1); opacity:1; }
  /* Mobile: bottom-sheet */
  @media (max-width:600px) {
    .registro-backdrop { align-items:flex-end; }
    .registro-sheet { border-radius:24px 24px 0 0; max-height:92dvh; transform:translateY(100%); opacity:1; }
    .registro-backdrop.rg-open .registro-sheet { transform:translateY(0) scale(1); }
  }
  .rg-handle { width:40px; height:4px; border-radius:4px; background:var(--glass-border); margin:12px auto 0; flex-shrink:0; }
  .rg-header { display:flex; align-items:center; gap:12px; padding:16px 24px 14px; border-bottom:1px solid var(--glass-border); flex-shrink:0; }
  .rg-title  { font-size:15px; font-weight:700; color:var(--text); flex:1; }
  .btn-no-close {
    width:32px; height:32px; border-radius:8px; border:none;
    background:var(--glass); color:var(--text-sub); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:color .15s, background .15s; flex-shrink:0;
  }
  .btn-no-close:hover { color:var(--text); background:rgba(255,255,255,.08); }
  .btn-no-close svg { width:16px; height:16px; }
  .rg-body   { flex:1; overflow-y:auto; padding:20px 24px; display:flex; flex-direction:column; gap:14px; }
  .rg-field  { display:flex; flex-direction:column; gap:6px; }
  .rg-label  { font-size:12px; font-weight:600; color:var(--text-sub); }
  .rg-label .req { color:var(--red); margin-left:2px; }
  .rg-input, .rg-select, .rg-textarea {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:12px; padding:11px 14px; color:var(--text); font-size:14px;
    font-family:var(--font); outline:none; transition:border-color .2s; width:100%;
    color-scheme:dark;
  }
  .rg-input::placeholder, .rg-textarea::placeholder { color:var(--text-dim); }
  .rg-input:focus, .rg-select:focus, .rg-textarea:focus { border-color:var(--blue-mid); }
  .rg-input.error { border-color:var(--red); }
  .rg-select option { background:#0c1222; }
  .rg-textarea { resize:none; height:80px; }
  .rg-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .rg-footer { display:flex; gap:10px; padding:14px 24px 20px; border-top:1px solid var(--glass-border); flex-shrink:0; }
  .rg-footer .btn-rg-cancel { flex:1; background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; padding:11px; color:var(--text-sub); font-size:14px; font-weight:600; cursor:pointer; }
  .rg-footer .btn-rg-save { flex:2; background:var(--blue-mid); border:none; border-radius:12px; padding:11px; color:#fff; font-size:14px; font-weight:700; cursor:pointer; }
  .rg-footer .btn-rg-save:disabled { opacity:.5; cursor:not-allowed; }

  /* CRUD action row nos drawers */
  .crud-action-row { display:flex; gap:8px; padding:0; }
  /* Serviços no drawer de obra */
  .od-sv-list { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
  .od-sv-item { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--glass); border:1px solid var(--glass-border); border-radius:10px; }
  .od-sv-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .od-sv-nome { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .od-sv-meta { font-size:11px; color:var(--text-sub); }
  .od-sv-badge { font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:2px 7px; border-radius:20px; flex-shrink:0; }
  .od-sv-badge.sv-planejado   { background:rgba(148,163,184,.15); color:#94a3b8; }
  .od-sv-badge.sv-em_execucao { background:rgba(74,127,212,.18); color:#7bb3f0; }
  .od-sv-badge.sv-concluido   { background:rgba(34,197,94,.15); color:#4ade80; }
  .od-sv-badge.sv-atrasado    { background:rgba(239,68,68,.15); color:#f87171; }
  .od-sv-actions { display:flex; gap:6px; flex-shrink:0; }
  .od-sv-btn { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; border:none; cursor:pointer; font-size:14px; }
  .od-sv-btn-edit { background:rgba(74,127,212,.15); color:var(--blue-light); }
  .od-sv-btn-del  { background:rgba(239,68,68,.1); color:#f87171; }
  .od-sv-empty { font-size:12px; color:var(--text-dim); padding:10px 0 4px; text-align:center; }
  .btn-crud-edit { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; background:var(--glass); border:1px solid var(--glass-border); border-radius:10px; padding:9px 12px; color:var(--blue-light); font-size:12px; font-weight:600; cursor:pointer; transition:border-color .15s, background .15s; }
  .btn-crud-edit:hover { border-color:rgba(74,127,212,.35); background:rgba(74,127,212,.08); }
  .btn-crud-del  { display:flex; align-items:center; justify-content:center; gap:6px; background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.15); border-radius:10px; padding:9px 14px; color:#ef4444; font-size:12px; font-weight:600; cursor:pointer; transition:border-color .15s, background .15s; }
  .btn-crud-del:hover { border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.12); }

  /* m² input grande */
  .rg-m2-wrap {
    display:flex; align-items:center; gap:0;
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:12px; overflow:hidden; transition:border-color .2s;
  }
  .rg-m2-wrap:focus-within { border-color:var(--blue-mid); }
  .rg-m2-input {
    flex:1; background:transparent; border:none; outline:none;
    padding:14px 16px; color:var(--text); font-size:22px; font-weight:800;
    font-family:var(--font); width:100%;
  }
  .rg-m2-unit { padding:0 16px; font-size:13px; color:var(--text-sub); font-weight:600; }

  .rg-footer { display:flex; gap:10px; padding:16px 24px; border-top:1px solid var(--glass-border); flex-shrink:0; }
  .btn-rg-cancel {
    padding:11px 20px; border-radius:12px; border:1px solid var(--glass-border);
    background:transparent; color:var(--text-sub); font-size:14px; font-weight:600;
    cursor:pointer; font-family:var(--font); transition:border-color .15s;
  }
  .btn-rg-cancel:hover { border-color:var(--text-dim); color:var(--text); }
  .btn-rg-save {
    flex:1; padding:11px; border-radius:12px; border:none;
    background:rgba(34,197,94,.2); border:1px solid #22c55e;
    color:#86efac; font-size:14px; font-weight:700;
    cursor:pointer; font-family:var(--font); transition:background .15s;
  }
  .btn-rg-save:hover { background:rgba(34,197,94,.35); }

  /* ══ BRIDGE CARD (Chat → Diário / Qualidade) ══ */
  .bridge-card {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px; padding: 14px 16px;
    margin: 4px 0 8px 0; animation: slideUp .25s ease;
  }
  .bridge-icon { font-size: 22px; flex-shrink: 0; }
  .bridge-text { flex: 1; min-width: 0; }
  .bridge-title { color: var(--text); font-size: 13px; font-weight: 600; }
  .bridge-sub { color: var(--text-sub); font-size: 11.5px; margin-top: 2px; line-height: 1.4; }
  .bridge-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
  .bridge-btn { border: none; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; padding: 7px 14px; transition: opacity .15s; }
  .bridge-btn-yes { background: var(--blue); color: #fff; }
  .bridge-btn-no  { background: rgba(255,255,255,.06); color: var(--text-sub); }
  .bridge-btn:hover { opacity: .85; }

  /* Botão de voz no input */
  .btn-voice {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.07); color: var(--text-sub);
    touch-action: manipulation;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s, color .15s; flex-shrink: 0;
  }
  .btn-voice:hover { background: rgba(255,255,255,.12); color: var(--text); }
  .btn-voice.recording { background: rgba(239,68,68,.2); color: #ef4444; animation: pulse 1s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

  /* ══ SERVICO PICKER (bridge → API) ══ */
  .servico-picker {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1300;
    background: #0e1525; border-top: 1px solid rgba(255,255,255,.1);
    border-radius: 24px 24px 0 0; padding: 0 0 max(20px, env(safe-area-inset-bottom));
    flex-direction: column; max-height: 70vh; overscroll-behavior: contain;
    transform: translateY(100%); transition: transform .28s cubic-bezier(.32,1,.56,1);
  }
  .servico-picker.open { transform: translateY(0); }
  .sp-handle { width: 36px; height: 4px; background: rgba(255,255,255,.15); border-radius: 2px; margin: 14px auto 0; }
  .sp-header { padding: 18px 20px 12px; }
  .sp-title { color: var(--text); font-size: 16px; font-weight: 700; }
  .sp-sub { color: var(--text-sub); font-size: 12px; margin-top: 3px; }
  .sp-list { overflow-y: auto; padding: 0 16px; flex: 1; }
  .sp-item {
    padding: 16px; border-radius: 14px; margin-bottom: 8px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    cursor: pointer; transition: background .15s;
  }
  .sp-item:active { background: rgba(74,127,212,.15); border-color: rgba(74,127,212,.3); }
  .sp-item-nome  { color: var(--text); font-size: 15px; font-weight: 600; }
  .sp-item-local { color: var(--text-sub); font-size: 12px; margin-top: 3px; }
  .sp-skip {
    margin: 12px 16px 0; padding: 13px; border-radius: 14px;
    background: transparent; border: 1px solid rgba(255,255,255,.1);
    color: var(--text-sub); font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background .15s;
  }
  .sp-skip:hover { background: rgba(255,255,255,.05); }

  /* ══ QUALIDADE ══ */
  #view-qualidade { display:none; flex-direction:column; height:100%; overflow:hidden; }
  #view-qualidade.active { display:flex; }

  .local-data-notice {
    display:flex; align-items:center; gap:6px;
    padding:6px 16px; background:rgba(99,102,241,.08);
    border-bottom:1px solid rgba(99,102,241,.15);
    font-size:11px; color:var(--text-dim); flex-shrink:0;
  }
  .local-data-notice svg { flex-shrink:0; opacity:.7; }

  .qual-topbar {
    display:flex; align-items:center; gap:12px;
    padding:16px 20px; border-bottom:1px solid var(--glass-border);
    background:rgba(8,12,24,.92); flex-shrink:0;
  }
  .qual-topbar-title { font-size:17px; font-weight:700; color:var(--text); flex:1; }

  .qual-tabs {
    display:flex; border-bottom:1px solid var(--glass-border);
    background:rgba(8,12,24,.7); flex-shrink:0; overflow-x:auto; scrollbar-width:none;
  }
  .qual-tabs::-webkit-scrollbar { display:none; }
  .qual-tab {
    flex:1; min-width:80px; padding:11px 8px; text-align:center;
    font-size:12px; font-weight:600; color:var(--text-dim);
    cursor:pointer; border-bottom:2px solid transparent; transition:color .15s, border-color .15s; white-space:nowrap;
  }
  .qual-tab.active { color:var(--blue-bright); border-color:var(--blue-bright); }

  .qual-selector-wrap { flex-shrink:0; border-bottom:1px solid var(--glass-border); background:rgba(8,12,24,.7); }
  .qual-selector-label { padding:10px 20px 4px; font-size:10px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.6px; }

  .qual-body { flex:1; overflow-y:auto; padding:16px 20px; -webkit-overflow-scrolling:touch; }
  .qual-panel { display:none; flex-direction:column; gap:12px; }
  .qual-panel.active { display:flex; }

  /* Checklist */
  .checklist-phase-title {
    font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase;
    letter-spacing:.6px; margin-bottom:8px; display:flex; align-items:center; gap:8px;
  }
  .checklist-phase-title::after { content:''; flex:1; height:1px; background:var(--glass-border); }
  .checklist-phase-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; }
  .cpb-pre     { background:rgba(74,127,212,.15); color:var(--blue-bright); }
  .cpb-durante { background:rgba(245,158,11,.15); color:#fcd34d; }
  .cpb-pos     { background:rgba(34,197,94,.1);   color:#86efac; }

  .checklist-item {
    display:flex; align-items:flex-start; gap:12px; padding:12px 14px;
    background:var(--glass); border:1px solid var(--glass-border); border-radius:12px;
    cursor:pointer; transition:border-color .15s, background .15s; -webkit-user-select:none; user-select:none;
  }
  .checklist-item:hover { border-color:rgba(74,127,212,.2); }
  .checklist-item.checked { background:rgba(34,197,94,.04); border-color:rgba(34,197,94,.2); }
  .ci-check {
    width:20px; height:20px; border-radius:6px; flex-shrink:0; margin-top:1px;
    border:2px solid var(--glass-border); display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s;
  }
  .checklist-item.checked .ci-check { background:#22c55e; border-color:#22c55e; }
  .ci-check svg { width:12px; height:12px; color:#fff; opacity:0; transition:opacity .15s; }
  .checklist-item.checked .ci-check svg { opacity:1; }
  .ci-label { font-size:13px; color:var(--text); line-height:1.4; }
  .ci-sub   { font-size:11px; color:var(--text-dim); margin-top:2px; }
  .checklist-item.checked .ci-label { color:var(--text-sub); text-decoration:line-through; }

  .checklist-progress-row {
    display:flex; align-items:center; gap:12px; padding:10px 14px;
    background:rgba(34,197,94,.04); border:1px solid rgba(34,197,94,.15); border-radius:12px;
  }
  .cp-bar  { flex:1; height:6px; background:var(--glass-border); border-radius:6px; overflow:hidden; }
  .cp-fill { height:100%; background:#22c55e; border-radius:6px; transition:width .4s; }
  .cp-pct  { font-size:13px; font-weight:700; color:#22c55e; white-space:nowrap; }

  /* Estanqueidade */
  .esta-card {
    background:var(--glass); border:1px solid var(--glass-border); border-radius:16px;
    padding:16px; display:flex; flex-direction:column; gap:10px;
  }
  .esta-card-head { display:flex; align-items:flex-start; gap:12px; }
  .esta-badge { font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; flex-shrink:0; }
  .eb-aprovado  { background:rgba(34,197,94,.15); color:#86efac; }
  .eb-reprovado { background:rgba(239,68,68,.15); color:#fca5a5; }
  .eb-andamento { background:rgba(245,158,11,.15); color:#fcd34d; }
  .esta-card-area { font-size:14px; font-weight:700; color:var(--text); flex:1; }
  .esta-card-meta { display:flex; flex-wrap:wrap; gap:8px; }
  .esta-meta-chip { font-size:11px; color:var(--text-sub); display:flex; align-items:center; gap:4px; }
  .esta-card-obs  { font-size:12px; color:var(--text-sub); background:rgba(255,255,255,.025); border-radius:8px; padding:8px 10px; line-height:1.5; }

  /* RNC */
  .rnc-card {
    background:var(--glass); border:1px solid var(--glass-border); border-radius:16px;
    padding:16px; display:flex; flex-direction:column; gap:10px; border-left:3px solid #ef4444;
  }
  .rnc-card.status-corrigida { border-left-color:#22c55e; }
  .rnc-card.status-correcao  { border-left-color:#f59e0b; }
  .rnc-badge { font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; align-self:flex-start; }
  .rnc-badge.aberta    { background:rgba(239,68,68,.15); color:#fca5a5; }
  .rnc-badge.correcao  { background:rgba(245,158,11,.15); color:#fcd34d; }
  .rnc-badge.corrigida { background:rgba(34,197,94,.1);  color:#86efac; }
  .rnc-desc { font-size:13px; font-weight:600; color:var(--text); }
  .rnc-meta { font-size:11px; color:var(--text-sub); }
  .rnc-acao { font-size:12px; color:var(--text-sub); background:rgba(255,255,255,.025); border-radius:8px; padding:8px 10px; }

  /* Botões add */
  .btn-qual-add {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:13px; border-radius:14px; border:1px dashed var(--glass-border);
    background:transparent; color:var(--text-dim); font-size:13px; font-weight:600;
    cursor:pointer; transition:border-color .15s, color .15s; font-family:var(--font); width:100%;
  }
  .btn-qual-add:hover { border-color:var(--blue-mid); color:var(--blue-bright); }
  .btn-qual-add svg { width:15px; height:15px; }

  /* Qual sheets */
  .qual-sheet-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,.65);
    z-index:500; display:flex; align-items:flex-end; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .25s;
  }
  .qual-sheet-backdrop.qs-open { opacity:1; pointer-events:auto; }
  .qual-sheet {
    background:#0c1222; border:1px solid var(--glass-border);
    border-radius:24px 24px 0 0; width:100%; max-width:560px;
    max-height:88dvh; display:flex; flex-direction:column; overflow:hidden;
    transform:translateY(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  }
  .qual-sheet-backdrop.qs-open .qual-sheet { transform:translateY(0); }
  .qs-handle { width:40px; height:4px; border-radius:4px; background:var(--glass-border); margin:12px auto 0; flex-shrink:0; }
  .qs-header { display:flex; align-items:center; gap:12px; padding:16px 24px 14px; border-bottom:1px solid var(--glass-border); flex-shrink:0; }
  .qs-title  { font-size:15px; font-weight:700; color:var(--text); flex:1; }
  .qs-body   { flex:1; overflow-y:auto; padding:20px 24px; display:flex; flex-direction:column; gap:14px; }
  .qs-field  { display:flex; flex-direction:column; gap:6px; }
  .qs-label  { font-size:12px; font-weight:600; color:var(--text-sub); }
  .qs-label .req { color:var(--red); margin-left:2px; }
  .qs-input, .qs-select, .qs-textarea {
    background:var(--glass); border:1px solid var(--glass-border); border-radius:12px;
    padding:11px 14px; color:var(--text); font-size:14px; font-family:var(--font);
    outline:none; transition:border-color .2s; width:100%;
    color-scheme:dark;
  }
  .qs-input::placeholder, .qs-textarea::placeholder { color:var(--text-dim); }
  .qs-input:focus, .qs-select:focus, .qs-textarea:focus { border-color:var(--blue-mid); }
  .qs-input.error { border-color:var(--red); }
  .qs-select option { background:#0c1222; }
  .qs-textarea { resize:none; height:76px; }
  .qs-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .qs-resultado-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
  .qs-res-btn {
    padding:9px 6px; border-radius:10px; border:1px solid var(--glass-border);
    background:var(--glass); font-size:12px; font-weight:600; color:var(--text-sub);
    cursor:pointer; text-align:center; transition:background .15s, border-color .15s, color .15s; font-family:var(--font);
  }
  .qs-res-btn.sel.aprovado  { background:rgba(34,197,94,.15);  border-color:#22c55e; color:#86efac; }
  .qs-res-btn.sel.reprovado { background:rgba(239,68,68,.15);  border-color:#ef4444; color:#fca5a5; }
  .qs-res-btn.sel.andamento { background:rgba(245,158,11,.15); border-color:#f59e0b; color:#fcd34d; }
  .qs-footer { display:flex; gap:10px; padding:16px 24px; border-top:1px solid var(--glass-border); flex-shrink:0; }
  .btn-qs-cancel { padding:11px 20px; border-radius:12px; border:1px solid var(--glass-border); background:transparent; color:var(--text-sub); font-size:14px; font-weight:600; cursor:pointer; font-family:var(--font); }
  .btn-qs-save   { flex:1; padding:11px; border-radius:12px; border:1px solid #22c55e; background:rgba(34,197,94,.2); color:#86efac; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font); transition:background .15s; }
  .btn-qs-save:hover { background:rgba(34,197,94,.35); }

  /* ══ NOVA OBRA — VIEW FULL-PAGE ══ */
  #view-nova-obra { flex:1; display:none; flex-direction:column; overflow:hidden; }
  #view-nova-obra.active { display:flex; }
  #view-novo-cliente { flex:1; display:none; flex-direction:column; overflow:hidden; }
  #view-novo-cliente.active { display:flex; }
  .no-sum-section {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:12px; overflow:hidden; margin-bottom:12px;
  }
  .no-sum-sec-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 14px; background:rgba(255,255,255,.03);
    border-bottom:1px solid var(--glass-border);
    font-size:11px; font-weight:700; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:.5px;
  }

  /* ── Topbar wizard — duas linhas: nav + dots ── */
  .nop-topbar {
    display:flex; flex-direction:column;
    border-bottom:1px solid var(--glass-border); flex-shrink:0;
    background:rgba(6,9,19,.97); backdrop-filter:blur(12px); position:relative; z-index:2;
  }
  .nop-topbar-nav {
    display:flex; align-items:center; gap:8px;
    padding:10px 14px 8px; min-height:44px;
  }
  .btn-nop-back {
    display:flex; align-items:center; gap:3px; flex-shrink:0;
    background:transparent; border:none; border-radius:8px;
    padding:5px 8px 5px 4px; color:var(--text-dim); font-size:12px; font-weight:600;
    cursor:pointer; font-family:var(--font); transition:color .15s, background .15s;
  }
  .btn-nop-back:hover { color:var(--text); background:rgba(255,255,255,.05); }
  .btn-nop-back svg { width:15px; height:15px; flex-shrink:0; }
  .nop-topbar-title {
    flex:1; text-align:center; font-size:13px; font-weight:600;
    color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 4px;
  }
  .nop-topbar-counter {
    flex-shrink:0; font-size:10.5px; font-weight:700; color:var(--text-dim);
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
    border-radius:20px; padding:3px 10px; letter-spacing:.4px; min-width:34px; text-align:center;
  }
  /* Dots row */
  .nop-dots {
    display:flex; align-items:flex-start; padding:6px 20px 12px; gap:0;
  }
  .nop-dot-wrap {
    display:flex; flex-direction:column; align-items:center; flex:1; position:relative;
  }
  .nop-dot-wrap::after {
    content:''; position:absolute; top:12px;
    left:calc(50% + 14px); right:calc(-50% + 14px);
    height:1.5px; background:rgba(255,255,255,.1); transition:background .3s; z-index:0;
  }
  .nop-dot-wrap:last-child::after { display:none; }
  .nop-dot-wrap.done::after { background:var(--blue); }
  .nop-dot {
    width:24px; height:24px; border-radius:50%;
    background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.1);
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700; color:rgba(255,255,255,.25);
    position:relative; z-index:1; transition:all .25s ease; flex-shrink:0;
  }
  .nop-dot.done { background:rgba(59,157,255,.15); border-color:var(--blue); color:var(--blue-bright); }
  .nop-dot.active { background:var(--blue); border-color:var(--blue-bright); color:#fff; box-shadow:0 0 14px rgba(59,157,255,.45); }
  .nop-dot-label {
    font-size:9px; color:rgba(255,255,255,.2); margin-top:5px;
    text-align:center; letter-spacing:.3px; transition:color .25s; white-space:nowrap;
  }
  .nop-dot-wrap.active .nop-dot-label { color:var(--blue-bright); font-weight:600; }
  .nop-dot-wrap.done .nop-dot-label { color:rgba(255,255,255,.4); }
  /* legado */
  .nop-dot-line { display:none; }
  .nop-badge {
    flex-shrink:0; background:rgba(74,127,212,.12); border:1px solid rgba(74,127,212,.25);
    border-radius:20px; padding:3px 10px; font-size:10.5px; font-weight:700; color:var(--blue-bright);
    white-space:nowrap; letter-spacing:.3px;
  }

  /* Nova Obra — ocultar sidebar */
  .nop-mode .sidebar { display:none !important; }
  .nop-mode .app-content { flex:1; }

  /* Barra de progresso */
  .nop-progress-track { height:3px; background:var(--glass-border); flex-shrink:0; }
  .nop-progress-fill {
    height:100%; background:var(--blue-bright);
    transition:width .45s cubic-bezier(.4,0,.2,1);
    border-radius:0 2px 2px 0;
  }

  /* Corpo scrollável */
  .nop-body {
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
    display:flex; flex-direction:column; align-items:center;
  }
  .nop-inner {
    width:100%; max-width:540px; padding:24px 20px 32px;
    display:flex; flex-direction:column;
  }

  /* ── PRIMITIVOS COMPARTILHADOS DO WIZARD (único + massivo) ─────────────────
     Usar estas classes em qualquer card, label ou botão-add dentro do wizard.
     Nunca duplicar valores — tudo referencia tokens do :root.
  ──────────────────────────────────────────────────────────────────────────── */

  /* Card base — superfície padrão de qualquer card dentro do wizard */
  .nop-card {
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
    transition: border-color .2s;
  }
  .nop-card:hover { border-color: rgba(255,255,255,.14); }

  /* Header de card — linha topo com título + ação */
  .nop-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  /* Label dentro de header de card — uniforme nos dois wizards */
  .nop-card-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .5px;
  }

  /* Botão "Adicionar +" — dashed, ghost, hover azul */
  .btn-nop-add {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 11px 14px;
    border: 1.5px dashed rgba(255,255,255,.1); border-radius: 12px;
    background: transparent; color: var(--text-dim);
    font-size: 12.5px; font-weight: 600; font-family: var(--font);
    cursor: pointer; transition: border-color .18s, color .18s, background .18s;
  }
  .btn-nop-add svg { width: 13px; height: 13px; flex-shrink: 0; }
  .btn-nop-add:hover {
    border-color: var(--blue-bright); color: var(--blue-bright);
    background: rgba(74,127,212,.06);
  }

  /* ─────────────────────────────────────────────────────────────────────── */

  /* Título do passo */
  .nop-step-title {
    font-size:18px; font-weight:800; color:var(--text); letter-spacing:-.3px; margin-bottom:20px; line-height:1.2;
  }
  .nop-step-title span { color:var(--text-dim); font-weight:400; font-size:13px; display:block; margin-top:2px; letter-spacing:0; }

  /* Separador de seção dentro do step */
  .no-section-label {
    font-size:10px; font-weight:700; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:.8px;
    padding-bottom:10px; border-bottom:1px solid var(--glass-border);
    margin-top:4px;
  }

  /* Hint de contexto */
  .no-step-hint {
    font-size:12px; color:var(--text-dim); line-height:1.6;
    background:rgba(255,255,255,.02); border:1px solid var(--glass-border);
    border-radius:10px; padding:10px 14px;
  }
  .no-field-hint {
    font-size:11px; color:var(--text-dim); margin-top:4px; padding:8px 10px;
    background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.2);
    border-radius:8px; line-height:1.4;
  }

  /* Panels — com slide */
  .no-panel { display:none; flex-direction:column; gap:16px; }
  .no-panel.active { display:flex; animation:nopIn .25s cubic-bezier(.4,0,.2,1); }
  .no-panel.slide-back.active { animation:nopInBack .25s cubic-bezier(.4,0,.2,1); }
  @keyframes nopIn     { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
  @keyframes nopInBack { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:translateX(0); } }

  /* Fields */
  .no-field { display:flex; flex-direction:column; gap:5px; }
  .no-label  { font-size:10.5px; font-weight:700; color:var(--text-dim); letter-spacing:.4px; text-transform:uppercase; }
  .no-label .req { color:var(--red); margin-left:2px; }
  .no-input, .no-select, .no-textarea {
    background:var(--glass); border:1px solid var(--glass-border);
    border-radius:10px; padding:10px 13px; color:var(--text); font-size:13px;
    font-family:var(--font); outline:none; transition:border-color .18s,box-shadow .18s; width:100%;
    color-scheme:dark;
  }
  .no-input::placeholder, .no-textarea::placeholder { color:var(--text-dim); font-size:12.5px; }
  .no-input:focus, .no-select:focus, .no-textarea:focus {
    border-color:var(--blue-bright); background:rgba(74,127,212,.08);
    box-shadow:0 0 0 3px rgba(74,127,212,.15);
  }
  .no-input.error, .no-select.error { border-color:var(--red); box-shadow:0 0 0 3px rgba(239,68,68,.1); }
  .no-select option { background:#0c1222; color:var(--text); }
  .no-textarea { resize:vertical; min-height:80px; }
  .no-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .no-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }

  /* Toggle (trabalha com chuva, recorrencia) */
  .no-toggle-row {
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; background:var(--glass); border:1px solid var(--glass-border);
    border-radius:12px; cursor:pointer; transition:border-color .15s;
  }
  .no-toggle-row:hover { border-color:var(--blue-mid); }
  .no-toggle-label { font-size:13px; color:var(--text); flex:1; }
  .no-toggle-sub   { font-size:11px; color:var(--text-dim); margin-top:2px; }
  .no-toggle {
    width:42px; height:24px; border-radius:12px; background:var(--glass-border);
    position:relative; flex-shrink:0; transition:background .2s; cursor:pointer;
  }
  .no-toggle::after {
    content:''; position:absolute; top:3px; left:3px;
    width:18px; height:18px; border-radius:50%; background:#fff;
    transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.3);
  }
  .no-toggle.on { background:var(--blue); }
  .no-toggle.on::after { transform:translateX(18px); }

  /* Slider dificuldade */
  .no-dificuldade { display:flex; gap:8px; }
  .no-dif-btn {
    flex:1; padding:9px; border-radius:10px; border:1px solid var(--glass-border);
    background:var(--glass); color:var(--text-sub); font-size:12px; font-weight:600;
    cursor:pointer; text-align:center; transition:background .15s, border-color .15s, color .15s;
  }
  .no-dif-btn:hover { border-color:var(--blue-mid); }
  .no-dif-btn.selected.baixa  { background:rgba(34,197,94,.15);  border-color:#22c55e; color:#86efac; }
  .no-dif-btn.selected.media  { background:rgba(245,158,11,.15);  border-color:#f59e0b; color:#fcd34d; }
  .no-dif-btn.selected.alta   { background:rgba(239,68,68,.15);   border-color:#ef4444; color:#fca5a5; }

  /* Fase selector */
  .no-fase-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .no-fase-btn {
    padding:10px 8px; border-radius:12px; border:1px solid var(--glass-border);
    background:var(--glass); color:var(--text-sub); font-size:12px; font-weight:600;
    cursor:pointer; text-align:center; transition:background .15s, border-color .15s, color .15s;
    display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .no-fase-btn .dot { width:8px; height:8px; border-radius:50%; }
  .no-fase-btn:hover { border-color:var(--blue-mid); }
  .no-fase-btn.selected.realizando { background:rgba(74,127,212,.18); border-color:var(--blue-bright); color:var(--blue-bright); }
  .no-fase-btn.selected.parado     { background:rgba(245,158,11,.15); border-color:#f59e0b; color:#fcd34d; }
  .no-fase-btn.selected.comecar    { background:rgba(16,185,129,.15); border-color:#10b981; color:#6ee7b7; }
  .no-fase-btn.selected.pronto     { background:rgba(34,197,94,.1);   border-color:#22c55e; color:#86efac; }

  /* Tipo de empreendimento (step 1) */
  .no-tipo-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .no-tipo-btn {
    padding:16px 8px 14px; border-radius:12px; border:1px solid var(--glass-border);
    background:var(--glass); color:var(--text-dim); font-size:11.5px; font-weight:600;
    cursor:pointer; text-align:center;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    transition:background .15s, border-color .15s, color .15s;
    font-family:var(--font); letter-spacing:.2px;
  }
  .no-tipo-btn svg { width:22px; height:22px; flex-shrink:0; transition:stroke .15s; }
  .no-tipo-btn:hover { border-color:rgba(74,127,212,.5); color:var(--text-sub); }
  .no-tipo-btn.selected { background:rgba(74,127,212,.14); border-color:var(--blue-bright); color:var(--blue-bright); }
  .no-tipo-btn.selected svg { stroke:var(--blue-bright); }

  /* Service cards (Step 3) */
  .no-serv-list { display:flex; flex-direction:column; gap:10px; }
  .no-serv-card {
    background:var(--surface); border:1px solid var(--glass-border);
    border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:12px;
  }
  .no-serv-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
  .no-serv-num {
    font-size:11px; font-weight:700; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:.5px;
  }
  .btn-no-serv-del {
    width:26px; height:26px; border-radius:7px; border:1px solid transparent;
    background:transparent; color:var(--text-dim); font-size:15px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
    transition:border-color .15s, color .15s, background .15s;
  }
  .btn-no-serv-del:hover { border-color:rgba(239,68,68,.4); color:#ef4444; background:rgba(239,68,68,.08); }
  .no-serv-tipo-row { display:flex; gap:5px; }
  .no-serv-tipo-btn {
    padding:5px 12px; border-radius:20px; border:1px solid var(--glass-border);
    background:transparent; color:var(--text-dim); font-size:11px; font-weight:600;
    cursor:pointer; transition:background .15s, border-color .15s, color .15s; font-family:var(--font);
    white-space:nowrap;
  }
  .no-serv-tipo-btn:hover { border-color:rgba(74,127,212,.4); color:var(--text-sub); }
  .no-serv-tipo-btn.active { background:rgba(74,127,212,.14); border-color:var(--blue-bright); color:var(--blue-bright); }
  /* Alias do primitivo .btn-nop-add — mantido para não quebrar HTML existente */
  .btn-no-add-serv {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:11px 14px;
    border:1.5px dashed rgba(255,255,255,.1); border-radius:12px;
    background:transparent; color:var(--text-dim);
    font-size:12.5px; font-weight:600; font-family:var(--font);
    cursor:pointer; transition:border-color .18s, color .18s, background .18s;
  }
  .btn-no-add-serv svg { width:13px; height:13px; flex-shrink:0; }
  .btn-no-add-serv:hover { border-color:var(--blue-bright); color:var(--blue-bright); background:rgba(74,127,212,.06); }

  /* Summary (step 4) */
  .no-summary { display:flex; flex-direction:column; gap:0; border-radius:16px; overflow:hidden; border:1px solid var(--glass-border); }
  .no-summary-group { display:flex; flex-direction:column; }
  .no-summary-group-title {
    padding:8px 14px; font-size:10px; font-weight:700; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:.6px;
    background:rgba(255,255,255,.02); border-bottom:1px solid var(--glass-border);
  }
  .no-sum-row {
    display:flex; align-items:flex-start; gap:12px;
    padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.03);
  }
  .no-sum-row:last-child { border-bottom:none; }
  .no-sum-key { font-size:12px; color:var(--text-dim); width:120px; flex-shrink:0; }
  .no-sum-val { font-size:13px; color:var(--text); font-weight:500; flex:1; }
  .no-sum-val.blue  { color:var(--blue-bright); }
  .no-sum-val.green { color:#22c55e; }

  /* Contato card */
  .no-contato-card {
    background:var(--surface); border:1px solid var(--glass-border);
    border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:12px;
  }

  /* Etapas de serviço */
  .no-etapas-section { display:flex; flex-direction:column; }
  .no-etapas-list { display:flex; flex-direction:column; gap:8px; }
  .no-etapa-row {
    display:flex; align-items:flex-start; gap:8px;
    background:rgba(255,255,255,.02); border:1px solid var(--glass-border);
    border-radius:9px; padding:10px;
  }
  .no-etapa-body { flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
  .no-etapa-fields { display:grid; grid-template-columns:80px 1fr; gap:6px; }
  .no-select-sm { font-size:12px; padding:7px 10px; border-radius:8px; }
  .no-input-sm { font-size:12px; padding:7px 10px; border-radius:8px; }
  .no-etapa-num {
    width:26px; height:26px; border-radius:50%;
    background:rgba(99,179,237,.15); border:1.5px solid rgba(99,179,237,.4);
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
    color:var(--blue-bright); flex-shrink:0; margin-top:2px; letter-spacing:0;
  }
  .no-etapa-drag-handle {
    display:flex; align-items:center; justify-content:center;
    width:20px; color:var(--text-dim); font-size:14px; cursor:grab;
    flex-shrink:0; opacity:.5; user-select:none;
    transition:opacity .15s;
  }
  .no-etapa-drag-handle:active { cursor:grabbing; }
  .no-etapa-row:hover .no-etapa-drag-handle { opacity:1; }
  .no-etapa-row.dragging { opacity:.4; border-style:dashed; }
  .no-etapa-row.drag-over { border-color:var(--blue-bright); background:rgba(99,179,237,.07); }

  /* Botão editar no resumo */
  .btn-sum-edit {
    font-size:10.5px; font-weight:600; color:var(--blue-bright); background:none; border:none;
    cursor:pointer; font-family:var(--font); padding:0; letter-spacing:.2px;
    opacity:.8; transition:opacity .15s;
  }
  .btn-sum-edit:hover { opacity:1; }

  /* Footer sticky da nova obra */
  .nop-footer {
    display:flex; align-items:center; gap:10px; padding:12px 20px;
    border-top:1px solid var(--glass-border); flex-shrink:0;
    background:rgba(6,9,19,.96); backdrop-filter:blur(12px); position:relative; z-index:2;
  }
  .btn-no-back {
    padding:9px 16px; border-radius:9px; border:1px solid var(--glass-border);
    background:transparent; color:var(--text-dim); font-size:13px; font-weight:600;
    cursor:pointer; transition:border-color .15s,color .15s; font-family:var(--font); flex-shrink:0;
  }
  .btn-no-back:hover { border-color:var(--text-dim); color:var(--text); }
  .btn-no-next {
    margin-left:auto; padding:10px 28px; border-radius:9px; border:none;
    background:var(--blue); color:#fff; font-size:13px; font-weight:700;
    cursor:pointer; transition:background .18s,box-shadow .18s; font-family:var(--font);
    min-width:140px; white-space:nowrap;
  }
  .btn-no-next:hover { background:var(--blue-bright); box-shadow:0 4px 16px rgba(74,127,212,.35); }
  .btn-no-next.save { background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.5); color:#86efac; box-shadow:none; }
  .btn-no-next.save:hover { background:rgba(34,197,94,.25); }
  .btn-no-next:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }

  /* ════ PLANEJAMENTO v3 — serviço×dia ════ */
  #view-planejamento { flex:1; display:none; flex-direction:column; overflow:hidden; position:relative; }
  #view-planejamento.active { display:flex; }

  .plan-topbar {
    display:flex; align-items:center; gap:10px; padding:12px 20px;
    border-bottom:1px solid var(--glass-border); flex-shrink:0;
    flex-wrap:wrap; background:rgba(6,9,19,.92); backdrop-filter:blur(8px);
  }
  .plan-topbar-info { flex:1; min-width:100px; }
  .plan-topbar-title { font-size:16px; font-weight:700; color:var(--text); }
  .plan-topbar-sub   { font-size:11px; color:var(--text-sub); margin-top:1px; }

  .plan-date-range {
    display:flex; align-items:center; gap:6px;
    background:var(--glass); border:1px solid var(--glass-border); border-radius:10px;
    padding:5px 10px; font-size:12px; color:var(--text-sub); white-space:nowrap;
  }
  .plan-date-range input[type=date] {
    background:none; border:none; color:var(--text); font-size:12px; font-family:var(--font);
    outline:none; cursor:pointer; padding:0; width:96px; color-scheme:dark;
  }
  .plan-date-range input[type=date]::-webkit-calendar-picker-indicator { filter:invert(.6); cursor:pointer; }
  .plan-date-range-sep { color:var(--text-dim); font-size:11px; }
  .plan-date-range-btn {
    background:none; border:none; color:var(--text-sub); cursor:pointer;
    font-size:13px; line-height:1; padding:2px 5px; transition:color .15s; font-family:var(--font);
    border-radius:5px;
  }
  .plan-date-range-btn:hover { color:var(--text); background:rgba(255,255,255,.06); }

  .plan-scenario-tabs {
    display:flex; background:var(--glass); border:1px solid var(--glass-border);
    border-radius:10px; overflow:hidden;
  }
  .pst {
    padding:6px 12px; font-size:12px; font-weight:600; border:none;
    background:transparent; color:var(--text-sub); cursor:pointer; font-family:var(--font);
    transition:background .15s, color .15s; white-space:nowrap;
  }
  .pst:hover { color:var(--text); }
  .pst.pst-active { background:var(--blue); color:#fff; }
  .pst-active.pst-ruim   { background:#7f1d1d; color:#fca5a5; }
  .pst-active.pst-medio  { background:var(--blue-mid); color:var(--blue-light); }
  .pst-active.pst-otimo  { background:#14532d; color:#86efac; }
  .pst-active.pst-custom { background:#1e1b4b; color:#a5b4fc; }

  .plan-ai-btn {
    padding:7px 14px; background:linear-gradient(135deg,#2d1b6e,#1a3870);
    border:1px solid rgba(139,92,246,.35); border-radius:10px; color:#c4b5fd;
    font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font);
    transition:all .15s; white-space:nowrap; flex-shrink:0;
  }
  .plan-ai-btn:hover { background:linear-gradient(135deg,#3d2b8e,#2a4890); border-color:rgba(139,92,246,.55); }
  .plan-ai-btn:disabled { opacity:.5; cursor:not-allowed; }

  /* KPI bar */
  .plan-kpi-bar {
    display:flex; gap:0; flex-shrink:0; border-bottom:1px solid var(--glass-border);
    background:rgba(6,9,19,.7);
  }
  .plan-kpi-item {
    flex:1; padding:7px 16px; border-right:1px solid var(--glass-border);
    display:flex; flex-direction:column; gap:1px;
  }
  .plan-kpi-item:last-child { border-right:none; }
  .plan-kpi-label { font-size:9px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--text-dim); }
  .plan-kpi-value { font-size:16px; font-weight:700; color:var(--text); }
  .plan-kpi-sub   { font-size:10px; color:var(--text-sub); }

  /* Body 3-column */
  .plan-body { display:flex; flex:1; overflow:hidden; min-height:0; }

  /* LEFT: coluna com obras + colaboradores empilhados */
  .plan-obras-sidebar {
    width:200px; flex-shrink:0; border-right:1px solid var(--glass-border);
    display:flex; flex-direction:column; overflow:hidden; background:rgba(6,9,19,.6);
  }
  .plan-sidebar-header {
    padding:9px 12px 7px; font-size:10px; font-weight:700; letter-spacing:.8px;
    text-transform:uppercase; color:var(--text-dim); border-bottom:1px solid var(--glass-border);
    flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  }
  .plan-sidebar-add-btn {
    width:20px; height:20px; border-radius:6px; border:1px solid var(--glass-border);
    background:transparent; color:var(--text-sub); cursor:pointer; font-size:15px;
    display:flex; align-items:center; justify-content:center; transition:all .15s; line-height:1;
    font-family:var(--font); flex-shrink:0;
  }
  .plan-sidebar-add-btn:hover { border-color:var(--blue-bright); color:var(--blue-bright); background:rgba(74,127,212,.08); }

  .plan-obras-section { flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0; }
  .plan-obras-list { flex:1; overflow-y:auto; padding:8px; }
  .plan-obras-list::-webkit-scrollbar { width:3px; }
  .plan-obras-list::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:3px; }

  .plan-obra-card {
    padding:8px 10px; border-radius:10px; border:1px solid var(--glass-border);
    margin-bottom:5px; background:rgba(255,255,255,.02); transition:all .15s; position:relative;
    cursor:pointer;
  }
  .plan-obra-card:hover { border-color:rgba(255,255,255,.12); }
  .plan-obra-card.active { background:rgba(74,127,212,.1); border-color:rgba(74,127,212,.35); }
  .plan-obra-card-header { display:flex; align-items:center; gap:7px; margin-bottom:3px; }
  .plan-obra-card-dot { width:8px; height:8px; border-radius:3px; flex-shrink:0; }
  .plan-obra-card-nome { font-size:12px; font-weight:600; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .plan-obra-card-remove {
    width:14px; height:14px; border:none; background:none; color:var(--text-dim);
    cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center;
    border-radius:3px; transition:color .1s; flex-shrink:0; opacity:0;
  }
  .plan-obra-card:hover .plan-obra-card-remove { opacity:1; }
  .plan-obra-card-remove:hover { color:var(--red); }
  .plan-obra-card-meta { font-size:10px; color:var(--text-sub); }
  .plan-obras-empty { padding:20px 12px; text-align:center; font-size:11px; color:var(--text-dim); line-height:1.6; }
  .plan-obra-servicos { margin-top:5px; display:flex; flex-direction:column; gap:2px; }
  .plan-obra-servico-item {
    display:flex; align-items:center; gap:6px;
    padding:5px 8px 5px 4px; border-radius:7px; cursor:pointer;
    font-size:11px; color:var(--text-sub); border:1px solid transparent;
    transition:background .12s, border-color .12s;
    overflow:hidden;
  }
  .plan-obra-servico-item:hover { background:rgba(255,255,255,.06); color:var(--text); }
  .plan-obra-servico-item.active { background:rgba(74,127,212,.18); border-color:rgba(74,127,212,.35); color:var(--text); }
  .plan-sv-check { font-size:11px; color:var(--text-dim); flex-shrink:0; width:12px; text-align:center; }
  .plan-obra-servico-item.active .plan-sv-check { color:#4a7fd4; font-weight:700; }
  .plan-servico-obra { font-size:9px; color:var(--text-dim); font-weight:600; letter-spacing:.4px; text-transform:uppercase; margin-bottom:1px; }

  /* CENTER: Timeline grid (serviço×dia) */
  .plan-grid-scroll { flex:1; overflow:auto; }
  .plan-grid-scroll::-webkit-scrollbar { width:5px; height:5px; }
  .plan-grid-scroll::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:3px; }
  .plan-grid-scroll table { border-collapse:collapse; min-width:100%; }
  #plan-grid tr:not(.plan-grid-header):hover td { background:rgba(255,255,255,.015); }
  #plan-grid td, #plan-grid th { border:1px solid rgba(255,255,255,.06); vertical-align:middle; }

  /* Sticky first column (serviço name) */
  .plan-cell-servico-name {
    position:sticky; left:0; z-index:2;
    width:160px; min-width:160px; max-width:160px; padding:10px 12px; vertical-align:middle;
    background:rgba(8,12,26,.97);
  }
  .plan-grid-header th { background:rgba(8,12,26,.98) !important; position:sticky; top:0; z-index:3; }
  .plan-grid-header .plan-cell-servico-name { z-index:4; background:rgba(8,12,26,.98) !important; }

  .plan-servico-inner { display:flex; flex-direction:column; gap:2px; }
  .plan-servico-nome  { font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
  .plan-servico-area  { font-size:10px; color:var(--text-sub); }

  .plan-cell-day-header {
    min-width:80px; width:80px; padding:8px 6px; text-align:center; vertical-align:middle;
  }
  .plan-day-weekend { opacity:.5; }
  .plan-day-name { display:block; font-size:10px; font-weight:700; color:var(--text-sub); text-transform:uppercase; letter-spacing:.5px; }
  .plan-day-date { display:block; font-size:12px; font-weight:600; color:var(--text); margin-top:2px; }

  /* Cell body: avatar chips */
  .plan-cell-body {
    min-width:80px; width:80px; padding:4px 5px;
    cursor:pointer; transition:background .1s; height:52px; vertical-align:middle;
  }
  .plan-cell-body:hover { background:rgba(255,255,255,.05) !important; }
  .plan-cell-body.plan-cell-quick-mode { cursor:crosshair; }

  .plan-cell-avatars {
    display:flex; flex-wrap:wrap; gap:3px; align-content:center;
    justify-content:center; min-height:44px; padding:2px;
  }
  .plan-avatar-chip {
    width:26px; height:26px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-size:10px; font-weight:700; color:#fff;
    flex-shrink:0; transition:transform .1s;
  }
  .plan-avatar-chip:hover { transform:scale(1.15); }
  .plan-cell-empty-plus {
    color:var(--text-dim); font-size:16px; display:flex; align-items:center;
    justify-content:center; width:100%; height:44px; transition:color .1s;
  }
  .plan-cell-body:hover .plan-cell-empty-plus { color:var(--text-sub); }
  .plan-chuva-badge {
    font-size:9px; color:#93c5fd; background:rgba(59,130,246,.1);
    border-radius:4px; padding:1px 4px; margin-bottom:2px; display:block; text-align:center;
  }

  /* Welcome screen when no obra selected */
  .plan-grid-welcome {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    height:100%; color:var(--text-dim); gap:10px; padding:40px;
  }
  .plan-grid-welcome-icon { font-size:40px; }
  .plan-grid-welcome-text { font-size:15px; font-weight:600; color:var(--text-sub); }
  .plan-grid-welcome-sub  { font-size:12px; color:var(--text-dim); }

  /* RIGHT: Pessoas panel */
  .plan-pessoas-panel {
    flex-shrink:0; border-top:1px solid var(--glass-border);
    display:flex; flex-direction:column; overflow:hidden; background:rgba(6,9,19,.6);
    max-height:45%;
  }
  .plan-pessoas-list { flex:1; overflow-y:auto; padding:6px 8px; }
  .plan-pessoas-list::-webkit-scrollbar { width:3px; }
  .plan-pessoas-list::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:3px; }

  .plan-pessoa-row {
    display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:9px;
    margin-bottom:3px; transition:all .15s; cursor:pointer; border:1px solid transparent;
  }
  .plan-pessoa-row:hover { background:var(--glass); }
  .plan-pessoa-row.selected { border-color:var(--pessoa-cor, #4a7fd4); background:color-mix(in srgb, var(--pessoa-cor, #4a7fd4) 8%, transparent); }
  .plan-pessoa-row-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .plan-pessoa-row-info { flex:1; min-width:0; }
  .plan-pessoa-row-nome { font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .plan-pessoa-row-prod { font-size:10px; color:var(--text-sub); }
  .plan-pessoa-row-remove {
    width:14px; height:14px; border:none; background:none; color:var(--text-dim);
    cursor:pointer; font-size:12px; display:flex; align-items:center;
    justify-content:center; border-radius:3px; opacity:0; transition:opacity .1s, color .1s; flex-shrink:0;
  }
  .plan-pessoa-row:hover .plan-pessoa-row-remove { opacity:1; }
  .plan-pessoa-row-remove:hover { color:var(--red); }

  /* Metrics sub-section inside pessoas panel */
  .plan-pessoa-metrics { border-top:1px solid var(--glass-border); flex-shrink:0; padding:8px 10px; }
  .plan-pessoa-metrics-label { font-size:9px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
  .plan-pessoa-metric-row { display:flex; justify-content:space-between; align-items:center; padding:2px 0; }
  .plan-pessoa-metric-name { font-size:10px; color:var(--text-sub); display:flex; align-items:center; gap:4px; }
  .plan-pessoa-metric-val  { font-size:10px; font-weight:700; color:var(--text); }

  /* Cell picker (floating) — pessoas list */
  .plan-cell-picker {
    position:fixed; z-index:500; display:none;
    background:#0e1528; border:1px solid var(--glass-border); border-radius:14px;
    padding:8px; min-width:180px; max-width:240px;
    box-shadow:0 16px 48px rgba(0,0,0,.7); backdrop-filter:blur(16px);
  }
  .plan-cell-picker-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:2px 4px 8px;
  }
  .plan-cell-picker-title { font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-dim); }
  .plan-cell-picker-header button {
    background:none; border:none; color:var(--text-sub); cursor:pointer;
    font-size:16px; line-height:1; padding:0 2px; transition:color .15s;
  }
  .plan-cell-picker-header button:hover { color:var(--text); }
  .plan-cell-picker-list { max-height:220px; overflow-y:auto; }
  .plan-cell-picker-list::-webkit-scrollbar { width:3px; }
  .plan-cell-picker-list::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:3px; }
  .plan-picker-pessoa-item {
    display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:9px;
    cursor:pointer; transition:background .1s; border:1px solid transparent; margin-bottom:2px;
  }
  .plan-picker-pessoa-item:hover { background:var(--glass); }
  .plan-picker-pessoa-item.checked { background:rgba(74,127,212,.08); border-color:rgba(74,127,212,.2); }
  .plan-picker-pessoa-dot { width:22px; height:22px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:#fff; }
  .plan-picker-pessoa-nome { font-size:12px; font-weight:500; color:var(--text); flex:1; }
  .plan-picker-pessoa-check { color:var(--green); font-weight:700; font-size:12px; flex-shrink:0; }

  /* Obra picker modal */
  .plan-obra-picker-backdrop {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.65);
    z-index:600; backdrop-filter:blur(6px); align-items:center; justify-content:center;
  }
  .plan-obra-picker-backdrop.open { display:flex; }
  .plan-obra-picker-modal {
    background:#0d1424; border:1px solid var(--glass-border); border-radius:20px;
    width:min(420px,92vw); display:flex; flex-direction:column;
    overflow:visible; box-shadow:0 24px 64px rgba(0,0,0,.8);
  }
  .plan-obra-picker-header { padding:16px 18px 12px; border-bottom:1px solid var(--glass-border); flex-shrink:0; }
  .plan-obra-picker-title { font-size:16px; font-weight:700; color:var(--text); margin-bottom:10px; }
  .plan-obra-picker-search {
    width:100%; padding:8px 12px; border-radius:10px;
    border:1px solid var(--glass-border); background:var(--glass);
    color:var(--text); font-size:13px; font-family:var(--font); outline:none;
  }
  .plan-obra-picker-search:focus { border-color:var(--blue-bright); }
  .plan-obra-picker-list { flex:1; overflow-y:auto; padding:8px; }
  .plan-obra-picker-item {
    display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px;
    cursor:pointer; transition:background .1s; margin-bottom:2px; border:1px solid transparent;
  }
  .plan-obra-picker-item:hover { background:var(--glass); }
  .plan-obra-picker-item.selected { background:rgba(74,127,212,.1); border-color:rgba(74,127,212,.2); }
  .plan-obra-picker-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
  .plan-obra-picker-info { flex:1; }
  .plan-obra-picker-name { font-size:13px; font-weight:600; color:var(--text); }
  .plan-obra-picker-city { font-size:11px; color:var(--text-sub); }
  .plan-obra-picker-check { color:var(--green); font-size:14px; font-weight:700; }
  .plan-obra-picker-footer { padding:12px 16px; border-top:1px solid var(--glass-border); display:flex; gap:8px; flex-shrink:0; }
  .plan-obra-picker-cancel { flex:1; padding:10px; border-radius:10px; border:1px solid var(--glass-border); background:transparent; color:var(--text-sub); font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font); }
  .plan-obra-picker-confirm { flex:2; padding:10px; border-radius:10px; border:none; background:var(--blue); color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--font); transition:background .15s; }
  .plan-obra-picker-confirm:hover { background:var(--blue-bright); }

  /* Pessoa modal */
  .plan-modal-overlay {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.65);
    z-index:600; backdrop-filter:blur(6px); align-items:center; justify-content:center;
  }
  .plan-modal-overlay.open { display:flex; }
  .plan-modal-box {
    background:#0d1424; border:1px solid var(--glass-border); border-radius:20px;
    width:min(360px,90vw); display:flex; flex-direction:column;
    overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,.8);
  }
  .plan-modal-header {
    padding:16px 18px 14px; border-bottom:1px solid var(--glass-border);
    flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  }
  .plan-modal-header span { font-size:16px; font-weight:700; color:var(--text); }
  .plan-modal-header button { background:none; border:none; color:var(--text-sub); cursor:pointer; font-size:20px; line-height:1; padding:0 2px; transition:color .15s; }
  .plan-modal-header button:hover { color:var(--text); }
  .plan-modal-body { padding:16px 18px; }
  .plan-equipe-field { margin-bottom:12px; }
  .plan-equipe-field label { display:block; font-size:11px; font-weight:600; color:var(--text-sub); margin-bottom:4px; }
  .plan-equipe-field input {
    width:100%; padding:8px 12px; border-radius:10px;
    border:1px solid var(--glass-border); background:var(--glass);
    color:var(--text); font-size:13px; font-family:var(--font); outline:none;
  }
  .plan-equipe-field input:focus { border-color:var(--blue-bright); }
  .plan-equipe-field select {
    width:100%; padding:8px 12px; border-radius:10px;
    border:1px solid var(--glass-border); background:var(--glass);
    color:var(--text); font-size:13px; font-family:var(--font); outline:none;
    appearance:none; -webkit-appearance:none; cursor:pointer;
    color-scheme:dark;
  }
  .plan-equipe-field select:focus { border-color:var(--blue-bright); }
  .plan-equipe-field select option { background:#0f1828; color:var(--text); }
  .plan-modal-footer { padding:12px 18px; border-top:1px solid var(--glass-border); display:flex; gap:8px; flex-shrink:0; }
  .plan-btn-secondary { flex:1; padding:10px; border-radius:10px; border:1px solid var(--glass-border); background:transparent; color:var(--text-sub); font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font); }
  .plan-btn-primary { flex:2; padding:10px; border-radius:10px; border:none; background:var(--blue); color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--font); transition:background .15s; }
  .plan-btn-primary:hover { background:var(--blue-bright); }

  @media(max-width:768px) {
    .plan-pessoas-panel { display:none; }
    .plan-obras-sidebar { width:160px; }
    .plan-topbar { padding:10px 14px; gap:8px; }
    .plan-ai-btn { display:none; }
  }
  @media(max-width:520px) {
    .plan-obras-sidebar { display:none; }
    .plan-kpi-bar { flex-wrap:wrap; }
  }

  /* ══ LOGS ══ */
  .log-timeline { display:flex; flex-direction:column; }
  .log-day-group { }
  .log-day-header { font-size:10px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; padding:18px 0 6px; position:sticky; top:0; background:linear-gradient(180deg,#090e1e 80%,transparent 100%); z-index:1; }
  .log-item { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.04); }
  .log-item:last-child { border-bottom:none; }
  .log-icon { width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
  .log-icon.li-info    { background:rgba(74,127,212,.12);  color:var(--blue-bright); }
  .log-icon.li-warning { background:rgba(245,158,11,.1);   color:#f59e0b; }
  .log-icon.li-error   { background:rgba(239,68,68,.1);    color:#ef4444; }
  .log-icon.li-success { background:rgba(34,197,94,.1);    color:#22c55e; }
  .log-body { flex:1; min-width:0; }
  .log-action-line { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .log-action-label { font-size:13px; font-weight:600; color:var(--text); }
  .log-entity-chip { font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; background:var(--surface); border:1px solid var(--glass-border); color:var(--text-sub); white-space:nowrap; }
  .log-entity-chip.lec-user { background:rgba(74,127,212,.08); border-color:rgba(74,127,212,.18); color:var(--blue-bright); }
  .log-who { font-size:11px; color:var(--text-dim); margin-top:3px; }
  .log-detail { font-size:11px; color:var(--text-sub); margin-top:4px; background:var(--surface); border-radius:8px; padding:5px 9px; word-break:break-word; border:1px solid var(--glass-border); }
  .log-time { font-size:11px; color:var(--text-dim); flex-shrink:0; white-space:nowrap; padding-top:3px; }
  .log-filters { display:flex; gap:6px; padding:10px 20px; border-bottom:1px solid var(--glass-border); overflow-x:auto; flex-shrink:0; }
  .log-filters::-webkit-scrollbar { height:0; }
  .log-filter-btn { font-size:11px; font-weight:600; padding:5px 12px; border-radius:20px; border:1px solid var(--glass-border); background:var(--surface); color:var(--text-sub); cursor:pointer; white-space:nowrap; transition:all .15s; font-family:var(--font); }
  .log-filter-btn:hover { background:var(--surface-hover); color:var(--text); }
  .log-filter-btn.active { background:rgba(74,127,212,.15); border-color:rgba(74,127,212,.3); color:var(--blue-bright); }
  .log-search-bar { display:flex; align-items:center; gap:10px; padding:9px 20px; border-bottom:1px solid var(--glass-border); flex-shrink:0; }
  .log-search-bar svg { color:var(--text-dim); flex-shrink:0; }
  .log-search-bar input { flex:1; background:transparent; border:none; outline:none; color:var(--text); font-size:13px; font-family:var(--font); }
  .log-search-bar input::placeholder { color:var(--text-dim); }

  /* ══ NOVA OBRA — SELEÇÃO DE MODO ══ */
  .nom-mode-screen { padding:4px 0 24px; }
  .nom-mode-cards { display:flex; flex-direction:column; gap:12px; }
  .nom-mode-card {
    border:1.5px solid var(--glass-border); border-radius:16px;
    padding:18px 18px 16px; cursor:pointer; transition:all .2s;
    background:var(--glass); position:relative; overflow:hidden;
    display:flex; gap:14px; align-items:flex-start; user-select:none;
  }
  .nom-mode-card::before {
    content:''; position:absolute; inset:0; opacity:0; transition:opacity .25s;
    border-radius:16px;
  }
  .nom-mode-card.nm-unico::before  { background:radial-gradient(ellipse at 0 0,rgba(74,127,212,.1) 0%,transparent 60%); }
  .nom-mode-card.nm-massivo::before { background:radial-gradient(ellipse at 0 0,rgba(245,158,11,.09) 0%,transparent 60%); }
  .nom-mode-card:hover::before { opacity:1; }
  .nom-mode-card:hover { border-color:rgba(255,255,255,.12); transform:translateY(-1px); }
  .nom-mode-card.nm-selected.nm-unico  { border-color:var(--blue-bright); background:rgba(74,127,212,.06); }
  .nom-mode-card.nm-selected.nm-massivo { border-color:#f59e0b; background:rgba(245,158,11,.05); }
  .nom-mode-icon {
    width:42px; height:42px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(74,127,212,.14); color:var(--blue-bright); transition:background .2s;
  }
  .nom-mode-card.nm-massivo .nom-mode-icon { background:rgba(245,158,11,.14); color:#fcd34d; }
  .nom-mode-icon svg { width:22px; height:22px; }
  .nom-mode-body { flex:1; min-width:0; padding-right:28px; }
  .nom-mode-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:3px; letter-spacing:-.2px; }
  .nom-mode-desc { font-size:12px; color:var(--text-dim); line-height:1.55; }
  .nom-mode-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
  .nom-mode-tag {
    font-size:10.5px; color:var(--text-dim); background:rgba(255,255,255,.04);
    border:1px solid var(--glass-border); border-radius:20px; padding:2px 8px;
  }
  .nom-mode-check {
    position:absolute; top:16px; right:16px; width:20px; height:20px; border-radius:50%;
    border:1.5px solid var(--glass-border); display:flex; align-items:center; justify-content:center;
    transition:all .2s; background:transparent; flex-shrink:0;
  }
  .nom-mode-card.nm-selected .nom-mode-check { background:var(--blue-bright); border-color:var(--blue-bright); }
  .nom-mode-card.nm-selected.nm-massivo .nom-mode-check { background:#f59e0b; border-color:#f59e0b; }
  .nom-mode-check svg { width:10px; height:10px; color:#fff; opacity:0; transition:opacity .15s; }
  .nom-mode-card.nm-selected .nom-mode-check svg { opacity:1; }

  /* ══ NOVA OBRA MASSIVA — GRUPOS ══ */
  .nom-grupo-list { display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }

  /* Card principal */
  .nom-grupo-card {
    border-radius:16px; overflow:hidden;
    background:var(--surface);
    border:1px solid var(--glass-border);
    box-shadow:0 2px 12px rgba(0,0,0,.25);
    transition:border-color .2s, box-shadow .2s;
    animation:nomFadeUp .24s cubic-bezier(.16,1,.3,1) both;
  }
  .nom-grupo-card:hover {
    border-color:rgba(255,255,255,.14);
    box-shadow:0 4px 20px rgba(0,0,0,.35);
  }

  /* Tira de cor lateral (acento de tipo) */
  .nom-grupo-accent {
    height:3px; width:100%;
    transition:background .25s;
  }

  /* Header do card */
  .nom-grupo-head {
    display:flex; align-items:center; gap:10px;
    padding:14px 16px 12px;
  }
  .nom-grupo-num {
    flex-shrink:0; width:24px; height:24px; border-radius:50%;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700; color:var(--text-dim); letter-spacing:.3px;
  }
  .nom-grupo-drag {
    color:var(--text-dim); opacity:.3; flex-shrink:0; cursor:grab; padding:2px;
  }
  .nom-grupo-drag:active { cursor:grabbing; }
  .nom-grupo-drag svg { width:13px; height:13px; display:block; }

  .nom-grupo-name-wrap {
    flex:1; min-width:0; position:relative;
  }
  .nom-grupo-name-input {
    width:100%; background:none; border:none; outline:none;
    font-size:14px; font-weight:600; color:var(--text);
    font-family:var(--font); padding:0; line-height:1.4;
  }
  .nom-grupo-name-input::placeholder { color:rgba(255,255,255,.22); font-weight:400; font-size:13.5px; }

  .nom-grupo-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; }
  .nom-grupo-btn {
    flex-shrink:0; background:none; border:none; cursor:pointer;
    color:var(--text-dim); padding:6px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    transition:color .15s, background .15s;
  }
  .nom-grupo-btn:hover { color:var(--text); background:rgba(255,255,255,.07); }
  .nom-grupo-btn.nom-btn-del:hover { color:#f87171; background:rgba(239,68,68,.1); }
  .nom-grupo-btn svg { width:15px; height:15px; display:block; }

  /* Separador */
  .nom-grupo-divider { height:1px; background:rgba(255,255,255,.06); margin:0 16px; }

  /* Body */
  .nom-grupo-body { padding:14px 16px 16px; }

  /* Label de seção */
  .nom-tipo-lbl {
    font-size:9.5px; font-weight:800; color:var(--text-dim);
    text-transform:uppercase; letter-spacing:.8px;
    margin-bottom:10px;
  }

  /* Tipo chips — redesenhados */
  .nom-type-grid {
    display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:14px;
  }
  .nom-type-chip {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; padding:9px 4px 8px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px; background:rgba(255,255,255,.03);
    cursor:pointer; transition:all .15s; font-family:var(--font);
    text-align:center; position:relative; overflow:hidden;
  }
  .nom-type-chip:hover {
    border-color:rgba(255,255,255,.15);
    background:rgba(255,255,255,.06);
  }
  .nom-type-chip-icon { font-size:18px; line-height:1; }
  .nom-type-chip-lbl {
    font-size:9.5px; font-weight:600; color:var(--text-dim);
    line-height:1.2; letter-spacing:.1px;
  }
  /* estados selecionados por cor de tipo */
  .nom-type-chip.nom-tc-sel { border-width:1.5px; }
  .nom-type-chip.nom-tc-sel .nom-type-chip-lbl { font-weight:700; }
  .nom-tc-torre.nom-tc-sel  { border-color:#3b9dff; background:rgba(59,157,255,.1); }
  .nom-tc-torre.nom-tc-sel  .nom-type-chip-lbl { color:#3b9dff; }
  .nom-tc-setor.nom-tc-sel  { border-color:#a855f7; background:rgba(168,85,247,.1); }
  .nom-tc-setor.nom-tc-sel  .nom-type-chip-lbl { color:#c084fc; }
  .nom-tc-unidade.nom-tc-sel{ border-color:#22c55e; background:rgba(34,197,94,.1); }
  .nom-tc-unidade.nom-tc-sel .nom-type-chip-lbl { color:#4ade80; }
  .nom-tc-area.nom-tc-sel   { border-color:#f59e0b; background:rgba(245,158,11,.1); }
  .nom-tc-area.nom-tc-sel   .nom-type-chip-lbl { color:#fbbf24; }
  .nom-tc-livre.nom-tc-sel  { border-color:#64748b; background:rgba(100,116,139,.1); }
  .nom-tc-livre.nom-tc-sel  .nom-type-chip-lbl { color:#94a3b8; }

  /* Config section */
  .nom-grupo-config {
    display:flex; flex-direction:column; gap:10px;
    padding:12px 14px;
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.06);
    border-radius:10px;
    animation:nomFadeUp .18s both;
  }
  .nom-cfg-row {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  }
  .nom-cfg-lbl {
    font-size:12px; color:var(--text-sub); white-space:nowrap; flex-shrink:0;
  }
  .nom-pav-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .nom-pav-lbl { font-size:12px; color:var(--text-sub); white-space:nowrap; }
  .nom-pav-input {
    width:60px; padding:7px 8px; background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px; color:var(--text); font-size:13px;
    font-family:var(--font); outline:none; text-align:center;
    transition:border-color .15s, background .15s;
  }
  .nom-pav-input:focus { border-color:var(--blue-bright); background:rgba(74,127,212,.08); }
  .nom-str-input {
    width:100%; padding:9px 12px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    border-radius:9px; color:var(--text); font-size:13px;
    font-family:var(--font); outline:none; transition:border-color .15s, background .15s;
    box-sizing:border-box;
  }
  .nom-str-input:focus { border-color:var(--blue-bright); background:rgba(74,127,212,.06); }
  .nom-str-hint { font-size:10.5px; color:var(--text-dim); margin-top:-4px; }
  .nom-cob-label {
    display:flex; align-items:center; gap:8px; cursor:pointer;
    font-size:12px; color:var(--text-sub); user-select:none;
  }
  .nom-cob-label input[type=checkbox] {
    width:15px; height:15px; accent-color:var(--blue-bright); cursor:pointer; flex-shrink:0;
  }

  /* Área única — sem config extra, só confirmação visual */
  .nom-area-unica-msg {
    display:flex; align-items:center; gap:8px; padding:10px 12px;
    background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.2);
    border-radius:8px; font-size:12px; color:#fbbf24;
  }

  /* Botão adicionar grupo — alias de btn-nop-add */
  .btn-nom-add-grupo {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:11px 14px;
    border:1.5px dashed rgba(255,255,255,.1); border-radius:12px;
    background:transparent; color:var(--text-dim);
    font-size:12.5px; font-weight:600; font-family:var(--font);
    cursor:pointer; transition:border-color .18s, color .18s, background .18s;
  }
  .btn-nom-add-grupo:hover {
    border-color:var(--blue-bright); color:var(--blue-bright);
    background:rgba(74,127,212,.06);
  }
  .btn-nom-add-grupo svg { width:13px; height:13px; flex-shrink:0; }

  /* ══ NOVA OBRA MASSIVA — SERVIÇOS + APLICAÇÃO ══ */
  .nom-serv-grid { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
  .nom-serv-chip {
    display:flex; align-items:center; gap:5px; padding:5px 11px;
    border:1.5px solid var(--glass-border); border-radius:20px;
    background:rgba(255,255,255,.03); color:var(--text-dim);
    cursor:pointer; transition:all .15s; font-size:11.5px; font-weight:500; font-family:var(--font);
  }
  .nom-serv-chip:hover { border-color:rgba(255,255,255,.18); color:var(--text); }
  .nom-serv-chip.nom-sc-on { background:rgba(74,127,212,.12); border-color:var(--blue-bright); color:var(--blue-bright); }
  .nom-serv-chip svg { width:12px; height:12px; transition:transform .15s; flex-shrink:0; }
  .nom-serv-chip.nom-sc-on svg { transform:rotate(45deg); }
  .nom-apply-section { display:flex; flex-direction:column; gap:10px; }
  .nom-apply-card {
    border:1px solid var(--glass-border); border-radius:14px; overflow:hidden;
    background:var(--glass); animation:nomFadeUp .2s cubic-bezier(.16,1,.3,1) both;
  }
  .nom-apply-head { padding:9px 13px; background:rgba(255,255,255,.02); display:flex; align-items:center; gap:6px; }
  .nom-apply-dot { width:7px; height:7px; border-radius:50%; background:var(--blue-bright); flex-shrink:0; }
  .nom-apply-title { font-size:12.5px; font-weight:700; color:var(--text); flex:1; }
  .nom-apply-body { padding:10px 13px; display:flex; flex-direction:column; gap:9px; }
  .nom-apply-lbl { font-size:10px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.6px; }
  .nom-apply-grupos { display:flex; flex-wrap:wrap; gap:5px; }
  .nom-apply-chip {
    display:flex; align-items:center; gap:4px; padding:3px 9px;
    border:1.5px solid var(--glass-border); border-radius:20px;
    background:rgba(255,255,255,.03); color:var(--text-dim);
    cursor:pointer; transition:all .15s; font-size:11.5px; font-weight:500; font-family:var(--font);
  }
  .nom-apply-chip:hover { border-color:rgba(255,255,255,.2); }
  .nom-apply-chip.nom-ac-on { background:rgba(34,197,94,.1); border-color:#22c55e; color:#22c55e; }
  .nom-apply-chip svg { width:11px; height:11px; flex-shrink:0; opacity:0; transition:opacity .15s; }
  .nom-apply-chip.nom-ac-on svg { opacity:1; }
  .nom-m2-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .nom-m2-lbl { font-size:11.5px; color:var(--text-dim); flex-shrink:0; }
  .nom-m2-input {
    width:88px; padding:5px 8px; background:var(--surface); border:1px solid var(--glass-border);
    border-radius:8px; color:var(--text); font-size:13px; font-family:var(--font); outline:none;
    transition:border-color .15s; text-align:right;
  }
  .nom-m2-input:focus { border-color:var(--blue-bright); }
  .nom-m2-unit { font-size:11.5px; color:var(--text-dim); }

  /* ══ NOVA OBRA MASSIVA — PREVIEW ══ */
  .nom-preview-banner {
    display:flex; align-items:center; gap:12px; padding:14px 16px;
    background:rgba(74,127,212,.07); border:1px solid rgba(74,127,212,.18);
    border-radius:12px; margin-bottom:16px;
  }
  .nom-preview-banner-icon { color:var(--blue-bright); flex-shrink:0; }
  .nom-preview-banner-icon svg { width:20px; height:20px; }
  .nom-preview-banner-text { flex:1; }
  .nom-preview-total { font-size:18px; font-weight:800; color:var(--blue-bright); }
  .nom-preview-sub { font-size:11.5px; color:var(--text-dim); margin-top:1px; }
  .nom-preview-groups { display:flex; flex-direction:column; gap:10px; }
  .nom-preview-block {
    border:1px solid var(--glass-border); border-radius:12px; overflow:hidden;
    animation:nomFadeUp .22s cubic-bezier(.16,1,.3,1) both;
  }
  .nom-preview-block-head {
    padding:8px 13px; background:rgba(255,255,255,.03);
    border-bottom:1px solid var(--glass-border);
    font-size:12px; font-weight:700; color:var(--text);
    display:flex; align-items:center; justify-content:space-between;
  }
  .nom-preview-cnt { font-size:10.5px; color:var(--text-dim); font-weight:400; }
  .nom-preview-items { display:flex; flex-direction:column; }
  .nom-preview-item {
    display:flex; align-items:center; gap:9px; padding:7px 13px;
    border-bottom:1px solid rgba(255,255,255,.03); font-size:12px;
    animation:nomFadeUp .18s cubic-bezier(.16,1,.3,1) both;
  }
  .nom-preview-item:last-child { border-bottom:none; }
  .nom-preview-dot2 { width:5px; height:5px; border-radius:50%; background:rgba(74,127,212,.5); flex-shrink:0; }
  .nom-preview-lbl { flex:1; color:var(--text); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nom-preview-m2 { font-size:10.5px; color:var(--text-dim); white-space:nowrap; flex-shrink:0; }
  .nom-preview-empty {
    padding:28px; text-align:center; color:var(--text-dim); font-size:13px;
    border-radius:12px; border:1.5px dashed var(--glass-border);
  }
  @keyframes nomFadeUp {
    from { opacity:0; transform:translateY(7px); }
    to   { opacity:1; transform:translateY(0); }
  }

  /* ══ OBRA MASSIVA v2 — Accordion Grupos+Serviços ══ */
  /* cores por tipo de grupo */
  :root {
    --gc-torre:   #3b9dff;
    --gc-setor:   #a855f7;
    --gc-unidade: #22c55e;
    --gc-area:    #f59e0b;
    --gc-livre:   #64748b;
  }

  /* ══ ACCORDION GRUPOS (Step 4) ══ */
  .nom-gc2 {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-left: 3px solid var(--gc2-accent, rgba(255,255,255,.12));
    border-radius: 14px; overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.22);
    transition: border-color .2s, box-shadow .2s;
    animation: nomFadeUp .22s cubic-bezier(.16,1,.3,1) both;
  }
  .nom-gc2:hover {
    border-color: rgba(255,255,255,.13);
    box-shadow: 0 3px 18px rgba(0,0,0,.3);
  }
  .nom-gc2:not(.nom-gc2-collapsed) {
    border-color: var(--gc2-accent, rgba(255,255,255,.12));
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
  }

  /* Header do accordion */
  .nom-gc2-hdr {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 12px 13px 16px;
    cursor: pointer; user-select: none; transition: background .15s;
  }
  .nom-gc2-hdr:hover { background: rgba(255,255,255,.03); }
  .nom-gc2-hdr-info {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  }
  .nom-gc2-name {
    font-size: 13.5px; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Type badge — consistent with step 3 */
  .nom-tipo-badge {
    display: inline-flex; align-items: center;
    font-size: 9.5px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; padding: 2px 8px;
    border-radius: 20px; white-space: nowrap; flex-shrink: 0;
  }
  .nom-tipo-badge.torre   { background:rgba(59,157,255,.14);  color:#7ec8ff; border:1px solid rgba(59,157,255,.25); }
  .nom-tipo-badge.setor   { background:rgba(168,85,247,.14);  color:#c084fc; border:1px solid rgba(168,85,247,.25); }
  .nom-tipo-badge.unidade { background:rgba(34,197,94,.14);   color:#4ade80; border:1px solid rgba(34,197,94,.25); }
  .nom-tipo-badge.area    { background:rgba(245,158,11,.14);  color:#fbbf24; border:1px solid rgba(245,158,11,.25); }
  .nom-tipo-badge.livre   { background:rgba(100,116,139,.14); color:#94a3b8; border:1px solid rgba(100,116,139,.2); }

  /* Count + m² badges */
  .nom-gc2-badge {
    font-size: 10px; font-weight: 600; padding: 2px 8px;
    border-radius: 20px; white-space: nowrap;
    background: rgba(255,255,255,.06);
    color: var(--gc2-color, var(--blue-bright));
    border: 1px solid rgba(255,255,255,.1);
  }
  .nom-gc2-m2-badge { font-size: 10.5px; color: var(--text-dim); font-weight: 500; }

  /* Header action area */
  .nom-gc2-hdr-actions { display:flex; align-items:center; gap:3px; flex-shrink:0; }
  .nom-gc2-icon-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-dim); padding: 7px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s, background .15s;
  }
  .nom-gc2-icon-btn svg { width: 15px; height: 15px; display: block; }
  .nom-gc2-icon-btn:hover { color: var(--text); background: rgba(255,255,255,.08); }
  .nom-gc2-icon-btn.nom-gc2-del-icon:hover { color: #f87171; background: rgba(239,68,68,.1); }
  .nom-gc2-chevron {
    color: var(--text-dim); padding: 4px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .22s ease; flex-shrink: 0;
  }
  .nom-gc2-chevron svg { width: 16px; height: 16px; display: block; }
  .nom-gc2:not(.nom-gc2-collapsed) .nom-gc2-chevron { transform: rotate(180deg); }

  /* Body */
  .nom-gc2-body { padding: 14px 14px 16px; border-top: 1px solid rgba(255,255,255,.05); }
  .nom-gc2-collapsed .nom-gc2-body { display: none; }

  /* Sugestões */
  .nom-sugs-section { margin-bottom: 14px; }
  .nom-sugs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
  .nom-no-servs {
    font-size: 12px; color: var(--text-dim); opacity: .45;
    padding: 4px 2px 10px; font-style: italic;
  }

  /* ─── Service rows ──────────────────────────────────────────── */
  .nom-srv-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

  .nom-srv-row {
    background: rgba(10,16,32,.55);
    border: 1px solid rgba(255,255,255,.08);
    border-left: 3px solid var(--gc2-accent, rgba(255,255,255,.15));
    border-radius: 2px 10px 10px 2px;
    margin-bottom: 10px;
    transition: border-color .18s, box-shadow .18s;
    animation: nomFadeUp .2s cubic-bezier(.16,1,.3,1) both;
  }
  .nom-srv-row:hover {
    border-color: rgba(255,255,255,.13);
    box-shadow: 0 4px 18px rgba(0,0,0,.25);
  }

  /* Row header — name + delete */
  .nom-srv-row-head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 12px 10px 14px;
    background: rgba(255,255,255,.02);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .nom-srv-name {
    flex: 1; background: none; border: none; outline: none;
    font-size: 14px; font-weight: 600; color: var(--text);
    font-family: var(--font); line-height: 1.4; min-width: 0;
  }
  .nom-srv-name::placeholder { color: rgba(255,255,255,.2); font-weight: 400; font-style: italic; font-size: 13px; }
  .nom-srv-del-btn {
    flex-shrink: 0; background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,.25); padding: 6px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s, background .15s;
  }
  .nom-srv-del-btn:hover { color: #f87171; background: rgba(239,68,68,.1); }
  .nom-srv-del-btn svg { width: 14px; height: 14px; display: block; }

  /* Body wrapper */
  .nom-srv-row-body { padding: 13px 14px 14px; }

  /* Fields grid — 2-col, with sistema spanning full width */
  .nom-srv-fields {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px 10px; margin-bottom: 10px;
  }
  .nom-srv-sistema { grid-column: span 2; }

  .nom-field-lbl {
    font-size: 10.5px; font-weight: 700; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px;
  }
  .nom-srv-m2 {
    width: 100%; padding: 10px 13px; background: var(--glass);
    border: 1px solid var(--glass-border); border-radius: 10px;
    color: var(--text); font-size: 13px; font-family: var(--font); outline: none;
    transition: border-color .18s, background .18s, box-shadow .18s; box-sizing: border-box;
  }
  .nom-srv-m2:focus {
    border-color: var(--blue-bright); background: rgba(74,127,212,.08);
    box-shadow: 0 0 0 3px rgba(74,127,212,.15);
  }
  .nom-srv-select {
    width: 100%; padding: 10px 34px 10px 13px; background: var(--glass);
    border: 1px solid var(--glass-border); border-radius: 10px;
    color: var(--text); font-size: 13px; font-family: var(--font);
    outline: none; cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667799' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    transition: border-color .18s, background .18s, box-shadow .18s; box-sizing: border-box;
  }
  .nom-srv-select:focus {
    border-color: var(--blue-bright); background: rgba(74,127,212,.08);
    box-shadow: 0 0 0 3px rgba(74,127,212,.15);
  }
  .nom-srv-select option { background: #0d1424; }

  /* Config section (aplicar em / setores) */
  .nom-srv-cfg {
    padding: 10px 12px; margin-bottom: 10px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07); border-radius: 9px;
  }
  .nom-srv-cfg-lbl {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: var(--text-dim); opacity: .7; margin-bottom: 8px;
  }
  .nom-srv-cfg-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .nom-srv-cfg-chip {
    font-size: 12px; font-weight: 500; padding: 5px 13px; border-radius: 20px;
    border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
    color: var(--text-dim); cursor: pointer; transition: all .15s; font-family: var(--font);
  }
  .nom-srv-cfg-chip:hover { border-color: rgba(255,255,255,.22); color: var(--text); background: rgba(255,255,255,.07); }
  .nom-srv-cfg-chip.active {
    background: rgba(74,127,212,.15); border-color: rgba(74,127,212,.5);
    color: var(--blue-bright); font-weight: 600;
  }
  .nom-srv-cfg-range {
    display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap;
  }
  .nom-srv-cfg-range input { width: 88px; }
  .nom-srv-cfg-range span { font-size: 11px; color: var(--text-dim); }

  /* Etapas section */
  .nom-srv-etapas {
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: 10px; margin-top: 6px;
  }
  .nom-srv-etapas-head {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
  }
  /* "+ etapa" button — ghost/outline to match .btn-nom-add-srv "add" language */
  .nom-etapa-add-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; padding: 6px 14px;
    border-radius: 8px; cursor: pointer; font-family: var(--font);
    background: transparent; border: 1.5px dashed rgba(59,157,255,.35);
    color: var(--blue-bright); transition: all .18s; letter-spacing: .2px;
  }
  .nom-etapa-add-btn:hover {
    background: rgba(74,127,212,.08);
    border-color: var(--blue-bright);
    border-style: solid;
  }

  /* Etapa rows */
  .nom-etapa-row {
    display: flex; align-items: center; gap: 8px; padding: 0 6px 0 4px;
    background: rgba(255,255,255,.03); border-radius: 8px; margin-bottom: 4px;
    border: 1px solid rgba(255,255,255,.07);
    transition: border-color .12s, background .12s, box-shadow .12s;
  }
  .nom-etapa-row:focus-within { border-color: rgba(74,127,212,.35); background: rgba(74,127,212,.04); }
  /* Drag states */
  .nom-etapa-row.nom-etapa-dragging { opacity: .35; }
  .nom-etapa-row.nom-etapa-drag-over {
    border-color: var(--blue-bright); background: rgba(74,127,212,.1);
    box-shadow: 0 0 0 1px rgba(74,127,212,.3);
  }
  /* Drag handle */
  .nom-etapa-grip {
    flex-shrink: 0; display: flex; align-items: center; padding: 10px 4px 10px 2px;
    cursor: grab; opacity: .3; transition: opacity .15s; color: var(--text-dim);
  }
  .nom-etapa-grip:hover { opacity: .7; }
  .nom-etapa-grip svg { width: 13px; height: 13px; display: block; }
  /* Content wrapper stretches to fill space */
  .nom-etapa-content { flex: 1; min-width: 0; }

  /* ── Etapa dropdown — csel visual, list position:fixed ───────── */
  .nom-eta-dd { position: relative; }
  .nom-eta-dd-btn {
    width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px; padding: 9px 34px 9px 12px; color: var(--text);
    font-family: var(--font); font-size: 13px; cursor: pointer; text-align: left;
    display: block; outline: none; position: relative; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    transition: border-color .2s, background .2s, box-shadow .2s; box-sizing: border-box;
  }
  .nom-eta-dd-btn:hover { border-color: rgba(255,255,255,.18); }
  .nom-eta-dd.open .nom-eta-dd-btn,
  .nom-eta-dd-btn:focus {
    border-color: var(--blue-bright); background: rgba(74,127,212,.08);
    box-shadow: 0 0 0 3px rgba(74,127,212,.15);
  }
  /* Reuse csel-chevron inside the button */
  .nom-eta-dd-btn .csel-chevron { right: 10px; width: 14px; height: 14px; transition: transform .2s ease; }
  .nom-eta-dd.open .nom-eta-dd-btn .csel-chevron { transform: translateY(-50%) rotate(180deg); }
  /* List — portaled to document.body on open; coords via getBoundingClientRect */
  .nom-eta-dd-list {
    position: fixed; z-index: 10000;
    background: #0d1528; border: 1px solid var(--glass-border); border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.6); overflow: hidden;
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity .15s ease, transform .15s ease; max-height: 260px; overflow-y: auto;
  }
  .nom-eta-dd.open .nom-eta-dd-list,
  .nom-eta-dd-list.open { opacity: 1; transform: translateY(0); pointer-events: all; }
  .nom-eta-dd-opt {
    padding: 9px 14px; cursor: pointer; color: var(--text); transition: background .12s;
    border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px;
  }
  .nom-eta-dd-opt:last-child { border-bottom: none; }
  .nom-eta-dd-opt:hover { background: rgba(74,127,212,.12); }
  .nom-eta-dd-opt.selected { color: var(--blue-bright); background: rgba(74,127,212,.08); font-weight: 600; }
  .nom-eta-dd-opt.placeholder-opt { color: var(--text-dim); font-style: italic; font-size: 12px; }
  .nom-eta-dd-opt.create-opt {
    color: var(--blue-bright); font-weight: 500;
    border-top: 1px solid rgba(255,255,255,.07); border-bottom: none;
  }
  .nom-eta-dd-opt.create-opt:hover { background: rgba(74,127,212,.15); }
  /* Inline create area — shown when "✏ Criar etapa…" is clicked */
  .nom-eta-dd-create { display: none; padding: 6px 10px 10px; }
  .nom-eta-dd-create.visible { display: block; }
  .nom-eta-dd-create-input {
    width: 100%; background: rgba(255,255,255,.07); border: 1px solid rgba(74,127,212,.4);
    border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 13px;
    font-family: var(--font); outline: none; box-sizing: border-box; transition: border-color .15s;
  }
  .nom-eta-dd-create-input:focus { border-color: var(--blue-bright); }
  .nom-eta-dd-create-hint { font-size: 10.5px; color: var(--text-dim); opacity: .5; margin-top: 4px; }
  /* Plain text input — used when service has no predefined etapas */
  .nom-etapa-custom-input {
    width: 100%; background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: 10px; padding: 10px 13px; box-sizing: border-box;
    font-size: 13px; color: var(--text); font-family: var(--font); outline: none;
    transition: border-color .18s, background .18s, box-shadow .18s;
  }
  .nom-etapa-custom-input:focus {
    border-color: var(--blue-bright); background: rgba(74,127,212,.08);
    box-shadow: 0 0 0 3px rgba(74,127,212,.15);
  }
  .nom-etapa-custom-input::placeholder { color: rgba(255,255,255,.22); font-style: italic; }
  .nom-etapa-del {
    flex-shrink: 0; background: none; border: none; cursor: pointer;
    color: rgba(255,100,100,.35); padding: 4px 5px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; line-height: 1; transition: all .15s; align-self: flex-start;
  }
  .nom-etapa-del:hover { background: rgba(255,80,80,.1); color: rgba(255,100,100,.9); }
  .nom-no-etapas {
    font-size: 11px; color: var(--text-dim); opacity: .4;
    padding: 4px 2px; font-style: italic;
  }

  /* (deprecated .btn-nom-add-srv block removed — canonical rule lives at line ~5479) */
  .btn-nom-add-srv svg { width: 13px; height: 13px; display: block; }

  /* Totais bar */
  .nom-totais-bar {
    display: flex; align-items: center; gap: 20px;
    padding: 11px 16px; margin-top: 14px;
    background: rgba(59,157,255,.05); border: 1px solid rgba(59,157,255,.14);
    border-radius: 10px;
  }
  .nom-totais-item { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
  .nom-totais-item strong { color: var(--blue-bright); font-size: 14px; font-weight: 700; }

  /* Chips de sugestão */
  .nom-srv-sugs {
    display:flex; flex-wrap:wrap; gap:4px; margin-top:6px;
  }
  .nom-srv-sug {
    font-size:10.5px; padding:2px 8px; border-radius:20px; cursor:pointer;
    background:rgba(255,255,255,.05); color:var(--text-dim);
    border:1px solid var(--glass-border); transition:all .12s; white-space:nowrap;
  }
  .nom-srv-sug:hover { background:rgba(255,255,255,.1); color:var(--text); border-color:rgba(255,255,255,.2); }
  .nom-srv-sug.nom-sug-used { opacity:.35; pointer-events:none; }

  /* m² inline */
  .nom-srv-m2-wrap {
    display:flex; flex-direction:column; align-items:flex-end;
    gap:3px; flex-shrink:0; width:90px;
  }
  /* (deprecated .nom-srv-m2 / .nom-srv-m2-lbl overrides removed — canonical rule lives at line ~5124) */
  .nom-srv-del {
    background:none; border:none; cursor:pointer; color:var(--text-dim);
    width:26px; height:26px; border-radius:6px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    transition:all .15s; margin-top:2px;
  }
  .nom-srv-del svg { width:14px; height:14px; }
  .nom-srv-del:hover { background:rgba(255,60,60,.15); color:#ff6b6b; }

  /* Botão adicionar serviço */
  .btn-add-srv {
    display:flex; align-items:center; gap:6px; width:100%;
    background:rgba(255,255,255,.03); border:1.5px dashed rgba(255,255,255,.1);
    border-radius:9px; padding:9px 12px; cursor:pointer;
    color:var(--text-dim); font-size:12px; font-family:inherit;
    transition:all .15s; text-align:left;
  }
  .btn-add-srv svg { width:14px; height:14px; flex-shrink:0; }
  .btn-add-srv:hover {
    background:rgba(255,255,255,.07); border-color:var(--blue-bright);
    color:var(--blue-bright);
  }

  /* Separador entre grupos no step 3 */
  .nom-sp3-hint {
    font-size:11.5px; color:var(--text-dim); line-height:1.5;
    padding:10px 12px; background:rgba(255,255,255,.02);
    border:1px solid var(--glass-border); border-radius:9px; margin-bottom:14px;
  }

  /* Animação clone ao copiar grupo */
  @keyframes nomCloneIn {
    from { opacity:0; transform:scale(.96) translateY(-6px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
  }
  .nom-gc2.nom-clone-anim { animation: nomCloneIn .25s ease both; }


  /* Barra de totais */
  .nom-totais-bar {
    display:flex; align-items:center; justify-content:flex-end; gap:16px;
    padding:10px 14px; background:rgba(255,255,255,.02);
    border:1px solid var(--glass-border); border-radius:10px; margin-top:12px;
  }
  .nom-totais-item { font-size:12px; color:var(--text-dim); }
  .nom-totais-item strong { color:var(--text); font-size:13px; }

  /* Chip selecionada */
  .nom-srv-sug.nom-sc-on { background:rgba(59,157,255,.15); color:var(--blue-bright); border-color:rgba(59,157,255,.3); }

  /* ══════════════════════════════════════════════
     VISUAL OVERHAUL — Obra Massiva Wizard v2
     18 melhorias de UX/UI/Mobile
  ══════════════════════════════════════════════ */

  /* 1. Progress bar — 4px + gradiente azul */
  .nop-progress-track { height:4px !important; background:rgba(255,255,255,.06) !important; border-radius:2px; overflow:hidden; margin:0; }
  #nop-progress, .nop-progress-fill { height:100%; background:linear-gradient(90deg, var(--blue), var(--blue-bright)) !important; border-radius:2px; transition:width .4s ease; }

  /* 2. Step dots — ver definição canônica acima */

  /* 4. Chips — touch target maior */
  .nom-srv-sug { padding:6px 12px; font-size:11.5px; border-radius:20px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:var(--text-dim); cursor:pointer; transition:all .18s; user-select:none; white-space:nowrap; }
  .nom-srv-sug:hover { border-color:rgba(59,157,255,.3); color:var(--blue-bright); background:rgba(59,157,255,.08); }
  .nom-srv-sug.nom-sc-added { background:rgba(34,197,94,.08); border-color:rgba(34,197,94,.2); color:rgba(34,197,94,.7); cursor:default; pointer-events:none; }

  /* 5. Contact cards — alinhado com nop-card */
  .nom-ct-card { background:var(--surface); border:1px solid var(--glass-border); border-radius:12px; padding:14px 16px; margin-bottom:10px; position:relative; transition:border-color .2s; }
  .nom-ct-card:hover { border-color:rgba(255,255,255,.14); }
  .nom-ct-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .nom-ct-card-title { font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; }
  .nom-ct-del { background:none; border:none; color:rgba(255,80,80,.5); cursor:pointer; font-size:18px; padding:2px 6px; border-radius:6px; transition:all .15s; line-height:1; }
  .nom-ct-del:hover { background:rgba(255,80,80,.1); color:rgba(255,80,80,.9); }

  /* 6. Botão salvar — verde sólido no passo final */
  #nop-next.save { background:linear-gradient(135deg, #16a34a, #22c55e); border-color:#22c55e; color:#fff; box-shadow:0 4px 16px rgba(34,197,94,.25); }
  #nop-next.save:hover { background:linear-gradient(135deg, #15803d, #16a34a); box-shadow:0 4px 20px rgba(34,197,94,.35); }

  /* 7. Gap system 8pt uniforme */
  .nop-step-title { font-size:18px; font-weight:700; color:var(--text); margin-bottom:16px; line-height:1.3; }
  .nop-step-title span { display:block; font-size:12.5px; font-weight:400; color:var(--text-dim); margin-top:4px; }

  /* 8. Accordion header — chevron maior + hover */
  .nom-gc2-hdr { padding:12px 16px; cursor:pointer; display:flex; align-items:center; gap:8px; border-radius:inherit; transition:background .18s; }
  .nom-gc2-hdr:hover { background:rgba(255,255,255,.04); }
  .nom-gc2-chevron { font-size:16px; color:var(--text-dim); transition:transform .22s ease; display:inline-block; flex-shrink:0; }

  /* Botões de ação no header do accordion (Duplicar / Excluir) */
  .nom-gc2-action-btn { background:none; border:1px solid transparent; cursor:pointer; color:var(--text-dim); padding:4px 9px; border-radius:7px; display:flex; align-items:center; gap:4px; font-size:11px; opacity:.55; transition:all .15s; flex-shrink:0; font-family:inherit; }
  .nom-gc2-action-btn:hover { opacity:1; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); }
  .nom-gc2-del-btn { color:rgba(239,68,68,.7); }
  .nom-gc2-del-btn:hover { background:rgba(239,68,68,.1) !important; border-color:rgba(239,68,68,.2) !important; color:rgba(239,68,68,.95) !important; }
  .nom-gc2:not(.nom-gc2-collapsed) .nom-gc2-chevron { transform:rotate(180deg); }

  /* 9. Step title — margem e subtítulo */
  .nom-step-subtitle { font-size:12px; color:var(--text-dim); margin-bottom:20px; margin-top:-10px; }

  /* 10. Selects — chevron consistente */
  .nom-select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667799' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px !important; }

  /* 11. Botões deletar etapa — min 32px */
  .nom-etapa-del { min-width:32px; min-height:32px; display:flex; align-items:center; justify-content:center; background:none; border:1px solid transparent; border-radius:8px; color:rgba(255,80,80,.45); cursor:pointer; font-size:15px; transition:all .15s; flex-shrink:0; }
  .nom-etapa-del:hover { background:rgba(255,80,80,.1); border-color:rgba(255,80,80,.2); color:rgba(255,80,80,.85); }

  /* 12. Preview banner — contador maior */
  .nom-preview-banner { background:rgba(59,157,255,.08); border:1px solid rgba(59,157,255,.2); border-radius:12px; padding:16px 20px; margin-bottom:20px; display:flex; align-items:center; gap:16px; }
  .nom-preview-count { font-size:32px; font-weight:800; color:var(--blue-bright); line-height:1; }
  .nom-preview-label { font-size:13px; color:var(--text-dim); }
  .nom-preview-label strong { color:var(--text); display:block; font-size:14px; margin-bottom:2px; }

  /* 13. Section labels — uppercase */
  .nom-section-label { font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--text-dim); opacity:.7; margin-bottom:8px; }

  /* 15. Totais bar — glassmorphism */
  .nom-totais-bar { display:flex; align-items:center; justify-content:flex-end; gap:20px; padding:12px 16px; background:rgba(59,157,255,.06); border:1px solid rgba(59,157,255,.15); border-radius:10px; margin-top:14px; }
  .nom-totais-item { font-size:12px; color:var(--text-dim); display:flex; align-items:center; gap:6px; }
  .nom-totais-item strong { color:var(--blue-bright); font-size:14px; }


  /* 18. btn-add-srv — alinhado com btn-nop-add */
  .btn-nom-add-srv { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px 14px; background:transparent; border:1.5px dashed rgba(255,255,255,.1); border-radius:12px; color:var(--text-dim); font-size:12.5px; font-weight:600; font-family:var(--font); cursor:pointer; transition:border-color .18s, color .18s, background .18s; margin-top:10px; }
  .btn-nom-add-srv:hover { background:rgba(74,127,212,.06); border-color:var(--blue-bright); color:var(--blue-bright); }

  /* Accordion container */
  .nom-gc2 { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px; margin-bottom:10px; overflow:hidden; transition:border-color .2s; }
  .nom-gc2:not(.nom-gc2-collapsed) { border-color:rgba(59,157,255,.2); }
  .nom-gc2-collapsed .nom-gc2-body { display:none; }

  /* (deprecated .no-input override removed — canonical rule lives at line ~4093 with focus glow) */


  /* Hint texto */
  .no-step-hint { font-size:12px; color:var(--text-dim); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:8px; padding:10px 12px; line-height:1.5; }

/* ── IMPORT MODAL ── */
.import-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:800; backdrop-filter:blur(6px); align-items:center; justify-content:center; }
.import-backdrop.open { display:flex; }
.import-modal { background:#0e1528; border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:28px; width:min(520px,92vw); max-height:80vh; overflow-y:auto; }
.import-modal-title { font-size:18px; font-weight:700; color:#f0f2f8; margin-bottom:6px; }
.import-modal-sub { font-size:13px; color:#7a8bb0; margin-bottom:20px; }
.import-progress { background:rgba(255,255,255,.05); border-radius:12px; padding:16px; margin-bottom:12px; max-height:300px; overflow-y:auto; }
.import-log-line { font-size:12px; color:#7a8bb0; padding:3px 0; border-bottom:1px solid rgba(255,255,255,.04); font-family:monospace; }
.import-log-line.ok  { color:#86efac; }
.import-log-line.err { color:#fca5a5; }
.import-log-line.info { color:#93c5fd; }
.import-actions { display:flex; gap:10px; margin-top:16px; }
.btn-import-start { flex:1; padding:11px; border-radius:12px; border:none; background:#284d94; color:#fff; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font); }
.btn-import-start:hover { background:#4a7fd4; }
.btn-import-start:disabled { opacity:.5; cursor:not-allowed; }
.btn-import-close { padding:11px 20px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:transparent; color:#7a8bb0; font-size:14px; cursor:pointer; font-family:var(--font); }
.import-summary { display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.import-stat { background:rgba(255,255,255,.05); border-radius:10px; padding:10px 16px; text-align:center; }
.import-stat-n { font-size:22px; font-weight:700; color:#f0f2f8; }
.import-stat-l { font-size:11px; color:#7a8bb0; margin-top:2px; }

/* ══ ORCAMENTOS NO DRAWER DE OBRA ══ */
.od-orc-section { padding: 12px 0 4px; }
.od-orc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.od-orc-title {
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .5px;
}
.btn-od-orc-novo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: rgba(74, 127, 212, .1); border: 1px solid rgba(74, 127, 212, .25);
  color: var(--blue-bright); font-size: 12px; font-weight: 600; font-family: var(--font);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.btn-od-orc-novo:hover {
  background: rgba(74, 127, 212, .2); border-color: rgba(74, 127, 212, .5);
}
.od-orc-list { display: flex; flex-direction: column; gap: 6px; }
.od-orc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--glass-border);
  border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s;
}
.od-orc-row:hover { border-color: rgba(255, 255, 255, .14); background: var(--surface-hover); }
.od-orc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.od-orc-info { flex: 1; min-width: 0; }
.od-orc-numero { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.od-orc-sub { font-size: 11px; color: var(--text-sub); margin-top: 2px; }

/* ══ MOBILE BREAKPOINTS — ORCAMENTO ══ */
@media (max-width: 640px) {
  .orc-row-2 { grid-template-columns: 1fr !important; gap: 8px !important; }
  .orc-semaforo-row { flex-wrap: wrap; }
  .orc-semaforo-label { flex: 1 1 100%; margin-top: 4px; }
  .orc-quick-est { flex-wrap: wrap; gap: 10px 14px; }
  .orc-bd-row { flex-wrap: wrap; gap: 4px 8px; }
  .orc-price-big { font-size: 30px !important; }
  .orc-price-total { font-size: 12px !important; }
  .orc-topbar { padding: 12px 16px; }
  .orc-topbar-title { font-size: 15px; }
  .btn-orc-novo, .btn-orc-hist { padding: 7px 10px; font-size: 11px; }
}