/* ============================================================
   SIMPEL v0.16.2 — Penyelarasan UI/UX Ekosistem YPIA
   Lapisan fondasi visual terakhir. Tidak mengubah logika bisnis.
   ============================================================ */
:root{
  --bg:#f5f5f7;
  --surface:#ffffff;
  --surface-2:#f7f8fb;
  --surface-3:#eef3fb;
  --text:#17181c;
  --muted:#6d7280;
  --line:rgba(22,27,38,.09);
  --line-strong:rgba(22,27,38,.15);
  --primary:#1677ff;
  --primary-2:#6757ff;
  --success:#1f9d55;
  --danger:#d9363e;
  --warning:#d88400;
  --info:#1677ff;
  --shadow:0 16px 42px rgba(25,35,55,.07);
  --shadow-soft:0 8px 24px rgba(25,35,55,.055);
  --shadow-float:0 24px 75px rgba(20,30,50,.18);
  --radius:24px;
  --radius-lg:28px;
  --radius-md:17px;
  --radius-sm:12px;
  --topbar:72px;
  --sidebar:260px;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0d0e12;
  --surface:#17191f;
  --surface-2:#1f222a;
  --surface-3:#242936;
  --text:#f3f4f7;
  --muted:#a3a8b4;
  --line:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.15);
  --primary:#5b9cff;
  --primary-2:#8b7cff;
  --success:#44c879;
  --danger:#ff6b72;
  --warning:#ffb547;
  --shadow:0 18px 48px rgba(0,0,0,.22);
  --shadow-soft:0 10px 26px rgba(0,0,0,.18);
  --shadow-float:0 28px 85px rgba(0,0,0,.48);
  color-scheme:dark;
}

html{background:var(--bg)}
body.ypia-ecosystem{background:var(--bg);font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;letter-spacing:-.005em}
body.ypia-ecosystem::before{content:"";position:fixed;z-index:-1;inset:0;background:radial-gradient(circle at 72% -15%,color-mix(in srgb,var(--primary) 8%,transparent),transparent 34%),radial-gradient(circle at 18% 112%,color-mix(in srgb,var(--primary-2) 6%,transparent),transparent 28%);pointer-events:none}
::selection{background:color-mix(in srgb,var(--primary) 24%,transparent)}

/* Shell utama */
.ypia-ecosystem .topbar{left:var(--sidebar);height:var(--topbar);padding:0 24px;background:color-mix(in srgb,var(--surface) 88%,transparent);border-bottom:1px solid var(--line);box-shadow:none;backdrop-filter:saturate(155%) blur(22px);-webkit-backdrop-filter:saturate(155%) blur(22px)}
.ypia-ecosystem .topbar.scrolled{box-shadow:0 10px 28px rgba(20,30,50,.055);border-color:var(--line)}
.ypia-ecosystem .topbar .brand{display:none}
.ypia-ecosystem .topbar-start{gap:12px}
.ypia-ecosystem .topbar-context{padding-left:0;border-left:0}
.ypia-ecosystem .topbar-context small{font-size:.66rem;font-weight:760;letter-spacing:.025em;text-transform:uppercase}
.ypia-ecosystem .topbar-context strong{font-size:.98rem;font-weight:830;letter-spacing:-.025em}
.ypia-ecosystem .app-shell{grid-template-columns:var(--sidebar) minmax(0,1fr);padding-top:var(--topbar)}
.ypia-ecosystem .content{grid-column:2}
.ypia-ecosystem .page-container{max-width:1480px;padding:32px clamp(22px,3vw,44px) 96px}

.ypia-ecosystem .sidebar{top:0;bottom:0;width:var(--sidebar);padding:0;overflow:hidden;background:color-mix(in srgb,var(--surface) 93%,var(--bg));border-right:1px solid var(--line);box-shadow:7px 0 30px rgba(25,35,55,.025);z-index:75}
.ypia-ecosystem .sidebar-brand{min-height:var(--topbar);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px 11px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
.ypia-ecosystem .sidebar-brand>a{min-width:0;display:flex;align-items:center;gap:11px}
.ypia-ecosystem .sidebar-brand img{width:43px;height:43px;object-fit:contain;filter:drop-shadow(0 5px 10px rgba(20,30,50,.1))}
.ypia-ecosystem .sidebar-brand span{min-width:0;display:flex;flex-direction:column;line-height:1.04}
.ypia-ecosystem .sidebar-brand strong{font-size:1.12rem;font-weight:900;letter-spacing:-.045em}
.ypia-ecosystem .sidebar-brand small{margin-top:5px;max-width:158px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.57rem;font-weight:730;letter-spacing:.025em}
.ypia-ecosystem .sidebar-close{display:none;width:38px;height:38px;border:0;border-radius:50%;background:var(--surface-2);color:var(--muted);font-size:1.35rem}
.ypia-ecosystem .sidebar-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.ypia-ecosystem .sidebar nav{padding:13px 12px 20px;gap:3px}
.ypia-ecosystem .nav-label{margin:21px 12px 7px;color:var(--muted);font-size:.6rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.ypia-ecosystem .nav-label:first-child{margin-top:8px}
.ypia-ecosystem .nav-link{position:relative;min-height:43px;gap:10px;padding:9px 11px;border:1px solid transparent;border-radius:13px;color:var(--muted);font-size:.82rem;font-weight:730;transition:background .16s,color .16s,border-color .16s,transform .16s}
.ypia-ecosystem .nav-link>span{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;color:color-mix(in srgb,var(--muted) 86%,var(--primary));font-size:1rem;line-height:1}
.ypia-ecosystem .nav-link>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit}
.ypia-ecosystem .nav-link:hover{background:var(--surface-2);border-color:var(--line);color:var(--text);transform:translateX(1px)}
.ypia-ecosystem .nav-link.active{background:color-mix(in srgb,var(--primary) 9%,var(--surface));border-color:color-mix(in srgb,var(--primary) 16%,var(--line));color:var(--primary);box-shadow:none}
.ypia-ecosystem .nav-link.active::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--primary),var(--primary-2))}
.ypia-ecosystem .nav-link.active>span{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)}
.ypia-ecosystem .sidebar-foot{flex:0 0 auto;margin:0;padding:14px 18px max(15px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,var(--bg));line-height:1.25}
.ypia-ecosystem .sidebar-foot>div{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.ypia-ecosystem .sidebar-foot>div small{font-size:.66rem;font-weight:760}
.ypia-ecosystem .sidebar-foot>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:.71rem}
.ypia-ecosystem .sidebar-foot>span{margin-top:4px;font-size:.6rem}
.ypia-ecosystem .network-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 12%,transparent)}
.ypia-ecosystem .network-dot.offline{background:var(--danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 12%,transparent)}

/* Topbar dan kontrol */
.ypia-ecosystem .top-actions{gap:8px}
.ypia-ecosystem .icon-button,.ypia-ecosystem .topbar-search-button,.ypia-ecosystem .account-button{border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:0 4px 14px rgba(25,35,55,.035)}
.ypia-ecosystem .icon-button{width:41px;height:41px;border-radius:50%}
.ypia-ecosystem .icon-button:hover,.ypia-ecosystem .topbar-search-button:hover,.ypia-ecosystem .account-button:hover{border-color:var(--line-strong);background:var(--surface-2)}
.ypia-ecosystem .topbar-search-button{height:41px;padding:0 10px 0 13px}
.ypia-ecosystem .account-button{height:45px;max-width:255px;padding-right:12px}
.ypia-ecosystem .avatar{background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 15%,var(--surface)),color-mix(in srgb,var(--primary-2) 13%,var(--surface)));color:var(--primary)}
.ypia-ecosystem .account-dropdown{border-color:var(--line-strong);background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:var(--shadow-float)}
.ypia-ecosystem .notification-button b{border-color:var(--surface)}

/* Header halaman dan tipografi */
.ypia-ecosystem .page-head{margin-bottom:26px;gap:24px}
.ypia-ecosystem .page-head h1{font-size:clamp(1.9rem,3.2vw,2.72rem);font-weight:900;letter-spacing:-.055em;line-height:1.02}
.ypia-ecosystem .page-head p{max-width:780px;color:var(--muted);font-size:.94rem;line-height:1.58}
.ypia-ecosystem .eyebrow{color:var(--primary);font-size:.65rem;font-weight:920;letter-spacing:.17em;text-transform:uppercase}
.ypia-ecosystem h1,.ypia-ecosystem h2,.ypia-ecosystem h3{font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif}
.ypia-ecosystem h2,.ypia-ecosystem h3{letter-spacing:-.03em}

