/* Subscription — dashboard design, scoped under .crdts-dash.
   Page-private classes; the shared shell stays in dashboard.scoped.css. */

.crdts-dash h1,.crdts-dash h2,.crdts-dash h3,.crdts-dash h4,.crdts-dash p,.crdts-dash span,.crdts-dash a,.crdts-dash b,.crdts-dash strong,.crdts-dash small,.crdts-dash em,.crdts-dash i,.crdts-dash li,.crdts-dash ul,.crdts-dash ol,.crdts-dash button,.crdts-dash label,.crdts-dash input,.crdts-dash textarea,.crdts-dash select,.crdts-dash summary,.crdts-dash option:not(.material-symbols-outlined):not([class*="material-symbols"]):not(.material-symbols-rounded):not([class*="material-symbols-rounded"]){font-family:inherit}
.crdts-dash .material-symbols-outlined,.crdts-dash [class*="material-symbols"]{
  font-family:'Material Symbols Outlined'!important;font-weight:400;font-style:normal;
  line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;
  white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';
  -webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}

.sb-notice{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:13px;
  border:1px solid var(--line);background:#fff}
.sb-notice>svg{width:22px;height:22px;flex:0 0 22px}
.sb-notice-body{flex:1;min-width:0}
.sb-notice-body b{display:block;font-size:13.5px;font-weight:700;color:#38382d}
.sb-notice-body small{display:block;font-size:11px;color:#8c8c81;margin-top:3px}
.sb-notice .primary-button svg,.sb-notice .secondary-button svg{width:14px;height:14px}
.sb-notice.bad{border-color:#f0c9c7;background:#fdf3f2}
.sb-notice.bad>svg{color:#c94742}
.sb-notice.warn{border-color:#f2dfae;background:#fff9e4}
.sb-notice.warn>svg{color:#b47915}
.sb-notice.info{border-color:#cfe0f2;background:#f3f7fc}
.sb-notice.info>svg{color:#2c5d9e}

.sb-plan .panel-heading{align-items:flex-start}
.sb-plan-name{display:flex;align-items:center;gap:9px;margin-top:7px}
.sb-plan-name b{font-size:19px;font-weight:800;color:#171714}

.sb-line{font-size:13px;color:#5c5c52;line-height:1.8}
.sb-line+.sb-line{margin-top:5px}
.sb-line strong{color:#171714}

.sb-usage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.sb-usage-cell{padding:12px 13px;border-radius:11px;background:#fafaf6;border:1px solid var(--line);
  display:grid;gap:5px}
.sb-usage-label{font-size:10.5px;color:#a1a194}
.sb-usage-cell b{font-size:13.5px;font-weight:700;color:#171714}
.sb-usage-cell .quota-bar>span{background:var(--orange)}

.sb-ai{margin-top:18px;padding:14px 16px;border-radius:12px;border:1px solid #f0dfae;background:#fff9e4}
.sb-ai-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sb-ai-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#38382d}
.sb-ai-title svg{width:15px;height:15px;color:var(--orange)}
.sb-ai-val{font-size:13px;font-weight:800;color:#171714;display:inline-flex;align-items:center;gap:7px}
.sb-ai-extra{font-size:10px;font-weight:700;color:#3f6b50;background:#eaf3ec;
  padding:2px 7px;border-radius:999px}
.sb-ai .quota-bar.tall{height:7px;margin-top:10px}
.sb-ai .quota-bar.tall>span{background:var(--orange)}
.sb-ai-note{margin-top:10px;font-size:11px;color:#8c8c81;line-height:1.8}
.sb-off{color:#c94742}

.sb-feat{margin-bottom:16px}
.sb-feat:last-child{margin-bottom:0}
.sb-feat-cat{display:block;margin-bottom:8px;font-size:12.5px;font-weight:700;color:#38382d}
.sb-feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.sb-feat-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
  font-size:12px;background:#fafaf6;border:1px solid var(--line);color:#a1a194;
  text-decoration:line-through}
.sb-feat-row.on{background:#eaf3ec;border-color:#cfe4d6;color:#3f6b50;text-decoration:none}
.sb-feat-row svg{width:15px;height:15px;flex:0 0 15px;color:#3f6b50}
.sb-feat-x{width:15px;height:15px;flex:0 0 15px}

.sb-none{padding:18px 10px;text-align:center;font-size:12.5px;color:#a1a194}
.sb-pay-group+.sb-pay-group{margin-top:14px}
.sb-label{display:block;margin-bottom:7px;font-size:10.5px;font-weight:700;color:#a1a194;
  text-transform:uppercase;letter-spacing:.04em}
.sb-pay-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sb-pay{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;
  background:#fafaf6;border:1px solid var(--line)}
.sb-pay.store{background:#fff9e4;border-color:#f0dfae}
.sb-pay b{font-size:12.5px;font-weight:600;color:#38382d}
.sb-pay-ico{width:30px;height:30px;flex:0 0 30px;border-radius:8px;background:#f4f2e8;overflow:hidden}
.sb-pay-ico img{width:100%;height:100%;object-fit:cover}

.sb-req{display:flex;align-items:flex-start;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line)}
.sb-req:last-child{border-bottom:0;padding-bottom:0}
.sb-req-body{flex:1;min-width:0;display:grid;gap:3px}
.sb-req-body b{font-size:13px;font-weight:700;color:#171714}
.sb-req-body small{font-size:11px;color:#a1a194}
.sb-req-err{color:#c94742!important}

@media(max-width:1200px){
  .sb-usage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .sb-usage{grid-template-columns:1fr}
  .sb-feat-grid,.sb-pay-grid{grid-template-columns:1fr}
  .sb-notice{flex-wrap:wrap}
}