/* BETA Studio visual layer. Screen only; no business logic or document styles. */
@media screen {
 .app-shell {--garis:#e3eaf0;--latar:#f4f7fa;--radius:16px;background:var(--latar);}
 .app-shell>aside {background:#102b3b;color:#f5f9fc;border:0;padding:24px 14px 16px;box-shadow:4px 0 24px #102b3b0a;}
 .app-shell>aside .sidebar-brand {padding:0 10px 24px;flex-shrink:0;}
 .app-shell>aside .sidebar-logo {background:#fff;padding:3px;width:44px;height:44px;}
 .app-shell>aside .sidebar-brand strong {font-size:15px;letter-spacing:1.6px;}
 .app-shell>aside .sidebar-brand small {color:#a9c1cf;margin-top:3px;}
 .app-shell>aside .nav-label {color:#91afbf;letter-spacing:1.8px;margin-bottom:2px;flex-shrink:0;}
 .app-shell>aside>nav {overflow-y:auto;min-height:0;align-content:start;gap:5px;padding:2px 2px 16px;scrollbar-width:thin;scrollbar-color:#466374 transparent;}
 .app-shell>aside>nav :is(button,a.sidebar-hr) {background:transparent;color:#cbdce6;min-height:44px;border:1px solid transparent;border-radius:10px;padding:10px 11px;text-align:left;font-size:12px;line-height:1.45;box-shadow:none;flex-shrink:0;}
 .app-shell>aside>nav :is(button,a.sidebar-hr):hover {background:#ffffff0e;color:#fff;border-color:#ffffff0c;}
 .app-shell>aside>nav button.active {background:#087fb1;color:#fff;border-color:#2596c5;box-shadow:0 4px 12px #00000010;}
 .app-shell>aside>nav svg {flex-shrink:0;opacity:.9;}
 .app-shell>aside>nav .badge {margin-left:auto;padding:2px 7px;min-width:23px;background:#28485b;color:#e7f5fc;border:1px solid #476678;font-size:10px;border-radius:6px;}
 .app-shell>aside>nav .active .badge {background:#ffffff20;border-color:#ffffff40;color:#fff;}
 .app-shell>aside .sidebar-bottom {flex-shrink:0;border-top:1px solid #ffffff1a;margin-top:auto;padding:15px 5px 0;}
 .app-shell>aside .sidebar-bottom>div {min-width:0;}
 .app-shell>aside .sidebar-bottom strong {font-size:11px;line-height:1.5;display:block;overflow-wrap:anywhere;}
 .app-shell>aside .sidebar-bottom small {color:#a9c1cf;line-height:1.5;}
 .app-shell>aside .avatar {background:#284d63;color:#e4f6ff;flex-shrink:0;}
 .app-shell>aside .sidebar-bottom .icon {color:#cbdce6;min-width:34px;padding:8px;}
 .app-shell>aside .sidebar-bottom .icon:hover {background:#ffffff10;}
 .app-shell .workspace>header {height:68px;background:#ffffffed;border-color:#e5ebf0;backdrop-filter:blur(12px);font-size:12px;}
 .app-shell .content {gap:24px;padding:30px 32px 44px;}
 .app-shell .page-header {padding:4px 0 2px;}
 .app-shell .page-header h1 {font-size:27px;letter-spacing:-.8px;line-height:1.3;color:#183747;}
 .app-shell .eyebrow {font-size:10px;letter-spacing:1.7px;color:#327c9d;margin-bottom:8px;}
 .app-shell .page-header .muted {line-height:1.7;}
 .app-shell .card {border-color:#e3eaf0;border-radius:16px;box-shadow:0 3px 12px #14374c04;}
 .app-shell .card-header {padding:20px 24px;border-color:#edf1f5;gap:16px;}
 .app-shell .card-header h2 {color:#183747;font-size:16px;letter-spacing:-.25px;}
 .app-shell .card .card {box-shadow:none;border-color:#e7edf2;}
 .app-shell :is(.stat,.panel-note) {border-radius:16px;}
 .app-shell .stat {padding:24px;gap:10px;}
 .app-shell .stat strong {font-variant-numeric:tabular-nums;font-size:30px;letter-spacing:-1px;color:#183747;}
 .app-shell .dashboard-project {padding:22px;gap:14px;transition:border-color .16s,box-shadow .16s;}
 .app-shell .dashboard-project:hover {border-color:#91c7dd;background:#fcfeff;box-shadow:0 5px 16px #15384e08;}
 .app-shell .dashboard-project-head>strong {font-size:15px;line-height:1.55;}
 .app-shell .dashboard-progress>strong {font-size:25px;font-variant-numeric:tabular-nums;}
 .app-shell .dashboard-project progress {height:7px;background:#e8eff4;}
 .app-shell :is(.office-view-tabs,.project-tabs) {border-color:#e3eaf0;border-radius:12px;gap:6px;}
 .app-shell .office-view-tabs button {border-radius:8px;font-size:12px;}
 .app-shell .office-view-tabs button.active {background:#e7f4fb;color:#075985;}
 .app-shell :is(button,input,select,textarea) {transition:background-color .15s,border-color .15s,box-shadow .15s;}
 .app-shell button {border-radius:9px;}
 .app-shell button.primary {background:#087fb1;border-color:#087fb1;color:#fff;box-shadow:0 2px 5px #087fb118;}
 .app-shell button.primary:hover:not(:disabled) {background:#086c96;border-color:#086c96;}
 .app-shell button:disabled {cursor:not-allowed;}
 .app-shell :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]) {border-color:#d8e2e9;border-radius:9px;background:#fff;box-shadow:0 1px 2px #15384e03;}
 .app-shell :is(input,select,textarea):not([type=checkbox]):not([type=radio]):focus {border-color:#3699c0;outline:2px solid #d9eff9;outline-offset:1px;box-shadow:none;}
 .app-shell :is(input,select,textarea):disabled {background:#f3f6f9;color:#64748b;}
 .app-shell input::placeholder,.app-shell textarea::placeholder {color:#8293a2;font-weight:400;}
 .app-shell label {color:#304b5d;line-height:1.55;}
 .app-shell input:is([type=checkbox],[type=radio]) {accent-color:#087fb1;}
 .app-shell :focus-visible {outline:3px solid #42a9d585;outline-offset:3px;}
 .app-shell .form-grid {gap:18px;}
 .app-shell .form-grid>*,.app-shell .page-header>* {min-width:0;}
 .app-shell .modal-backdrop {background:#102b3b80;backdrop-filter:blur(3px);}
 .app-shell .modal {border-radius:18px;border:1px solid #e3eaf0;box-shadow:0 24px 80px #102b3b30;}
 .app-shell .modal-body {padding:24px;gap:20px;}
 .app-shell .modal-footer {background:#f9fbfc;border-color:#e7edf2;gap:10px;padding:18px 24px;}
 .app-shell .table-wrap {border-radius:10px;scrollbar-width:thin;scrollbar-color:#b9cbd7 #f3f7fa;}
 .app-shell table {font-variant-numeric:tabular-nums;}
 .app-shell table:not(.gantt) :is(th,td) {border-bottom-color:#edf1f5;}
 .app-shell table:not(.gantt) th {background:#f5f8fb;color:#506575;font-size:10px;font-weight:700;letter-spacing:.035em;padding-top:14px;padding-bottom:14px;}
 .app-shell table:not(.gantt) tbody tr:hover>td {background-color:#f8fbfd;}
 .app-shell table:not(.gantt) td {line-height:1.65;vertical-align:middle;}
 .app-shell td button {font-size:11px;}
 .app-shell .badge {border-radius:6px;line-height:1.4;}
 .app-shell .badge.green {background:#eaf7f0;color:#176346;}
 .app-shell .finance-status {border-radius:6px;font-variant-numeric:tabular-nums;}
 .app-shell .alert {border-radius:10px;line-height:1.65;}
 .app-shell .empty {padding:44px 24px;}
 .app-shell .hr-alerts li {background:#f4f8fb;}
 @media(max-width:1000px) {
  .app-shell>aside {width:264px;max-width:calc(100vw - 44px);box-shadow:16px 0 48px #102b3b25;}
  .app-shell .content {padding:24px 22px 36px;}
 }
 @media(max-width:650px) {
  .app-shell .content {padding:22px 16px 32px;gap:18px;}
  .app-shell .page-header h1 {font-size:23px;}
  .app-shell .card-header {padding:18px;gap:12px;}
  .app-shell .modal-body {padding:18px;gap:16px;}
  .app-shell .modal-footer {padding:16px 18px;}
  .app-shell .modal-backdrop {padding:10px;}
  .app-shell .form-grid {gap:16px;}
  .app-shell .dashboard-projects {padding:16px;gap:12px;}
  .app-shell .dashboard-project {padding:18px;}
  .app-shell .stat {padding:20px;}
  .app-shell .workspace>header {padding:0 16px;height:60px;}
 }
 @media(prefers-reduced-motion:reduce) {
  .app-shell :is(button,input,select,textarea,.dashboard-project) {transition:none;}
 }
}

@media screen {
/* Meja Tagih Claude visual reference. Isolated to this workspace only;
   no global theme, document/PDF, finance rules or source values are changed. */
.app-shell .collection.meja-tagih-theme[class] {
 --mt-bg:#f4f7fa;--mt-surface:#ffffff;--mt-soft:#f1f5f9;--mt-line:#dce5ed;
 --mt-ink:#183747;--mt-muted:#5f7383;--mt-accent:#087fb1;
 --utama:#087fb1;--utama-gelap:#087fb1;--utama-terang:#e5f2fa;
 --garis:#dce5ed;--muted:#5f7383;--teks:#183747;
 color-scheme:light;background:var(--mt-bg);color:var(--mt-ink);
 border:1px solid var(--mt-line);border-radius:16px;gap:0;min-width:0;
 font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:13px;
}
.app-shell .collection.meja-tagih-theme .collection-tabs {background:var(--mt-surface);border:0;border-radius:16px 16px 0 0;padding:16px!important;gap:5px;align-content:start}
.app-shell .collection.meja-tagih-theme .collection-content {padding:26px;gap:20px;min-width:0;container-type:inline-size}
.app-shell .collection.meja-tagih-theme .mt-brand {display:flex;gap:10px;align-items:center;width:100%;padding:6px 0 22px;margin-bottom:12px;border-bottom:1px solid var(--mt-line);font:bold 20px "Plus Jakarta Sans",system-ui,sans-serif}
.app-shell .collection.meja-tagih-theme .mt-monogram {display:grid;place-items:center;width:34px;height:38px;border-radius:9px;flex:none;background:var(--mt-accent);color:#ffffff}
.app-shell .collection.meja-tagih-theme .mt-brand em {color:#087fb1}
.app-shell .collection.meja-tagih-theme .mt-brand small {display:block;font:11px Arial,sans-serif;color:var(--mt-muted);margin-top:8px}
.app-shell .collection.meja-tagih-theme .collection-tabs button {display:flex;align-items:center;gap:12px;text-align:left;font-size:12px;font-weight:600;padding:12px 10px;border:1px solid transparent;background:transparent;color:var(--mt-muted);border-radius:8px;line-height:1.4}
.app-shell .collection.meja-tagih-theme .collection-tabs button>span {width:15px;flex:none;text-align:center;font-size:15px}
.app-shell .collection.meja-tagih-theme .collection-tabs button.active {background:#e5f2fa;color:#075985;border-color:#b9ddeb}
.app-shell .collection.meja-tagih-theme .mt-nav-note {font-size:11px;line-height:1.7;color:var(--mt-muted);border-top:1px solid var(--mt-line);margin-top:24px;padding-top:18px}
.app-shell .collection.meja-tagih-theme .mt-nav-note i {display:inline-block;width:6px;height:6px;background:#176346;border-radius:50%;margin-right:6px}
.app-shell .collection.meja-tagih-theme :is(h2,h3,h4,strong,b,label) {color:var(--mt-ink)}
.app-shell .collection.meja-tagih-theme :is(.collection-title,.ar-heading,.ci-heading,.spk-title) h2 {font:600 28px/1.25 "Plus Jakarta Sans",system-ui,sans-serif;letter-spacing:-.6px;margin:0 0 9px;padding-left:14px;border-left:4px solid var(--mt-accent)}
.app-shell .collection.meja-tagih-theme :is(p,small,.muted,.collection-note,.ar-footnote,.ar-values span,.project-finance-head p,.collection-title p,.ar-heading p) {color:var(--mt-muted);line-height:1.6}
.app-shell .collection.meja-tagih-theme .ar-eyebrow {color:#087fb1;font-size:10px;display:block;margin-bottom:10px}
.app-shell .collection.meja-tagih-theme .card {background:var(--mt-surface);border:1px solid #e3eaf0;border-radius:14px;box-shadow:0 1px 2px #14374c08;color:var(--mt-ink)}
.app-shell .collection.meja-tagih-theme :is(.card-header,.project-finance-head,.recap-footer,.message-context,.ci-amounts,.spk-term,.ci-payment) {background:var(--mt-surface);color:var(--mt-ink);border-color:var(--mt-line)}
.app-shell .collection.meja-tagih-theme .project-finance-head {border-left:0}
.app-shell .collection.meja-tagih-theme :is(button,.button-link) {background:var(--mt-surface);color:var(--mt-ink);border:1px solid var(--mt-line);border-radius:7px;box-shadow:none;font-size:12px;min-height:34px;padding:8px 12px}
.app-shell .collection.meja-tagih-theme :is(button,.button-link):hover:not(:disabled) {background:#edf6fb;border-color:#7cbad4}
.app-shell .collection.meja-tagih-theme button.primary {background:var(--mt-accent);color:#ffffff;border-color:var(--mt-accent);font-weight:700}
.app-shell .collection.meja-tagih-theme button.primary:hover:not(:disabled) {background:#087fb1}
.app-shell .collection.meja-tagih-theme button:disabled {opacity:.5;cursor:not-allowed}
.app-shell .collection.meja-tagih-theme :is(button,a,input,select,textarea,summary):focus-visible {outline:2px solid #087fb1;outline-offset:3px}
.app-shell .collection.meja-tagih-theme a:not(.button-link) {color:#075985}
.app-shell .collection.meja-tagih-theme :is(input,select,textarea) {background:var(--mt-bg);color:var(--mt-ink);border:1px solid var(--mt-line);border-radius:7px;accent-color:var(--mt-accent)}
.app-shell .collection.meja-tagih-theme :is(input,textarea)::placeholder {color:#7e909d;opacity:1}
.app-shell .collection.meja-tagih-theme :is(.collection-stats .stat,.ar-stats article) {position:relative;background:linear-gradient(160deg,#edf7fc,var(--mt-surface) 85%);border:1px solid #e3eaf0;border-left:4px solid #1684b0;border-top-width:1px;padding:18px;border-radius:14px;color:var(--mt-ink)}
.app-shell .collection.meja-tagih-theme :is(.collection-stats .stat strong,.ar-stats strong) {color:var(--mt-ink);font-size:23px;font-variant-numeric:tabular-nums;letter-spacing:-.6px}
.app-shell .collection.meja-tagih-theme :is(.collection-stats .stat span,.collection-stats .stat small,.ar-stats small,.ar-stats span) {color:var(--mt-muted);font-size:11px;line-height:1.5}
.app-shell .collection.meja-tagih-theme :is(.collection-stats .ready,.ar-stats article:nth-child(3)) {background:linear-gradient(160deg,#fff8e8,var(--mt-surface) 85%);border-left-color:#ab7518}
.app-shell .collection.meja-tagih-theme :is(.collection-stats .late,.ar-stats article:nth-child(4)) {background:linear-gradient(160deg,#fff1ed,var(--mt-surface) 85%);border-left-color:#bc4434}
.app-shell .collection.meja-tagih-theme :is(.collection-stats .paid,.ar-stats article:nth-child(2)) {background:linear-gradient(160deg,#eef9f3,var(--mt-surface) 85%);border-left-color:#15815c}
.app-shell .collection.meja-tagih-theme .ar-continuity {margin:0}
.app-shell .collection.meja-tagih-theme .ar-continuity>.alert {margin:18px 0}
.app-shell .collection.meja-tagih-theme .ar-continuity>.actions {display:flex;gap:12px;align-items:center;font-size:12px}
.app-shell .collection.meja-tagih-theme .ar-heading {align-items:center}
.app-shell .collection.meja-tagih-theme .ar-account {padding:20px;margin-top:16px}
.app-shell .collection.meja-tagih-theme .ar-account h3 {font-size:15px}
.app-shell .collection.meja-tagih-theme .ar-values {border-top:1px solid #e3eaf0;margin-top:18px;padding:16px 0;gap:28px}
.app-shell .collection.meja-tagih-theme .ar-values b {color:var(--mt-ink);font-size:17px;font-variant-numeric:tabular-nums}
.app-shell .collection.meja-tagih-theme .ar-values span:nth-child(2) b {color:#176346}
.app-shell .collection.meja-tagih-theme .ar-values span:nth-child(3) b {color:#895d13}
.app-shell .collection.meja-tagih-theme :is(.ar-note,.message-context) {background:#edf7fc;border:1px solid #c7e0ec;color:#225b75}
.app-shell .collection.meja-tagih-theme .ar-warning {color:#895d13}
.app-shell .collection.meja-tagih-theme .ar-account details {border-color:var(--mt-line)}
.app-shell .collection.meja-tagih-theme :is(.ar-status,.finance-status) {border-radius:20px;font-size:11px;line-height:1.4;padding:4px 9px}
.app-shell .collection.meja-tagih-theme :is(.ar-status.paid,.finance-status--success) {background:#eef9f3;color:#176346;border-color:#b3ddc5}
.app-shell .collection.meja-tagih-theme :is(.ar-status.open,.finance-status--partial,.finance-status--unpaid) {background:#fff8e8;color:#895d13;border-color:#ecd9a7}
.app-shell .collection.meja-tagih-theme :is(.ar-status.written,.finance-status--danger) {background:#fff1ed;color:#ab382d;border-color:#f0c1b8}
.app-shell .collection.meja-tagih-theme :is(.finance-status--neutral,.finance-status--cancelled) {background:#f1f5f9;color:#5f7383;border-color:#cbd5e1}
.app-shell .collection.meja-tagih-theme .finance-status--ready {background:#edf7fc;color:#075985;border-color:#b5d8e8}
.app-shell .collection.meja-tagih-theme .finance-status--final {background:#f4effc;color:#654594;border-color:#d5c8ec}
.app-shell .collection.meja-tagih-theme .entity-tag {background:#e9f4fb;color:#075985!important}
.app-shell .collection.meja-tagih-theme .status-chips .active {background:#e5f2fa;color:#075985;border-color:#7cbad4}
.app-shell .collection.meja-tagih-theme .table-wrap {border:1px solid #e3eaf0;border-radius:10px;max-width:100%}
.app-shell .collection.meja-tagih-theme table {color:var(--mt-ink)}
.app-shell .collection.meja-tagih-theme table :is(th,td) {border-bottom-color:#e3eaf0;padding:13px 14px;line-height:1.5}
.app-shell .collection.meja-tagih-theme table th {background:#f1f5f9;color:#5f7383;font-size:10px;text-transform:uppercase;letter-spacing:.6px}
.app-shell .collection.meja-tagih-theme[class][class] table thead th {background:#f1f5f9;color:#5f7383}
.app-shell .collection.meja-tagih-theme[class][class] table thead .bill-head {background:#edf7fc;color:#075985}
.app-shell .collection.meja-tagih-theme[class][class] table thead .pay-head {background:#eef9f3;color:#176346}
.app-shell .collection.meja-tagih-theme table td {background:var(--mt-surface);font-size:12px}
.app-shell .collection.meja-tagih-theme table tbody tr:hover td {background:#f1f5f9}
.app-shell .collection.meja-tagih-theme table :is(tfoot th,.bill-head) {background:#edf7fc;color:#075985}
.app-shell .collection.meja-tagih-theme table .pay-head {background:#eef9f3;color:#176346}
.app-shell .collection.meja-tagih-theme .recap .sticky-client {background:var(--mt-surface)}
.app-shell .collection.meja-tagih-theme .recap thead .sticky-client {background:#f1f5f9}
.app-shell .collection.meja-tagih-theme :is(.paid-text,.ci-amounts .paid) {color:#176346}
.app-shell .collection.meja-tagih-theme .unpaid-text {color:#895d13}
.app-shell .collection.meja-tagih-theme .amount-late {color:#ab382d}
.app-shell .collection.meja-tagih-theme :is(.mini-track,.contract-bar) {background:#e7eef3;border-radius:4px}
.app-shell .collection.meja-tagih-theme .mini-track {height:12px}
.app-shell .collection.meja-tagih-theme .mini-track .ready {background:#ab7518}
.app-shell .collection.meja-tagih-theme .mini-track .unpaid {background:#1684b0}
.app-shell .collection.meja-tagih-theme .mini-track .late {background:#bc4434}
.app-shell .collection.meja-tagih-theme .contract-bar .paid {background:#15815c}
.app-shell .collection.meja-tagih-theme .contract-bar .unpaid {background:#ab7518}
.app-shell .collection.meja-tagih-theme .contract-bar .unbilled {background:#7e8c93}
.app-shell .collection.meja-tagih-theme .alert {background:#fff8e8;color:#895d13;border:1px solid #ecd9a7;border-radius:9px;padding:12px 15px;font-size:12px}
.app-shell .collection.meja-tagih-theme .alert.success {background:#eef9f3;color:#176346;border-color:#b3ddc5}
.app-shell .collection.meja-tagih-theme .alert.error {background:#fff1ed;color:#ab382d;border-color:#f0c1b8}
.app-shell .collection.meja-tagih-theme :is(.ar-modal,.ci-overlay) {background:#102b3b80;backdrop-filter:blur(3px)}
/* The actual document stays a white sheet of paper, never darkened. */
.app-shell .collection.meja-tagih-theme .ci-draft {background:#fff;color:#222;color-scheme:light}
.app-shell .collection.meja-tagih-theme .ci-draft :is(h2,h3,p,small,strong,span) {color:#222}
@media(min-width:1200px) {
 .app-shell .collection.meja-tagih-theme[class] {grid-template-columns:215px minmax(0,1fr);align-items:start}
 .app-shell .collection.meja-tagih-theme .collection-tabs {display:grid!important;position:sticky;top:86px;border-right:1px solid #e3eaf0;border-radius:16px 0 0 16px}
}
@container(max-width:950px) {
 .app-shell .collection.meja-tagih-theme :is(.ar-stats,.collection-stats) {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1199px) {
 .app-shell .collection.meja-tagih-theme .mt-brand {padding-bottom:14px;margin-bottom:4px}
 .app-shell .collection.meja-tagih-theme .mt-nav-note {display:none}
 .app-shell .collection.meja-tagih-theme .collection-tabs {border-bottom:1px solid #e3eaf0}
}
@media(max-width:650px) {
 .app-shell .collection.meja-tagih-theme .collection-content {padding:16px}
 .app-shell .collection.meja-tagih-theme .collection-tabs {padding:12px!important}
 .app-shell .collection.meja-tagih-theme .collection-tabs button {font-size:11px;padding:9px}
 .app-shell .collection.meja-tagih-theme :is(.collection-title,.ar-heading,.ci-heading,.spk-title) h2 {font-size:24px}
 .app-shell .collection.meja-tagih-theme :is(.ar-stats strong,.collection-stats .stat strong) {font-size:18px}
 .app-shell .collection.meja-tagih-theme .ar-account {padding:14px}
 .app-shell .collection.meja-tagih-theme .ar-heading>button {align-self:start}
}

}

/* Keep all workspace links reachable, including on short desktop windows. */
@media screen {
 .app-shell>aside {height:100vh;height:100dvh;max-height:100dvh;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden;}
 .app-shell>aside>nav {height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#7594a6 #183747;align-content:start;}
 .app-shell>aside>nav::-webkit-scrollbar {width:7px;}
 .app-shell>aside>nav::-webkit-scrollbar-track {background:#183747;border-radius:8px;}
 .app-shell>aside>nav::-webkit-scrollbar-thumb {background:#7594a6;border-radius:8px;}
 .app-shell>aside .sidebar-bottom {margin-top:0;}
}