/* Komponen umum */
.ypia-ecosystem .card,.ypia-ecosystem .section-card,.ypia-ecosystem .empty-state,.ypia-ecosystem .post-card{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-soft)}
.ypia-ecosystem .card,.ypia-ecosystem .section-card{border-radius:var(--radius)}
.ypia-ecosystem .section-card{padding:clamp(18px,2vw,25px)}
.ypia-ecosystem .section-head{margin-bottom:19px}
.ypia-ecosystem .section-head h2{font-size:1.25rem;font-weight:850}
.ypia-ecosystem .kpi,.ypia-ecosystem .stat-card,.ypia-ecosystem .metric-card{border-color:var(--line);background:var(--surface);box-shadow:var(--shadow-soft)}
.ypia-ecosystem .kpi:hover,.ypia-ecosystem .card[href]:hover{border-color:color-mix(in srgb,var(--primary) 18%,var(--line));box-shadow:var(--shadow)}
.ypia-ecosystem .btn{min-height:42px;border-radius:13px;padding:10px 16px;font-weight:820;letter-spacing:-.01em}
.ypia-ecosystem .btn-primary{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary-2) 72%,var(--primary)));box-shadow:0 9px 21px color-mix(in srgb,var(--primary) 22%,transparent)}
.ypia-ecosystem .btn-primary:hover{filter:brightness(1.035);transform:translateY(-1px)}
.ypia-ecosystem .btn-secondary,.ypia-ecosystem .btn-ghost{border:1px solid var(--line);background:var(--surface);color:var(--text);box-shadow:0 3px 11px rgba(25,35,55,.035)}
.ypia-ecosystem .btn-secondary:hover,.ypia-ecosystem .btn-ghost:hover{border-color:var(--line-strong);background:var(--surface-2)}
.ypia-ecosystem .status-pill,.ypia-ecosystem .mini-status{border:1px solid transparent}
.ypia-ecosystem .status-pill.success,.ypia-ecosystem .mini-status.ok{border-color:color-mix(in srgb,var(--success) 16%,transparent)}
.ypia-ecosystem .status-pill.info{border-color:color-mix(in srgb,var(--primary) 16%,transparent)}
.ypia-ecosystem .alert{border:1px solid color-mix(in srgb,currentColor 16%,transparent);border-radius:15px;box-shadow:none}
.ypia-ecosystem .empty-state{border-style:dashed;box-shadow:none}

/* Form dan tabel */
.ypia-ecosystem input,.ypia-ecosystem select,.ypia-ecosystem textarea{min-height:43px;border:1px solid var(--line-strong);border-radius:13px;background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(20,30,50,.02)}
.ypia-ecosystem textarea{min-height:110px}
.ypia-ecosystem input:hover,.ypia-ecosystem select:hover,.ypia-ecosystem textarea:hover{border-color:color-mix(in srgb,var(--muted) 35%,var(--line))}
.ypia-ecosystem input:focus,.ypia-ecosystem select:focus,.ypia-ecosystem textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent);outline:0}
.ypia-ecosystem label{font-weight:760}
.ypia-ecosystem table{border-collapse:separate;border-spacing:0}
.ypia-ecosystem th{color:var(--muted);font-size:.67rem;font-weight:900;letter-spacing:.065em;text-transform:uppercase;background:var(--surface-2)}
.ypia-ecosystem th,.ypia-ecosystem td{border-color:var(--line)}
.ypia-ecosystem tbody tr:hover td{background:color-mix(in srgb,var(--primary) 2.8%,var(--surface))}
.ypia-ecosystem .table-wrap{border:1px solid var(--line);border-radius:17px;background:var(--surface);overflow:auto}

/* Tab, filter, workspace, halaman modular */
.ypia-ecosystem .tabs,.ypia-ecosystem .segmented-control,.ypia-ecosystem .workspace-tabs,.ypia-ecosystem .master-tabs,.ypia-ecosystem .report-tabs{border:1px solid var(--line);border-radius:15px;background:var(--surface-2);padding:4px;box-shadow:none}
.ypia-ecosystem .tabs a,.ypia-ecosystem .tabs button,.ypia-ecosystem .segmented-control a,.ypia-ecosystem .segmented-control button,.ypia-ecosystem .workspace-tabs a,.ypia-ecosystem .workspace-tabs button,.ypia-ecosystem .master-tabs a,.ypia-ecosystem .master-tabs button,.ypia-ecosystem .report-tabs a,.ypia-ecosystem .report-tabs button{border:0;border-radius:11px;background:transparent;box-shadow:none}
.ypia-ecosystem .tabs .active,.ypia-ecosystem .segmented-control .active,.ypia-ecosystem .workspace-tabs .active,.ypia-ecosystem .master-tabs .active,.ypia-ecosystem .report-tabs .active{background:var(--surface);color:var(--primary);box-shadow:0 3px 10px rgba(25,35,55,.07)}
.ypia-ecosystem .filter-panel,.ypia-ecosystem .filter-card,.ypia-ecosystem .search-panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-soft)}
.ypia-ecosystem .workspace-queue,.ypia-ecosystem .review-queue,.ypia-ecosystem .horizontal-queue{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--primary) 22%,var(--line)) transparent}

/* Navigasi bawah */
.ypia-ecosystem .bottom-nav{left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));padding:6px;border:1px solid var(--line);border-radius:20px;background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:0 14px 42px rgba(20,30,50,.16);backdrop-filter:saturate(160%) blur(24px);-webkit-backdrop-filter:saturate(160%) blur(24px)}
.ypia-ecosystem .bottom-nav a,.ypia-ecosystem .bottom-nav button{min-height:53px;border-radius:15px}
.ypia-ecosystem .bottom-nav a.active{background:color-mix(in srgb,var(--primary) 9%,transparent);color:var(--primary)}

/* Modal, pencarian, toast */
.ypia-ecosystem .command-palette>section,.ypia-ecosystem .modal-sheet{border-color:var(--line-strong);background:var(--surface);box-shadow:var(--shadow-float)}
.ypia-ecosystem .command-result.active{background:color-mix(in srgb,var(--primary) 9%,var(--surface))}
.ypia-ecosystem .command-result.active>span{background:linear-gradient(145deg,var(--primary),var(--primary-2))}
.ypia-ecosystem .toast{border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow-float)}

/* Login ekosistem */
.ypia-ecosystem.auth-body{background:var(--bg)}
.ypia-ecosystem .ecosystem-login{grid-template-columns:minmax(0,1.12fr) minmax(400px,.88fr)}
.ypia-ecosystem .ecosystem-login .login-visual{min-height:100vh;padding:clamp(38px,5vw,72px);background:linear-gradient(145deg,#0a5fc9 0%,#1677ff 42%,#6757ff 100%)}
.ypia-ecosystem .ecosystem-login .login-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(5,18,55,.22));pointer-events:none}
.ypia-ecosystem .visual-grid{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 82%)}
.ypia-ecosystem .ecosystem-login .visual-orb{width:690px;height:690px;top:-310px;right:-205px;background:radial-gradient(circle at 32% 35%,rgba(255,255,255,.78),rgba(255,255,255,.06) 48%,transparent 68%)}
.ypia-ecosystem .ecosystem-login .visual-content{z-index:1;max-width:720px}
.ypia-ecosystem .login-ecosystem-brand{display:flex;align-items:center;gap:13px;margin-bottom:clamp(60px,10vh,118px)}
.ypia-ecosystem .login-ecosystem-brand img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 9px 18px rgba(0,0,0,.2))}
.ypia-ecosystem .login-ecosystem-brand div{display:flex;flex-direction:column;line-height:1.2}
.ypia-ecosystem .login-ecosystem-brand span{font-size:.66rem;font-weight:900;letter-spacing:.16em;opacity:.78}
.ypia-ecosystem .login-ecosystem-brand strong{margin-top:5px;font-size:.96rem;letter-spacing:.015em}
.ypia-ecosystem .ecosystem-login .visual-content h1{max-width:720px;margin:21px 0;font-size:clamp(3rem,5.5vw,5.55rem);font-weight:910;letter-spacing:-.075em;line-height:.92}
.ypia-ecosystem .ecosystem-login .visual-content p{max-width:610px;font-size:1.06rem;opacity:.86}
.ypia-ecosystem .ecosystem-login .beta-badge{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.12)}
.ypia-ecosystem .ecosystem-login .feature-row{flex-wrap:wrap;gap:11px 20px}
.ypia-ecosystem .ecosystem-login .login-panel{position:relative;padding:clamp(24px,4vw,54px);background:var(--bg)}
.ypia-ecosystem .ecosystem-login .login-card{width:min(440px,100%);padding:clamp(25px,3.6vw,39px);border-radius:var(--radius-lg);box-shadow:0 28px 70px rgba(25,35,55,.12)}
.ypia-ecosystem .login-card-brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.ypia-ecosystem .login-card-brand img{width:48px;height:48px;object-fit:contain}
.ypia-ecosystem .login-card-brand div{display:flex;flex-direction:column;line-height:1.05}
.ypia-ecosystem .login-card-brand strong{font-size:1.16rem;font-weight:920;letter-spacing:-.045em}
.ypia-ecosystem .login-card-brand small{margin-top:5px;color:var(--muted);font-size:.62rem;font-weight:720}
.ypia-ecosystem .ecosystem-login .login-card h2{font-size:2.15rem;font-weight:900}
.ypia-ecosystem .ecosystem-login .login-card>p{line-height:1.55}
.ypia-ecosystem .sso-caption{margin:9px 5px 0;color:var(--muted);font-size:.69rem;line-height:1.45;text-align:center}
.ypia-ecosystem .login-divider{display:flex;align-items:center;gap:10px;margin:23px 0 17px;color:var(--muted);font-size:.64rem;font-weight:770;text-transform:uppercase;letter-spacing:.06em}
.ypia-ecosystem .login-divider::before,.ypia-ecosystem .login-divider::after{content:"";height:1px;flex:1;background:var(--line)}
.ypia-ecosystem .login-help{font-size:.68rem;line-height:1.5}
.ypia-ecosystem .login-footer{position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));color:var(--muted);font-size:.65rem;text-align:center}

