:root{--ink:#172033;--muted:#687386;--line:#e6eaf0;--surface:#fff;--bg:#f5f7fb;--blue:#2457d6}body{background:var(--bg);color:var(--ink);font-size:.94rem}.navbar-brand{letter-spacing:-.02em}.navbar .nav-link{padding-left:.8rem!important;padding-right:.8rem!important}.container-fluid{max-width:1600px}.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.13em;color:#64748b}.card{border:1px solid var(--line);border-radius:13px;box-shadow:0 2px 8px rgba(20,32,55,.025)}.card-header{padding:1rem 1.15rem;border-bottom:1px solid var(--line);border-radius:13px 13px 0 0!important}.table>:not(caption)>*>*{padding:.85rem 1rem;border-bottom-color:#edf0f4}.table thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#758095;font-weight:700;background:#fbfcfe;white-space:nowrap}.stat-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:1.2rem;height:100%}.stat-label{color:var(--muted);font-size:.83rem}.stat-value{font-size:2rem;font-weight:700;letter-spacing:-.04em;margin-top:.45rem}.status{display:inline-flex;align-items:center;border-radius:99px;padding:.25rem .6rem;font-size:.75rem;font-weight:700;text-transform:capitalize;white-space:nowrap}.status-active{background:#e4f7ed;color:#187747}.status-pending{background:#fff3d6;color:#8a5b00}.status-suspended{background:#fde8e8;color:#a42c2c}.status-expired{background:#eceff4;color:#535d6d}.quick-link{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none}.quick-link:hover{border-color:#b8c9fa;background:#f8faff}.quick-link small{display:block;color:var(--muted);margin-top:.2rem}.form-card{max-width:980px}.form-label{font-weight:600;font-size:.85rem}.form-control,.form-select{border-color:#dce2eb;min-height:42px}.form-control:focus,.form-select:focus{border-color:#8ba8f5;box-shadow:0 0 0 .2rem rgba(36,87,214,.12)}.detail-label{font-size:.75rem;color:var(--muted);margin-bottom:.25rem}.detail-value{font-weight:550;overflow-wrap:anywhere}.login-wrap{max-width:450px;margin:4vh auto}.login-wrap .card{border-radius:18px}.brand-mark{height:46px;width:46px;display:grid;place-items:center;background:#183a91;color:#fff;font-weight:800;border-radius:12px;letter-spacing:-.04em}.receipt{max-width:760px}.config-snippet{background:#f5f7fb;border:1px solid var(--line);border-radius:8px;padding:1rem;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.82rem}@media(max-width:767px){.stat-value{font-size:1.7rem}.table>:not(caption)>*>*{padding:.7rem .65rem}.login-wrap{margin:2vh auto}}@media print{body{background:white}.card{box-shadow:none}}

/* Joriken ISP Networks / Lenscraft Studios professional visual system */
:root{--ink:#17283f;--muted:#6c7888;--line:#dfe5ed;--surface:#fff;--bg:#f3f6fa;--blue:#174b83;--blue-deep:#102b49;--accent:#2f6da8;--focus:rgba(47,109,168,.18)}
body{background:var(--bg);color:var(--ink);font-size:.94rem;line-height:1.5}.navbar{background:var(--blue-deep)!important;border-bottom:3px solid #3c79b4}.navbar-brand{font-weight:750;letter-spacing:.015em}.navbar .nav-link{font-size:.88rem;color:#dbe6f2!important}.navbar .nav-link:hover{color:#fff!important}.page-heading{margin-bottom:1.5rem}.page-heading h1{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:750;letter-spacing:-.04em}.eyebrow{font-size:.69rem;font-weight:750;letter-spacing:.14em;color:#5d7188;margin-bottom:.35rem}.card{border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 16px rgba(18,39,64,.035);overflow:hidden}.card-header{padding:1rem 1.15rem;background:#fff;border-bottom:1px solid var(--line)}.btn{font-weight:650;border-radius:7px}.btn-primary{background:var(--blue);border-color:var(--blue)}.btn-primary:hover{background:#103b68;border-color:#103b68}.form-control,.form-select{border-color:#d4dde8;border-radius:7px}.form-control:focus,.form-select:focus{border-color:#6d9dc8;box-shadow:0 0 0 .2rem var(--focus)}.table thead th{background:#f7f9fc;color:#6b7789;font-size:.7rem;letter-spacing:.08em}.status{border-radius:5px}.empty-state{text-align:center;color:var(--muted);padding:2.5rem 1rem!important}.portal-preview{min-height:250px;padding:1.5rem;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:.8rem;background:#14263d}.portal-preview.portal-minimal{background:#f8fafc;color:#1b2a3d;border:1px solid var(--line)}.portal-preview.portal-night{background:#0b1423}.portal-preview.portal-community{background:#245c72}.portal-preview.portal-premium{background:#182c48}.portal-preview-brand{font-size:.65rem;letter-spacing:.13em;font-weight:800}.portal-preview-line{width:42px;height:3px;background:#77a7d5}.portal-preview-title{font-size:1.35rem;font-weight:750}.portal-preview-subtitle{font-size:.8rem;opacity:.8}.portal-preview-fields{display:grid;gap:.5rem}.portal-preview-fields span{display:block;height:16px;border:1px solid currentColor;opacity:.35;border-radius:4px}.portal-preview-fields b{font-size:.65rem;letter-spacing:.1em;border-radius:4px;background:#fff;color:#14263d;padding:.45rem;text-align:center}.portal-page{min-height:100vh;margin:0;padding:clamp(1rem,4vw,3rem);display:flex;align-items:center;justify-content:center;background:#eef2f7;color:#17283f}.portal-page.portal-night{background:#0c1626;color:#f2f6fb}.portal-page.portal-community{background:#eaf3f5}.portal-page.portal-premium{background:#edf1f6}.portal-shell{width:min(100%,480px);background:#fff;border:1px solid #dfe5ed;border-radius:16px;padding:clamp(1.5rem,5vw,2.5rem);box-shadow:0 18px 60px rgba(13,35,59,.1)}.portal-night .portal-shell{background:#121f32;border-color:#293c53;color:#f2f6fb}.portal-brand{font-size:1rem;letter-spacing:.07em;font-weight:850;color:#143f6c}.portal-brand span{display:block;font-size:.66rem;letter-spacing:.2em;margin-top:.12rem}.portal-night .portal-brand{color:#b8d7f4}.portal-rule{width:54px;height:4px;background:#397db7;margin:1.25rem 0 1.8rem;border-radius:2px}.portal-shell h1{font-size:clamp(1.7rem,5vw,2.15rem);font-weight:780;line-height:1.13;letter-spacing:-.04em}.portal-copy{color:#657386;font-size:.94rem;margin:1rem 0 1.4rem}.portal-night .portal-copy{color:#b4c3d4}.portal-form{display:grid;gap:.55rem}.portal-form label{font-size:.79rem;font-weight:700;margin-top:.45rem}.portal-form input{width:100%;min-height:46px;border:1px solid #d4dde8;border-radius:7px;padding:.7rem .8rem;font:inherit}.portal-form input:focus{outline:3px solid rgba(47,109,168,.18);border-color:#397db7}.portal-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.7rem 1rem;border:1px solid #174b83;border-radius:7px;background:#174b83;color:#fff;text-decoration:none;font-weight:750;font:inherit;cursor:pointer}.portal-form .portal-button{margin-top:.9rem}.portal-button:hover{background:#103b68;color:#fff}.portal-button-secondary{background:transparent;color:#174b83}.portal-links{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1rem;font-size:.8rem}.portal-links a{color:#245c8d}.portal-support{font-size:.78rem;color:#718094;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e4e9f0}.portal-shell footer{font-size:.68rem;color:#8591a1;margin-top:1.4rem}.portal-error{background:#fff0f0;border:1px solid #f0caca;color:#8b2424;padding:.75rem;border-radius:7px;margin:1rem 0}.portal-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1.3rem 0}.portal-status-grid div{padding:.8rem;background:#f4f7fa;border:1px solid #e2e8ef;border-radius:8px;min-width:0}.portal-status-grid span{display:block;font-size:.7rem;color:#6c7888;margin-bottom:.3rem}.portal-status-grid strong{font-size:.85rem;overflow-wrap:anywhere}.portal-actions{display:grid;gap:.6rem}.portal-expired .portal-shell{border-top:4px solid #b25a46}.portal-expired .portal-rule{background:#b25a46}.portal-community .portal-brand{color:#245c72}.portal-premium .portal-brand{color:#203e64}@media(max-width:600px){.portal-status-grid{grid-template-columns:1fr}.portal-shell{border-radius:12px}.portal-links{flex-direction:column;gap:.65rem}}
.portal-package-shell{width:min(100%,600px)}.portal-package-list{display:grid;gap:.7rem;margin:1.2rem 0}.portal-package{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid #dfe5ed;border-radius:9px;padding:.9rem 1rem}.portal-package h2{font-size:.96rem;font-weight:750;margin:0 0 .25rem}.portal-package p{font-size:.78rem;color:#6c7888;margin:0}.portal-package>strong{white-space:nowrap;color:#174b83;font-size:.95rem}.voucher-sale-form{min-width:190px}

/* Floating prepaid package cards */
.portal-packages-page{align-items:flex-start;background:linear-gradient(155deg,#eef3f8 0%,#f7f9fc 52%,#e9f0f7 100%)}
.portal-package-shell{width:min(100%,760px);padding:clamp(1.25rem,4vw,2.4rem);border-radius:20px}
.portal-package-header{max-width:600px}
.portal-package-header .portal-rule{margin:1rem 0 1.35rem}
.portal-package-header h1{margin:.2rem 0 .5rem}
.portal-package-header .portal-copy{margin:.65rem 0 1.2rem;max-width:580px}
.portal-package-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:1rem;margin:1.25rem 0 1rem}
.portal-package-card{display:flex;flex-direction:column;gap:1rem;min-width:0;padding:1.1rem;border:1px solid #dbe4ee;border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(16,43,73,.065);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.portal-package-card:hover{transform:translateY(-3px);border-color:#9bb7d3;box-shadow:0 14px 30px rgba(16,43,73,.11)}
.portal-package-topline,.portal-package-main,.portal-package-bottom{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.portal-package-speed{font-size:.74rem;font-weight:750;color:#244e76;background:#edf4fb;border-radius:6px;padding:.35rem .5rem}
.portal-package-type{font-size:.62rem;font-weight:800;letter-spacing:.12em;color:#728197}
.portal-package-main{align-items:flex-start;padding:.2rem 0 .35rem}
.portal-package-main h2{font-size:1.08rem;font-weight:800;line-height:1.25;margin:0 0 .4rem;color:#172f49}
.portal-package-duration{font-size:.82rem;color:#65758a;margin:0}
.portal-package-price{text-align:right;white-space:nowrap;color:#174b83}
.portal-package-price span{display:block;font-size:.62rem;letter-spacing:.12em;font-weight:800;color:#728197}
.portal-package-price strong{font-size:1.45rem;letter-spacing:-.04em;line-height:1.25}
.portal-package-bottom{padding-top:.85rem;border-top:1px solid #edf1f5;align-items:center}
.portal-package-bottom>span{font-size:.7rem;color:#65758a;max-width:120px}
.portal-package-select{display:inline-flex;justify-content:center;align-items:center;min-height:38px;padding:.55rem .75rem;border-radius:7px;background:#174b83;color:#fff;text-decoration:none;font-size:.78rem;font-weight:750;white-space:nowrap}
.portal-package-select:hover{background:#103b68;color:#fff}
.portal-package-empty{grid-column:1/-1;padding:1.2rem;border:1px dashed #cbd6e2;border-radius:12px;color:#65758a;text-align:center}
.portal-package-voucher{width:100%;margin-top:.3rem}
.portal-packages-page .portal-support{margin-top:1.2rem}
.portal-packages-page .portal-shell footer{line-height:1.6}
@media(max-width:520px){.portal-package-shell{border-radius:14px}.portal-package-card{padding:1rem}.portal-package-price strong{font-size:1.25rem}.portal-package-bottom{align-items:flex-start}.portal-package-bottom>span{max-width:100px}}
@media(prefers-reduced-motion:reduce){.portal-package-card{transition:none}.portal-package-card:hover{transform:none}}

/* Joriken logo identity: metallic silver, black, red and green */
.portal-packages-page {
  --joriken-red: #d71920;
  --joriken-green: #12843b;
  --joriken-black: #17191d;
  --joriken-silver: #aeb5bf;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(215,25,32,.09), transparent 36%),
    radial-gradient(ellipse at 100% 0%, rgba(18,132,59,.09), transparent 34%),
    linear-gradient(150deg, #f4f5f6, #fff 52%, #edf0f2);
}

.portal-packages-page .portal-shell {
  border: 1px solid #d2d5d9;
  box-shadow: 0 18px 55px rgba(23,25,29,.12);
}

.portal-packages-page .portal-logo {
  display: block;
  width: min(100%, 390px);
  max-height: 210px;
  object-fit: contain;
  object-position: left center;
  margin: 0 auto 1rem 0;
  border-radius: 8px;
}

.portal-packages-page .portal-rule {
  background: linear-gradient(90deg, var(--joriken-red) 0 38%, var(--joriken-black) 38% 65%, var(--joriken-green) 65%);
  width: 100%;
  max-width: 150px;
  height: 5px;
  border-radius: 3px;
}

.portal-packages-page .portal-package-card {
  border-color: #d8dce1;
  box-shadow: 0 7px 20px rgba(23,25,29,.055);
}

.portal-packages-page .portal-package-card:hover {
  border-color: var(--joriken-silver);
  box-shadow: 0 12px 27px rgba(23,25,29,.11);
}

.portal-packages-page .portal-package-select,
.portal-packages-page .portal-button {
  background: var(--joriken-black);
  border-color: var(--joriken-black);
  color: #fff;
}

.portal-packages-page .portal-package-select:hover,
.portal-packages-page .portal-button:hover {
  background: #30343a;
}

.portal-packages-page .portal-package-price {
  color: var(--joriken-black);
}

.portal-packages-page .portal-contact {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid #d8dce1;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, #f5f6f7);
}

.portal-packages-page .portal-contact-heading {
  margin: 0 0 .8rem;
  color: #555d67;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-align: center;
}

.portal-packages-page .portal-contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.portal-packages-page .portal-contact-link {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  padding: .85rem .55rem;
  border-radius: 10px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.portal-packages-page .portal-contact-label {
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .12em;
}

.portal-packages-page .portal-contact-link strong {
  font-size: clamp(.85rem, 3.5vw, 1rem);
}

.portal-packages-page .portal-call {
  color: #fff;
  background: var(--joriken-black);
  border-bottom: 3px solid var(--joriken-red);
}

.portal-packages-page .portal-whatsapp {
  color: #fff;
  background: var(--joriken-green);
  border-bottom: 3px solid #075c27;
}

.portal-packages-page .portal-contact-link:hover {
  filter: brightness(1.08);
}

@media(max-width: 380px) {
  .portal-packages-page .portal-contact-actions {
    grid-template-columns: 1fr;
  }
}

/* Joriken dynamic customer portal theme */
.portal-packages-page {
  --joriken-red: #d71920;
  --joriken-green: #12843b;
  --joriken-black: #17191d;
  --joriken-silver: #aeb5bf;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(215,25,32,.12), transparent 38%),
    radial-gradient(ellipse at 100% 12%, rgba(18,132,59,.12), transparent 36%),
    linear-gradient(145deg, #eef0f2 0%, #fff 48%, #e8ebee 100%);
  background-size: 150% 150%;
  animation: joriken-background 18s ease-in-out infinite alternate;
}

@keyframes joriken-background {
  from { background-position: 0% 0%; }
  to { background-position: 100% 100%; }
}

.portal-packages-page .portal-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(174,181,191,.75);
  box-shadow: 0 24px 70px rgba(23,25,29,.13);
}

.portal-packages-page .portal-shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg,
    var(--joriken-red) 0 34%,
    var(--joriken-black) 34% 67%,
    var(--joriken-green) 67% 100%);
}

.portal-packages-page .portal-brand-j {
  color: var(--joriken-black);
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  font-weight: 950;
  letter-spacing: .09em;
  line-height: 1.1;
  text-shadow: 0 1px 0 #fff, 0 2px 0 rgba(174,181,191,.55);
}

.portal-packages-page .portal-brand-j span {
  margin-top: .4rem;
  color: #626972;
  font-size: .68rem;
  letter-spacing: .29em;
  font-weight: 850;
}

.portal-packages-page .portal-rule {
  width: min(100%, 170px);
  height: 5px;
  border-radius: 5px;
  background: linear-gradient(90deg,
    var(--joriken-red) 0 38%,
    var(--joriken-black) 38% 65%,
    var(--joriken-green) 65%);
}

.portal-packages-page .portal-package-card {
  position: relative;
  border: 1px solid #d9dde2;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #f7f8f9);
  box-shadow: 0 8px 24px rgba(23,25,29,.065);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.portal-packages-page .portal-package-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1rem;
  right: 1rem;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--joriken-red), var(--joriken-black), var(--joriken-green));
  opacity: .85;
}

.portal-packages-page .portal-package-card:hover {
  transform: translateY(-4px);
  border-color: #aeb5bf;
  box-shadow: 0 16px 34px rgba(23,25,29,.13);
}

.portal-packages-page .portal-package-type {
  color: #525963;
}

.portal-packages-page .portal-package-price {
  color: var(--joriken-black);
}

.portal-packages-page .portal-package-select,
.portal-packages-page .portal-button {
  background: var(--joriken-black);
  border: 1px solid var(--joriken-black);
  border-radius: 9px;
  color: #fff;
  font-weight: 800;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.portal-packages-page .portal-package-select:hover,
.portal-packages-page .portal-button:hover {
  background: #30343a;
  box-shadow: 0 5px 14px rgba(23,25,29,.18);
  transform: translateY(-1px);
}

.portal-packages-page .portal-contact {
  margin-top: 1.3rem;
  padding: 1rem;
  border: 1px solid #d8dce1;
  border-radius: 15px;
  background: linear-gradient(135deg, #fff, #f2f4f5);
  box-shadow: 0 8px 22px rgba(23,25,29,.05);
}

.portal-packages-page .portal-contact-heading {
  margin: 0 0 .85rem;
  color: #565d66;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
}

.portal-packages-page .portal-contact-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.portal-packages-page .portal-contact-link {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: 1rem .5rem;
  border-radius: 11px;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: transform .18s ease, filter .18s ease;
}

.portal-packages-page .portal-contact-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.portal-packages-page .portal-contact-label {
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.portal-packages-page .portal-contact-link strong {
  font-size: clamp(.85rem, 3.6vw, 1rem);
}

.portal-packages-page .portal-call {
  color: #fff;
  background: var(--joriken-black);
  border-bottom: 3px solid var(--joriken-red);
}

.portal-packages-page .portal-whatsapp {
  color: #fff;
  background: var(--joriken-green);
  border-bottom: 3px solid #075c27;
}

@media (max-width: 420px) {
  .portal-packages-page .portal-contact-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-packages-page,
  .portal-packages-page .portal-package-card,
  .portal-packages-page .portal-contact-link {
    animation: none;
    transition: none;
  }
}