/* Hosting Rakyat portal — local shared-font CSS, scoped away from print invoices. */
:root{--portal-bg:#f5faff;--portal-surface:#fff;--portal-ink:#082f49;--portal-muted:#456579;--portal-blue:#075985;--portal-sky:#2e9bdc;--portal-soft:#e0f2fe;--portal-line:#cbdde8;--portal-green:#116149;--portal-amber:#85420b;--portal-red:#9f2545}
*{box-sizing:border-box}
html{color-scheme:light;scroll-padding-top:24px}
body.portal{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--portal-bg);color:var(--portal-ink);font:400 16px/1.6 'Instrument Sans',Arial,sans-serif;-webkit-text-size-adjust:100%}
.portal a{color:var(--portal-blue);text-decoration:none;text-underline-offset:3px}
.portal a:hover{text-decoration:underline}
.portal a:focus-visible,.portal button:focus-visible,.portal input:focus-visible,.portal select:focus-visible,.portal textarea:focus-visible,.portal summary:focus-visible,.portal .table-wrap:focus-visible{outline:3px solid var(--portal-blue);outline-offset:4px}
.portal button,.portal input,.portal select,.portal textarea{font:inherit;color:inherit}
.portal button,.portal a,.portal label{touch-action:manipulation}
.portal button{cursor:pointer}
.portal h1,.portal h2,.portal h3{font-family:'Bricolage Grotesque',Arial,sans-serif;letter-spacing:-.035em;line-height:1.15;font-weight:650;margin:0}
.portal h1{font-size:clamp(30px,3.4vw,44px);margin-bottom:30px;overflow-wrap:anywhere}
.portal h2{font-size:24px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.portal h3{font-size:20px;margin:26px 0 16px;display:flex;align-items:center;gap:9px}
.portal p{margin:0 0 18px}
.portal p:last-child{margin-bottom:0}
.portal svg.i{flex:0 0 auto;display:inline-block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.portal h2 .i,.portal h3 .i{color:var(--portal-blue);width:21px;height:21px}
.portal .muted{color:var(--portal-muted)}
.portal .mono,.portal code{font-family:'JetBrains Mono',Consolas,monospace;font-size:.86em;overflow-wrap:anywhere}
.portal code{background:var(--portal-soft);padding:2px 5px;border-radius:4px}
.portal ::selection{background:#bae6fd;color:var(--portal-ink)}
.portal-top{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:18px 24px 14px;background:var(--portal-surface);border-bottom:1px solid var(--portal-line)}
.portal-top .brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;color:var(--portal-ink);font:650 23px/1.15 'Bricolage Grotesque';letter-spacing:-.035em}
.portal-top .brand:hover{text-decoration:none}
.portal-top .brand img{display:block;width:36px;height:36px;object-fit:contain}
.portal-top nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%;padding-top:12px;border-top:1px solid var(--portal-line)}
.portal-top nav a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:9px 6px;border-radius:7px;font-size:12px;font-weight:600;color:var(--portal-ink);white-space:nowrap}
.portal-top nav a:hover{background:var(--portal-soft);color:var(--portal-blue);text-decoration:none}
.portal-top nav .i{width:16px;height:16px;color:var(--portal-blue)}
.portal-main{flex:1;width:100%;max-width:1240px;margin-inline:auto;padding:30px 24px 56px;min-width:0}
.portal-foot{width:100%;max-width:1240px;margin:0 auto;padding:23px 24px;border-top:1px solid var(--portal-line);font-size:12px;line-height:2;color:var(--portal-muted);overflow-wrap:anywhere}
.portal-foot a{display:inline-block;margin-inline:4px}
.portal-foot .i{width:16px;height:16px}
.portal .card,.portal .auth-card,.portal .table-wrap{background:var(--portal-surface);border:1px solid var(--portal-line);border-radius:14px}
.portal .card{padding:24px;margin-bottom:24px;min-width:0;box-shadow:0 3px 14px #082f4904}
.portal .card.attention{border-left:4px solid var(--portal-sky);background:#f0f9ff}
.portal .card-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-bottom:24px;min-width:0}
.portal .card-head h1,.portal .card-head h2{margin-bottom:0;flex:1;min-width:200px}
.portal .card-head>div{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.portal .card .card-head{margin-bottom:20px}
.portal .card .card-head h2{min-width:170px}
.portal .auth-card{width:100%;max-width:490px;margin:clamp(12px,6vh,70px) auto;padding:28px;box-shadow:0 18px 45px #082f4909;border-top:4px solid var(--portal-sky)}
.portal .auth-card.wide{max-width:780px}
.portal .auth-card h1{font-size:clamp(30px,3vw,38px);margin-bottom:18px;letter-spacing:-.04em}
.portal .auth-card>.muted{font-size:15px;margin-bottom:28px;max-width:48ch}
.portal .auth-card .links{border-top:1px solid var(--portal-line);padding-top:20px;margin-top:25px;font-size:13px;line-height:2}
.portal .auth-card .links a{font-weight:600;margin-inline:3px}
.portal .stack{display:flex;flex-direction:column;gap:20px;max-width:780px;margin-top:22px}
.portal .grid-2{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;min-width:0}
.portal .grid-2>*{min-width:0}
.portal .span-2{grid-column:1/-1}
.portal label{display:block;font-size:14px;font-weight:600;line-height:1.5;min-width:0}
.portal input:not([type=hidden]):not([type=radio]):not([type=checkbox]),.portal select,.portal textarea{display:block;width:100%;min-width:0;min-height:46px;margin-top:8px;padding:11px 13px;border:1px solid #718fa3;border-radius:7px;background:var(--portal-surface);color:var(--portal-ink);font-size:15px;line-height:1.5;transition:border-color .15s,box-shadow .15s}
.portal input::placeholder,.portal textarea::placeholder{color:#526f83;opacity:1}
.portal input:not([type=hidden]):hover,.portal select:hover,.portal textarea:hover{border-color:var(--portal-blue)}
.portal input:disabled{background:#eef3f7;color:var(--portal-muted);cursor:not-allowed}
.portal textarea{min-height:110px;resize:vertical}
.portal input[type=radio],.portal input[type=checkbox]{accent-color:var(--portal-blue);width:18px;height:18px;margin:2px 0;flex:0 0 auto;cursor:pointer;vertical-align:middle}
.portal input[type=file]{padding:7px;font-size:13px;max-width:100%}
.portal input::file-selector-button{font:600 13px 'Instrument Sans';color:var(--portal-blue);background:var(--portal-soft);border:1px solid var(--portal-line);border-radius:5px;padding:8px 10px;margin-right:10px;cursor:pointer}
.portal .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;max-width:100%;border:1px solid #718fa3;border-radius:7px;background:var(--portal-surface);color:var(--portal-blue);padding:11px 16px;font:600 14px/1.4 'Instrument Sans';text-align:center;text-decoration:none;transition:background .15s,border-color .15s,box-shadow .15s}
.portal .btn:hover{background:var(--portal-soft);border-color:var(--portal-blue);text-decoration:none;box-shadow:0 3px 9px #082f4910}
.portal .btn-primary{background:var(--portal-blue);border-color:var(--portal-blue);color:white}
.portal .btn-primary:hover{background:var(--portal-ink);border-color:var(--portal-ink);color:white}
.portal .btn-danger{background:#fff0f4;border-color:#dba8b8;color:var(--portal-red)}
.portal .btn-danger:hover{background:var(--portal-red);border-color:var(--portal-red);color:white}
.portal .btn:disabled{opacity:.6;cursor:not-allowed}
.portal .auth-card .stack>.btn{width:100%;margin-top:5px}
.portal .stack>.btn{align-self:flex-start}
.portal .flash{border:1px solid #a2bfd2;background:var(--portal-soft);border-radius:9px;padding:15px 18px;margin-bottom:25px;line-height:1.6}
.portal .flash-ok{background:#e7f5ee;border-color:#8bbca7;color:var(--portal-green)}
.portal .flash-error,.portal .error{background:#fff0f4;border:1px solid #dba8b8;color:var(--portal-red);border-radius:8px;padding:13px 16px}
.portal .error{margin-bottom:24px;font-size:14px}
.portal .rows{list-style:none;padding:0;margin:8px 0 0}
.portal .rows>li{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;padding:17px 0;border-bottom:1px solid var(--portal-line);font-size:14px;min-width:0}
.portal .rows>li:first-child{padding-top:10px}
.portal .rows>li:last-child{border-bottom:0;padding-bottom:0}
.portal .rows>li>a:first-child,.portal .rows>li>strong:first-child{font-weight:600}
.portal .rows>li>a,.portal .rows>li>span,.portal .rows>li>strong{overflow-wrap:anywhere;max-width:100%}
.portal .rows .muted{font-size:12px}
.portal .table-wrap{width:100%;min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#8ab1c9 #edf7ff;margin-bottom:24px}
.portal .card .table-wrap{border-radius:9px;margin:24px 0 0}
.portal table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px;line-height:1.6}
.portal th,.portal td{padding:14px 17px;border-bottom:1px solid var(--portal-line);vertical-align:top;text-align:left}
.portal th{font-size:12px;font-weight:600;color:var(--portal-muted);background:#edf7ff;white-space:nowrap}
.portal tr:last-child td{border-bottom:0}
.portal tbody tr:hover{background:#f5faff}
.portal tfoot th{color:var(--portal-ink);font-size:14px}
.portal tfoot tr:last-child th,.portal tfoot tr:last-child td{border-bottom:0}
.portal .table-wrap a{font-weight:600}
.portal .right{text-align:right}
.portal td.right,.portal th.right{white-space:nowrap;font-variant-numeric:tabular-nums}
.portal .invoice-sheet .grid-2{gap:25px}
.portal .invoice-sheet .grid-2 p{margin-bottom:6px}
.portal .invoice-sheet .grid-2 p:first-child{font-size:13px}
.portal .invoice-sheet table td:first-child{min-width:330px;white-space:pre-line}
.portal .badge{display:inline-flex;align-items:center;gap:6px;max-width:100%;border:1px solid var(--portal-line);border-radius:30px;padding:4px 10px;font-size:11px;line-height:1.6;font-weight:600;color:var(--portal-muted);background:#eef3f7;white-space:nowrap}
.portal .badge:before{content:'';width:5px;height:5px;border:1px solid currentColor;border-radius:50%;flex:0 0 auto}
.portal .badge-paid,.portal .badge-active,.portal .badge-accepted,.portal .badge-completed{background:#e7f5ee;border-color:#aed7c4;color:var(--portal-green)}
.portal .badge-unpaid,.portal .badge-pending,.portal .badge-overdue{background:#fff4dd;border-color:#e8cfa4;color:var(--portal-amber)}
.portal .badge-suspended,.portal .badge-rejected,.portal .badge-fraud{background:#fff0f4;border-color:#dfb0bf;color:var(--portal-red)}
.portal .badge-terminated,.portal .badge-cancelled,.portal .badge-inactive,.portal .badge-closed{background:#edf1f5;border-color:#c5d1da;color:#405a6d}
.portal .badge-refunded,.portal .badge-draft,.portal .badge-open{background:var(--portal-soft);border-color:#b0d4e9;color:var(--portal-blue)}
.portal .banks{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:12px}
.portal .banks li{background:var(--portal-soft);border:1px solid #b0d4e9;border-radius:9px;padding:17px 20px;line-height:1.8;overflow-wrap:anywhere}
.portal .banks strong{font-family:'Bricolage Grotesque';font-size:19px;display:block;margin-bottom:5px}
.portal .banks .mono{font-size:16px;font-weight:500;margin-right:10px}
.portal fieldset{min-width:0;margin:0 0 24px;padding:22px 24px 26px;border:1px solid var(--portal-line);border-radius:12px;background:var(--portal-surface)}
.portal legend{padding:0 8px;font:600 20px/1.4 'Bricolage Grotesque';letter-spacing:-.025em;color:var(--portal-ink)}
.portal .plans{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;padding:18px 0 0;border:0;background:transparent;margin-bottom:32px}
.portal .plans legend{padding:0;margin-bottom:4px}
.portal .plan{position:relative;border:1px solid var(--portal-line);border-radius:12px;padding:24px;background:var(--portal-surface);display:flex;flex-direction:column;gap:16px;cursor:pointer;min-width:0;box-shadow:0 4px 14px #082f4905}
.portal .plan:has(>input:checked){background:#edf8ff;border:2px solid var(--portal-blue);padding:23px;box-shadow:0 8px 20px #0759850b}
.portal .plan:focus-within{outline:3px solid var(--portal-blue);outline-offset:4px}
.portal .plan>input[type=radio]{position:absolute;top:25px;right:24px;margin:0}
.portal .plan-name{font:650 24px/1.2 'Bricolage Grotesque';letter-spacing:-.025em;max-width:100%;padding-right:28px}
.portal .plan-price{color:var(--portal-blue);font-size:14px;line-height:1.8;font-weight:600;font-variant-numeric:tabular-nums}
.portal .plan-custom{cursor:default}
.portal .plan-custom .btn{align-self:flex-start}
.portal .features{padding:18px 0 0;margin:0;border-top:1px solid var(--portal-line);list-style:none;display:grid;gap:11px;font-size:13px;font-weight:400}
.portal .features li{display:flex;align-items:flex-start;gap:9px;line-height:1.6}
.portal .features .i{width:16px;height:16px;margin-top:3px;color:var(--portal-blue)}
.portal .inline{display:flex;align-items:flex-start;gap:10px;margin:13px 0;font-weight:400;font-size:14px;line-height:1.6}
.portal .inline input{margin-top:3px;flex:0 0 auto}
.portal fieldset>label:not(.inline){margin-top:20px}
.portal .row-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px;padding-top:22px;border-top:1px solid var(--portal-line);align-items:flex-start}
.portal .row-actions form{max-width:100%;min-width:0}
.portal .inline-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-width:0;max-width:100%}
.portal .inline-form input:not([type=hidden]){width:200px;max-width:100%;margin-top:0;flex:1 1 150px}
.portal .filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px;padding:16px;background:var(--portal-surface);border:1px solid var(--portal-line);border-radius:11px}
.portal .filters input:not([type=hidden]),.portal .filters select{margin-top:0;width:auto;flex:1 1 200px;max-width:100%}
.portal .filters select{flex:0 1 180px}
.portal .facts{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:0;font-size:14px}
.portal .facts dt{color:var(--portal-muted);font-size:12px;margin-top:18px}
.portal .facts dt:first-child{margin-top:0}
.portal .facts dd{margin:0;overflow-wrap:anywhere}
.portal .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 26px}
.portal .stat{padding:20px;background:var(--portal-surface);border:1px solid var(--portal-line);border-radius:12px;min-width:0}
.portal .stat>span{font-size:12px;color:var(--portal-muted);display:flex;align-items:center;gap:8px;line-height:1.4}
.portal .stat .i{width:17px;height:17px;color:var(--portal-blue)}
.portal .stat strong{display:block;font:600 34px/1.2 'Bricolage Grotesque';letter-spacing:-.035em;margin-top:16px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.portal .stat:nth-child(n+3){grid-column:1/-1}
.portal.admin{font-size:14px}
.admin .portal-main{max-width:1360px;padding-top:28px}
.admin h1{font-size:34px;margin-bottom:24px}
.admin h2{font-size:22px;margin-bottom:15px}
.admin .card{padding:22px;margin-bottom:20px}
.admin .rows>li{padding-block:13px;font-size:13px}
.admin .rows>li:last-child{padding-bottom:0}
.admin th,.admin td{padding:12px 14px;font-size:13px}
.admin th{font-size:11px}
.admin .btn{font-size:13px;min-height:42px;padding:10px 14px}
.admin .filters{padding:13px}
@media(min-width:700px){
  .portal-main{padding-top:40px;padding-bottom:70px}
  .portal-top{padding:20px max(24px,calc(50vw - 596px));flex-direction:row;align-items:center;justify-content:space-between;gap:35px;min-height:88px}
  .portal-top nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;width:auto;border:0;padding:0}
  .portal-top nav a{padding:9px 10px;font-size:13px}
  .portal .grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .portal .card{padding:30px;margin-bottom:28px}
  .portal .auth-card{padding:38px}
  .portal .plans{grid-template-columns:repeat(3,minmax(0,1fr))}
  .portal .facts{grid-template-columns:180px minmax(0,1fr);gap:17px 24px}
  .portal .facts dt{margin-top:0;font-size:13px}
  .portal .rows>li>a:first-child,.portal .rows>li>strong:first-child{margin-right:auto}
  .portal .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .portal .stat:nth-child(n+3){grid-column:auto}
  .portal .stat strong{font-size:clamp(26px,2.6vw,37px)}
  .admin .portal-top{padding-inline:max(24px,calc(50vw - 656px))}
  .admin .card{padding:24px;margin-bottom:22px}
  .admin .portal-top nav a{font-size:12px;padding:8px 11px}
}
@media(max-width:699px){
  .portal .card-head h1,.portal .card-head h2{flex-basis:100%}
  .portal .auth-card{margin-block:14px;padding:25px}
  .portal .invoice-sheet .right{text-align:left}
  .portal .card{padding:21px}
  .portal .card .table-wrap{margin-top:21px}
  .portal .rows>li .muted{flex-basis:100%}
  .portal .row-actions>form{width:100%}
  .portal .inline-form .btn{flex-shrink:0}
  .portal .banks li{padding:16px}
  .portal .filters .btn{flex:1 1 auto}
  .portal .plan-price{font-size:13px}
  .admin .card{padding:20px}
  .admin .stat{padding:17px}
  .admin .stat strong{font-size:31px}
}
@media(max-width:380px){
  .portal-main{padding-inline:20px}
  .portal-top{padding-inline:20px}
  .portal-top nav a{font-size:11px;gap:5px;padding-inline:3px}
  .portal .auth-card{padding:22px}
  .portal .btn{font-size:13px;padding:11px 13px}
  .portal fieldset{padding:18px}
  .portal .plan{padding:22px}
  .portal .plan:has(>input:checked){padding:21px}
}
@media(prefers-reduced-motion:reduce){.portal *,.portal *:before,.portal *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}