/* Aksesibilitas dan kondisi khusus */
.ypia-ecosystem :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 58%,transparent);outline-offset:3px}
.ypia-ecosystem button,.ypia-ecosystem a,.ypia-ecosystem input,.ypia-ecosystem select{touch-action:manipulation}
.ypia-ecosystem .network-bar{background:var(--danger)}

@media(max-width:1100px){
  :root{--sidebar:240px}
  .ypia-ecosystem .page-container{padding-left:24px;padding-right:24px}
  .ypia-ecosystem .sidebar-brand small{max-width:138px}
}

@media(max-width:850px){
  :root{--topbar:64px;--sidebar:min(310px,88vw)}
  .ypia-ecosystem .topbar{left:0;padding:0 10px}
  .ypia-ecosystem .topbar .brand{display:none}
  .ypia-ecosystem .app-shell{display:block;padding-top:var(--topbar)}
  .ypia-ecosystem .content{min-width:0}
  .ypia-ecosystem .page-container{padding:20px 14px 100px}
  .ypia-ecosystem .sidebar{display:flex;top:0;width:var(--sidebar);transform:translateX(-105%);box-shadow:var(--shadow-float);z-index:100}
  .ypia-ecosystem .sidebar.mobile-open{transform:translateX(0)}
  .ypia-ecosystem .sidebar-close{display:grid;place-items:center}
  .ypia-ecosystem .sidebar-backdrop{inset:0;z-index:95;background:rgba(10,12,18,.48);backdrop-filter:blur(4px)}
  .ypia-ecosystem .topbar-context small{font-size:.59rem}
  .ypia-ecosystem .topbar-context strong{font-size:.85rem}
  .ypia-ecosystem .bottom-nav{display:grid}
  .ypia-ecosystem .login-footer{position:static;margin-top:22px}
  .ypia-ecosystem .ecosystem-login{grid-template-columns:1fr}
  .ypia-ecosystem .ecosystem-login .login-visual{display:none}
  .ypia-ecosystem .ecosystem-login .login-panel{min-height:100vh;padding:18px 14px max(22px,env(safe-area-inset-bottom))}
  .ypia-ecosystem .ecosystem-login .login-card{margin:auto}
}

@media(max-width:540px){
  .ypia-ecosystem .page-head{gap:15px;margin-bottom:20px}
  .ypia-ecosystem .page-head h1{font-size:2rem}
  .ypia-ecosystem .page-head p{font-size:.86rem}
  .ypia-ecosystem .section-card{padding:17px}
  .ypia-ecosystem .top-actions{gap:5px}
  .ypia-ecosystem .ecosystem-login .login-card{padding:25px 21px;border-radius:23px}
  .ypia-ecosystem .ecosystem-login .login-card h2{font-size:1.92rem}
}

@media(prefers-reduced-motion:reduce){
  .ypia-ecosystem *,.ypia-ecosystem *::before,.ypia-ecosystem *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media(forced-colors:active){
  .ypia-ecosystem .nav-link.active,.ypia-ecosystem .btn-primary,.ypia-ecosystem .bottom-nav a.active{forced-color-adjust:auto;border:2px solid Highlight}
  .ypia-ecosystem .network-dot{border:1px solid CanvasText}
}

@media print{
  .ypia-ecosystem .topbar,.ypia-ecosystem .sidebar,.ypia-ecosystem .bottom-nav,.ypia-ecosystem .sidebar-backdrop,.ypia-ecosystem .network-bar{display:none!important}
  .ypia-ecosystem .app-shell{display:block;padding:0}
  .ypia-ecosystem .content{display:block}
  .ypia-ecosystem .page-container{max-width:none;padding:0}
  .ypia-ecosystem .card,.ypia-ecosystem .section-card{box-shadow:none}
}

/* === SIMPEL v0.16.7 — Loaded administration account bundle === */
/*
 * SIMPEL v0.16.6 — Hotfix Tata Letak Administrasi Akun
 * Lapisan visual akhir Ekosistem Digital YPIA.
 * Tidak mengubah proses bisnis, route, data, role, permission, atau endpoint.
 */

:root {
  --ypia-bg: #f5f5f7;
  --ypia-surface: rgba(255, 255, 255, 0.92);
  --ypia-surface-solid: #ffffff;
  --ypia-surface-muted: #f8f9fb;
  --ypia-text: #172033;
  --ypia-text-soft: #667085;
  --ypia-border: rgba(23, 32, 51, 0.10);
  --ypia-border-strong: rgba(23, 32, 51, 0.16);
  --ypia-primary: #1677ff;
  --ypia-primary-soft: rgba(22, 119, 255, 0.10);
  --ypia-primary-strong: #0b63d1;
  --ypia-accent: #6757ff;
  --ypia-success: #168a5b;
  --ypia-success-soft: rgba(22, 138, 91, 0.10);
  --ypia-warning: #b96800;
  --ypia-warning-soft: rgba(185, 104, 0, 0.10);
  --ypia-danger: #c9374f;
  --ypia-danger-soft: rgba(201, 55, 79, 0.10);
  --ypia-radius-xs: 8px;
  --ypia-radius-sm: 12px;
  --ypia-radius-md: 16px;
  --ypia-radius-lg: 22px;
  --ypia-radius-xl: 28px;
  --ypia-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 22px rgba(16, 24, 40, .04);
  --ypia-shadow-md: 0 16px 42px rgba(16, 24, 40, .10);
  --ypia-sidebar-width: 260px;
  --ypia-control-height: 42px;
}

[data-theme="dark"],
html.dark,
body.dark,
body[data-theme="dark"] {
  --ypia-bg: #0f1218;
  --ypia-surface: rgba(24, 29, 38, 0.94);
  --ypia-surface-solid: #181d26;
  --ypia-surface-muted: #202631;
  --ypia-text: #f1f4f8;
  --ypia-text-soft: #a8b0bf;
  --ypia-border: rgba(255, 255, 255, 0.10);
  --ypia-border-strong: rgba(255, 255, 255, 0.17);
  --ypia-primary-soft: rgba(64, 143, 255, 0.18);
  --ypia-success-soft: rgba(57, 193, 134, 0.16);
  --ypia-warning-soft: rgba(245, 166, 35, 0.16);
  --ypia-danger-soft: rgba(244, 93, 117, 0.16);
  --ypia-shadow-sm: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 28px rgba(0, 0, 0, .16);
  --ypia-shadow-md: 0 18px 46px rgba(0, 0, 0, .28);
}

html {
  background: var(--ypia-bg);
}

body {
  background: var(--ypia-bg) !important;
  color: var(--ypia-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- SVG icon system ---------- */
.ypia-icon {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;
  align-items: center;
  justify-content: center;
  color: currentColor;
  line-height: 0;
  vertical-align: -0.18em;
}

.ypia-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ypia-icon--sm {
  width: 1rem;
  height: 1rem;
  flex-basis: 1rem;
}

.ypia-icon--lg {
  width: 1.35rem;
  height: 1.35rem;
  flex-basis: 1.35rem;
}

.ypia-icon-shell {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ypia-border);
  border-radius: 11px;
  background: var(--ypia-surface-muted);
  color: var(--ypia-text-soft);
}

.ypia-icon-legacy,
[data-ypia-legacy-icon="1"] {
  display: none !important;
}

/* ---------- Shared shell compatibility ---------- */
.app-shell,
.layout-shell,
.dashboard-shell,
.shell {
  min-width: 0;
  background: var(--ypia-bg);
}

.sidebar,
.app-sidebar,
.layout-sidebar,
aside[role="navigation"] {
  background: var(--ypia-surface-solid);
  border-right: 1px solid var(--ypia-border);
}

.sidebar a,
.app-sidebar a,
.layout-sidebar a,
.bottom-nav a,
.mobile-bottom-nav a {
  gap: 10px;
}

.sidebar a .ypia-icon,
.app-sidebar a .ypia-icon,
.layout-sidebar a .ypia-icon {
  color: var(--ypia-text-soft);
}

.sidebar a.active .ypia-icon,
.sidebar a[aria-current="page"] .ypia-icon,
.app-sidebar a.active .ypia-icon,
.app-sidebar a[aria-current="page"] .ypia-icon,
.layout-sidebar a.active .ypia-icon,
.layout-sidebar a[aria-current="page"] .ypia-icon {
  color: var(--ypia-primary);
}

.topbar,
.app-topbar,
.layout-topbar,
header[role="banner"] {
  border-bottom-color: var(--ypia-border);
  background: color-mix(in srgb, var(--ypia-bg) 84%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

main,
.main-content,
.app-content,
.content-area {
  min-width: 0;
}

/* ---------- Components ---------- */
.card,
.panel,
.widget,
.box,
.ypia-panel,
fieldset {
  border-color: var(--ypia-border) !important;
  border-radius: var(--ypia-radius-lg) !important;
  background: var(--ypia-surface-solid) !important;
  box-shadow: var(--ypia-shadow-sm);
}

.ypia-panel {
  overflow: clip;
}

button,
.button,
.btn,
a.button,
a.btn,
input[type="submit"],
input[type="button"] {
  min-height: var(--ypia-control-height);
  border-radius: var(--ypia-radius-sm) !important;
  font-weight: 650;
  letter-spacing: -0.01em;
}

button .ypia-icon,
.button .ypia-icon,
.btn .ypia-icon,
a.button .ypia-icon,
a.btn .ypia-icon {
  margin-right: 7px;
}

button.icon-only .ypia-icon,
.button.icon-only .ypia-icon,
.btn.icon-only .ypia-icon,
[aria-label].ypia-icon-button .ypia-icon {
  margin-right: 0;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  max-width: 100%;
  border-color: var(--ypia-border-strong) !important;
  border-radius: var(--ypia-radius-sm) !important;
  background: var(--ypia-surface-solid) !important;
  color: var(--ypia-text) !important;
  box-shadow: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select {
  min-height: var(--ypia-control-height);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ypia-primary) 27%, transparent) !important;
  outline-offset: 2px;
  border-color: var(--ypia-primary) !important;
}

.badge,
.status,
.pill,
.chip,
.tag {
  border-radius: 999px !important;
  font-weight: 650;
}

.alert,
.notice,
.flash,
.callout {
  border-radius: var(--ypia-radius-md) !important;
}

/* ---------- Page heading ---------- */
.page-head,
.page-header,
.content-header,
.ypia-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  margin-bottom: 20px;
}

.page-head h1,
.page-header h1,
.content-header h1,
.ypia-page-head h1 {
  margin: 0;
  color: var(--ypia-text);
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.page-head p,
.page-header p,
.content-header p,
.ypia-page-head p {
  max-width: 780px;
  margin: 7px 0 0;
  color: var(--ypia-text-soft);
  line-height: 1.55;
}

.ypia-page-head__title {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 13px;
}

.ypia-page-head__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--ypia-primary-soft);
  color: var(--ypia-primary);
}

.ypia-page-head__icon .ypia-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex-basis: 1.35rem;
}

