/* UTM Batch Builder tool styles */
@layer components {
  .utmtool-shell{
    padding:clamp(14px,2vw,18px);
    border-radius:22px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 22%, transparent);
    background:linear-gradient(160deg,
      color-mix(in srgb,var(--tool-surface) 88%, #050b12 12%) 0%,
      color-mix(in srgb,var(--tool-surface-strong) 74%, #040a11 26%) 100%);
    box-shadow:0 24px 52px rgba(0,0,0,.35);
  }

  .utmtool-app{
    position:relative;
  }

  .utmtool-static-overview{
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 18%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 92%, #000 8%);
    padding:16px;
    color:var(--text-light);
  }

  .utmtool-static-overview h2{
    margin:0 0 10px;
    font-size:1.08rem;
  }

  .utmtool-static-overview p{
    margin:0;
    color:var(--text-muted);
    line-height:1.55;
  }

  .utmtool-static-overview ul{
    margin:12px 0;
    padding-left:20px;
    display:grid;
    gap:6px;
  }

  .utmtool-static-note{
    font-size:.92rem;
  }

  .utmtool-error-panel{
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 28%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 90%, #000 10%);
    padding:16px;
    display:grid;
    gap:10px;
  }

  .utmtool-toast{
    position:sticky;
    top:12px;
    z-index:8;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 28%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 88%, #000 12%);
    color:var(--text-light);
    box-shadow:0 14px 30px rgba(0,0,0,.35);
    margin-bottom:12px;
  }

  .utmtool-layout{
    display:grid;
    gap:clamp(12px,2.2vw,18px);
  }

  .utmtool-accordion{
    border-radius:20px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 18%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 90%, #000 10%);
    box-shadow:0 18px 44px rgba(0,0,0,.26);
    overflow:hidden;
  }

  .utmtool-accordion-summary{
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 16px;
    background:linear-gradient(135deg,
      color-mix(in srgb,var(--tool-surface) 92%, #000 8%) 0%,
      color-mix(in srgb,var(--tool-surface-strong) 82%, #000 18%) 100%);
    border-bottom:1px solid transparent;
  }

  .utmtool-accordion-summary::-webkit-details-marker{display:none}
  .utmtool-accordion-summary::marker{content:""}

  .utmtool-accordion[open] .utmtool-accordion-summary{
    border-bottom-color:color-mix(in srgb,var(--tool-accent) 14%, transparent);
  }

  .utmtool-accordion-text{
    display:grid;
    gap:4px;
  }

  .utmtool-accordion-title{
    font-weight:800;
    letter-spacing:.01em;
    font-size:1.05rem;
  }

  .utmtool-accordion-subtitle{
    color:var(--text-muted);
    font-size:.92rem;
    line-height:1.45;
  }

  .utmtool-accordion-chevron{
    width:12px;
    height:12px;
    border-right:2px solid color-mix(in srgb,var(--text-muted) 70%, transparent);
    border-bottom:2px solid color-mix(in srgb,var(--text-muted) 70%, transparent);
    transform:rotate(45deg);
    transition:transform .18s ease;
    flex:0 0 auto;
  }

  .utmtool-accordion[open] .utmtool-accordion-chevron{
    transform:rotate(225deg);
  }

  .utmtool-accordion-body{
    padding:14px 16px 6px;
  }

  .utmtool-card{
    background:color-mix(in srgb,var(--tool-surface) 92%, #000 8%);
    border:1px solid color-mix(in srgb,var(--tool-accent) 18%, transparent);
    border-radius:18px;
    padding:16px;
    box-shadow:0 16px 34px rgba(0,0,0,.26);
    margin-bottom:14px;
  }

  .utmtool-card h3{
    margin:0 0 12px;
    font-size:1.05rem;
    letter-spacing:.01em;
  }

  .utmtool-card h4{
    margin:0 0 10px;
    font-size:1rem;
    color:color-mix(in srgb,var(--text-light) 92%, #000 8%);
  }

  .utmtool-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
  }

  .utmtool-actions-row-tight{
    margin-top:0;
  }

  .utmtool-inline-details{
    margin-top:12px;
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 14%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 90%, #000 10%);
    overflow:hidden;
  }

  .utmtool-inline-summary{
    cursor:pointer;
    padding:10px 12px;
    color:var(--text-light);
    font-weight:700;
    list-style:none;
  }
  .utmtool-inline-summary::-webkit-details-marker{display:none}
  .utmtool-inline-summary::marker{content:""}

  .utmtool-inline-body{
    padding:0 12px 10px;
  }

  .utmtool-mode-picker{
    border:none;
    padding:0;
    margin:12px 0 0;
  }

  .utmtool-mode-legend{
    font-weight:700;
    color:var(--text-muted);
    font-size:.92rem;
    margin-bottom:10px;
  }

  .utmtool-mode-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:10px;
  }

  .utmtool-mode-card{
    position:relative;
    display:block;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 14%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 92%, #000 8%);
    box-shadow:0 12px 24px rgba(0,0,0,.2);
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }

  .utmtool-mode-card input{
    position:absolute;
    inset:0;
    opacity:0;
    cursor:pointer;
  }

  .utmtool-mode-card:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb,var(--tool-accent) 26%, transparent);
    box-shadow:0 16px 30px rgba(0,0,0,.25);
  }

  .utmtool-mode-card.is-selected{
    border-color:color-mix(in srgb,var(--tool-accent) 44%, transparent);
    box-shadow:0 18px 36px rgba(0,0,0,.28);
  }

  .utmtool-mode-title{
    font-weight:800;
    letter-spacing:.01em;
  }

  .utmtool-mode-desc{
    margin-top:6px;
    color:var(--text-muted);
    font-size:.92rem;
    line-height:1.5;
  }

  .utmtool-field{
    padding:12px 0;
    border-top:1px solid color-mix(in srgb,var(--tool-accent) 12%, transparent);
  }
  .utmtool-field:first-of-type{
    border-top:none;
    padding-top:0;
  }

  .utmtool-field-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
  }

  .utmtool-label{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    letter-spacing:.01em;
    color:var(--text-light);
  }

  .utmtool-required{
    display:inline-flex;
    align-items:center;
    padding:2px 10px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
    color:color-mix(in srgb,var(--text-light) 92%, #000 8%);
    border:1px solid color-mix(in srgb,var(--tool-accent) 26%, transparent);
    background:color-mix(in srgb,var(--tool-accent) 12%, transparent);
  }

  .utmtool-mode{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .utmtool-mode-label{
    font-size:.86rem;
    color:var(--text-muted);
  }

  :is(.utmtool-input,.utmtool-select,.utmtool-textarea){
    width:100%;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 18%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 88%, #000 12%);
    color:var(--text-light);
    padding:10px 12px;
    font-size:.95rem;
    line-height:1.45;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  }

  .utmtool-textarea{
    min-height:98px;
    resize:vertical;
    white-space:pre;
  }

  :is(.utmtool-input,.utmtool-select,.utmtool-textarea):focus{
    outline:2px solid color-mix(in srgb,var(--tool-accent) 64%, #ffffff 36%);
    outline-offset:2px;
  }

  .utmtool-template-grid{
    display:grid;
    gap:12px;
  }

  .utmtool-sub-label{
    display:block;
    margin:0 0 6px;
    font-size:.86rem;
    color:var(--text-muted);
  }

  .utmtool-help{
    margin:10px 0 0;
    color:var(--text-muted);
    font-size:.92rem;
    line-height:1.6;
  }

  .utmtool-error{
    margin:10px 0 0;
    color:#ff8b8b;
    font-size:.92rem;
  }

  .utmtool-code{
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size:.92em;
  }

  .utmtool-codeblock{
    display:block;
    margin-top:10px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 18%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 84%, #000 16%);
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size:.9rem;
    white-space:pre-wrap;
    word-break:break-word;
  }

  .utmtool-row{
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:10px;
  }

  .utmtool-row-inline{
    flex-wrap:wrap;
    align-items:center;
  }

  .utmtool-actions-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
  }

  .utmtool-number{
    max-width:120px;
  }

  .utmtool-check{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--text-light);
    font-size:.95rem;
  }

  .utmtool-subsection{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid color-mix(in srgb,var(--tool-accent) 12%, transparent);
  }

  .utmtool-stats{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-top:12px;
    padding:12px;
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 14%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 88%, #000 12%);
  }

  .utmtool-stat-label{
    display:block;
    font-size:.82rem;
    color:var(--text-muted);
  }

  .utmtool-stat-value{
    display:block;
    font-weight:700;
    font-size:1.05rem;
    margin-top:2px;
  }

  .utmtool-banner{
    margin-top:12px;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid transparent;
    background:color-mix(in srgb,var(--tool-surface) 86%, #000 14%);
  }

  .utmtool-banner ul{
    margin:8px 0 0;
    padding-left:18px;
  }

  .utmtool-banner-error{
    border-color:color-mix(in srgb,#ff6b6b 42%, transparent);
  }

  .utmtool-banner-warn{
    border-color:color-mix(in srgb,#ffd36b 42%, transparent);
  }

  .utmtool-custom-head{
    display:grid;
    grid-template-columns:80px 1fr auto;
    gap:10px;
    align-items:center;
    margin-bottom:10px;
  }

  .utmtool-campaign-row{
    display:grid;
    gap:8px;
    margin-top:10px;
  }

  .utmtool-token-list{
    margin-top:12px;
  }

  .utmtool-rel{
    margin-top:12px;
    display:grid;
    gap:12px;
  }

  .utmtool-rel-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(280px, 420px);
    gap:12px;
    align-items:start;
  }

  @media (max-width: 980px){
    .utmtool-rel-layout{
      grid-template-columns:1fr;
    }
  }

  .utmtool-rel-board{
    min-width:0;
  }

  .utmtool-rel-inspector{
    position:sticky;
    top:12px;
    align-self:start;
    padding:12px;
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 18%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 92%, #000 8%);
    box-shadow:0 16px 30px rgba(0,0,0,.22);
    min-width:0;
  }

  @media (max-width: 980px){
    .utmtool-rel-inspector{
      position:static;
    }
  }

  .utmtool-rel-inspector-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
  }

  .utmtool-rel-add-custom{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid color-mix(in srgb,var(--tool-accent) 12%, transparent);
  }

  .utmtool-rel-block{
    padding:12px;
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 14%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 90%, #000 10%);
  }

  .utmtool-rel-groups-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:6px;
  }

  .utmtool-rel-groups{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:12px;
    margin-top:10px;
  }

  .utmtool-rel-group{
    padding:12px;
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 14%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 92%, #000 8%);
    box-shadow:0 12px 24px rgba(0,0,0,.18);
  }

  .utmtool-rel-group-head{
    display:flex;
    gap:10px;
    align-items:center;
  }

  .utmtool-rel-group-head .utmtool-input{
    flex:1 1 auto;
  }

  .utmtool-rel-group-meta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 18%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 90%, #000 10%);
    color:var(--text-muted);
    font-size:.84rem;
    white-space:nowrap;
    flex:0 0 auto;
  }

  .utmtool-rel-group.is-mismatch{
    border-color:color-mix(in srgb,#ffd36b 44%, transparent);
  }

  .utmtool-rel-group-meta.is-mismatch{
    border-color:color-mix(in srgb,#ffd36b 44%, transparent);
    color:color-mix(in srgb,var(--text-light) 80%, #000 20%);
  }

  .utmtool-rel-group-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }

  .utmtool-rel-group-add{
    margin-top:10px;
    display:grid;
    grid-template-columns:80px 1fr;
    gap:10px;
    align-items:center;
  }

  .utmtool-rel-dropzone{
    margin-top:10px;
    padding:12px;
    border-radius:14px;
    border:1px dashed color-mix(in srgb,var(--tool-accent) 22%, transparent);
    background:color-mix(in srgb,var(--tool-surface-strong) 78%, #000 22%);
  }

  .utmtool-pill-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .utmtool-pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 18%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 92%, #000 8%);
    box-shadow:0 10px 18px rgba(0,0,0,.18);
    cursor:grab;
    user-select:none;
    appearance:none;
    font:inherit;
    color:inherit;
    text-align:left;
  }

  .utmtool-pill:active{
    cursor:grabbing;
  }

  .utmtool-pill-text{
    font-weight:700;
    font-size:.9rem;
  }

  .utmtool-pill-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:22px;
    padding:0 8px;
    border-radius:999px;
    background:color-mix(in srgb,var(--tool-accent) 16%, transparent);
    border:1px solid color-mix(in srgb,var(--tool-accent) 22%, transparent);
    font-size:.82rem;
    color:var(--text-light);
  }

  .utmtool-pill-badge.is-missing{
    border-color:color-mix(in srgb,#ff6b6b 55%, transparent);
    background:color-mix(in srgb,#ff6b6b 18%, transparent);
  }

  .utmtool-pill.is-missing{
    border-color:color-mix(in srgb,#ff6b6b 55%, transparent);
  }

  .utmtool-pill.is-selected{
    border-color:color-mix(in srgb,var(--tool-accent) 44%, transparent);
    box-shadow:0 14px 26px rgba(0,0,0,.24);
  }

  .utmtool-csv-chips{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
  }

  .utmtool-csv-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 18%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 92%, #000 8%);
    box-shadow:0 10px 18px rgba(0,0,0,.16);
    font-size:.88rem;
    cursor:grab;
    user-select:none;
    max-width:100%;
  }

  .utmtool-csv-chip:active{
    cursor:grabbing;
  }

  .utmtool-field.is-drop-over{
    border-radius:18px;
    outline:2px solid color-mix(in srgb,var(--tool-accent) 64%, #ffffff 36%);
    outline-offset:4px;
  }

  .utmtool-results{
    margin-top:12px;
  }

  .utmtool-table-scroll{
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--tool-accent) 16%, transparent);
    background:color-mix(in srgb,var(--tool-surface) 90%, #000 10%);
    overflow:auto;
    position:relative;
  }

  .utmtool-table-header{
    position:sticky;
    top:0;
    z-index:2;
    display:grid;
    border-bottom:1px solid color-mix(in srgb,var(--tool-accent) 16%, transparent);
    background:color-mix(in srgb,var(--tool-surface-strong) 86%, #000 14%);
  }

  .utmtool-th{
    padding:10px 12px;
    font-size:.84rem;
    color:var(--text-muted);
    border-right:1px solid color-mix(in srgb,var(--tool-accent) 10%, transparent);
    white-space:nowrap;
  }
  .utmtool-th:last-child{border-right:none}

  .utmtool-table-body{
    position:relative;
  }

  .utmtool-table-rows{
    position:absolute;
    left:0;
    right:0;
    top:0;
  }

  .utmtool-tr{
    display:grid;
    align-items:center;
    border-bottom:1px solid color-mix(in srgb,var(--tool-accent) 10%, transparent);
  }

  .utmtool-td{
    padding:10px 12px;
    border-right:1px solid color-mix(in srgb,var(--tool-accent) 8%, transparent);
    min-width:0;
  }
  .utmtool-td:last-child{border-right:none}

  .utmtool-cell-mono{
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    font-size:.88rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .utmtool-final-url{
    white-space:nowrap;
  }

  .utmtool-actions{
    display:flex;
    justify-content:center;
  }

  .utmtool-copy-btn{
    padding:8px 12px;
  }

  .utmtool-presets{
    display:grid;
    gap:10px;
    margin-top:12px;
  }

  .utmtool-preset-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }

  @media (max-width: 980px){
    .utmtool-custom-head{
      grid-template-columns:1fr;
    }
  }
}