:root{
    --bg: #12151A;
    --bg-2: #0D0F13;
    --panel: #1A1F26;
    --panel-2: #212832;
    --line: #2C333D;
    --line-soft: #232A33;
    --text: #EDEBE3;
    --text-dim: #8B93A0;
    --text-faint: #5C636E;
    --accent: #F2B705;
    --accent-deep: #B98600;
    --accent-soft: rgba(242,183,5,0.12);
    --steel: #4F9AC0;
    --steel-soft: rgba(79,154,192,0.14);
    --good: #4FAE7C;
    --good-soft: rgba(79,174,124,0.14);
    --bad: #E1595A;
    --bad-soft: rgba(225,89,90,0.14);
    --warn: #E1943C;
    --radius: 16px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background:
      repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 7px),
      var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }
  body.auth-locked{ overflow:hidden; }
  ::selection{ background: var(--accent-soft); }
  .mono{ font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; }
  .hidden{ display:none !important; }
  .wrap{ max-width: 1680px; margin: 0 auto; padding: 0 28px 80px; }

  /* ---------- Header ---------- */
  header.top{
    background: linear-gradient(180deg, var(--bg-2), var(--bg));
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
  }
  header.top::before{
    content:"";
    position:absolute; inset:0;
    background: repeating-linear-gradient(100deg, transparent 0 38px, rgba(242,183,5,0.035) 38px 40px);
    pointer-events:none;
  }
  .top-inner{
    max-width:1680px; margin:0 auto; padding: 30px 14px 24px 28px;
    display:flex; align-items:flex-end; justify-content:space-between; gap: 24px;
    position:relative; z-index:1; flex-wrap:wrap;
  }
  .brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
    margin-top:12px;
  }
  .brand-logos{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
  }
  .brand-logo-main{
    height:84px;
    width:auto;
    display:block;
    flex-shrink:0;
  }
  .brand-mark{
    height:60px; width:auto; flex-shrink:0; display:block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
  }
  .brand-text .name{
    font-family:'Oswald'; font-weight:600; font-size:22px; letter-spacing:0.04em;
    text-transform:uppercase; line-height:1;
  }
  .brand-text{ margin-left:0; text-align:center; }
  .brand-text .tag{ font-size:11.5px; color:var(--text-dim); letter-spacing:0.06em; margin-top:4px; text-transform:uppercase;}
  .telhas-logo-img{
    margin-left:0;
    width:auto;
    height:95.3px;
    display:block;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.24));
    flex-shrink:0;
  }
  .period{
    margin-left:auto;
    margin-right:-2px;
    text-align:right;
  }
  .period .eyebrow{ font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); font-weight:600; }
  .period .value{ font-family:'Oswald'; font-size:30px; font-weight:600; letter-spacing:0.02em; margin-top:2px;}
  .period .sub{ font-size:13px; color:var(--text-faint); margin-top:2px;}
  .excel-btn{
    margin-top:10px;
    border:1px solid var(--line);
    background:var(--panel-2);
    color:var(--text);
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:0.02em;
    padding:7px 10px;
    border-radius:8px;
    cursor:pointer;
  }
  .excel-btn:hover{ border-color:var(--accent); color:var(--accent); }
  .logout-powered-row{
    margin-top:10px;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .logout-powered-row .logout-btn{
    margin-left:auto;
  }
  .logout-powered-row .excel-btn{
    margin-top:0;
  }
  .month-picker-card{
    margin-top:10px;
    width:min(360px, 100%);
    text-align:left;
    border:1px solid var(--line);
    background:var(--panel-2);
    border-radius:10px;
    padding:10px;
  }
  .month-picker-card.hidden{ display:none; }
  .month-picker-title{
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:700;
    margin-bottom:8px;
  }
  .month-picker-list{
    display:grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap:6px 10px;
  }
  .month-picker-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--text);
  }
  .month-picker-actions{
    margin-top:10px;
    display:flex;
    justify-content:flex-end;
  }
  .month-picker-note{
    margin-top:8px;
    font-size:11px;
    color:var(--text-faint);
    min-height:15px;
  }
  .access-status{
    margin-top:8px;
    font-size:11.5px;
    color:var(--accent);
    letter-spacing:0.04em;
    min-height:14px;
  }
  .header-utility-row{
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:nowrap;
    width:100%;
  }
  .header-utility-row .excel-btn{
    margin-top:0;
    flex:0 0 auto;
  }
  .user-identity-card{
    margin-top:0;
    padding:7px 10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.08);
    background:linear-gradient(180deg, rgba(33,40,50,0.98), rgba(26,31,38,0.98));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 20px rgba(0,0,0,0.18);
    position:relative;
    overflow:hidden;
    transform:none;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
    text-align:left;
    min-width:0;
    max-width:none;
    white-space:nowrap;
  }
  .user-identity-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 34%, transparent 60%);
    pointer-events:none;
  }
  .user-identity-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(242,183,5,0.06), transparent 42%);
    pointer-events:none;
  }
  .user-identity-label{
    position:relative;
    z-index:1;
    font-size:10px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:700;
    white-space:nowrap;
  }
  .user-identity-meta{
    position:relative;
    z-index:1;
    margin-top:0;
    display:inline-flex;
    gap:8px;
    flex-wrap:nowrap;
  }
  .user-identity-pill{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.06);
    font-size:10px;
    letter-spacing:0.04em;
    text-transform:uppercase;
  }
  .user-identity-pill.gold{
    border-color:rgba(242,183,5,0.30);
    background:rgba(242,183,5,0.10);
    color:var(--accent);
    font-weight:700;
  }
  .month-apply-status{
    margin-top:6px;
    font-size:11px;
    color:#9fe7bf;
    letter-spacing:0.03em;
    min-height:14px;
  }
  .month-apply-status.hidden{ display:none; }
  .auto-refresh-status{
    margin-top:4px;
    font-size:10.5px;
    color:#8fb0c9;
    letter-spacing:0.02em;
    min-height:13px;
  }
  .auto-refresh-status.hidden{ display:none; }
  .access-banner{
    margin-top:22px;
    padding:14px 16px;
    border:1px solid rgba(242,183,5,0.24);
    border-radius:14px;
    background:linear-gradient(180deg, rgba(242,183,5,0.12), rgba(242,183,5,0.04));
    color:var(--text);
    font-size:13px;
  }
  .access-banner strong{
    color:var(--accent);
  }
  .seller-panel{
    margin-bottom:18px;
    padding:18px;
    border:1px solid rgba(79,154,192,0.22);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(33,45,58,0.94), rgba(25,31,38,0.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .seller-panel-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    align-items:flex-end;
  }
  .seller-panel-title{
    font-family:'Oswald';
    font-size:29px;
    letter-spacing:0.04em;
    text-transform:uppercase;
  }
  .seller-panel-sub{
    margin-top:6px;
    color:#a9b5c7;
    font-size:16px;
    max-width:720px;
  }
  .seller-panel-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(242,183,5,0.28);
    background:rgba(242,183,5,0.10);
    color:var(--accent);
    font-size:13px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .seller-kpis{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap:12px;
    margin-top:18px;
  }
  .seller-kpi{
    padding:16px 16px 14px;
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,0.13);
    background:
      radial-gradient(130% 75% at 14% -12%, rgba(255,255,255,0.10), rgba(255,255,255,0) 55%),
      linear-gradient(165deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.012) 45%, rgba(255,255,255,0.015) 100%),
      rgba(18,22,28,0.5);
    position:relative;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -1px 0 rgba(0,0,0,0.3),
      0 2px 4px rgba(0,0,0,0.35),
      0 10px 20px -8px rgba(0,0,0,0.45);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .seller-kpi-compact{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    height:100%;
  }
  .seller-kpi-compact .value{
    max-width:100%;
  }
  .seller-kpi .label{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--text-dim);
    font-weight:700;
  }
  .seller-kpi .value{
    margin-top:8px;
    font-family:'JetBrains Mono';
    font-size:clamp(17px, 1.7vw, 25px);
    font-weight:700;
    line-height:1.1;
    overflow-wrap:break-word;
  }
  .seller-kpi-value-main{
    font-size:clamp(17px, 1.7vw, 25px);
    line-height:1.05;
    white-space:normal;
    overflow-wrap:break-word;
  }
  .seller-kpi-value-secondary{
    margin-top:4px;
    font-size:clamp(11.5px, 0.95vw, 13px);
    font-weight:700;
    color:#9da8b8;
    white-space:normal;
    overflow-wrap:break-word;
  }
  .seller-kpi .meta{
    margin-top:10px;
    font-size:13px;
    color:#9ca9ba;
  }
  .seller-kpi .foot.steel{ color: var(--steel); }
  .seller-kpi-track{
    margin-top:12px;
    height:8px;
    border-radius:999px;
    background:rgba(0,0,0,0.28);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
    overflow:hidden;
  }
  .seller-kpi-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, #7fd6a6, #54c890);
  }
  .seller-kpi-fill.steel{
    background:linear-gradient(90deg, #8fd1ff, #4f9ac0);
  }
  .seller-kpi-fill.gold{
    background:linear-gradient(90deg, #ffe27a, #f2b705);
  }
  .seller-kpi-fill.warn{
    background:linear-gradient(90deg, #ffcc84, #e1943c);
  }
  .seller-kpi-fill.bad{
    background:linear-gradient(90deg, #ff9a9a, #ea5455);
  }
  .seller-kpi-foot{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:8px;
    font-size:13px;
    color:#9da8b8;
  }
  .seller-inline-stats{
    display:grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap:12px;
    margin-top:14px;
  }
  .seller-inline-card{
    padding:12px 14px;
    border-radius:12px;
    background:rgba(13,15,19,0.28);
    border:1px solid rgba(255,255,255,0.04);
    text-align:center;
  }
  .seller-inline-card .label{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--text-dim);
    font-weight:700;
  }
  .seller-inline-card .value{
    margin-top:8px;
    font-family:'JetBrains Mono';
    font-size:19px;
    font-weight:700;
  }
  .seller-section-title{
    margin-top:18px;
    margin-bottom:10px;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:var(--accent);
    font-weight:800;
  }
  .seller-detail-grid{
    display:grid;
    gap:10px;
    margin-top:14px;
    width:100%;
  }
  .seller-detail-grid-top{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .seller-detail-grid-bottom{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top:10px;
  }
  .seller-detail-item{
    padding:12px 14px;
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,0.10);
    background:
      radial-gradient(130% 75% at 14% -12%, rgba(255,255,255,0.08), rgba(255,255,255,0) 55%),
      linear-gradient(165deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 45%, rgba(255,255,255,0.012) 100%),
      rgba(15,18,23,0.46);
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(0,0,0,0.26),
      0 2px 3px rgba(0,0,0,0.3),
      0 6px 14px -8px rgba(0,0,0,0.4);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .seller-detail-item .dl{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--text-dim);
    font-weight:700;
  }
  .seller-detail-item .dv{
    margin-top:6px;
    font-family:'JetBrains Mono';
    font-size:19px;
    font-weight:800;
    color:var(--text);
  }
  .auth-gate{
    position:fixed;
    inset:0;
    z-index:90;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(8,11,16,0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .auth-card{
    width:min(430px, 100%);
    padding:28px 24px 24px;
    border-radius:22px;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(130% 75% at 14% -12%, rgba(255,255,255,0.14), rgba(255,255,255,0) 52%),
      linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 45%, rgba(255,255,255,0.02) 100%),
      linear-gradient(180deg, rgba(26,31,38,0.92), rgba(18,21,26,0.92));
    border:1px solid rgba(79,154,192,0.28);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 -1px 0 rgba(0,0,0,0.35),
      0 2px 4px rgba(0,0,0,0.45),
      0 14px 28px -8px rgba(0,0,0,0.55),
      0 34px 60px -16px rgba(0,0,0,0.62);
  }
  .auth-card::after{
    content:"";
    position:absolute;
    left:10%; right:10%; bottom:0;
    height:1px;
    background: linear-gradient(90deg, rgba(79,154,192,0) 0%, rgba(79,154,192,0.5) 50%, rgba(79,154,192,0) 100%);
    pointer-events:none;
  }
  .auth-card h2{
    font-family:'Oswald';
    font-size:30px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    margin-bottom:6px;
  }
  .auth-card p{
    color:var(--text-dim);
    font-size:13px;
    line-height:1.45;
    margin-bottom:18px;
  }
  .auth-form{
    display:grid;
    gap:12px;
  }
  .auth-field{
    display:grid;
    gap:6px;
  }
  .auth-field label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--text-dim);
    font-weight:700;
  }
  .auth-field input{
    width:100%;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--panel-2);
    color:var(--text);
    padding:12px 14px;
    font-size:14px;
    outline:none;
  }
  .auth-field input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(242,183,5,0.12);
  }
  .auth-submit{
    margin-top:4px;
    width:100%;
    justify-content:center;
    padding:12px 14px;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }
  .auth-error{
    min-height:18px;
    color:var(--bad);
    font-size:12px;
  }
  .auth-note{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line-soft);
    color:var(--text-faint);
    font-size:11.5px;
    line-height:1.45;
  }
  .auth-users-hint{
    margin-top:10px;
    padding:10px 12px;
    border:1px solid rgba(79,154,192,0.22);
    border-radius:10px;
    background:rgba(23,30,38,0.65);
    font-size:11.5px;
    color:#b8c3d3;
    line-height:1.5;
  }
  .auth-users-hint strong{
    color:#d9e7ff;
  }

  /* ---------- KPI hero ---------- */
  .kpi-strip{
    display:grid; grid-template-columns: minmax(220px, 1.3fr) repeat(5, minmax(205px, 1fr)); gap:1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 28px; border-radius: var(--radius); overflow-x:auto; overflow-y:hidden;
  }
  .kpi{
    background: var(--panel); padding: 20px 22px; position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    overflow:hidden;
  }
  .kpi .label{ font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); font-weight:600;}
  .kpi .val{ font-family:'JetBrains Mono'; font-size:clamp(20px, 1.45vw, 26px); font-weight:600; margin-top:8px; line-height:1.1; white-space:nowrap;}
  .kpi .foot{ font-size:13.5px; color:var(--text-faint); margin-top:8px;}
  .kpi .foot.good{ color:var(--good); }
  .kpi .foot.bad{ color:var(--bad); font-size:14.85px; }
  .kpi-combo .kpi-combo-sep{ height:1px; background:var(--line); margin:14px 0; }
  .kpi-combo .label:not(:first-child){ margin-top:0; }
  .kpi-3d{
    background: linear-gradient(160deg, #252d39 0%, #1f2631 48%, #1b212b 100%);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -14px 18px rgba(0,0,0,0.14);
    transform: translateY(-1px);
  }
  .kpi-3d::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(110deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 42%);
    pointer-events:none;
  }
  .kpi-3d .label{ font-size:12.5px; line-height:1.25; }
  /* Reserva a altura de 2 linhas nos cartões de valor único para que o número
     principal (o "herói" de cada célula) comece sempre na mesma altura,
     independente do rótulo quebrar ou não em duas linhas. */
  .kpi-3d:not(.kpi-combo) .label{ min-height:2.5em; }
  .kpi-3d .val{ font-size:clamp(20px, 1.45vw, 27px); white-space:nowrap; }
  #kpiStrip .kpi:nth-child(2) .val,
  #kpiStrip .kpi:nth-child(3) .val{
    font-size:clamp(17px, 1.2vw, 23px);
  }
  .kpi-3d .foot{ font-size:14px; }
  #kpiStrip .kpi:nth-child(5) .val{ font-size:clamp(22px, 1.65vw, 30px); }
  .kpi-centered{
    align-items:center;
    text-align:center;
  }
  #kpiStrip .kpi-centered .val{ font-size:clamp(20px, 1.55vw, 27px); }
  .powered-card{
    margin-top:12px;
    padding:14px 18px;
    border-radius:14px;
    border:1px solid rgba(110, 241, 171, 0.55);
    background:linear-gradient(155deg, #2f7e58 0%, #256a49 45%, #1d543a 100%);
    box-shadow:0 10px 22px rgba(7, 33, 21, 0.35), inset 0 1px 0 rgba(229, 255, 241, 0.35), inset 0 -12px 20px rgba(0,0,0,0.20);
    position:relative;
    overflow:hidden;
    text-align:center;
    color:#eafff3;
    font-family:'Oswald';
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-size:19px;
    line-height:1.25;
    font-weight:600;
  }
  .powered-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.03) 35%, rgba(255,255,255,0) 55%);
    pointer-events:none;
  }
  .powered-card.powered-inline{
    margin-top:0;
    padding:7px 10px;
    border-radius:8px;
    font-size:11px;
    line-height:1.15;
    letter-spacing:0.05em;
    max-width:290px;
  }
  .part-badge{
    display:inline-block;
    margin-left:0;
    position:relative;
    overflow:hidden;
    padding:4px 11px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    color:#062312;
    border:1px solid rgba(180,255,205,0.65);
    background:
      linear-gradient(155deg, rgba(218,255,232,0.88) 0%, rgba(120,242,167,0.68) 46%, rgba(72,199,125,0.7) 100%);
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -6px 10px rgba(0,0,0,0.09),
      0 2px 5px rgba(26,143,85,0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .part-badge::after{
    content:"";
    position:absolute;
    left:10%;
    top:10%;
    width:80%;
    height:30%;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0));
    pointer-events:none;
  }
  .part-badge:hover{
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.56),
      inset 0 -6px 10px rgba(0,0,0,0.1),
      0 3px 7px rgba(26,143,85,0.22);
  }
  .part-line{
    display:block;
    margin-top:14px;
  }
  .info-chip-line{
    display:block;
    margin-top:12px;
  }
  .info-chip-stack{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    margin-top:12px;
    width:100%;
  }
  .info-chip-3d{
    display:inline-block;
    position:relative;
    overflow:hidden;
    padding:5px 12px;
    border-radius:12px;
    font-size:12.5px;
    font-weight:700;
    color:#062312;
    border:1px solid rgba(180,255,205,0.65);
    background:
      linear-gradient(155deg, rgba(218,255,232,0.88) 0%, rgba(120,242,167,0.68) 46%, rgba(72,199,125,0.7) 100%);
    backdrop-filter: blur(7px) saturate(140%);
    -webkit-backdrop-filter: blur(7px) saturate(140%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -6px 10px rgba(0,0,0,0.09),
      0 2px 5px rgba(26,143,85,0.18);
    max-width:100%;
    text-align:center;
  }
  .info-chip-3d.gold{
    color:#181300;
    border:1px solid rgba(255,204,64,0.82);
    background:
      linear-gradient(160deg, rgba(255,239,120,0.95) 0%, rgba(255,222,55,0.9) 45%, rgba(247,182,0,0.92) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.56),
      inset 0 -6px 10px rgba(0,0,0,0.1),
      0 2px 5px rgba(198,138,0,0.25);
  }
  .info-chip-3d.bad{
    color:#2a0a0a;
    border:1px solid rgba(255,189,189,0.75);
    background:
      linear-gradient(155deg, rgba(255,224,224,0.92) 0%, rgba(240,140,140,0.78) 46%, rgba(197,68,68,0.85) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -6px 10px rgba(0,0,0,0.1),
      0 2px 5px rgba(163,45,45,0.25);
  }
  .info-chip-3d::after{
    content:"";
    position:absolute;
    left:10%;
    top:10%;
    width:80%;
    height:30%;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0));
    pointer-events:none;
  }

  .gauge-kpi{ display:flex; align-items:center; justify-content:center; gap:20px; }
  .gauge-num{ position:relative; width:213px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; }
  .gauge-title{
    font-family:'Inter'; font-weight:600; font-size:14px; color:var(--text-dim);
    text-align:center; margin-bottom:4px;
  }
  .gauge-canvas-wrap{ position:relative; width:213px; height:213px; }
  .gauge-canvas-wrap::before{
    content:"";
    position:absolute;
    left:50%; top:123px;
    width:64%; height:23px;
    transform:translateX(-50%);
    background:radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 72%);
    filter:blur(2px);
    z-index:0;
  }
  .gauge-canvas-wrap canvas{
    position:relative; z-index:1;
    width:213px !important; height:213px !important;
    filter: drop-shadow(0 5px 8px rgba(6,9,22,0.55)) drop-shadow(0 0 16px rgba(150,174,234,0.4)) drop-shadow(0 -1px 0 rgba(255,255,255,0.12));
  }
  .gauge-center{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; pointer-events:none; z-index:2; transform:translateY(31px);
  }
  .gauge-value{
    font-family:'JetBrains Mono'; font-weight:700; font-size:33px; color:#AFC0F2;
    text-shadow:0 1px 0 rgba(255,255,255,0.18), 0 2px 6px rgba(0,0,0,0.45);
  }
  .gauge-txt{ text-align:center; }
  .gauge-txt .label{margin-bottom:6px;}
  .gauge-txt .val{ font-size:22px; }

  /* corrugated bar - signature element */
  .corr-bar{
    height:10px; border-radius:6px; overflow:hidden; position:relative;
    background: var(--panel-2); border:1px solid var(--line);
  }
  .corr-fill{
    height:100%; position:relative;
    background-image: repeating-linear-gradient(90deg,
      rgba(255,255,255,0.22) 0px, rgba(255,255,255,0.22) 2px,
      transparent 2px, transparent 4px);
    background-color: var(--accent);
    transition: width 0.6s cubic-bezier(.2,.8,.2,1);
  }
  .corr-fill.good{ background-color: var(--good); }
  .corr-fill.bad{ background-color: var(--bad); }
  .corr-fill.steel{ background-color: var(--steel); }

  /* ---------- Weekly rhythm ---------- */
  .rhythm{
    margin-top: 18px;
    background:
      radial-gradient(130% 75% at 14% -12%, rgba(255,255,255,0.14), rgba(255,255,255,0) 52%),
      linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 45%, rgba(255,255,255,0.02) 100%),
      rgba(20,24,30,0.6);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:var(--radius);
    padding: 14px 22px 18px; display:flex; align-items:flex-start; gap: 22px; flex-wrap:wrap;
    position:relative;
    overflow:hidden;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.14),
      inset 0 -1px 0 rgba(0,0,0,0.3),
      0 22px 46px rgba(0,0,0,0.36),
      0 2px 8px rgba(0,0,0,0.22);
  }
  .rhythm::after{
    content:"";
    position:absolute;
    left:10%; right:10%; bottom:0;
    height:1px;
    background: linear-gradient(90deg, rgba(79,154,192,0) 0%, rgba(242,183,5,0.4) 35%, rgba(79,174,124,0.32) 65%, rgba(79,154,192,0) 100%);
    pointer-events:none;
  }
  .rhythm .rlabel{ font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-dim); font-weight:600; white-space:nowrap; position:relative; z-index:1;}
  .rhythm-bars{ display:flex; gap:10px; flex:1; min-width:260px; position:relative; z-index:1; }
  .rweek{ flex:1; text-align:center; }
  .rweek .rbar-track{
    height:92px;
    background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.12));
    border:1px solid rgba(255,255,255,0.12);
    border-radius:16px;
    display:flex; align-items:flex-end; overflow:hidden;
    box-shadow: inset 0 2px 7px rgba(0,0,0,0.4), inset 0 -1px 0 rgba(255,255,255,0.04);
    transition: background 0.25s ease, border-color 0.25s ease;
  }
  .rweek .rbar{
    width:100%;
    background-color: var(--steel);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0) 72%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
    border-radius: 10px;
    transition: height 0.4s cubic-bezier(.2,.8,.2,1);
  }
  .rweek .rbar.good{ background-color:var(--good); }
  .rweek .rbar.bad{ background-color:var(--bad); }
  .rweek .rbar.steel{ background-color:var(--steel); }
  /* Semana sem dado lancado ainda (nao e 0% de performance real) - placeholder
     neutro em vez do sliver vermelho, pra nao parecer erro/alarme. */
  .rweek .rbar-track.nodata{
    border-style:dashed;
    border-color: rgba(255,255,255,0.1);
    background: linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.06));
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
  }
  .rweek .rbar.nodata{
    width:10px;
    margin:0 auto;
    border-radius:999px;
    background-color: rgba(255,255,255,0.16);
    background-image:none;
    box-shadow:none;
  }
  .rweek .rpct{ font-family:'JetBrains Mono'; font-size:17.3px; margin-top:6px; font-weight:800; color:var(--text);}
  .rweek .rname{ font-size:14.4px; color:var(--text); text-transform:uppercase; letter-spacing:0.04em; margin-top:2px; font-weight:800;}
  .rweek .rmeta{ font-family:'JetBrains Mono'; font-size:15.5px; color:var(--text); margin-top:4px; font-weight:800;}
  .rweek .rmeta.good{ color:var(--good); }
  .rweek .rmeta.bad{ color:var(--bad); }
  .rweek .rmeta-diario{
    margin-top:6px;
    padding-top:6px;
    border-top:1px dashed var(--line);
    font-size:12.1px;
    font-weight:600;
    color:var(--text-dim);
    text-transform:none;
    letter-spacing:0;
  }
  .rweek .rmeta-diario span{
    display:block;
    margin-top:2px;
    font-family:'JetBrains Mono';
    font-size:15px;
    font-weight:800;
    color:var(--accent);
  }

  .audit-bar{
    margin-top: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px;
  }
  .audit-item{ background: var(--panel-2); border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px; }
  .audit-item .k{ font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; }
  .audit-item .v{ margin-top:6px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .audit-item .mono{ font-size:12px; }
  .audit-item .delta.ok{ color: var(--good); }
  .audit-item .delta.bad{ color: var(--bad); }
  .audit-item.exact{ border-color: rgba(79,174,124,0.45); box-shadow: inset 0 0 0 1px rgba(79,174,124,0.28); }
  .audit-item .target-hit{ color: var(--good); font-weight:700; }
  .audit-item .target-miss{ color: var(--bad); font-weight:700; }

  .excel-pie-wrap{
    position:relative;
    background:#f8f9fb;
    border:1px solid #c7ccd4;
    border-radius:8px;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8), 0 2px 8px rgba(0,0,0,0.18);
    padding:6px;
  }
  .excel-pie-wrap svg{
    width:100%;
    height:auto;
    display:block;
  }
  .pie-click-hint{
    position:absolute;
    left:14px;
    bottom:12px;
    z-index:3;
    font-size:12px;
    font-weight:700;
    color:#0f1821;
    font-family:'JetBrains Mono', monospace;
    background: linear-gradient(160deg, rgba(235,248,255,0.9) 0%, rgba(193,229,255,0.72) 45%, rgba(141,197,240,0.7) 100%);
    border:1px solid rgba(195,229,255,0.88);
    border-radius:10px;
    padding:8px 11px;
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.8),
      inset 0 -8px 12px rgba(13,42,72,0.12),
      0 4px 10px rgba(8,34,58,0.22);
    max-width:360px;
    pointer-events:none;
    transform: translateZ(0);
  }
  .pie-click-hint::after{
    content:"";
    position:absolute;
    left:12%;
    top:9%;
    width:76%;
    height:38%;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0));
    pointer-events:none;
  }
  .pie-click-hint.active{
    border-color:rgba(167,220,255,0.95);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.82),
      inset 0 -8px 12px rgba(13,42,72,0.14),
      0 8px 16px rgba(8,34,58,0.26);
  }
  .pie-click-hint strong{ color:#111; }

  /* ---------- Tabs ---------- */
  nav.tabs{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap: 2px 4px;
    margin-top: 30px;
    border-bottom: 1px solid var(--line);
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:2px;
  }
  nav.tabs button{
    background:none; border:none; color:var(--text); font-family:'Oswald';
    text-transform:uppercase; letter-spacing:0.04em; font-size:15px; font-weight:700;
    padding: 10px 12px; cursor:pointer; position:relative; white-space:nowrap;
    flex-shrink:0;
    border-radius:6px 6px 0 0;
    transition: color 0.15s, background-color 0.15s;
  }
  nav.tabs button:hover{ color: var(--accent); background: rgba(242,183,5,0.06); }
  nav.tabs button:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  nav.tabs button.active{ color: var(--accent); }
  nav.tabs button.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent);
  }

  @media (min-width: 901px){
    nav.tabs{
      flex-wrap:nowrap;
      justify-content:space-between;
      gap:0;
    }
  }

  .panel{ display:none; margin-top: 26px; animation: fade 0.25s ease; }
  .panel.active{ display:block; }
  @keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

  .grid2{ display:grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items:start; }
  .grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  @media (max-width: 900px){ .grid2, .grid3{ grid-template-columns: 1fr; } }

  .card{
    background:
      radial-gradient(130% 75% at 14% -12%, rgba(255,255,255,0.16), rgba(255,255,255,0) 52%),
      linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 45%, rgba(255,255,255,0.02) 100%),
      rgba(20,24,30,0.6);
    border:1px solid rgba(255,255,255,0.14); border-radius: var(--radius);
    padding: 20px 22px;
    position:relative;
    overflow:hidden;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      inset 0 -1px 0 rgba(0,0,0,0.35),
      0 2px 4px rgba(0,0,0,0.45),
      0 14px 28px -8px rgba(0,0,0,0.55),
      0 34px 60px -16px rgba(0,0,0,0.62);
  }
  .card::after{
    content:"";
    position:absolute;
    left:10%; right:10%; bottom:0;
    height:1px;
    background: linear-gradient(90deg, rgba(79,154,192,0) 0%, rgba(242,183,5,0.4) 35%, rgba(79,174,124,0.32) 65%, rgba(79,154,192,0) 100%);
    pointer-events:none;
  }
  .card h3{
    font-family:'Oswald'; font-size:14px; text-transform:uppercase; letter-spacing:0.06em;
    font-weight:600; color:var(--text); margin-bottom: 4px;
  }
  .card .card-sub{ font-size:12px; color:var(--text-faint); margin-bottom:16px; }

  table{ width:100%; border-collapse:collapse; font-size:14px;}
  thead th{
    text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--text-faint); font-weight:600; padding: 0 10px 10px; border-bottom:1px solid var(--line);
    cursor:pointer; user-select:none; white-space:nowrap;
  }
  thead th:hover{ color: var(--accent); }
  thead th.sorted::after{ content:" ▾"; color:var(--accent); }
  tbody td{ padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align:middle; }
  tbody tr{ cursor:pointer; transition: background 0.12s; }
  tbody tr:hover{ background: var(--panel-2); }
  #chapaHistTable th,
  #chapaHistTable td{ text-align:center; }
  #chapaHistTable thead th{ color:var(--text-dim); font-weight:700; }
  #chapaHistTable tbody td{ font-size:15px; font-weight:700; }
  /* Tratamento premium padrão (dourado/--accent) para linhas de totalizador; grupo-total-row e bobina-total-row sobrescrevem com suas próprias cores temáticas abaixo */
  tbody tr.total-row{
    font-weight:700;
    background:linear-gradient(180deg, rgba(242,183,5,0.14), rgba(242,183,5,0.05) 58%, rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(242,183,5,0.18);
  }
  tbody tr.total-row:hover{
    background:linear-gradient(180deg, rgba(242,183,5,0.18), rgba(242,183,5,0.08) 58%, rgba(255,255,255,0.03));
  }
  tbody tr.total-row td{
    border-top:1px solid rgba(242,183,5,0.42);
    border-bottom:1px solid rgba(242,183,5,0.22);
    font-weight:800;
  }
  tbody tr.total-row td.name{
    color:var(--accent);
    letter-spacing:0.06em;
  }
  #panel-margem-grupo #grupoTable tr.grupo-total-sep td{
    height:10px;
    padding:0;
    border-top:2px dashed rgba(242,183,5,0.28);
    border-bottom:none;
    background:transparent;
  }
  #panel-margem-grupo #grupoTable tr.grupo-total-row{
    background:linear-gradient(180deg, rgba(242,183,5,0.14), rgba(242,183,5,0.05) 58%, rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(242,183,5,0.18);
  }
  #panel-margem-grupo #grupoTable tr.grupo-total-row:hover{
    background:linear-gradient(180deg, rgba(242,183,5,0.18), rgba(242,183,5,0.08) 58%, rgba(255,255,255,0.03));
  }
  #panel-margem-grupo #grupoTable tr.grupo-total-row td{
    border-top:1px solid rgba(242,183,5,0.42);
    border-bottom:1px solid rgba(242,183,5,0.22);
    font-weight:800;
  }
  #panel-margem-grupo #grupoTable tr.grupo-total-row td.name{
    color:var(--accent);
    letter-spacing:0.06em;
  }
  #panel-bobina #bobinaTable tr.bobina-total-row{
    background:linear-gradient(180deg, rgba(79,174,124,0.14), rgba(79,174,124,0.05) 58%, rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(79,174,124,0.18);
  }
  #panel-bobina #bobinaTable tr.bobina-total-row:hover{
    background:linear-gradient(180deg, rgba(79,174,124,0.18), rgba(79,174,124,0.08) 58%, rgba(255,255,255,0.03));
  }
  #panel-bobina #bobinaTable tr.bobina-total-row td{
    border-top:1px solid rgba(79,174,124,0.42);
    border-bottom:1px solid rgba(79,174,124,0.22);
    font-weight:800;
  }
  #panel-bobina #bobinaTable tr.bobina-total-row td.name{
    color:var(--good);
    letter-spacing:0.06em;
  }
  td.num{ font-family:'JetBrains Mono'; text-align:right; white-space:nowrap; }
  td.name{ font-weight:600; }
  .pill{
    display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600;
    font-family:'JetBrains Mono';
  }
  .pill.good{ background:var(--good-soft); color:var(--good); }
  .pill.bad{ background:var(--bad-soft); color:var(--bad); }
  .pill.warn{ background: rgba(225,148,60,0.15); color:var(--warn); }

  .bar-cell{ width:110px; }
  .detail-row{ display:none; background: var(--bg-2); }
  .detail-row.open{ display:table-row; }
  .detail-row td{ padding: 16px 10px; border-bottom: 1px solid var(--line); }
  .detail-grid{ display:grid; gap:14px; }
  /* auto-fit: acomoda 4 (vendedores) ou 5 (regiões) itens numa única linha sem duplicar a classe */
  .detail-grid-top{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .detail-grid-bottom{ grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top:12px; }
  .detail-item .dl{ font-size:10px; text-transform:uppercase; color:var(--text-dim); letter-spacing:0.05em; font-weight:700;}
  .detail-item .dv{ font-family:'JetBrains Mono'; font-size:15px; margin-top:3px; font-weight:800; color:var(--text);}
  @media (max-width: 900px){
    .detail-grid-top,
    .detail-grid-bottom{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .seg-toggle{
    display:flex;
    gap:3px;
    background:linear-gradient(165deg, rgba(44,52,64,0.95) 0%, rgba(33,40,50,0.95) 100%);
    border:1px solid var(--line);
    border-radius:13px;
    padding:4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -8px 12px rgba(0,0,0,0.12);
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
  }
  .seg-btn{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background:transparent;
    border:1px solid transparent;
    color:var(--text-dim);
    font-family:'Oswald';
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-weight:600;
    padding:6px 12px;
    border-radius:9px;
    cursor:pointer;
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  .seg-btn::after{
    content:"";
    position:absolute;
    left:12%;
    top:8%;
    width:76%;
    height:38%;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0));
    opacity:0;
    transition:opacity 0.2s ease;
    pointer-events:none;
    z-index:-1;
  }
  .seg-btn:hover{
    color:var(--text);
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.14);
    background:linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  }
  .seg-btn.active{
    color:#151a1f;
    background:linear-gradient(160deg, #ffd126 0%, #f2b705 52%, #c89100 100%);
    border-color: rgba(255,235,156,0.82);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -10px 14px rgba(120,80,0,0.2), 0 2px 8px rgba(242,183,5,0.28);
    animation: segSwapPop 0.22s ease;
  }
  .seg-btn.active::after{ opacity:1; }
  @keyframes segSwapPop{
    0%{ transform:scale(0.96); }
    100%{ transform:scale(1); }
  }
  .mix-summary{
    display:grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap:12px;
    margin-top:16px;
    padding:12px;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:var(--radius);
  }
  .mix-summary .ms-item{
    background: linear-gradient(165deg, rgba(43,52,66,0.98) 0%, rgba(36,44,56,0.98) 100%);
    border:1px solid var(--line-soft);
    border-radius:11px;
    padding:12px 14px;
    min-height:78px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.18);
  }
  .mix-summary .ms-item .ms-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.07em; color:#aab6c8; font-weight:700; }
  .mix-summary .ms-item .ms-val{ font-family:'JetBrains Mono'; font-size:24px; font-weight:800; margin-top:6px; color:#f3f7ff; text-shadow:0 1px 0 rgba(0,0,0,0.24); }
  .mix-summary .ms-item.glass-hit,
  .mix-summary .ms-item.glass-miss{
    position:relative;
    overflow:hidden;
    border-width:1px;
    backdrop-filter: blur(8px) saturate(145%);
    -webkit-backdrop-filter: blur(8px) saturate(145%);
  }
  .mix-summary .ms-item.glass-hit{
    background: linear-gradient(165deg, rgba(188,255,218,0.28) 0%, rgba(92,211,127,0.18) 55%, rgba(39,128,81,0.16) 100%);
    border-color: rgba(140,255,190,0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.36), inset 0 -12px 16px rgba(0,0,0,0.1), 0 3px 8px rgba(38,151,90,0.2);
  }
  .mix-summary .ms-item.glass-miss{
    background: linear-gradient(165deg, rgba(255,202,202,0.28) 0%, rgba(225,89,90,0.18) 55%, rgba(139,45,46,0.18) 100%);
    border-color: rgba(255,159,159,0.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -12px 16px rgba(0,0,0,0.1), 0 3px 8px rgba(154,52,52,0.2);
  }
  .mix-summary .ms-item.glass-hit .ms-label,
  .mix-summary .ms-item.glass-miss .ms-label{ color:#e9f0fb; }
  .mix-summary .ms-item.glass-hit::after,
  .mix-summary .ms-item.glass-miss::after{
    content:"";
    position:absolute;
    left:11%;
    top:8%;
    width:78%;
    height:38%;
    border-radius:999px;
    background: transparent;
    pointer-events:none;
  }
  .mix-summary .ms-val.hit{ color: #caffdf; text-shadow:0 1px 0 rgba(0,0,0,0.32), 0 0 6px rgba(91,216,146,0.25); }
  .mix-summary .ms-val.miss{ color: #ffd3d7; text-shadow:0 1px 0 rgba(0,0,0,0.32), 0 0 6px rgba(255,124,132,0.25); }
  @media (max-width: 900px){ .mix-summary{ grid-template-columns:1fr; } }
  #panel-bobina .mix-summary{ grid-template-columns: repeat(3, minmax(180px, 1fr)); }
  #panel-bobina .mix-summary .ms-item{
    min-height:64px;
    padding:10px 12px;
    justify-content:flex-start;
    gap:4px;
  }
  #panel-bobina .mix-summary .ms-item .ms-label{
    font-size:10.5px;
  }
  #panel-bobina .mix-summary .ms-item .ms-val{
    font-size:22px;
    margin-top:2px;
  }
  #panel-bobina .bobina-extra{
    margin-top:12px;
    border:1px solid var(--line);
    background:#fff;
    color:#111;
    overflow:hidden;
  }
  #panel-bobina .bobina-extra .extra-top{
    display:grid;
    grid-template-columns: 152px 1fr;
    min-height:140px;
  }
  #panel-bobina .bobina-extra .extra-head{
    background:#24508c;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Oswald';
    font-size:15px;
    font-style:italic;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  #panel-bobina .bobina-extra .extra-body{
    padding:14px 14px 12px 14px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;
  }
  #panel-bobina .bobina-extra .metric-line{
    display:grid;
    grid-template-columns: 1fr 190px;
    align-items:center;
    gap:12px;
    min-height:28px;
  }
  #panel-bobina .bobina-extra .metric-value{
    font-family:'JetBrains Mono';
    font-size:30px;
    font-weight:700;
    color:#1f4d86;
    line-height:1;
  }
  #panel-bobina .bobina-extra .metric-value.red{ color:#b31515; }
  #panel-bobina .bobina-extra .metric-value.green{ color:#19af47; }
  #panel-bobina .bobina-extra .metric-label{
    font-size:17px;
    color:#111;
    line-height:1;
    text-align:right;
    justify-self:end;
  }
  #panel-bobina .bobina-extra .metric-label.highlight{
    background:#fff600;
    font-weight:700;
    padding:2px 8px;
  }
  #panel-bobina .bobina-extra .extra-bottom{
    background:#24508c;
    color:#fff;
    display:grid;
    grid-template-columns: 1fr auto;
    align-items:center;
    padding:7px 12px 7px 12px;
    font-family:'Oswald';
    font-weight:700;
    border-top:1px solid #11365f;
  }
  #panel-bobina .bobina-extra .extra-bottom .bottom-label{ font-size:26px; }
  #panel-bobina .bobina-extra .extra-bottom .bottom-value{ font-size:25px; }
  .legend-row{ display:flex; gap:16px; margin-top:12px; flex-wrap:wrap; }
  .legend-item{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); }
  .legend-dot{ width:10px; height:10px; border-radius:2px; }

  #panel-insumos .card h3,
  #panel-insumos .card .card-sub{
    text-align:center;
  }
  #panel-insumos .card h3{
    font-size:16px;
    letter-spacing:0.08em;
    font-weight:700;
  }
  #panel-insumos .card .card-sub{
    font-size:13.5px;
    font-weight:500;
    color:var(--text-dim);
  }
  #panel-insumos #insumoTable thead th,
  #panel-insumos #comTable thead th,
  #panel-acessorios #acessTable thead th,
  #panel-insumos #acessTable thead th{
    text-align:center;
    color:var(--text-dim);
    font-weight:700;
  }
  #panel-insumos #insumoTable tbody td,
  #panel-insumos #comTable tbody td,
  #panel-acessorios #acessTable tbody td,
  #panel-insumos #acessTable tbody td{
    text-align:center;
  }
  #panel-insumos #insumoTable td.num,
  #panel-insumos #comTable td.num,
  #panel-acessorios #acessTable td.num,
  #panel-insumos #acessTable td.num{
    text-align:center;
    font-size:16px;
    font-weight:700;
  }
  #panel-insumos #insumoTable td.name,
  #panel-insumos #comTable td.name,
  #panel-acessorios #acessTable td.name,
  #panel-insumos #acessTable td.name{
    text-align:center;
    font-size:15px;
    font-weight:700;
  }
  #panel-insumos #insumoTable .pill,
  #panel-insumos #comTable .pill,
  #panel-acessorios #acessTable .pill,
  #panel-insumos #acessTable .pill{
    font-size:12px;
    padding:3px 10px;
  }

  #panel-bobina #bobinaTable thead th,
  #panel-bobina #bobinaTable tbody td,
  #panel-bobina #bobinaTable td.num,
  #panel-bobina #bobinaTable td.name{
    text-align:center;
  }
  #panel-bobina #bobinaTable thead th{
    color:var(--text-dim);
    font-weight:700;
  }
  #panel-bobina #bobinaTable tbody td{
    font-size:15px;
    font-weight:700;
  }
  #panel-bobina .card h3,
  #panel-bobina .card .card-sub{
    text-align:center;
  }

  #panel-regioes-tabela #regResumoTable thead th,
  #panel-regioes-tabela #regResumoBody > tr:not(.detail-row) > td{
    text-align:center;
  }
  #panel-regioes-tabela #regResumoTable thead th{
    font-size:15.2px;
  }
  #panel-regioes-tabela #regResumoBody > tr:not(.detail-row) > td{
    font-size:18.5px;
    font-weight:700;
    color:var(--text);
  }
  #panel-regioes-tabela #regResumoBody .pill{
    font-size:14.5px;
  }

  #panel-vendedores .card h3{
    font-size:28px;
  }
  #panel-vendedores .card .card-sub{
    font-size:15px;
  }
  #panel-vendedores #vendTable thead th{
    font-size:13px;
    letter-spacing:0.07em;
    color:var(--text-dim);
    font-weight:700;
  }
  #panel-vendedores #vendTable thead th[data-key="pctTelha"],
  #panel-vendedores #vendTable thead th[data-key="pctProdutos"]{
    text-align:center;
  }
  #panel-vendedores #vendTable tbody td{
    font-size:24px;
    padding-top:12px;
    padding-bottom:12px;
  }
  #panel-vendedores #vendTable tbody td .pill{
    font-size:17px;
    padding:5px 11px;
  }
  #panel-vendedores #vendTable td.bar-cell{
    width:170px;
    text-align:center;
  }
  #panel-vendedores #vendTable td.bar-cell .corr-bar{
    width:140px;
    height:14px;
    border-radius:8px;
    margin:0 auto;
  }
  #panel-vendedores #vendTable td.bar-cell .mono{
    display:block;
    text-align:center;
    font-size:13px !important;
    margin-top:5px !important;
  }

  #panel-margem-grupo .card h3,
  #panel-margem-grupo .card .card-sub{
    text-align:center;
  }
  #panel-margem-grupo .card h3{
    font-size:28px;
  }
  #panel-margem-grupo .card .card-sub{
    font-size:16px;
  }
  #panel-margem-grupo .card > div[style*="overflow-x:auto"]{
    max-width:980px;
    margin:0 auto;
  }
  #panel-margem-grupo #grupoTable{
    width:100%;
  }
  #panel-margem-grupo #grupoTable thead th{
    font-size:14px;
    letter-spacing:0.07em;
    color:var(--text-dim);
    font-weight:700;
  }
  #panel-margem-grupo #grupoTable thead th,
  #panel-margem-grupo #grupoTable tbody td{
    text-align:center;
  }
  #panel-margem-grupo #grupoTable tbody td{
    font-size:26px;
    padding-top:12px;
    padding-bottom:12px;
  }
  #panel-margem-grupo #grupoTable tbody td.col-pm{
    font-size:19.5px;
  }
  #panel-margem-grupo #grupoTable tbody td.name{
    font-size:28px;
  }
  #panel-margem-grupo #grupoTable tbody td:first-child{
    text-align:center;
  }
  #panel-margem-grupo #grupoTable td.num,
  #panel-margem-grupo #grupoTable th.num{
    text-align:center;
  }
  #panel-margem-grupo #grupoTable td.num.num-low{
    color: var(--bad);
    font-weight:700;
  }

  #panel-telha-eps .card h3{
    font-size:20px;
    letter-spacing:0.08em;
    text-align:center;
    width:100%;
  }
  #panel-telha-eps .card .card-sub{
    font-size:13.5px;
    margin-top:2px;
    text-align:center;
    width:100%;
  }
  #panel-telha-eps .card{
    min-height: 360px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }
  #panel-telha-eps #epsBox{
    margin-top:20px;
    display:grid;
    grid-template-columns: repeat(2, minmax(250px, 330px));
    justify-content:center;
    gap:16px 20px;
    align-items:stretch;
    width:100%;
    max-width:700px;
  }
  #panel-telha-eps #epsBox .detail-item .dl{
    font-size:14px;
    letter-spacing:0.06em;
    color:var(--text-dim);
    font-weight:700;
  }
  #panel-telha-eps #epsBox .detail-item .dv{
    font-size:26px;
    font-weight:700;
    line-height:1.05;
    margin-top:8px;
    color:var(--good);
  }
  #panel-telha-eps #epsBox .detail-item{
    margin-bottom:0 !important;
    min-height:112px;
    padding:18px 20px;
    border:1px solid rgba(79,174,124,0.32);
    background:linear-gradient(180deg, rgba(79,174,124,0.14), rgba(79,174,124,0.05) 58%, rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(79,174,124,0.18);
    border-radius:14px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
  }
  #panel-telha-eps #epsBox .detail-item.eps-wide{
    grid-column: 1 / -1;
  }

  .foot-note{
    margin-top: 40px; padding-top:18px; border-top:1px solid var(--line);
    font-size:11.5px; color:var(--text-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  }

  @media (max-width: 900px){ .audit-bar{ grid-template-columns:1fr; } }
  @media (max-width: 900px){
    .top-inner{
      padding: 24px 10px 20px 20px;
    }
    .brand{
      margin-top:8px;
      gap:6px;
    }
    .brand-mark{
      height:60px;
    }
    .brand-logo-main{
      height:77px;
    }
    .telhas-logo-img{
      width:auto;
      height:56px;
    }
    .brand-text{
      margin-left:2px;
    }
    .period{
      margin-right:0;
    }
  }
  @media (max-width: 900px){
    #panel-telha-eps #epsBox{
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 640px){
    .wrap{
      padding: 0 12px 56px;
    }
    .top-inner{
      padding: 18px 12px 16px;
      align-items:flex-start;
      gap:14px;
    }
    .brand{
      width:100%;
      flex-wrap:wrap;
      gap:8px 10px;
      margin-top:0;
      text-align:center;
    }
    .brand-text{
      margin-left:0;
    }
    .brand-text .name{
      font-size:18px;
    }
    .brand-text .tag{
      font-size:10.5px;
    }
    .brand-mark{
      height:54px;
    }
    .telhas-logo-img{
      height:60px;
      max-width:200px;
    }
    .period{
      width:100%;
      text-align:center;
      margin:0;
    }
    .period .value{
      font-size:24px;
    }
    .period .sub{
      font-size:12px;
      line-height:1.35;
    }
    .excel-btn{
      width:100%;
      margin-top:8px;
      padding:10px 12px;
      font-size:12px;
    }
    .logout-powered-row{
      justify-content:stretch;
      gap:8px;
    }
    .logout-powered-row .excel-btn,
    .logout-powered-row .powered-inline{
      width:100%;
      max-width:none;
    }
    .month-picker-card{
      width:100%;
      padding:12px;
    }
    .month-picker-list{
      grid-template-columns: 1fr;
    }
    .month-picker-item{
      font-size:12.5px;
    }
    .month-picker-actions{
      justify-content:stretch;
    }
    .month-picker-actions .excel-btn{
      width:100%;
    }
    .auth-card{
      padding:24px 18px 20px;
    }
    .auth-card h2{
      font-size:24px;
    }
    .access-banner{
      margin-top:18px;
      font-size:12px;
    }
    .seller-panel{
      padding:14px;
    }
    .seller-panel-title{
      font-size:24px;
    }
    .seller-inline-stats,
    .seller-kpis,
    .seller-detail-grid,
    .seller-detail-grid-top,
    .seller-detail-grid-bottom{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .seller-kpi .value{
      font-size:clamp(12px, 3.4vw, 22px);
    }
    .kpi-strip{
      grid-template-columns: 1fr;
      margin-top:18px;
      overflow-x:visible;
    }
    .powered-card{
      margin-top:10px;
      font-size:16px;
      padding:12px 14px;
    }
    .kpi,
    .kpi-3d{
      padding:16px 14px;
      min-height:auto;
    }
    .kpi .label,
    .kpi-3d .label{
      font-size:11px;
    }
    .kpi .val,
    .kpi-3d .val,
    #kpiStrip .kpi-centered .val,
    #kpiStrip .kpi:nth-child(5) .val{
      font-size:clamp(18px, 5.8vw, 24px);
      white-space:nowrap;
    }
    .kpi .foot,
    .kpi-3d .foot{
      font-size:12px;
    }
    .info-chip-stack{
      gap:12px;
    }
    .part-badge,
    .info-chip-3d{
      font-size:11px;
      padding:4px 10px;
      max-width:100%;
      white-space:normal;
      text-align:center;
    }
    .rhythm{
      margin-top:18px;
      flex-direction:column;
      align-items:stretch;
      gap:12px;
      padding:14px 14px 16px;
    }
    .rhythm-bars{
      gap:10px;
      width:100%;
      flex:none;
      min-width:0;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scroll-snap-type:x proximity;
      padding-bottom:6px;
      mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    }
    .rhythm-bars .rweek{
      flex:0 0 132px;
      min-width:132px;
      scroll-snap-align:start;
    }
    .rhythm-bars .rname{
      font-size:12.5px;
    }
    .rhythm-bars .rpct{
      font-size:15.5px;
    }
    .rhythm-bars .rmeta{
      font-size:12.5px;
    }
    nav.tabs{
      margin-top:20px;
      gap:2px;
      padding-bottom:6px;
      flex-wrap:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scroll-snap-type:x proximity;
      mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    }
    nav.tabs button{
      padding: 10px 12px;
      font-size:13.5px;
      scroll-snap-align:start;
      scroll-margin-inline:16px;
    }
    .panel{
      margin-top:18px;
    }
    .card{
      padding:16px 14px;
    }
    .card h3,
    #panel-vendedores .card h3,
    #panel-margem-grupo .card h3,
    #panel-telha-eps .card h3{
      font-size:18px;
      text-align:center;
    }
    .card .card-sub,
    #panel-vendedores .card .card-sub,
    #panel-margem-grupo .card .card-sub,
    #panel-telha-eps .card .card-sub{
      font-size:12px;
      text-align:center;
    }
    table{
      font-size:12px;
    }
    thead th,
    tbody td{
      padding-left:8px;
      padding-right:8px;
    }
    thead th{
      font-size:10px;
    }
    td.num{
      font-size:12px;
    }
    td.name{
      font-size:12px;
    }
    .detail-grid{
      /* Empilha em 1 coluna: o detail-row fica dentro do wrapper com scroll
         horizontal da tabela (#sellerTableWrap), entao 2 colunas empurravam a
         segunda metade das informacoes (Meta acessorios, Tonelagem, Ligacoes,
         Meta de visitas) para fora da area visivel sem nenhum indicio de que
         havia mais conteudo pra rolar. Em 1 coluna tudo fica legivel sem
         precisar arrastar a tabela pros lados. */
      grid-template-columns: 1fr;
      gap:10px;
    }
    .detail-item .dv{
      font-size:13px;
    }
    .mix-summary,
    #panel-bobina .mix-summary{
      grid-template-columns: 1fr;
      padding:10px;
      gap:10px;
    }
    .mix-summary .ms-item{
      min-height:64px;
      padding:10px 12px;
    }
    .mix-summary .ms-item .ms-val{
      font-size:20px;
    }
    #panel-bobina .bobina-extra .extra-top{
      grid-template-columns:1fr;
    }
    #panel-bobina .bobina-extra .extra-head{
      min-height:54px;
      font-size:14px;
    }
    #panel-bobina .bobina-extra .metric-line{
      grid-template-columns:1fr;
      gap:6px;
      justify-items:center;
      text-align:center;
    }
    #panel-bobina .bobina-extra .metric-label{
      text-align:center;
      justify-self:center;
      font-size:14px;
    }
    #panel-bobina .bobina-extra .metric-value{
      font-size:24px;
    }
    #panel-bobina .bobina-extra .extra-bottom{
      grid-template-columns:1fr;
      gap:4px;
      text-align:center;
      justify-items:center;
    }
    #panel-bobina .bobina-extra .extra-bottom .bottom-label,
    #panel-bobina .bobina-extra .extra-bottom .bottom-value{
      font-size:18px;
    }
    #panel-margem-grupo .card > div[style*="overflow-x:auto"]{
      max-width:none;
      margin:0;
    }
    #panel-margem-grupo #grupoTable thead th,
    #panel-margem-grupo #grupoTable tbody td,
    #panel-vendedores #vendTable thead th,
    #panel-vendedores #vendTable tbody td,
    #panel-insumos #insumoTable thead th,
    #panel-insumos #insumoTable tbody td,
    #panel-insumos #comTable thead th,
    #panel-insumos #comTable tbody td,
    #panel-acessorios #acessTable thead th,
    #panel-acessorios #acessTable tbody td,
    #panel-insumos #acessTable thead th,
    #panel-insumos #acessTable tbody td,
    #panel-bobina #bobinaTable thead th,
    #panel-bobina #bobinaTable tbody td,
    #panel-regioes-tabela #regResumoTable thead th,
    #panel-regioes-tabela #regResumoBody > tr:not(.detail-row) > td{
      text-align:left;
    }
    #panel-vendedores #vendTable td.bar-cell,
    #panel-vendedores #vendTable td.bar-cell .corr-bar{
      width:100%;
    }
    #panel-vendedores #vendTable thead th{
      font-size:10px;
      letter-spacing:0.03em;
    }
    #panel-vendedores #vendTable tbody td{
      font-size:13px;
      padding-top:10px;
      padding-bottom:10px;
    }
    #panel-vendedores #vendTable tbody td .pill{
      font-size:11px;
      padding:3px 8px;
    }
    #panel-margem-grupo #grupoTable thead th,
    #panel-margem-grupo #grupoTable tbody td{
      padding-left:5px;
      padding-right:5px;
    }
    #panel-margem-grupo #grupoTable thead th{
      font-size:10.5px;
      letter-spacing:0.02em;
    }
    #panel-margem-grupo #grupoTable tbody td{
      font-size:14px;
      padding-top:10px;
      padding-bottom:10px;
    }
    #panel-margem-grupo #grupoTable tbody td.col-pm{
      font-size:10.5px;
    }
    #panel-margem-grupo #grupoTable tbody td.name{
      font-size:13px;
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    #panel-telha-eps #epsBox{
      margin-top:14px;
      gap:12px;
    }
    #panel-telha-eps #epsBox .detail-item{
      min-height:92px;
      padding:14px;
    }
    #panel-telha-eps #epsBox .detail-item .dv{
      font-size:22px;
    }
    .foot-note{
      margin-top:28px;
      padding-top:14px;
      font-size:11px;
    }

    /* Grafico de regioes em estilo Excel: em vez de encolher os rotulos ate
       ficarem ilegiveis, mantem tamanho legivel e permite arrastar (mesmo
       padrao de rolagem horizontal ja usado nas tabelas abaixo). */
    .excel-pie-wrap{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
    .excel-pie-wrap svg{
      width:640px;
      max-width:none;
      flex-shrink:0;
    }
    .pie-click-hint{
      max-width:220px;
      font-size:11px;
      padding:7px 10px;
    }

    /* Indicador de rolagem horizontal (fade nas bordas) para tabelas que nao
       cabem inteiras em telas de celular. Some sozinho quando a tabela nao
       precisa rolar. */
    #sellerTableWrap,
    .wrap [style*="overflow-x:auto"]{
      background-image:
        linear-gradient(to right, #171b22, rgba(23,27,34,0) 22px),
        linear-gradient(to left, #171b22, rgba(23,27,34,0) 22px),
        linear-gradient(to right, rgba(0,0,0,0.45), rgba(0,0,0,0) 16px),
        linear-gradient(to left, rgba(0,0,0,0.45), rgba(0,0,0,0) 16px);
      background-position: left, right, left, right;
      background-size: 22px 100%, 22px 100%, 16px 100%, 16px 100%;
      background-repeat: no-repeat;
      background-attachment: local, local, scroll, scroll;
    }
  }

  ::-webkit-scrollbar{ height:8px; width:8px; }
  ::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
  ::-webkit-scrollbar-track{ background:transparent; }