/* ---------- Tabs, filters, action bars ---------- */
.ypia-tabs,
[role="tablist"],
.tabs,
.tab-list,
.segmented-control {
  display: flex;
  max-width: 100%;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding: 5px;
  border: 1px solid var(--ypia-border);
  border-radius: var(--ypia-radius-md);
  background: var(--ypia-surface-muted);
}

.ypia-tabs > a,
.ypia-tabs > button,
[role="tablist"] > [role="tab"],
.tabs > a,
.tabs > button,
.tab-list > a,
.tab-list > button,
.segmented-control > a,
.segmented-control > button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 13px;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--ypia-text-soft) !important;
  box-shadow: none !important;
  white-space: nowrap;
}

.ypia-tabs > .active,
.ypia-tabs > [aria-selected="true"],
[role="tablist"] > [role="tab"][aria-selected="true"],
.tabs > .active,
.tab-list > .active,
.segmented-control > .active {
  background: var(--ypia-surface-solid) !important;
  color: var(--ypia-text) !important;
  box-shadow: 0 1px 4px rgba(16, 24, 40, .08) !important;
}

.ypia-toolbar,
.filters,
.filter-bar,
.action-bar,
.toolbar {
  display: flex;
  min-width: 0;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.ypia-toolbar > *,
.filters > *,
.filter-bar > *,
.action-bar > *,
.toolbar > * {
  min-width: 0;
}

/* ---------- Data table resilience ---------- */
.ypia-table-scroll,
.table-responsive,
.table-wrap,
.overflow-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  border: 1px solid var(--ypia-border);
  border-radius: var(--ypia-radius-md);
  background: var(--ypia-surface-solid);
}

.ypia-table-scroll table,
.table-responsive table,
.table-wrap table,
.overflow-table table {
  width: 100%;
  min-width: 780px;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
}

.ypia-table-scroll th,
.table-responsive th,
.table-wrap th,
.overflow-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ypia-surface-muted) !important;
  color: var(--ypia-text-soft);
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.ypia-table-scroll th,
.ypia-table-scroll td,
.table-responsive th,
.table-responsive td,
.table-wrap th,
.table-wrap td,
.overflow-table th,
.overflow-table td {
  padding: 13px 14px !important;
  border-bottom: 1px solid var(--ypia-border) !important;
  vertical-align: middle;
}

.ypia-table-scroll tr:last-child td,
.table-responsive tr:last-child td,
.table-wrap tr:last-child td,
.overflow-table tr:last-child td {
  border-bottom: 0 !important;
}

.ypia-table-scroll tbody tr:hover,
.table-responsive tbody tr:hover,
.table-wrap tbody tr:hover,
.overflow-table tbody tr:hover {
  background: color-mix(in srgb, var(--ypia-primary) 4%, transparent);
}

.ypia-row-actions,
.table-actions,
td.actions,
td:last-child > form,
td:last-child > .actions {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------- Form layout ---------- */
.ypia-form-grid,
.form-grid,
.settings-grid,
.policy-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.ypia-form-grid > *,
.form-grid > *,
.settings-grid > *,
.policy-grid > * {
  grid-column: span 4;
  min-width: 0;
}

.ypia-field,
.form-group,
.field,
.control-group {
  min-width: 0;
}

.ypia-field label,
.form-group label,
.field label,
.control-group label {
  display: block;
  margin-bottom: 6px;
  color: var(--ypia-text);
  font-size: .88rem;
  font-weight: 680;
}

.ypia-help,
.form-help,
.help-text,
.hint,
small.muted {
  color: var(--ypia-text-soft);
  line-height: 1.45;
}

/* ---------- Status summary cards ---------- */
.ypia-stat-grid,
.stats-grid,
.summary-grid,
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ypia-stat-card,
.stat-card,
.summary-card,
.kpi-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--ypia-border);
  border-radius: var(--ypia-radius-md);
  background: var(--ypia-surface-solid);
}

.ypia-stat-card strong,
.stat-card strong,
.summary-card strong,
.kpi-card strong {
  display: block;
  margin-top: 5px;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

/* ================================================================
   SIKLUS HIDUP AKUN
   ================================================================ */
body.ypia-page-lifecycle main,
body.ypia-page-lifecycle .main-content,
body.ypia-page-lifecycle .app-content {
  container-type: inline-size;
}

body.ypia-page-lifecycle .ypia-lifecycle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  align-items: start;
}

body.ypia-page-lifecycle .ypia-lifecycle-main,
body.ypia-page-lifecycle .ypia-lifecycle-side {
  min-width: 0;
}

body.ypia-page-lifecycle .ypia-lifecycle-side {
  position: sticky;
  top: 86px;
}

body.ypia-page-lifecycle .ypia-tabs,
body.ypia-page-lifecycle [role="tablist"],
body.ypia-page-lifecycle .tabs,
body.ypia-page-lifecycle .tab-list {
  margin-bottom: 14px;
}

body.ypia-page-lifecycle .lifecycle-card,
body.ypia-page-lifecycle .queue-card,
body.ypia-page-lifecycle .account-card,
body.ypia-page-lifecycle [data-lifecycle-item] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--ypia-border);
  border-radius: var(--ypia-radius-md);
  background: var(--ypia-surface-solid);
}

body.ypia-page-lifecycle .lifecycle-card + .lifecycle-card,
body.ypia-page-lifecycle .queue-card + .queue-card,
body.ypia-page-lifecycle .account-card + .account-card {
  margin-top: 10px;
}

body.ypia-page-lifecycle .lifecycle-card h3,
body.ypia-page-lifecycle .queue-card h3,
body.ypia-page-lifecycle .account-card h3 {
  margin: 0 0 5px;
  font-size: 1rem;
}

body.ypia-page-lifecycle .lifecycle-card p,
body.ypia-page-lifecycle .queue-card p,
body.ypia-page-lifecycle .account-card p {
  margin: 0;
  color: var(--ypia-text-soft);
}

