/* Plan card, library cards, pricing and system. Loaded after app.css, so it may lean on it. */

/* ------------------------------------------------------------------ the plan card */
.plan-card{background:linear-gradient(145deg,#193427,#101e17);border:1px solid #2a4b3b;border-radius:12px;
  padding:11px 12px;margin:0 2px}
.plan-top{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px;
  text-transform:uppercase;letter-spacing:.12em}
.plan-top b{margin-left:auto;color:#d6e1dc;font-size:10px;letter-spacing:.06em;background:#244434;
  border:1px solid #35604b;border-radius:20px;padding:2px 8px}
.plan-card.pro .plan-top b{color:#0c1510;background:var(--good,#7ce0c0);border-color:var(--good,#7ce0c0)}
.plan-icon{color:var(--accent)}
.plan-count{font-size:26px;line-height:1.15;font-weight:700}
.plan-sub{color:var(--muted);font-size:11px;margin-bottom:9px}
.plan-cta{width:100%;border:0;border-radius:9px;padding:8px 10px;font-family:inherit;font-size:12px;
  font-weight:600;cursor:pointer;color:#fff;background:linear-gradient(120deg,#2eb170,#34cd80)}
.plan-cta:hover{filter:brightness(1.08)}
.plan-card.pro .plan-cta{background:#182b22;border:1px solid #3c5e4d;color:#d2ded8}

/* ------------------------------------------------------------------ library cards */
.head-icon{color:var(--accent);margin-right:4px}
.card-item .card-id{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:10.5px;
  margin-bottom:5px;font-family:ui-monospace,"Cascadia Mono",Menlo,monospace}
.card-item .card-id button{border:0;background:none;color:var(--muted);cursor:pointer;padding:0 2px;
  font-size:11px;line-height:1}
.card-item .card-id button:hover{color:#d6e1dc}
.card-body b{font-size:14px;margin-bottom:7px}
.card-item .meta-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:7px}
.cat-pill{background:#244434;border:1px solid #35604b;color:#d6e1dc;border-radius:6px;padding:2px 8px;
  font-size:10.5px;font-weight:600}
.meta-row .meta{color:var(--muted);font-size:11px}
.tags .more{background:#182b22;color:var(--muted)}
/* the row of buttons lives behind a kebab, so a wall of cards stays readable */
.card-item{position:relative}
.card-item .kebab{position:absolute;right:8px;top:8px;z-index:3;border:1px solid #334e40;
  background:#0c1510cc;color:#ccdad3;border-radius:6px;width:24px;height:24px;cursor:pointer;
  font-size:13px;line-height:1;opacity:0;transition:opacity .12s}
.card-item:hover .kebab,.card-item.menu-open .kebab{opacity:1}
.card-item .card-actions{position:absolute;right:8px;top:36px;z-index:4;display:none;flex-direction:column;
  align-items:stretch;gap:3px;padding:5px;background:#13241c;border:1px solid #334e40;border-radius:9px;
  box-shadow:0 12px 28px #050a0899;min-width:132px}
.card-item.menu-open .card-actions{display:flex}
.card-item .card-actions button{text-align:left;border:0;background:none;padding:6px 8px;font-size:11.5px}
.card-item .card-actions button:hover{background:#20372c;border:0}
.card-item .card-actions button.danger{color:#ff9b9b}

/* ------------------------------------------------------------------ pricing */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;max-width:760px}
.price-card{border:1px solid #263b30;background:#101c16;border-radius:14px;padding:18px}
.price-card.featured{border-color:var(--accent);box-shadow:0 0 0 1px #2ec27833,0 18px 40px #050a0866}
.price-card h2{margin:0 0 6px;font-size:15px}
.price{display:flex;align-items:baseline;gap:6px;margin-bottom:8px}
.price b{font-size:32px;line-height:1}
.price span{color:var(--muted);font-size:12px}
.ticks{list-style:none;margin:12px 0 16px;padding:0;display:grid;gap:7px}
.ticks li{position:relative;padding-left:20px;font-size:12.5px;color:#ccdad3}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.price-card .btn{width:100%;justify-content:center}
.grant-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grant-row input,.grant-row select{background:#0e1813;border:1px solid #2d463a;border-radius:8px;
  color:var(--text,#e8eeeb);padding:8px 10px;font-family:inherit;font-size:12px}
.grant-row input{flex:1;min-width:200px}

/* ------------------------------------------------------------------ system */
pre.log{background:#0a140f;border:1px solid #263b30;border-radius:10px;padding:11px 12px;margin:10px 0 0;
  max-height:340px;overflow:auto;font-size:11.5px;line-height:1.5;white-space:pre-wrap;color:#c1c5c3;
  font-family:ui-monospace,"Cascadia Mono",Menlo,monospace}
.btn.danger{border-color:#5d2a36;color:#ff9b9b}
.btn.danger:hover{border-color:#ff9b9b}
.ok-dot{color:var(--good,#7ce0c0)}
.bad-dot{color:#ff9b9b}

@media(max-width:950px){.plan-card{display:none}}

/* ------------------------------------------------------------------ which rig a clip is shown on */
.rig-switch{display:inline-flex;border:1px solid #3c5e4d;border-radius:7px;overflow:hidden;margin-right:2px}
.rig-switch button{border:0;background:#182b22;color:#9aa5a0;padding:6px 11px;font-size:11px;
  font-weight:600;cursor:pointer;font-family:inherit}
.rig-switch button.on{background:var(--accent);color:#0c1510}
.rig-switch button:not(.on):hover{color:#d2ded8}