/* ===========================================================
       Reading admin — Publish toggle in builder header
       =========================================================== */
    .rd-publish-wrap{
      display:inline-flex; align-items:center; gap:10px;
      margin-left:auto;
    }
    .rd-publish-status{
      display:inline-flex; align-items:center; gap:6px;
      padding:4px 10px;
      border-radius:999px;
      font-size:14px; font-weight:700; letter-spacing:.3px;
      text-transform:uppercase;
    }
    .rd-publish-status--live{
      color:#0c7a5e;
      background:rgba(17,163,127,.12);
      border:1px solid rgba(17,163,127,.32);
    }
    .rd-publish-status--draft{
      color:#7a6b1f;
      background:rgba(245,181,74,.14);
      border:1px solid rgba(245,181,74,.32);
    }
    [data-theme="dark"] .rd-publish-status--live{
      color:#3fcf9f;
      background:rgba(17,163,127,.18);
    }
    [data-theme="dark"] .rd-publish-status--draft{
      color:#f3c266;
      background:rgba(245,181,74,.18);
    }

    /* ===========================================================
       Reading/Listening admin — Free/Premium access-tier toggle
       (shared rd-tier-* classes; used in both builders + list cards)
       =========================================================== */
    .rd-tier-wrap{ margin-left:0; }
    .rd-tier-status{
      display:inline-flex; align-items:center; gap:6px;
      padding:4px 10px;
      border-radius:999px;
      font-size:14px; font-weight:700; letter-spacing:.3px;
      text-transform:uppercase;
    }
    .rd-tier-status--free{
      color:#0c7a5e;
      background:rgba(17,163,127,.10);
      border:1px solid rgba(17,163,127,.28);
    }
    .rd-tier-status--premium{
      color:#8a5a00;
      background:linear-gradient(135deg, rgba(245,181,74,.22), rgba(245,158,11,.14));
      border:1px solid rgba(245,158,11,.44);
    }
    [data-theme="dark"] .rd-tier-status--free{ color:#3fcf9f; background:rgba(17,163,127,.16); }
    [data-theme="dark"] .rd-tier-status--premium{
      color:#ffd479; background:rgba(245,158,11,.18); border-color:rgba(245,158,11,.5);
    }

    /* Free/Premium chip on the admin list cards */
    .rd-tier-chip{
      display:inline-flex; align-items:center; gap:4px;
      padding:2px 9px;
      border-radius:999px;
      font-size:13px; font-weight:700; letter-spacing:.3px;
      text-transform:uppercase; white-space:nowrap;
    }
    .rd-tier-chip--free{
      color:#0c7a5e;
      background:rgba(17,163,127,.10);
      border:1px solid rgba(17,163,127,.26);
    }
    .rd-tier-chip--premium{
      color:#8a5a00;
      background:linear-gradient(135deg, rgba(245,181,74,.24), rgba(245,158,11,.15));
      border:1px solid rgba(245,158,11,.44);
    }
    [data-theme="dark"] .rd-tier-chip--free{ color:#3fcf9f; background:rgba(17,163,127,.16); }
    [data-theme="dark"] .rd-tier-chip--premium{
      color:#ffd479; background:rgba(245,158,11,.18); border-color:rgba(245,158,11,.5);
    }

    /* ===========================================================
       Segmented Free | Premium access toggle (shared)
       Used by: reading + listening builders, the article add form,
       and article admin rows. Active segment is filled (green=free,
       gold=premium); the inactive segment is the click target.
       =========================================================== */
    .tier-seg{
      display:inline-flex; align-items:center; gap:3px;
      padding:3px; border-radius:999px;
      background:rgba(120,120,140,.10);
      border:1px solid var(--glass-line, rgba(120,120,140,.22));
    }
    .tier-seg-opt{
      appearance:none; -webkit-appearance:none; font-family:inherit;
      display:inline-flex; align-items:center; gap:5px;
      padding:5px 13px; border:0; background:transparent;
      border-radius:999px; font-size:14.5px; font-weight:700; letter-spacing:.2px;
      color:var(--muted); white-space:nowrap; cursor:pointer;
      transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease;
    }
    .tier-seg-opt.is-active{ cursor:default; }
    .tier-seg-opt:not(.is-active):hover{ color:var(--text); transform:translateY(-1px); }
    /* active = FREE (green) */
    .tier-seg-opt.is-active:not(.tier-seg-opt--prem){
      color:#0c7a5e; background:rgba(17,163,127,.16);
      box-shadow:0 2px 8px -3px rgba(17,163,127,.5);
    }
    [data-theme="dark"] .tier-seg-opt.is-active:not(.tier-seg-opt--prem){
      color:#3fcf9f; background:rgba(17,163,127,.22);
    }
    /* active = PREMIUM (gold) */
    .tier-seg-opt--prem.is-active{
      color:#3a2400;
      background:linear-gradient(135deg,#fde68a,#f59e0b);
      box-shadow:0 3px 12px -3px rgba(245,158,11,.65);
    }
    /* inactive premium segment hints gold on hover */
    .tier-seg-opt--prem:not(.is-active):hover{ color:#b45309; }
    [data-theme="dark"] .tier-seg-opt--prem:not(.is-active):hover{ color:#ffd479; }

    /* ===========================================================
       Reading admin — Flow chart completion editor
       =========================================================== */
    .rd-fc-list{
      display:flex;
      flex-direction:column;
      gap:0;
      padding:6px 0;
    }
    .rd-fc-step{
      display:flex;
      flex-direction:column;
      align-items:stretch;
    }
    .rd-fc-box{
      position:relative;
      display:flex;
      align-items:center;
      padding:4px;
      border:2px solid var(--rd-line);
      border-radius:10px;
      background:var(--rd-card);
      transition:border-color .15s;
    }
    .rd-fc-box:focus-within{ border-color:var(--rd-primary); }
    .rd-fc-input{
      flex:1;
      min-width:0;
      padding:10px 12px;
      background:transparent;
      color:var(--rd-text);
      border:none;
      outline:none;
      font-size:16px;
      font-family:inherit;
    }
    .rd-fc-step-ctl{
      display:flex;
      align-items:center;
      gap:4px;
      padding-right:6px;
    }
    .rd-fc-step-ctl .rd-tc-gap-btn{
      position:static;
      transform:none;
      opacity:1;  /* always visible since each step is its own row */
    }
    .rd-fc-arrow{
      align-self:center;
      color:var(--rd-muted);
      font-size:24px;
      line-height:1;
      margin:4px 0;
      user-select:none;
    }

    /* Student-side flow-chart preview (used in admin preview pane) */
    .rd-pv-fc{
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:0;
      margin-top:8px;
    }
    .rd-pv-fc-box{
      width:90%;
      max-width:380px;
      padding:10px 14px;
      border:2px solid var(--rd-line);
      border-radius:8px;
      background:var(--rd-card-tint);
      color:var(--rd-text);
      text-align:center;
      font-size:16px;
      line-height:1.5;
    }
    .rd-pv-fc-arrow{
      color:var(--rd-muted);
      font-size:22px;
      line-height:1;
      margin:6px 0;
    }