body.ypia-page-lifecycle .lifecycle-card form,
body.ypia-page-lifecycle .queue-card form,
body.ypia-page-lifecycle .account-card form,
body.ypia-page-lifecycle [data-lifecycle-item] form {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.ypia-page-lifecycle .settings-card,
body.ypia-page-lifecycle .lifecycle-settings,
body.ypia-page-lifecycle form[data-lifecycle-settings] {
  padding: 18px;
}

body.ypia-page-lifecycle .settings-card .form-grid,
body.ypia-page-lifecycle .lifecycle-settings .form-grid,
body.ypia-page-lifecycle form[data-lifecycle-settings] .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.ypia-page-lifecycle .empty-state,
body.ypia-page-lifecycle .empty,
body.ypia-page-lifecycle [data-empty-state] {
  padding: 34px 20px;
  border: 1px dashed var(--ypia-border-strong);
  border-radius: var(--ypia-radius-md);
  background: var(--ypia-surface-muted);
  text-align: center;
}

/* ================================================================
   PEMETAAN PERAN & KEWENANGAN
   ================================================================ */
body.ypia-page-rolemap main,
body.ypia-page-rolemap .main-content,
body.ypia-page-rolemap .app-content {
  container-type: inline-size;
}

body.ypia-page-rolemap .ypia-rolemap-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 18px;
  align-items: start;
}

body.ypia-page-rolemap .ypia-rolemap-main,
body.ypia-page-rolemap .ypia-rolemap-side {
  min-width: 0;
}

body.ypia-page-rolemap .ypia-rolemap-side {
  position: sticky;
  top: 86px;
}

body.ypia-page-rolemap .mapping-card,
body.ypia-page-rolemap .recommendation-card,
body.ypia-page-rolemap [data-role-mapping-item] {
  display: grid;
  grid-template-columns: minmax(210px, 1.1fr) minmax(180px, .9fr) minmax(180px, .9fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--ypia-border);
  border-radius: var(--ypia-radius-md);
  background: var(--ypia-surface-solid);
}

body.ypia-page-rolemap .mapping-card + .mapping-card,
body.ypia-page-rolemap .recommendation-card + .recommendation-card {
  margin-top: 9px;
}

body.ypia-page-rolemap .mapping-card form,
body.ypia-page-rolemap .recommendation-card form,
body.ypia-page-rolemap [data-role-mapping-item] form {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

body.ypia-page-rolemap .policy-card,
body.ypia-page-rolemap .mapping-policy,
body.ypia-page-rolemap form[data-role-policy] {
  padding: 18px;
}

body.ypia-page-rolemap textarea {
  min-height: 118px;
  resize: vertical;
}

body.ypia-page-rolemap .ypia-table-scroll table,
body.ypia-page-rolemap .table-responsive table,
body.ypia-page-rolemap .table-wrap table {
  min-width: 1040px;
}

body.ypia-page-rolemap td:first-child,
body.ypia-page-rolemap th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--ypia-surface-solid);
}

body.ypia-page-rolemap th:first-child {
  z-index: 3;
  background: var(--ypia-surface-muted) !important;
}

body.ypia-page-rolemap .role-badge,
body.ypia-page-rolemap .managed-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--ypia-primary-soft);
  color: var(--ypia-primary-strong);
  font-size: .78rem;
  font-weight: 720;
}

/* ---------- JS-applied safe normalization ---------- */
body.ypia-admin-priority .ypia-section {
  min-width: 0;
  margin-bottom: 16px;
}

body.ypia-admin-priority .ypia-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
}

body.ypia-admin-priority .ypia-section-title .ypia-icon-shell {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

body.ypia-admin-priority .ypia-stack {
  display: grid;
  gap: 10px;
}

body.ypia-admin-priority .ypia-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ---------- Responsive ---------- */
@container (max-width: 980px) {
  body.ypia-page-lifecycle .ypia-lifecycle-layout,
  body.ypia-page-rolemap .ypia-rolemap-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.ypia-page-lifecycle .ypia-lifecycle-side,
  body.ypia-page-rolemap .ypia-rolemap-side {
    position: static;
  }
}

@media (max-width: 980px) {
  .ypia-stat-grid,
  .stats-grid,
  .summary-grid,
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ypia-form-grid > *,
  .form-grid > *,
  .settings-grid > *,
  .policy-grid > * {
    grid-column: span 6;
  }

  body.ypia-page-rolemap .mapping-card,
  body.ypia-page-rolemap .recommendation-card,
  body.ypia-page-rolemap [data-role-mapping-item] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  :root {
    --ypia-radius-lg: 18px;
    --ypia-radius-xl: 22px;
  }

  .page-head,
  .page-header,
  .content-header,
  .ypia-page-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-head > :last-child,
  .page-header > :last-child,
  .content-header > :last-child,
  .ypia-page-head > :last-child {
    justify-self: stretch;
  }

  .ypia-toolbar,
  .filters,
  .filter-bar,
  .action-bar,
  .toolbar {
    align-items: stretch;
  }

  .ypia-toolbar > *,
  .filters > *,
  .filter-bar > *,
  .action-bar > *,
  .toolbar > * {
    flex: 1 1 170px;
  }

  .ypia-stat-grid,
  .stats-grid,
  .summary-grid,
  .kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ypia-form-grid,
  .form-grid,
  .settings-grid,
  .policy-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ypia-form-grid > *,
  .form-grid > *,
  .settings-grid > *,
  .policy-grid > * {
    grid-column: auto;
  }

  body.ypia-page-lifecycle .lifecycle-card,
  body.ypia-page-lifecycle .queue-card,
  body.ypia-page-lifecycle .account-card,
  body.ypia-page-lifecycle [data-lifecycle-item],
  body.ypia-page-rolemap .mapping-card,
  body.ypia-page-rolemap .recommendation-card,
  body.ypia-page-rolemap [data-role-mapping-item] {
    grid-template-columns: minmax(0, 1fr);
  }

  body.ypia-page-lifecycle .lifecycle-card form,
  body.ypia-page-lifecycle .queue-card form,
  body.ypia-page-lifecycle .account-card form,
  body.ypia-page-rolemap .mapping-card form,
  body.ypia-page-rolemap .recommendation-card form {
    justify-content: stretch;
  }

  body.ypia-page-lifecycle .lifecycle-card form > *,
  body.ypia-page-lifecycle .queue-card form > *,
  body.ypia-page-lifecycle .account-card form > *,
  body.ypia-page-rolemap .mapping-card form > *,
  body.ypia-page-rolemap .recommendation-card form > * {
    flex: 1 1 140px;
  }

  .ypia-page-head__icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .ypia-icon > svg {
    stroke: CanvasText;
  }

  .card,
  .panel,
  .widget,
  .box,
  .ypia-panel,
  .ypia-table-scroll {
    border: 1px solid CanvasText !important;
  }
}

@media print {
  .ypia-icon,
  .ypia-page-head__icon,
  .ypia-toolbar,
  .filters,
  .filter-bar,
  .action-bar,
  .toolbar,
  .sidebar,
  .app-sidebar,
  .bottom-nav,
  .mobile-bottom-nav {
    display: none !important;
  }

  .card,
  .panel,
  .widget,
  .box,
  .ypia-panel,
  .ypia-table-scroll {
    box-shadow: none !important;
  }
}


/* ---------- v0.16.4 brand header hotfix ---------- */
.ypia-brand-refined > .ypia-icon,
.ypia-brand-refined > .ypia-brand-redundant-mark,
.ypia-brand-refined > [data-brand-mark].ypia-brand-redundant-mark {
  display: none !important;
}

.ypia-brand-refined {
  min-width: 0;
  align-items: center !important;
  column-gap: 14px !important;
}

.ypia-brand-refined .ypia-brand-logo {
  flex: 0 0 auto;
}

.ypia-brand-refined img.ypia-brand-logo,
.ypia-brand-refined .ypia-brand-logo > img,
.ypia-brand-refined .ypia-brand-logo picture,
.ypia-brand-refined .ypia-brand-logo picture > img {
  display: block;
  object-fit: contain;
}

.ypia-brand-refined .ypia-brand-copy {
  min-width: 0;
  overflow: hidden;
}

.ypia-brand-refined .ypia-brand-copy strong,
.ypia-brand-refined .ypia-brand-copy .brand-title,
.ypia-brand-refined .ypia-brand-copy .sidebar-brand__title,
.ypia-brand-refined .ypia-brand-copy .app-brand__title {
  display: block;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.ypia-brand-refined .ypia-brand-copy small,
.ypia-brand-refined .ypia-brand-copy .brand-subtitle,
.ypia-brand-refined .ypia-brand-copy .sidebar-brand__subtitle,
.ypia-brand-refined .ypia-brand-copy .app-brand__subtitle {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ypia-text-soft);
}

/* The navigation icon system must never decorate the application identity link. */
.sidebar .ypia-brand-refined .ypia-icon,
.app-sidebar .ypia-brand-refined .ypia-icon,
.layout-sidebar .ypia-brand-refined .ypia-icon,
aside[role="navigation"] .ypia-brand-refined .ypia-icon {
  display: none !important;
}

@media (max-width: 720px) {
  .ypia-brand-refined {
    column-gap: 12px !important;
  }

  .ypia-brand-refined .ypia-brand-copy strong,
  .ypia-brand-refined .ypia-brand-copy .brand-title,
  .ypia-brand-refined .ypia-brand-copy .sidebar-brand__title,
  .ypia-brand-refined .ypia-brand-copy .app-brand__title {
    font-size: clamp(1.25rem, 5.5vw, 1.55rem);
  }
}


/* ---------- v0.16.5 definitive brand grid removal ---------- */
.ypia-brand-grid-artifact {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.ypia-brand-zone:has(img) > :is(.ypia-icon, [data-ypia-icon="dashboard"], .brand-mark, .app-mark, .brand-icon, .app-icon, [data-brand-mark]):not(:has(img, picture)),
.ypia-brand-zone:has(img) > :is(a, button, span, div):has(> .ypia-icon[data-ypia-icon="dashboard"]):not(:has(img, picture)):not([data-sidebar-close]):not(.sidebar-close),
.ypia-brand-zone :is(.brand, .sidebar-brand, .app-brand, .brand-link, [data-brand], [data-app-brand]):has(img) > :is(.ypia-icon, [data-ypia-icon="dashboard"], .brand-mark, .app-mark, .brand-icon, .app-icon, [data-brand-mark]):not(:has(img, picture)),
.sidebar-top:has(img) > :is(a, button, span, div):has(svg > rect:nth-of-type(4)):not(:has(img, picture)):not([data-sidebar-close]):not(.sidebar-close),
.sidebar-header:has(img) > :is(a, button, span, div):has(svg > rect:nth-of-type(4)):not(:has(img, picture)):not([data-sidebar-close]):not(.sidebar-close) {
  display: none !important;
}

.ypia-brand-zone .ypia-brand-refined {
  margin-inline-start: 0 !important;
}

/* ================================================================
   v0.16.6 — TATA LETAK ADMINISTRASI AKUN BERBASIS VIEW ASLI
   Rekonsiliasi Akun, Siklus Hidup Akun, Pemetaan Peran & Kewenangan
   ================================================================ */
.ypia-ecosystem .core-admin-page {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.ypia-ecosystem .core-admin-page > * {
  min-width: 0;
}

.ypia-ecosystem .core-admin-page > .page-head {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding-bottom: 2px;
}

.ypia-ecosystem .core-admin-page > .page-head > div:first-child {
  min-width: 0;
}

.ypia-ecosystem .core-admin-page > .page-head .button-row {
  display: flex;
  width: 100%;
  margin: 0;
  gap: 8px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.ypia-ecosystem .core-admin-page > .page-head .button-row .btn {
  min-width: 0;
  white-space: nowrap;
}

.ypia-ecosystem .core-admin-page :is(.core-account-kpis,.lifecycle-kpis,.role-map-kpis),
.ypia-ecosystem .core-admin-page :is(.core-account-tabs,.lifecycle-tabs,.role-map-tabs),
.ypia-ecosystem .core-admin-page :is(.core-account-filter,.lifecycle-filter,.role-map-filter),
.ypia-ecosystem .core-admin-page :is(.core-account-note,.lifecycle-list,.role-map-list),
.ypia-ecosystem .core-admin-page :is(.lifecycle-safety,.lifecycle-settings,.role-map-safety,.role-map-settings) {
  margin: 0;
}

.ypia-ecosystem .core-admin-page :is(.core-account-kpis,.lifecycle-kpis,.role-map-kpis) {
  gap: 12px;
}

.ypia-ecosystem .core-admin-page :is(.core-account-kpis,.lifecycle-kpis,.role-map-kpis) > .card {
  min-height: 118px;
  padding: 17px;
  border-radius: 18px;
  box-shadow: none;
}

.ypia-ecosystem .core-admin-page :is(.core-account-kpis,.lifecycle-kpis,.role-map-kpis) small {
  color: var(--ypia-text-soft);
}

.ypia-ecosystem .core-admin-page :is(.core-account-kpis,.lifecycle-kpis,.role-map-kpis) > .card > b {
  color: var(--ypia-text);
  font-size: clamp(1.55rem, 2vw, 1.9rem);
}

.ypia-ecosystem .core-admin-page :is(.core-account-tabs,.lifecycle-tabs,.role-map-tabs) {
  display: flex;
  max-width: 100%;
  gap: 7px;
  overflow-x: auto;
  padding: 5px;
  border: 1px solid var(--ypia-border);
  border-radius: 16px;
  background: var(--ypia-surface-muted);
  scrollbar-width: thin;
}

.ypia-ecosystem .core-admin-page :is(.core-account-tabs,.lifecycle-tabs,.role-map-tabs) a {
  display: inline-flex;
  min-width: max-content;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--ypia-text-soft) !important;
  box-shadow: none !important;
}

.ypia-ecosystem .core-admin-page :is(.core-account-tabs,.lifecycle-tabs,.role-map-tabs) a.active {
  background: var(--ypia-surface-solid) !important;
  color: var(--ypia-primary) !important;
  box-shadow: 0 1px 5px rgba(16,24,40,.08) !important;
}

.ypia-ecosystem .core-admin-page :is(.core-account-tabs,.lifecycle-tabs,.role-map-tabs) a b {
  display: inline-grid;
  min-width: 23px;
  height: 23px;
  margin: 0;
  padding: 0 6px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ypia-text-soft) 9%, transparent);
  font-size: .68rem;
}

.ypia-ecosystem .core-admin-page :is(.core-account-filter,.lifecycle-filter,.role-map-filter) {
  padding: 16px;
  border-radius: 18px;
}

.ypia-ecosystem .core-admin-page :is(.core-account-filter,.lifecycle-filter) form,
.ypia-ecosystem .core-admin-page .role-map-filter > form:first-child {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, .32fr) auto;
  gap: 12px;
  align-items: end;
}

