/* ===== PLAN HERO (Bieżący plan) ===== */
.wo-plan-hero{
  border-radius: 18px;
  padding: 16px;
  overflow: hidden;
  position: relative;
}

.wo-plan-hero-orange{
  background:
    radial-gradient(1200px 600px at 10% 10%, color-mix(in srgb, var(--wo-accent) 18%, transparent), transparent 55%),
    radial-gradient(900px 520px at 90% 0%, color-mix(in srgb, var(--wo-text) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--wo-panel) 92%, transparent);
}

.wo-plan-hero-intro{
  background:
    radial-gradient(1200px 600px at 10% 10%, color-mix(in srgb, #94a3b8 18%, transparent), transparent 55%),
    radial-gradient(900px 520px at 90% 0%, color-mix(in srgb, var(--wo-text) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--wo-panel) 92%, transparent);
}

.wo-plan-hero-focus{
  background:
    radial-gradient(1200px 600px at 10% 10%, color-mix(in srgb, var(--wo-accent) 18%, transparent), transparent 55%),
    radial-gradient(900px 520px at 90% 0%, color-mix(in srgb, var(--wo-text) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--wo-panel) 92%, transparent);
}

.wo-plan-hero-portfolio{
  background:
    radial-gradient(1200px 600px at 10% 10%, color-mix(in srgb, #22c55e 18%, transparent), transparent 55%),
    radial-gradient(900px 520px at 90% 0%, color-mix(in srgb, var(--wo-text) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--wo-panel) 92%, transparent);
}

.wo-plan-hero-studio{
  background:
    radial-gradient(1200px 600px at 10% 10%, color-mix(in srgb, #DA4CC8 18%, transparent), transparent 55%),
    radial-gradient(900px 520px at 90% 0%, color-mix(in srgb, var(--wo-text) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--wo-panel) 92%, transparent);
}


.wo-plan-hero::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.55;
}

.wo-plan-hero-orange::after{
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--wo-accent) 16%, transparent), transparent 40%,
    color-mix(in srgb, var(--wo-text) 6%, transparent));
}

.wo-plan-hero-intro::after{
  background: linear-gradient(135deg,
    color-mix(in srgb, #94a3b8 16%, transparent), transparent 40%,
    color-mix(in srgb, var(--wo-text) 6%, transparent));
}

.wo-plan-hero-focus::after{
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--wo-accent) 16%, transparent), transparent 40%,
    color-mix(in srgb, var(--wo-text) 6%, transparent));
}

