/* ========================
       PALETA (inspirada na logo)
       ======================== */
    :root {
      /* base dark lilás/azulado */
      --bg-900: #1e163f; /* fundo principal (roxo bem escuro) */
      --bg-800: #251b4c; /* containers */
      --bg-700: #2c215b; /* cartões escuros */

      /* azuis e lilases (frio) */
      --indigo-400: #6c63ff; /* azulado/lilás vibrante */
      --indigo-300: #8b7bff;
      --indigo-200: #a89cff;

      /* acentos quentes da logo */
      --orange-400: #f78d2d; /* laranja vivo */
      --yellow-400: #f2c230; /* amarelo mostarda */

      /* texto */
      --text-100: #f2f0ff;
      --text-200: #d7d2fb;
      --text-300: #bcb3f4;

      /* neutros */
      --muted-100: #3a2b73; /* bordas suaves */
      --muted-200: #4a3a8e;
      --glass: rgba(255,255,255,.06);
      --shadow: 0 10px 25px rgba(0,0,0,.35);
      --radius: 18px;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; 
    margin: 0;
  padding: 0;}
    body {
      margin: 0;
      font: 500 15px/1.4 "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text-100);
      background: radial-gradient(1200px 800px at 15% -10%, #3b2e86 0%, var(--bg-900) 45%) fixed,
                  linear-gradient(180deg, var(--bg-900), #1a1337);
      display: grid;
      grid-template-columns: 280px 1fr;
      grid-template-rows: 72px 1fr;
      grid-template-areas:
        "sidebar header"
        "sidebar main";
      gap: 18px;
      padding: 18px;
    }

    /* Sidebar */
    .sidebar {
      grid-area: sidebar;
      background: linear-gradient(180deg, #5e56da 0%, #4c3dc7 60%, #3a2c9f 100%);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      padding: 18px;
      position: sticky;
      top: 18px;
      height: calc(100dvh - 36px);
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 10px;
      margin-bottom: 14px;
      font-weight: 700;
      letter-spacing: .2px;
    }
    .brand .logo {
      width: 34px; height: 34px; border-radius: 10px;
      background: radial-gradient(circle at 30% 30%, var(--yellow-400), var(--orange-400));
      position: relative;
      box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
    }
    .brand .logo:after, .brand .logo:before{
      content:""; position:absolute; inset:7px; border-radius:4px; transform:skewY(-8deg);
      background: linear-gradient(180deg, #e56963 0%, #cf5a57 60%, #b84d4a 100%);
      clip-path: polygon(0 0, 60% 0, 50% 100%, 0 100%);
    }
    .brand .logo:after{ inset:7px 7px 7px 17px; clip-path: polygon(50% 0, 100% 0, 100% 100%, 40% 100%); background: linear-gradient(180deg, var(--yellow-400), #e99d27);
    }

    .nav h4 { margin: 18px 10px 8px; color: var(--indigo-200); font-weight: 700; font-size: 12px; opacity:.9; }
    .nav a {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 14px; margin: 6px 8px; border-radius: 14px;
      color: var(--text-200); text-decoration: none; transition: .25s ease;
    }
    .nav a .dot{ width:10px; height:10px; border-radius:50%; background: var(--indigo-200); opacity:.9; }
    .nav a.active{ background: rgba(0,0,0,.22); color: var(--text-100); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
    .nav a:hover{ transform: translateX(2px); background: rgba(0,0,0,.16); }

    /* Header */
    .header {
      grid-area: header;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: center;
      background: var(--glass);
      border-radius: var(--radius);
      padding: 12px 16px;
      backdrop-filter: blur(6px);
      box-shadow: var(--shadow);
    }
    .search {
      position: relative;
    }
    .search input{
      width: 100%;
      background: #2a234f;
      color: var(--text-100);
      border: 1px solid var(--muted-100);
      border-radius: 12px; padding: 12px 14px 12px 38px;
      outline: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
    }
    .search .icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.7; filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));}
    .actions { display:flex; gap:10px; }
    .btn{
      padding: 10px 14px; border-radius: 12px; border: 1px solid var(--muted-100);
      background: linear-gradient(180deg, #2e255a, #241c48);
      color: var(--text-100); cursor: pointer; transition:.2s ease; font-weight:600;
    }
    .btn.primary{ background: linear-gradient(180deg, var(--indigo-400), #5a50e3); border-color: #594ce6; }
    .btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }

    /* Main */
    .main { gap: 18px; grid-template-columns: 1.2fr .8fr; align-content: start; }

    .cards { display:grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
    .card {
      background: var(--bg-800);
      border: 1px solid var(--muted-100);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px; position: relative; overflow: hidden;
    }
    .card::after{ content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; opacity:.15; background: radial-gradient(circle, var(--indigo-300), transparent 60%); }
    .kpi{ display:flex; align-items:center; gap:16px; }
    .kpi .badge{ width:44px; height:44px; border-radius: 50%; background: var(--indigo-400); display:grid; place-items:center; font-weight:800; color:#201a4a; box-shadow: inset 0 0 0 4px rgba(0,0,0,.15); }
    .kpi h3{ margin:0; font-size:26px; }
    .kpi p{ margin:2px 0 0; color: var(--text-300); }

    .card.orange{ background: linear-gradient(180deg, #3a2347 0%, #2b1f42 60%), var(--bg-800); }
    .card.orange .badge{ background: linear-gradient(180deg, var(--yellow-400), var(--orange-400)); }

    .card.purple{ background: linear-gradient(180deg, #30224f 0%, #261c46 60%); }
    .card.purple .badge{ background: #8f7aff; color:#201a4a; }

    .panel { background: var(--bg-800); border: 1px solid var(--muted-100); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
    .panel h2{ margin:0 0 14px; font-size:18px; letter-spacing:.2px; color: var(--indigo-200); }

    .progress{ height: 10px; background: #241c48; border-radius: 999px; overflow: hidden; border:1px solid var(--muted-100); }
    .progress > i{ display:block; height:100%; width:0; transition: width .9s cubic-bezier(.2,.8,.2,1); }
    .progress.orange > i{ background: linear-gradient(90deg, var(--orange-400), #ffac5d); }
    .progress.lilac > i{ background: linear-gradient(90deg, var(--indigo-400), var(--indigo-300)); }
    .progress.blue > i{ background: linear-gradient(90deg, #4aa7ff, #79c7ff); }

    .grid-2{ display:grid; gap: 18px; grid-template-columns: 1fr 1fr; }
    .table{ width:100%; border-collapse: collapse; }
    .table th, .table td{ padding: 12px 8px; text-align:left; border-bottom: 1px solid #2e2460; }
    .table th{ color: var(--text-300); font-weight:700; }
    .chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius: 100px; font-size:12px; border:1px solid var(--muted-100); background:#261d4b; }
    .chip i{ width:8px; height:8px; border-radius:50%; display:inline-block; }

    /* Orders list */
    .order{ padding:10px 0; display:flex; justify-content:space-between; align-items:center; border-bottom:1px dashed #332766; }
    .order:last-child{ border-bottom:0; }
    .small{ font-size:12px; color: var(--text-300); }

    /* Footer */
    .footer{ color: var(--text-300); font-size:12px; margin-top:8px; opacity:.8; }

    /* Responsivo */
    @media (max-width: 1100px){
      body{ grid-template-columns: 84px 1fr; }
      .sidebar{ padding:12px; }
      .brand span{ display:none; }
      .nav a{ padding:10px; justify-content:center; }
      .nav a .label{ display:none; }
    }
    @media (max-width: 920px){
      body{ grid-template-rows: auto 1fr; gap:12px; padding:12px; }
      .main{ grid-template-columns: 1fr; }
      .cards{ grid-template-columns: 1fr 1fr; }
      .grid-2{ grid-template-columns: 1fr; }
    }
    @media (max-width: 640px){
      .cards{ grid-template-columns: 1fr; }
    }