.ypia-ecosystem .core-admin-page :is(.core-account-filter,.lifecycle-filter,.role-map-filter) label {
  min-width: 0;
  margin: 0;
}

.ypia-ecosystem .core-admin-page :is(.core-account-filter,.lifecycle-filter,.role-map-filter) label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--ypia-text-soft);
  font-size: .76rem;
  font-weight: 750;
}

.ypia-ecosystem .core-admin-page :is(.core-account-filter,.lifecycle-filter,.role-map-filter) input,
.ypia-ecosystem .core-admin-page :is(.core-account-filter,.lifecycle-filter,.role-map-filter) select {
  width: 100%;
  min-width: 0;
}

/* Rekonsiliasi Akun */
.ypia-ecosystem .core-account-results {
  padding: 18px;
}

.ypia-ecosystem .core-account-results > .section-head {
  margin: 0 0 14px;
}

.ypia-ecosystem .core-account-list {
  gap: 9px;
}

.ypia-ecosystem .core-account-row {
  display: grid;
  grid-template-columns: auto minmax(250px, 1.25fr) minmax(145px, .52fr) minmax(190px, .72fr) minmax(145px, auto);
  gap: 13px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--ypia-border);
  border-radius: 16px;
  background: var(--ypia-surface-muted);
}

.ypia-ecosystem .core-account-row > * {
  min-width: 0;
}

.ypia-ecosystem .core-account-identity small,
.ypia-ecosystem .core-account-identity p,
.ypia-ecosystem .core-account-meta,
.ypia-ecosystem .core-account-coreid {
  overflow-wrap: anywhere;
}

.ypia-ecosystem .core-account-actions {
  min-width: 0;
  justify-content: flex-end;
}