.wo-plan-hero-portfolio::after{
  background: linear-gradient(135deg,
    color-mix(in srgb, #22c55e 16%, transparent), transparent 40%,
    color-mix(in srgb, var(--wo-text) 6%, transparent));
}

.wo-plan-hero-studio::after{
  background: linear-gradient(135deg,
    color-mix(in srgb, #DA4CC8 16%, transparent), transparent 40%,
    color-mix(in srgb, var(--wo-text) 6%, transparent));
}

.wo-plan-head{
  position: relative;
  z-index: 1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}

.wo-plan-title{
  margin:0;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing:.2px;
  color: color-mix(in srgb, var(--wo-text) 92%, transparent);
}

.wo-plan-sub{
  margin:6px 0 0;
  font-size: 12px;
  line-height:1.55;
  color: color-mix(in srgb, var(--wo-muted) 92%, transparent);
  max-width: 70ch;
}

.wo-plan-badges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.wo-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 12px;
  border-radius: var(--wo-border-radius);
  border: 1px solid var(--wo-line);
  background: color-mix(in srgb, var(--wo-chip-bg) 92%, transparent);
  color: color-mix(in srgb, var(--wo-muted) 92%, transparent);
  font-size: 11px;
  white-space: nowrap;
}
.wo-chip i{ color: var(--wo-icon); }
.wo-chip.ok{
  border-color: color-mix(in srgb, var(--wo-accent) 45%, var(--wo-line));
  background: color-mix(in srgb, var(--wo-accent) 14%, var(--wo-panel));
  color: color-mix(in srgb, var(--wo-text) 85%, transparent);
}
.wo-chip.ok i{ color: color-mix(in srgb, var(--wo-accent) 90%, var(--wo-text)); }

.wo-plan-grid{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
  align-items: stretch;
}

.wo-plan-card{
  border: 1px solid var(--wo-line);
  background: color-mix(in srgb, var(--wo-panel) 90%, transparent);
  border-radius: var(--wo-border-radius);
  padding: 14px;
}

.wo-plan-card h4{
  margin:0 0 8px;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing:.2px;
  color: color-mix(in srgb, var(--wo-text) 88%, transparent);
}

.wo-plan-price{
  display:flex;
  align-items:baseline;
  gap: 10px;
  margin-top: 6px;
}
.wo-plan-price strong{
  font-size: 26px;
  font-weight: 1000;
  letter-spacing:.2px;
}
.wo-plan-price span{
  font-size: 12px;
  color: color-mix(in srgb, var(--wo-muted) 92%, transparent);
}

.wo-kpi-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.wo-kpi{
  border: 1px solid var(--wo-line);
  background: color-mix(in srgb, var(--wo-chip-bg) 92%, transparent);
  border-radius: 14px;
  padding: 10px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.wo-kpi .ico{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--wo-line);
  background: color-mix(in srgb, var(--wo-soft) 65%, var(--wo-panel));
  display:grid;
  place-items:center;
  color: var(--wo-icon);
  flex: 0 0 auto;
}
.wo-kpi .t{min-width:0;}
.wo-kpi .t b{
  display:block;
  font-size: 14px;
  font-weight: 1000;
  color: color-mix(in srgb, var(--wo-text) 92%, transparent);
  line-height:1.1;
}
.wo-kpi .t span{
  display:block;
  margin-top: 3px;
  font-size: 10px;
  color: color-mix(in srgb, var(--wo-muted) 92%, transparent);
  line-height:1.35;
}

/* meters */
.wo-meters{display:grid;gap:10px;margin-top:10px;}
.wo-meter{
  border: 1px solid var(--wo-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--wo-soft) 55%, var(--wo-panel));
  padding: 12px;
}
.wo-meter-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.wo-meter-top b{
  font-size: 12px;
  font-weight: 1000;
  color: color-mix(in srgb, var(--wo-text) 88%, transparent);
}
.wo-meter-top .meta{
  font-size: 11px;
  color: color-mix(in srgb, var(--wo-muted) 92%, transparent);
  white-space: nowrap;
}
.wo-progress{
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--wo-line);
  background: color-mix(in srgb, var(--wo-panel) 70%, transparent);
  overflow:hidden;
}
.wo-progress > i{
  display:block;
  height:100%;
  width:0%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wo-accent) 78%, #fff);
  transition: width .22s ease;
}
.wo-meter-note{
  margin-top:8px;
  font-size: 11px;
  color: color-mix(in srgb, var(--wo-muted) 92%, transparent);
  line-height:1.45;
}

.wo-plan-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.wo-plan-actions .wo-btn{
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
}

