/* ================= subscriber-facing CRBT web portal ================= */
body.portal{background:#fff;color:#3a3a3a}

.p-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #ececec;
  display:flex;align-items:center;gap:34px;padding:0 34px;height:66px}
.p-logo{display:flex;flex-direction:column;line-height:1;cursor:pointer}
.p-logo img{width:126px;height:auto;display:block}
.p-logo span{font-family:var(--font-brand);font-size:7px;letter-spacing:2.1px;margin-top:5px;
  color:#9b9b9b;font-weight:700;white-space:nowrap}
.p-nav{display:flex;gap:26px;align-items:center}
.p-nav a{color:#9b9b9b;font-weight:600;font-size:15px;cursor:pointer;padding:4px 0}
.p-nav a.on{color:#111}
.p-sub{display:flex;gap:22px;align-items:center;margin-left:26px}
.p-sub a{color:#9b9b9b;font-weight:600;font-size:14px;cursor:pointer;padding:20px 0;border-bottom:2px solid transparent}
.p-sub a.on{color:#111;border-bottom-color:var(--brand-a)}
.p-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.p-search{width:26px;height:26px;border:2.5px solid var(--brand-a);border-radius:50%;position:relative;cursor:pointer}
.p-search::after{content:'';position:absolute;right:-7px;bottom:-5px;width:11px;height:2.5px;
  background:var(--brand-a);transform:rotate(45deg);border-radius:2px}
.p-login{color:#7a7a7a;cursor:pointer;font-size:15px}
.p-login b{color:#111}

.p-search-bar{display:none;padding:14px 34px;border-bottom:1px solid #ececec;background:#fafafa}
.p-search-bar.show{display:block}
.p-search-bar input{width:100%;max-width:520px;border:0;border-bottom:1px solid #d8d8d8;
  background:transparent;padding:10px 2px;font-size:15px;outline:none}

.p-main{min-height:calc(100vh - 66px - 74px)}
.p-band{padding:30px 34px}
.p-band.grey{background:#f6f6f6}
.p-h1{font-family:var(--font-brand);font-size:44px;font-weight:800;color:#1c1c1c;letter-spacing:-1.2px;margin:12px 0 18px}
.p-h2{font-size:19px;font-weight:700;color:#1c1c1c;margin-bottom:16px}
.p-h2 .all{float:right;font-size:13px;font-weight:600;color:var(--brand-a);cursor:pointer}

.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:1000px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cats{grid-template-columns:1fr}}
.cat{position:relative;height:160px;display:grid;place-items:center;cursor:pointer;overflow:hidden;
  color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.cat .ov{position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,0,.62),rgba(0,0,0,.3));transition:.2s}
.cat:hover .ov{background:linear-gradient(120deg,rgba(0,0,0,.45),rgba(0,0,0,.15))}
.cat .tx{position:relative;text-align:center}
.cat .tx b{font-size:21px;font-weight:700;display:block}
.cat .tx span{font-size:12px;opacity:.92}

.rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 26px}
@media(max-width:1150px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.rail{grid-template-columns:1fr}}
.trk{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid #f0f0f0}
.trk .art{width:54px;height:54px;flex:0 0 54px;background:linear-gradient(135deg,#dcdcdc,#efefef);
  display:grid;place-items:center;color:#b0b0b0}
.trk .meta{min-width:0;flex:1}
.trk .meta b{display:block;color:#1c1c1c;font-size:14px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.trk .meta span{display:block;color:#a9a9a9;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk .code{color:#c2c2c2;font-size:12px;white-space:nowrap}
.trk .dots{color:#b5b5b5;cursor:pointer;padding:4px 6px;letter-spacing:2px;font-weight:700}
.trk .dots:hover{color:var(--brand-a)}

.artists{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
@media(max-width:1100px){.artists{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.artists{grid-template-columns:repeat(2,minmax(0,1fr))}}
.art-c{text-align:center;cursor:pointer}
.art-c .ph{aspect-ratio:1;border-radius:50%;background:#f1f1f1;display:grid;place-items:center;color:#cfcfcf}
.art-c:hover .ph{background:#e9e9e9}
.art-c b{display:block;margin-top:12px;font-size:14px;color:#1c1c1c}

/* tunes table */
.p-table{width:100%;border-collapse:collapse}
.p-table th{text-align:left;color:#9b9b9b;font-weight:500;font-size:13px;padding:10px 12px;border-bottom:1px solid #eee}
.p-table td{padding:11px 12px;border-bottom:1px solid #f4f4f4;font-size:13.5px;color:#4a4a4a;vertical-align:middle}
.p-table tbody tr:hover{background:#fafafa}
.p-table td.name{color:#1c1c1c;font-weight:600}
.p-table td.dim{color:#bdbdbd}
.p-table .rowart{width:38px;height:38px;background:linear-gradient(135deg,#dcdcdc,#efefef);
  display:grid;place-items:center;color:#b0b0b0}
.heart{cursor:pointer;color:#c9c9c9}
.heart.on{color:var(--brand-a)}
.p-search-in{border:0;border-bottom:1px solid #dedede;padding:8px 2px;outline:none;background:transparent;
  font-size:14px;min-width:230px;margin-bottom:12px}
.p-pager{display:flex;gap:8px;align-items:center;padding:18px 0;color:#9b9b9b;font-size:13px;flex-wrap:wrap}
.p-pager button{width:30px;height:30px;border:1px solid #e6e6e6;background:#fff;cursor:pointer;color:#6a6a6a}
.p-pager button.on{background:var(--brand-a);border-color:var(--brand-a);color:#fff;font-weight:600}
.p-pager button:disabled{opacity:.4;cursor:default}

/* my dial tune */
.my-hero{background:#f6f6f6;padding:26px 34px;border-bottom:1px solid #ececec;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.my-hero .msisdn{font-size:24px;font-weight:800;color:#1c1c1c;letter-spacing:-.5px}
.my-hero .sp{margin-left:auto}
.my-tabs{display:flex;gap:28px;padding:0 34px;border-bottom:1px solid #ececec;flex-wrap:wrap}
.my-tabs button{background:none;border:0;padding:16px 2px;cursor:pointer;color:#9b9b9b;font-weight:600;
  font-size:14px;border-bottom:2px solid transparent}
.my-tabs button.on{color:#111;border-bottom-color:var(--brand-a)}
.p-btn{border:0;cursor:pointer;padding:11px 22px;font-size:13px;font-weight:600;color:#fff;
  background:var(--brand-a);border-radius:4px}
.p-btn:hover{filter:brightness(.94)}
.p-btn.pink{background:var(--brand-b)}
.p-btn.ghost{background:#fff;color:#4a4a4a;border:1px solid #dcdcdc}
.p-empty{padding:44px;text-align:center;color:#b5b5b5}

/* login modal */
.p-mask{position:fixed;inset:0;background:rgba(0,0,0,.42);display:none;place-items:center;z-index:300;padding:20px}
.p-mask.show{display:grid}
.p-modal{background:#fafafa;width:min(510px,100%);padding:30px 42px 34px;position:relative;border-radius:2px}
.p-modal h3{text-align:center;font-size:26px;font-weight:700;color:#1c1c1c;margin-bottom:26px}
.p-modal .x{position:absolute;right:22px;top:18px;background:none;border:0;font-size:26px;
  color:var(--brand-a);cursor:pointer;line-height:1}
.p-in{width:100%;border:1px solid var(--line-strong);background:#fff;padding:20px 16px 12px;
  margin-bottom:18px;position:relative}
.p-in label{position:absolute;top:6px;left:16px;font-size:11px;color:#9b9b9b}
.p-in input{width:100%;border:0;outline:none;font-size:15px;background:transparent}
.p-in:focus-within{border-color:var(--brand-b)}
.p-in.err,.p-in.err:focus-within{border-color:var(--bad)}
.p-in-msg{color:var(--bad);font-size:12px;margin:-12px 0 14px}
.p-modal .go{display:block;margin:6px auto 0;background:var(--brand-a);color:#fff;border:0;
  padding:13px 44px;font-size:16px;font-weight:600;border-radius:4px;cursor:pointer}
.p-modal .lnk{text-align:center;margin-top:16px;color:#5a5a5a;font-size:14px}
.p-modal .lnk a{color:var(--brand-a);font-weight:700;cursor:pointer}

.p-foot{background:#141A22;color:#8d8d8d;padding:22px 34px;display:flex;gap:14px;align-items:center;
  flex-wrap:wrap;font-size:12.5px}
.p-foot img{width:96px;height:auto;display:block;margin-right:8px}
.p-foot .sp{margin-left:auto}
.p-foot a{color:#8d8d8d;cursor:pointer}
.p-foot b{color:#e9e9e9}