.ypia-ecosystem .core-account-actions :is(.btn,.status-pill) {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.ypia-ecosystem .core-account-note {
  margin-top: 0 !important;
}

.ypia-ecosystem .core-guardrails {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ypia-ecosystem .core-guardrails p {
  min-width: 0;
  margin: 0;
  padding: 13px;
  border: 1px solid var(--ypia-border);
  border-radius: 14px;
  background: var(--ypia-surface-muted);
  color: var(--ypia-text-soft);
  font-size: .79rem;
  line-height: 1.5;
}

.ypia-ecosystem .core-guardrails b {
  color: var(--ypia-text);
}

/* Siklus Hidup Akun */
.ypia-ecosystem .lifecycle-safety,
.ypia-ecosystem .role-map-safety {
  padding: 18px;
  border-radius: 18px;
}

.ypia-ecosystem .lifecycle-settings,
.ypia-ecosystem .role-map-settings {
  overflow: hidden;
  padding: 0;
  border-radius: 18px;
}

.ypia-ecosystem .lifecycle-settings-form,
.ypia-ecosystem .role-map-settings-form {
  min-width: 0;
}

.ypia-ecosystem .lifecycle-list,
.ypia-ecosystem .role-map-list {
  display: grid;
  gap: 10px;
}

.ypia-ecosystem .lifecycle-row {
  display: grid !important;
  grid-template-columns: minmax(235px, .9fr) minmax(320px, 1.2fr) minmax(210px, .62fr) !important;
  gap: 15px !important;
  align-items: start !important;
  min-width: 0;
  padding: 16px !important;
}

.ypia-ecosystem .lifecycle-row > * {
  min-width: 0;
}

.ypia-ecosystem .lifecycle-blockers span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ypia-ecosystem .lifecycle-blocker-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: var(--ypia-warning);
}

.ypia-ecosystem .lifecycle-actions {
  min-width: 0;
}

.ypia-ecosystem .lifecycle-actions form,
.ypia-ecosystem .lifecycle-actions .btn,
.ypia-ecosystem .lifecycle-actions input,
.ypia-ecosystem .lifecycle-actions select {
  min-width: 0;
  max-width: 100%;
}

/* Pemetaan Peran & Kewenangan */
.ypia-ecosystem .role-map-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.ypia-ecosystem .role-map-filter > form {
  min-width: 0;
  margin: 0;
}

.ypia-ecosystem .role-map-row {
  display: grid !important;
  grid-template-columns: minmax(235px, .82fr) minmax(360px, 1.35fr) minmax(215px, .58fr) !important;
  gap: 16px !important;
  align-items: start !important;
  min-width: 0;
  padding: 16px !important;
}

.ypia-ecosystem .role-map-row > * {
  min-width: 0;
}

.ypia-ecosystem .role-map-transition {
  min-width: 0;
}

.ypia-ecosystem .role-map-transition > span {
  min-width: 0;
}

.ypia-ecosystem .role-map-actions {
  min-width: 0;
}

.ypia-ecosystem .role-map-actions form,
.ypia-ecosystem .role-map-actions input,
.ypia-ecosystem .role-map-actions .btn {
  min-width: 0;
  max-width: 100%;
}

.ypia-ecosystem .role-map-actions .btn {
  white-space: normal;
  text-align: center;
}

/* Jangan izinkan kelas generik lama menimpa grid view asli. */
.ypia-ecosystem .core-admin-page .lifecycle-row.lifecycle-card,
.ypia-ecosystem .core-admin-page .role-map-row.mapping-card {
  margin-top: 0;
}

@media (max-width: 1180px) {
  .ypia-ecosystem .core-account-row {
    grid-template-columns: auto minmax(240px, 1fr) minmax(160px, .55fr) minmax(190px, .72fr);
  }

  .ypia-ecosystem .core-account-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }

  .ypia-ecosystem .lifecycle-row,
  .ypia-ecosystem .role-map-row {
    grid-template-columns: minmax(230px, .82fr) minmax(0, 1.18fr) !important;
  }

  .ypia-ecosystem .lifecycle-actions,
  .ypia-ecosystem .role-map-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  .ypia-ecosystem .lifecycle-actions > *,
  .ypia-ecosystem .role-map-actions > * {
    min-width: 0;
  }

  .ypia-ecosystem .core-guardrails {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ypia-ecosystem .core-admin-page :is(.core-account-kpis,.lifecycle-kpis,.role-map-kpis) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ypia-ecosystem .core-admin-page :is(.core-account-filter,.lifecycle-filter) form,
  .ypia-ecosystem .core-admin-page .role-map-filter > form:first-child {
    grid-template-columns: minmax(0, 1fr) minmax(175px, .45fr);
  }

  .ypia-ecosystem .core-admin-page :is(.core-account-filter,.lifecycle-filter) form > :last-child,
  .ypia-ecosystem .core-admin-page .role-map-filter > form:first-child > button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .ypia-ecosystem .role-map-filter {
    grid-template-columns: minmax(0, 1fr);
  }

  .ypia-ecosystem .core-account-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ypia-ecosystem .core-account-meta,
  .ypia-ecosystem .core-account-coreid,
  .ypia-ecosystem .core-account-actions {
    grid-column: 2;
  }

  .ypia-ecosystem .lifecycle-row,
  .ypia-ecosystem .role-map-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ypia-ecosystem .lifecycle-actions,
  .ypia-ecosystem .role-map-actions {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .ypia-ecosystem .core-admin-page {
    gap: 13px;
  }

  .ypia-ecosystem .core-admin-page > .page-head .button-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .ypia-ecosystem .core-admin-page > .page-head .button-row .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }

  .ypia-ecosystem .core-admin-page :is(.core-account-kpis,.lifecycle-kpis,.role-map-kpis) {
    grid-template-columns: minmax(0, 1fr);
  }

  .ypia-ecosystem .core-admin-page :is(.core-account-filter,.lifecycle-filter) form,
  .ypia-ecosystem .core-admin-page .role-map-filter > form:first-child {
    grid-template-columns: minmax(0, 1fr);
  }

  .ypia-ecosystem .core-admin-page :is(.core-account-filter,.lifecycle-filter) form > :last-child,
  .ypia-ecosystem .core-admin-page .role-map-filter > form:first-child > button {
    grid-column: auto;
    width: 100%;
  }

  .ypia-ecosystem .core-account-filter .button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ypia-ecosystem .core-account-row {
    gap: 10px;
    padding: 12px;
  }

  .ypia-ecosystem .core-account-meta,
  .ypia-ecosystem .core-account-coreid,
  .ypia-ecosystem .core-account-actions {
    grid-column: 1 / -1;
  }

  .ypia-ecosystem .core-account-actions {
    display: grid;
    width: 100%;
  }

  .ypia-ecosystem .core-account-actions :is(form,.btn,.status-pill) {
    width: 100%;
  }

  .ypia-ecosystem .core-guardrails {
    grid-template-columns: minmax(0, 1fr);
  }

  .ypia-ecosystem .lifecycle-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .ypia-ecosystem .lifecycle-actions,
  .ypia-ecosystem .role-map-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .ypia-ecosystem .role-map-transition {
    grid-template-columns: minmax(0, 1fr);
  }

  .ypia-ecosystem .role-map-transition i {
    transform: rotate(90deg);
    justify-self: start;
  }
}

/* === SIMPEL v0.16.7 — Student identity-safe card layout === */
.ypia-ecosystem .students-list-card {
  container-type: inline-size;
}

.ypia-ecosystem .student-record-card {
  grid-template-columns: minmax(280px, .95fr) minmax(0, 1.45fr);
  align-items: start;
}

.ypia-ecosystem .student-record-main {
  align-items: flex-start;
  min-width: 0;
}

.ypia-ecosystem .student-record-identity,
.ypia-ecosystem .student-record-title {
  min-width: 0;
  width: 100%;
}

.ypia-ecosystem .student-record-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  align-items: start;
}

.ypia-ecosystem .student-record-title h2 {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.28;
}

