.marketing-root{
      --shadow2: 0 10px 22px rgba(15, 30, 40, .10);
      --radius: var(--radius);
      --radius2: var(--radius-sm);
      --pad: 14px;
      --pad2: 10px;
      --focus: rgba(15,123,108,.18);
      --danger:#b91c1c;
      --ok:#15803d;
      --warn:#f59e0b;
      --blue:#0f7b6c;
    }

    .marketing-root *{box-sizing:border-box}
    .marketing-root{
      margin:0;
      font-family: var(--font-body);
      background: transparent;
      color:var(--text);
    }

    .marketing-root .wrap{max-width:none; margin:0; padding: 0;}
    .marketing-root .row{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}

    .marketing-root h1{
      font-size:16px;
      margin:0;
      letter-spacing:.2px;
      font-weight:700;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .marketing-root .pill{
      font-size:12px;
      color:var(--muted);
      border:1px solid var(--line);
      padding:4px 10px;
      border-radius:999px;
      background: rgba(255,255,255,.7);
    }

    .marketing-root .spacer{flex:1}

    .marketing-root select, .marketing-root input, .marketing-root textarea, .marketing-root button{
      font: inherit;
    }

    .marketing-root .control{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width: 160px;
    }
    .marketing-root .control label{
      font-size:12px;
      color:var(--muted);
    }
    .marketing-root .control select, .marketing-root .control input{
      border:1px solid var(--line);
      border-radius:10px;
      padding:8px 10px;
      background:#fff;
      color:var(--text);
      min-width: 160px;
      font-size:14px;
      outline: none;
    }
    .marketing-root .control input[type="month"]{min-width:160px}
    .marketing-root .control input[type="number"]{min-width:120px}

    .marketing-root button{
      border:1px solid var(--line);
      background:#fff;
      border-radius: 12px;
      padding: 8px 12px;
      cursor:pointer;
      font-weight:700;
      transition:transform .08s ease, box-shadow .15s ease, opacity .15s;
      box-shadow:none;
    }
    .marketing-root button.primary{
      background: var(--accent);
      border-color: var(--accent);
      color:#fff;
      box-shadow:0 10px 20px rgba(15,123,108,.2);
    }
    .marketing-root button.ghost{
      background: #fff;
      box-shadow:none;
    }
    .marketing-root button:active{transform: translateY(1px)}
    .marketing-root button:focus{outline:2px solid var(--focus)}

    .marketing-root main{padding: 0}
    .marketing-root .marketing-body{padding:0}

    .marketing-root .filter-card{padding:16px}
    .marketing-root .filters-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }
    .marketing-root .filters-left{
      display:flex;
      flex-direction:column;
      gap:10px;
      min-width:260px;
    }
    .marketing-root .filters-title{
      font-family: var(--font-display);
      font-size:16px;
      font-weight:700;
      letter-spacing:.01em;
    }
    .marketing-root .filters-controls{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .marketing-root .filters-actions{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
      justify-content:flex-end;
    }

    .marketing-root .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px;
    }

    .marketing-root .card{
      background: var(--surface);
      border:1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 16px;
    }

    .marketing-root .kpis{
      grid-column: 1 / -1;
      display:grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 12px;
      background: transparent;
      border: none;
      box-shadow: none;
      padding: 0;
    }
    .marketing-root .kpi{
      padding: 12px;
      border-radius: var(--radius-sm);
      background: var(--surface-2);
      border:1px solid var(--line);
    }
    .marketing-root .kpi-empty{
      grid-column: 1 / -1;
      padding: 16px;
      border-radius: var(--radius-sm);
      border:1px dashed var(--line);
      background: #fff;
      color: var(--muted);
      text-align:center;
      font-size:13px;
    }
    .marketing-root .kpi .t{font-size:11px; color: var(--muted); margin-bottom:6px}
    .marketing-root .kpi .v{font-size:16px; font-weight:800}
    .marketing-root .kpi .s{font-size:11px; color: var(--muted); margin-top:4px}

    .marketing-root .card h2{
      margin:0 0 10px 0;
      font-size:14px;
      letter-spacing:.2px;
    }
    .marketing-root .subtle{color:var(--muted); font-size:12px}
    .marketing-root .hr{height:1px; background:var(--line); margin: 12px 0}

    .marketing-root .chartCard{min-height: 320px}
    .marketing-root canvas{width:100% !important; height:240px !important}

    .marketing-root .col-6{grid-column: span 6}
    .marketing-root .col-7{grid-column: span 7}
    .marketing-root .col-5{grid-column: span 5}
    .marketing-root .col-12{grid-column: span 12}

    @media (max-width: 1100px){
      .marketing-root .kpis{grid-template-columns: repeat(4, 1fr)}
      .marketing-root .col-6, .marketing-root .col-7, .marketing-root .col-5{grid-column: span 12}
      .marketing-root .widgetGrid.cols-3{grid-template-columns: repeat(2, minmax(0, 1fr))}
    }
    @media (max-width: 820px){
      .marketing-root .widgetGrid.cols-2, .marketing-root .widgetGrid.cols-3{grid-template-columns: 1fr}
    }

    .marketing-root table{
      width:100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .marketing-root th, .marketing-root td{
      padding: 10px 10px;
      border-bottom:1px solid var(--line);
      text-align:left;
      vertical-align: top;
    }
    .marketing-root th{font-size:12px; color: var(--muted); font-weight:600}
    .marketing-root tr:hover td{background: rgba(15,123,108,.05)}
    .marketing-root .badge{
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 999px;
      border:1px solid var(--line);
      color: var(--muted);
      background: rgba(255,255,255,.85);
    }

    /* dialogs */
    .marketing-root dialog{
      width:min(980px, calc(100% - 24px));
      border:1px solid var(--line);
      border-radius: 18px;
      padding:0;
      box-shadow: 0 24px 60px rgba(15,23,42,.22);
      background: #fff;
    }
    .marketing-root dialog::backdrop{
      background: rgba(15,23,42,.35);
      backdrop-filter: blur(2px);
    }
    .marketing-root .modalHead{
      display:flex;
      align-items:center;
      justify-content: space-between;
      padding: 14px 14px;
      border-bottom:1px solid var(--line);
    }
    .marketing-root .modalHead .title{
      font-weight:800;
      letter-spacing:.2px;
      display:flex; align-items:center; gap:10px;
    }
    .marketing-root .modalBody{
      padding: 14px;
    }
    .marketing-root .modalGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .marketing-root .modalGrid .full{grid-column: 1 / -1;}
    .marketing-root textarea{
      width:100%;
      min-height: 110px;
      resize: vertical;
      border:1px solid var(--line);
      border-radius: 10px;
      padding: 10px;
      background: #fff;
      outline:none;
    }
    .marketing-root textarea:focus{outline:2px solid var(--focus); border-color: var(--accent)}
    .marketing-root .field{
      display:flex; flex-direction:column; gap:6px;
    }
    .marketing-root .field .lbl{
      font-size:12px; color:var(--muted);
      display:flex; align-items:center; justify-content:space-between;
      gap: 10px;
    }
    .marketing-root .field input{
      border:1px solid var(--line);
      border-radius: 10px;
      padding: 8px 10px;
      background: #fff;
      outline:none;
      font-size:14px;
    }
    .marketing-root .field input:focus{outline:2px solid var(--focus); border-color: var(--accent)}

    .marketing-root .tabs{
      display:flex;
      gap:8px;
      padding: 10px 14px;
      border-bottom:1px solid var(--line);
    }
    .marketing-root .tab{
      border:1px solid var(--line);
      background: rgba(255,255,255,.8);
      padding: 8px 12px;
      border-radius: 999px;
      cursor:pointer;
      font-size: 12px;
      color: var(--muted);
    }
    .marketing-root .tab.active{
      color: var(--text);
      border-color: rgba(15,123,108,.35);
      outline: 3px solid rgba(15,123,108,.12);
    }

    .marketing-root .listItem{
      display:flex;
      gap:10px;
      align-items:center;
      justify-content: space-between;
      padding: 10px 10px;
      border:1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--surface-2);
      margin-bottom: 10px;
    }
    .marketing-root .listItem .meta{
      display:flex;
      flex-direction: column;
      gap:2px;
    }
    .marketing-root .listItem .meta .name{font-weight:800}
    .marketing-root .listItem .meta .code{font-size:12px; color:var(--muted)}
    .marketing-root .toggle{
      display:flex; align-items:center; gap:8px;
      font-size:12px; color: var(--muted);
    }

    .marketing-root .preview{
      border:1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      padding: 10px;
    }
    .marketing-root .pvRow{
      display:flex; justify-content:space-between; gap:12px;
      border-bottom:1px solid var(--line);
      padding: 8px 0;
      font-size: 13px;
      align-items: center;
    }
    .marketing-root .pvRow:last-child{border-bottom:0}
    .marketing-root .pvRow .k{color: var(--muted)}
    .marketing-root .pvRow .v{font-weight:700; display:flex; justify-content:flex-end; flex:0 0 180px}
    .marketing-root .pvInput{
      width: 160px;
      text-align: right;
      border:1px solid var(--line);
      border-radius: 8px;
      padding: 6px 8px;
      font-weight: 700;
      background: #fff;
    }
    .marketing-root .pvRow.missing .pvInput{border-color: var(--danger)}
    .marketing-root .pvRow.missing .v{color: var(--danger)}
    .marketing-root .pvRow.warn .v{color: var(--warn)}
    .marketing-root .toast{
      position: fixed;
      right: 14px;
      bottom: 14px;
      width: min(420px, calc(100% - 28px));
      background: #fff;
      border:1px solid var(--line);
      border-radius: 16px;
      padding: 12px 12px;
      box-shadow: 0 20px 50px rgba(15,23,42,.18);
      display:none;
    }
    .marketing-root .toast.show{display:block}
    .marketing-root .toast .t{font-weight:800; margin-bottom: 4px}
    .marketing-root .toast .m{color: var(--muted); font-size: 12px; line-height: 1.35}
    .marketing-root .small{font-size:12px; color: var(--muted)}
    .marketing-root .rightActions{display:flex; gap:10px; align-items:center}

    .marketing-root .widgetGrid{
      display:grid;
      gap: 12px;
    }
    .marketing-root .widgetGrid.cols-1{grid-template-columns: 1fr}
    .marketing-root .widgetGrid.cols-2{grid-template-columns: repeat(2, minmax(0, 1fr))}
    .marketing-root .widgetGrid.cols-3{grid-template-columns: repeat(3, minmax(0, 1fr))}
    .marketing-root .widgetCard{
      background: #fff;
      border:1px solid var(--line);
      border-radius: var(--radius-sm);
      padding: 12px;
      box-shadow: none;
      min-height: 260px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .marketing-root .widgetHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .marketing-root .widgetTitle{font-weight:800; font-size:13px}
    .marketing-root .widgetActions{display:flex; gap:8px; align-items:center}
    .marketing-root .widgetDrag{cursor:grab; color:var(--muted); font-size:14px}
    .marketing-root .widgetEmpty{padding: 18px; text-align:center; color: var(--muted); font-size:13px}
    .marketing-root .widgetToolbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .marketing-root .widgetCols{
      display:flex;
      align-items:center;
      gap:6px;
      padding:4px;
      border:1px solid var(--line);
      border-radius:999px;
      background: rgba(255,255,255,.8);
    }
    .marketing-root .widgetCols button{
      border:0;
      background: transparent;
      box-shadow:none;
      padding: 6px 10px;
      border-radius:999px;
      font-size:12px;
      color: var(--muted);
    }
    .marketing-root .widgetCols button.active{
      color: var(--text);
      background: rgba(15,123,108,.12);
      box-shadow: inset 0 0 0 1px rgba(15,123,108,.35);
    }

    .marketing-root .fullscreenDialog{
      width: 100vw;
      height: 100vh;
      max-width: none;
      max-height: none;
      border-radius: 0;
      margin: 0;
    }
    .marketing-root .fullscreenDialog .modalBody{
      padding: 12px 16px 16px;
      height: calc(100vh - 56px);
      display:flex;
      flex-direction:column;
    }
    .marketing-root .fullscreenChartWrap{
      position: relative;
      flex: 1;
      min-height: 0;
      border:1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      padding: 10px;
    }
    .marketing-root .fullscreenChartWrap canvas{height:100% !important}

    .marketing-root .metricsList{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .marketing-root .metricGroup{
      border:1px dashed var(--line);
      border-radius: 12px;
      padding: 8px;
      background: var(--surface-2);
    }
    .marketing-root .metricGroup .gTitle{font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:700}
    .marketing-root .metricItem{display:flex; align-items:center; gap:6px; font-size:12px; margin:4px 0}
    .marketing-root .metricItem input{transform: translateY(1px)}
    .marketing-root .metricItem.disabled{opacity:.45}
.marketing-root .metricHint{font-size:11px; color:var(--warn)}

.marketing-root .mkt-studio-control,
.marketing-root .mkt-studio-field,
.marketing-root .mkt-studios-tab,
.marketing-root #tabStudios{
  display:none !important;
}