.wo-btn.wo-danger{
  border-color: color-mix(in srgb, #ef4444 35%, var(--wo-line));
  background: color-mix(in srgb, #ef4444 12%, var(--wo-chip-bg));
}
.wo-btn.wo-danger:hover{ background: color-mix(in srgb, #ef4444 16%, var(--wo-soft)); }

/* right column mini list */
.wo-plan-list{display:grid;gap:10px;margin-top:10px;}
.wo-li{
  border: 1px solid var(--wo-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--wo-panel) 90%, transparent);
  padding: 10px;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.wo-li .ico{
  width:40px;height:40px;border-radius:14px;border:1px solid var(--wo-line);
  background: color-mix(in srgb, var(--wo-soft) 70%, var(--wo-panel));
  display:grid;place-items:center;color: var(--wo-icon);
  flex:0 0 auto;
}
.wo-li b{display:block;font-size:12px;font-weight:1000;}
.wo-li span{display:block;margin-top:3px;font-size:11px;color: color-mix(in srgb, var(--wo-muted) 92%, transparent);line-height:1.35;}

@media (max-width: 900px){
  .wo-plan-grid{grid-template-columns:1fr;}
  .wo-kpi-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 520px){
  .wo-kpi-grid{grid-template-columns:1fr;}
}







    /* ===== PLANS: każdy pakiet w osobnym rzędzie ===== */
    .wo-sub-plans{
      display:grid;
      grid-template-columns: 1fr;
      gap:12px;
      margin-top:10px;
    }

    .wo-sub-plan{
      border-radius: var(--wo-border-radius);
      background: color-mix(in srgb, var(--wo-panel) 92%, transparent);
      overflow:hidden;
      position:relative;

      display:grid;
      grid-template-columns: 240px 1fr 180px;
      min-height: 148px;

      transition: border-color .14s ease, background .14s ease, transform .14s ease;
      --wo-sub-plan-accent: var(--wo-accent);
      cursor: pointer;
    }

    .wo-sub-plan[data-plan="free"]{ --wo-sub-plan-accent: #94a3b8; }
    .wo-sub-plan[data-plan="pro"]{ --wo-sub-plan-accent: var(--wo-accent); }
    .wo-sub-plan[data-plan="studio"]{ --wo-sub-plan-accent: #22c55e; }
    .wo-sub-plan[data-plan="studiopro"]{ --wo-sub-plan-accent: #DA4CC8; }
    .wo-sub-plan[data-plan="special"]{ --wo-sub-plan-accent: gold; }

    .wo-sub-plan::before{
      content:"";
      position:absolute;
      left:0; top:0; bottom:0;
      width:4px;
      background: color-mix(in srgb, var(--wo-sub-plan-accent) 92%, #fff);
      opacity:.9;
    }

    .wo-sub-plan:hover{
      border-color: color-mix(in srgb, var(--wo-line) 60%, var(--wo-text));
      background: color-mix(in srgb, var(--wo-soft) 35%, var(--wo-panel));
      transform: translateY(-1px);
    }

    .wo-sub-plan-top{
      padding:14px 14px 12px;
      border-right:1px solid var(--wo-line);
      display:flex;
      align-items:flex-start;
      justify-content:flex-start; /* cena wyniesiona do prawej kolumny */
      gap:12px;

      background:
        radial-gradient(900px 220px at 0% -30%,
          color-mix(in srgb, var(--wo-sub-plan-accent) 18%, transparent),
          transparent 60%);
    }

    .wo-sub-plan h4{
      margin:0;
      font-size:12px;
      font-weight:1100;
      color: color-mix(in srgb, var(--wo-text) 92%, transparent);
    }
    .wo-sub-plan p{
      margin:6px 0 0;
      font-size:11px;
      color: color-mix(in srgb, var(--wo-muted) 92%, transparent);
      line-height:1.45;
    }

    .wo-sub-price{
      display:flex;flex-direction:column;align-items:flex-end;gap:4px;
      color: color-mix(in srgb, var(--wo-text) 92%, transparent);
      flex:0 0 auto;
    }
    .wo-sub-price strong{font-size:18px;letter-spacing:.2px;}
    .wo-sub-price span{font-size:10px;color: var(--wo-muted);}

    .wo-sub-plan-mid{
      padding:14px;
      display:flex;
      align-items:center;
    }

    /* ===== Metrics: infografika (compact + centered) ===== */
    .wo-sub-metrics{
      width:100%;
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap:8px;
    }

    .wo-sub-metric{
      position:relative;
      border: 1px solid color-mix(in srgb, var(--wo-line) 80%, transparent);
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--wo-panel) 85%, transparent),
          color-mix(in srgb, var(--wo-soft) 55%, var(--wo-panel)));
      border-radius:14px;
      padding:10px 10px 10px;
      overflow:hidden;
      min-height: 84px;

      box-shadow: 0 12px 26px rgba(16,24,40,.06);
      transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;

      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
    }

    .wo-sub-metric:hover{
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--wo-sub-plan-accent) 40%, var(--wo-line));
      box-shadow: 0 16px 34px rgba(16,24,40,.10);
    }

    .wo-sub-metric::before{
      content:"";
      position:absolute;
      width:150px;height:150px;
      right:-95px;top:-105px;
      border-radius:999px;
      background: radial-gradient(circle at 30% 30%,
        color-mix(in srgb, var(--wo-sub-plan-accent) 26%, transparent),
        transparent 60%);
      opacity:.85;
      pointer-events:none;
    }

    .wo-sub-metric::after{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(transparent 0, transparent 18px, color-mix(in srgb, var(--wo-line) 22%, transparent) 18px, transparent 19px),
        linear-gradient(90deg, transparent 0, transparent 18px, color-mix(in srgb, var(--wo-line) 18%, transparent) 18px, transparent 19px);
      background-size: 56px 56px;
      opacity:.28;
      pointer-events:none;
    }

    .wo-sub-mlabel{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      font-size:9px;
      letter-spacing:.55px;
      text-transform:uppercase;
      color: color-mix(in srgb, var(--wo-muted) 92%, transparent);
      z-index:1;

      flex-wrap:wrap;
      max-width:100%;
      overflow:hidden;
      line-height:1.15;
      text-wrap:balance;
      hyphens:auto;
      text-align:center;
    }

    .wo-sub-micon{
      width:24px;height:24px;
      border-radius:999px;
      display:grid;place-items:center;
      border: 1px solid color-mix(in srgb, var(--wo-sub-plan-accent) 28%, var(--wo-line));
      background: color-mix(in srgb, var(--wo-sub-plan-accent) 10%, var(--wo-chip-bg));
      box-shadow: 0 8px 14px rgba(16,24,40,.07);
      flex:0 0 auto;
    }
    .wo-sub-micon i{
      font-size:11px;
      color: color-mix(in srgb, var(--wo-sub-plan-accent) 70%, var(--wo-icon-strong));
    }

    .wo-sub-mvalue{
      position:relative;
      margin-top:8px;
      align-items:baseline;
      justify-content:center;
      gap:6px;
      z-index:1;

      flex-direction:column;
      width:100%;
    }

    .wo-sub-mvalue b{
      font-size:24px;
      letter-spacing:.2px;
      font-weight:1200;
      color: color-mix(in srgb, var(--wo-text) 92%, transparent);
      line-height:1;
    }

    .wo-sub-mvalue span{
      font-size:10px;
      color: var(--wo-muted);
      padding:4px 8px;
      border-radius:999px;
      border:1px solid color-mix(in srgb, var(--wo-line) 85%, transparent);
      background: color-mix(in srgb, var(--wo-chip-bg) 75%, transparent);
      white-space:nowrap;

      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .wo-sub-meter{
      position:relative;
      margin-top:8px;
      height:9px;
      border-radius:999px;
      border:1px solid color-mix(in srgb, var(--wo-line) 85%, transparent);
      background: color-mix(in srgb, var(--wo-soft) 70%, transparent);
      overflow:hidden;
      z-index:1;

      width: min(120px, 88%);
      margin-left:auto;
      margin-right:auto;
    }

    .wo-sub-meter::before{
      content:"";
      position:absolute; inset:0;
      background: repeating-linear-gradient(
        90deg,
        transparent 0 26px,
        color-mix(in srgb, var(--wo-line) 55%, transparent) 26px 27px
      );
      opacity:.75;
    }

    .wo-sub-meter > span{
      display:block;
      height:100%;
      width: calc(var(--wo-sub-fill, .33) * 100%);
      background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--wo-sub-plan-accent) 70%, #fff),
        color-mix(in srgb, var(--wo-sub-plan-accent) 92%, #fff)
      );
      border-radius:inherit;
      box-shadow: 0 10px 22px rgba(16,24,40,.12);
    }

    .wo-sub-metric[data-level="1"]{ --wo-sub-fill: .33; }
    .wo-sub-metric[data-level="2"]{ --wo-sub-fill: .66; }
    .wo-sub-metric[data-level="3"]{ --wo-sub-fill: 1; }

    html[data-theme="dark"] .wo-sub-metric{
      box-shadow: 0 18px 46px rgba(0,0,0,.28);
    }
    html[data-theme="dark"] .wo-sub-metric::after{ opacity:.20; }

    /* prawa kolumna: cena + CTA */
    .wo-sub-plan-actions{
      padding:14px;
      border-left:1px solid var(--wo-line);
      background: color-mix(in srgb, var(--wo-soft) 65%, transparent);
      display:flex;
      flex-direction:column;
      gap:12px;
      justify-content:center;
      align-items:stretch;
    }

    .wo-sub-plan-actions .wo-sub-pill{ justify-content:center; }
    .wo-sub-plan-actions .wo-sub-btn{ width:100%; }

    .wo-sub-plan-actions .wo-sub-btn[disabled]{
      opacity:.7;
      cursor:not-allowed;
    }

    /* cena w prawej kolumnie */
    .wo-sub-plan-pricebox{
      border:1px solid color-mix(in srgb, var(--wo-line) 90%, transparent);
      background: color-mix(in srgb, var(--wo-panel) 70%, var(--wo-soft));
      border-radius: var(--wo-border-radius);
      padding:10px 12px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .wo-sub-plan-pricebox .wo-sub-price{
      align-items:center;
      text-align:center;
    }
    .wo-sub-plan-pricebox .wo-sub-price strong{ font-size:18px; }
    .wo-sub-plan-pricebox .wo-sub-price span{ font-size:10px; color: var(--wo-muted); }

    .wo-sub-plan[aria-current="true"]{
      border-color: color-mix(in srgb, var(--wo-sub-plan-accent) 55%, var(--wo-line));
      box-shadow: 0 18px 45px rgba(16,24,40,.10);
      transform: none;
    }

    .wo-sub-ribbon{
      position:absolute;top:10px;right:10px;
      padding:6px 10px;border-radius:999px;
      border:1px solid var(--wo-line);
      background: color-mix(in srgb, var(--wo-sub-plan-accent) 14%, var(--wo-chip-bg));
      color: color-mix(in srgb, var(--wo-text) 82%, var(--wo-sub-plan-accent));
      font-size:10px;font-weight:1000;
      z-index:2;
    }

    /* mobile: plan jako karta */
    @media (max-width: 900px){
      .wo-sub-plan{ grid-template-columns: 1fr; }
      .wo-sub-plan-top{ border-right:none; border-bottom:1px solid var(--wo-line); }
      .wo-sub-plan-mid{ padding-top:12px; }
      .wo-sub-metrics{ grid-template-columns: 1fr; }

      .wo-sub-plan-actions{
        border-left:none;
        border-top:1px solid var(--wo-line);
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:space-between;
      }
      .wo-sub-plan-actions .wo-sub-btn{
        width:auto;
        flex: 0 0 auto;
      }
      .wo-sub-plan-pricebox{
        width:100%;
        justify-content:flex-start;
      }
      .wo-sub-plan-pricebox .wo-sub-price{
        align-items:flex-start;
        text-align:left;
      }
    }

    /* ===== Invoice list ===== */
    .wo-sub-table{
      border:1px solid var(--wo-line);
      border-radius:16px;
      overflow:hidden;
      background: color-mix(in srgb, var(--wo-panel) 92%, transparent);
    }
    .wo-sub-tr{
      display:grid;
      grid-template-columns: 1.2fr .8fr .8fr auto;
      gap:10px;
      padding:10px 12px;
      border-top:1px solid var(--wo-line);
      align-items:center;
      font-size:11px;
      color: color-mix(in srgb, var(--wo-text) 88%, transparent);
    }
    .wo-sub-tr:first-child{border-top:none;}
    .wo-sub-th{
      font-size:10px;
      letter-spacing:.6px;
      text-transform:uppercase;
      color: color-mix(in srgb, var(--wo-muted) 92%, transparent);
      background: color-mix(in srgb, var(--wo-soft) 75%, transparent);
    }
    .wo-sub-chip{
      display:inline-flex;align-items:center;gap:8px;
      padding:6px 10px;border-radius:999px;
      border:1px solid var(--wo-line);
      background: var(--wo-chip-bg);
      font-size:11px;color: var(--wo-muted);
      white-space:nowrap;
      width:fit-content;
    }
    .wo-sub-chip.ok{ color: color-mix(in srgb, #22c55e 70%, var(--wo-muted)); border-color: color-mix(in srgb, #22c55e 25%, var(--wo-line)); }
    .wo-sub-chip.warn{ color: color-mix(in srgb, #f59e0b 75%, var(--wo-muted)); border-color: color-mix(in srgb, #f59e0b 25%, var(--wo-line)); }