.ypia-ecosystem .student-record-badges {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

.ypia-ecosystem .student-record-badges .badge {
  max-width: 100%;
  white-space: normal;
  line-height: 1.2;
}

.ypia-ecosystem .student-record-meta {
  align-self: stretch;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.ypia-ecosystem .student-record-meta > div {
  min-height: 68px;
}

.ypia-ecosystem .student-record-actions,
.ypia-ecosystem .student-attention-list {
  grid-column: 1 / -1;
}

.ypia-ecosystem .student-record-actions {
  justify-content: flex-end;
  width: 100%;
  padding-top: 2px;
}

@container (max-width: 760px) {
  .ypia-ecosystem .student-record-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .ypia-ecosystem .student-record-meta,
  .ypia-ecosystem .student-record-actions,
  .ypia-ecosystem .student-attention-list {
    grid-column: auto;
  }

  .ypia-ecosystem .student-record-meta {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 640px) {
  .ypia-ecosystem .student-record-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
  }

  .ypia-ecosystem .student-record-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 390px) {
  .ypia-ecosystem .student-record-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ================================================================
   v0.16.8 — HAPUS IKON BERANDA DARI AREA IDENTITAS/LOGO
   Ikon dashboard hanya boleh berada pada item menu .nav-link.
   ================================================================ */
.ypia-ecosystem .sidebar-brand > a > .ypia-icon,
.ypia-ecosystem .sidebar-brand > a > [data-ypia-icon="dashboard"],
.ypia-ecosystem .sidebar-brand > a > .ypia-icon-legacy,
.ypia-ecosystem .sidebar-brand > .ypia-icon,
.ypia-ecosystem .sidebar-brand > [data-ypia-icon="dashboard"],
.ypia-ecosystem [data-brand-zone="sidebar"] > .ypia-icon,
.ypia-ecosystem [data-brand-zone="sidebar"] > [data-ypia-icon="dashboard"],
.ypia-ecosystem [data-no-nav-icon] > .ypia-icon,
.ypia-ecosystem [data-no-nav-icon] > [data-ypia-icon="dashboard"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.ypia-ecosystem .sidebar-brand-link {
  margin-inline-start: 0 !important;
}

/* SIMPEL v0.16.11 — Login SSO-first */
.ypia-ecosystem .sso-first-login .login-card{width:min(470px,100%)}
.ypia-ecosystem .sso-first-login .login-card-brand{margin-bottom:22px}
.ypia-ecosystem .login-intro{margin-bottom:20px}
.ypia-ecosystem .login-kicker{display:block;margin-bottom:7px;color:var(--primary);font-size:.66rem;font-weight:900;letter-spacing:.13em}
.ypia-ecosystem .sso-first-login .login-intro h2{margin:0 0 8px;font-size:2.15rem;font-weight:900;letter-spacing:-.055em}
.ypia-ecosystem .sso-first-login .login-intro p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.ypia-ecosystem .sso-primary-card{position:relative;overflow:hidden;margin-top:4px;padding:20px;border:1px solid color-mix(in srgb,var(--primary) 25%,var(--line));border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),var(--surface));box-shadow:0 14px 35px color-mix(in srgb,var(--primary) 10%,transparent)}
.ypia-ecosystem .sso-primary-card::after{content:"";position:absolute;width:170px;height:170px;right:-95px;top:-105px;border-radius:50%;background:color-mix(in srgb,var(--primary) 10%,transparent);pointer-events:none}
.ypia-ecosystem .sso-primary-head{position:relative;z-index:1;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:start;gap:13px}
.ypia-ecosystem .sso-primary-mark{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:var(--primary);color:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 28%,transparent)}
.ypia-ecosystem .sso-primary-mark svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ypia-ecosystem .sso-recommended{display:block;margin:1px 0 4px;color:var(--primary);font-size:.59rem;font-weight:900;letter-spacing:.11em}
.ypia-ecosystem .sso-primary-head h3{margin:0;font-size:1.25rem;font-weight:900;letter-spacing:-.035em}
.ypia-ecosystem .sso-primary-head p{margin:5px 0 0;color:var(--muted);font-size:.76rem;line-height:1.48}
.ypia-ecosystem .sso-button-primary{position:relative;z-index:1;min-height:54px;margin-top:18px;border-radius:15px;font-size:.94rem;box-shadow:0 12px 28px color-mix(in srgb,var(--primary) 28%,transparent)}
.ypia-ecosystem .sso-button-primary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.ypia-ecosystem .sso-button-primary:hover svg{transform:translateX(3px)}
.ypia-ecosystem .sso-benefits{position:relative;z-index:1;display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:12px}
.ypia-ecosystem .sso-benefits span{display:inline-flex;align-items:center;min-height:26px;padding:4px 9px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 80%,transparent);color:var(--muted);font-size:.62rem;font-weight:760}
.ypia-ecosystem .local-login-fallback{margin-top:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);transition:border-color .18s ease,background .18s ease}
.ypia-ecosystem .local-login-fallback[open]{border-color:color-mix(in srgb,var(--primary) 18%,var(--line));background:var(--surface-2)}
.ypia-ecosystem .local-login-fallback>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;cursor:pointer;color:var(--muted)}
.ypia-ecosystem .local-login-fallback>summary::-webkit-details-marker{display:none}
.ypia-ecosystem .local-login-fallback>summary span:first-child{display:flex;min-width:0;flex-direction:column;gap:3px}
.ypia-ecosystem .local-login-fallback>summary b{color:var(--text);font-size:.78rem}
.ypia-ecosystem .local-login-fallback>summary small{font-size:.65rem;line-height:1.35}
.ypia-ecosystem .local-login-chevron{flex:0 0 auto;width:20px;height:20px;display:grid;place-items:center;transition:transform .18s ease}
.ypia-ecosystem .local-login-chevron svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ypia-ecosystem .local-login-fallback[open] .local-login-chevron{transform:rotate(180deg)}
.ypia-ecosystem .local-login-content{padding:2px 15px 16px;border-top:1px solid var(--line)}
.ypia-ecosystem .local-login-content-primary{margin-top:16px;padding:17px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.ypia-ecosystem .local-login-heading{display:flex;flex-direction:column;gap:4px;margin-bottom:3px}
.ypia-ecosystem .local-login-heading b{font-size:.9rem}
.ypia-ecosystem .local-login-heading small{color:var(--muted);font-size:.7rem}
.ypia-ecosystem .local-login-form label{margin-top:13px;font-size:.77rem}
.ypia-ecosystem .local-login-form input{min-height:44px;background:var(--surface)}
.ypia-ecosystem .local-login-submit{min-height:44px;margin-top:15px;background:transparent}
.ypia-ecosystem .local-login-content .login-help{margin:12px 2px 0;text-align:left}
.ypia-ecosystem .login-sso-disabled{margin-top:16px;font-size:.78rem;line-height:1.5}
@media(max-width:520px){
  .ypia-ecosystem .sso-first-login .login-panel{padding:16px 12px}
  .ypia-ecosystem .sso-first-login .login-card{padding:22px 18px;border-radius:22px}
  .ypia-ecosystem .sso-primary-card{padding:17px}
  .ypia-ecosystem .sso-primary-head{grid-template-columns:43px minmax(0,1fr);gap:11px}
  .ypia-ecosystem .sso-primary-mark{width:43px;height:43px;border-radius:13px}
  .ypia-ecosystem .sso-benefits{justify-content:flex-start}
}

/* SIMPEL v0.16.12 — jam shift berbeda menurut hari */
.ypia-ecosystem .industry-shift-summary em{
  display:inline-flex;
  width:max-content;
  margin-top:7px;
  padding:4px 8px;
  border-radius:999px;
  background:color-mix(in srgb,var(--primary) 10%,var(--surface));
  color:var(--primary);
  font-size:.66rem;
  font-style:normal;
  font-weight:850;
}
.ypia-ecosystem .industry-shift-modal{width:min(920px,100%)}
.ypia-ecosystem .industry-shift-section{
  margin-top:22px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface-2);
}
.ypia-ecosystem .industry-shift-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.ypia-ecosystem .industry-shift-section-head h3{margin:3px 0 0}
.ypia-ecosystem .industry-shift-section-head>small{
  max-width:290px;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.45;
  text-align:right;
}
.ypia-ecosystem .weekday-shift-panel{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  overflow:hidden;
}
.ypia-ecosystem .weekday-shift-panel>summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  cursor:pointer;
  user-select:none;
}
.ypia-ecosystem .weekday-shift-panel>summary::-webkit-details-marker{display:none}
.ypia-ecosystem .weekday-shift-panel>summary span{display:flex;flex-direction:column;gap:3px}
.ypia-ecosystem .weekday-shift-panel>summary small{color:var(--muted);font-weight:550}
.ypia-ecosystem .weekday-shift-panel>summary em{
  flex:0 0 auto;
  padding:5px 9px;
  border-radius:999px;
  background:var(--surface-2);
  color:var(--muted);
  font-size:.7rem;
  font-style:normal;
  font-weight:850;
}
.ypia-ecosystem .weekday-shift-panel[open]>summary{
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--primary) 5%,var(--surface));
}
.ypia-ecosystem .weekday-shift-content{padding:17px}
.ypia-ecosystem .weekday-shift-content .alert.compact{
  padding:11px 13px;
  margin:0 0 14px;
  font-size:.76rem;
  line-height:1.45;
}
.ypia-ecosystem .weekday-shift-group{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:var(--surface);
}
.ypia-ecosystem .weekday-shift-group+.weekday-shift-group{margin-top:13px}
.ypia-ecosystem .weekday-shift-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  background:var(--surface-2);
}
.ypia-ecosystem .weekday-shift-heading small{
  color:var(--primary);
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.1em;
}
.ypia-ecosystem .weekday-shift-heading h4{margin:2px 0 0}
.ypia-ecosystem .weekday-shift-heading>span{color:var(--muted);font-size:.7rem}
.ypia-ecosystem .weekday-shift-grid{display:flex;flex-direction:column}
.ypia-ecosystem .weekday-shift-row{
  display:grid;
  grid-template-columns:minmax(82px,.55fr) repeat(3,minmax(120px,1fr));
  align-items:end;
  gap:10px;
  padding:10px 13px;
  border-top:1px solid var(--line);
}
.ypia-ecosystem .weekday-shift-row:first-child{border-top:0}
.ypia-ecosystem .weekday-shift-row>b{align-self:center;font-size:.82rem}
.ypia-ecosystem .weekday-shift-row label{margin:0;font-size:.68rem;color:var(--muted)}
.ypia-ecosystem .weekday-shift-row label span{display:block;margin-bottom:4px}
.ypia-ecosystem .weekday-shift-row input{padding:9px 10px;font-size:.82rem;border-radius:10px}
.ypia-ecosystem .shift-strip em{
  color:var(--primary);
  font-size:.62rem;
  font-style:normal;
  font-weight:800;
}

@media(max-width:760px){
  .ypia-ecosystem .industry-shift-section{padding:14px}
  .ypia-ecosystem .industry-shift-section-head{flex-direction:column;gap:5px}
  .ypia-ecosystem .industry-shift-section-head>small{text-align:left}
  .ypia-ecosystem .weekday-shift-panel>summary{align-items:flex-start;padding:14px}
  .ypia-ecosystem .weekday-shift-content{padding:12px}
  .ypia-ecosystem .weekday-shift-heading{align-items:flex-start;flex-direction:column;gap:4px}
  .ypia-ecosystem .weekday-shift-row{
    grid-template-columns:1fr 1fr;
    align-items:end;
  }
  .ypia-ecosystem .weekday-shift-row>b{grid-column:1/-1;padding-top:3px}
  .ypia-ecosystem .weekday-shift-row label:last-child{grid-column:1/-1}
}
.ypia-ecosystem .weekday-shift-content .alert-info{
  background:color-mix(in srgb,var(--primary) 9%,var(--surface));
  color:color-mix(in srgb,var(--primary) 82%,var(--text));
  border:1px solid color-mix(in srgb,var(--primary) 16%,var(--line));
}