* { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'Noto Sans', Arial, sans-serif; background:#F2F6FC; color:#1F2937; width:1480px; }
  .wrap { display:flex; min-height:1280px; }

  /* ============ SIDEBAR ============ */
  .sidebar { width:270px; background:#fff; border-right:1px solid #E2E8F0; display:flex; flex-direction:column; flex-shrink:0; }
  .brand { display:flex; align-items:center; gap:10px; padding:16px 18px 14px; border-bottom:1px solid #F2F6FC; }
  .brand-logo { width:40px; height:40px; border-radius:11px; background:#1759C2; color:#E9C767; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:19px; }
  .brand-name { font-size:14.5px; font-weight:700; color:#0B1F3F; line-height:1.2; }
  .brand-domain { font-size:11px; color:#64748B; margin-top:2px; }
  .brand-domain .dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#16A34A; margin-right:4px; vertical-align:1px; }
  .menu { padding:10px 12px 6px; flex:1; }
  .group-title { font-size:10px; font-weight:700; letter-spacing:.12em; color:#94A3B8; padding:13px 10px 5px; display:flex; align-items:center; gap:6px; }
  .group-title .pro { background:#F5E7C1; color:#8A6D1B; font-size:8.5px; padding:1.5px 6px; border-radius:20px; letter-spacing:.06em; }
  .item { display:flex; align-items:center; gap:9px; padding:6.5px 10px; border-radius:8px; font-size:13px; color:#334155; margin-bottom:1px; }
  .item svg { width:16px; height:16px; stroke:#64748B; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
  .item.active { background:#E8F1FF; color:#1759C2; font-weight:700; }
  .item.active svg { stroke:#1759C2; }
  .item .badge { margin-left:auto; font-size:10px; font-weight:700; padding:1px 7px; border-radius:20px; color:#fff; background:#1759C2; }
  .item .badge.red { background:#DC2626; }
  .item .badge.amber { background:#D97706; }
  .item .tag { margin-left:auto; font-size:9px; font-weight:700; color:#8A6D1B; background:#FBF3D9; padding:1.5px 6px; border-radius:6px; }
  .item.locked { color:#94A3B8; }
  .item.locked svg { stroke:#B6C2CC; }
  .sub-card { margin:8px 12px 14px; background:linear-gradient(135deg,#1759C2,#267CFF); border-radius:12px; padding:13px 14px; color:#fff; }
  .sub-card .plan { font-size:12.5px; font-weight:700; }
  .sub-card .exp { font-size:11px; color:#BFE3DB; margin-top:2px; }
  .sub-card .btn { margin-top:9px; background:#FFFFFF; color:#1759C2; text-align:center; font-size:11.5px; font-weight:700; padding:6px; border-radius:8px; }
  .profile { display:flex; align-items:center; gap:9px; padding:11px 18px 15px; border-top:1px solid #F2F6FC; }
  .avatar { width:34px; height:34px; border-radius:50%; background:#1759C2; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
  .profile .nm { font-size:12.5px; font-weight:700; }
  .profile .rl { font-size:10.5px; color:#64748B; }

  /* ============ MAIN ============ */
  .main { flex:1; display:flex; flex-direction:column; }
  .topbar { background:#fff; border-bottom:1px solid #E2E8F0; padding:13px 26px; display:flex; align-items:center; gap:14px; }
  .search { flex:0 0 300px; background:#F1F5F9; border-radius:9px; padding:8px 13px; font-size:12.5px; color:#94A3B8; display:flex; gap:8px; align-items:center; }
  .search svg { width:15px; height:15px; stroke:#94A3B8; fill:none; stroke-width:2; }
  .top-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
  .chip { font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:20px; background:#E7F6EE; color:#15803D; border:1px solid #BBE7CB; }
  .icon-btn { width:36px; height:36px; border:1px solid #E2E8F0; border-radius:10px; display:flex; align-items:center; justify-content:center; position:relative; background:#fff; }
  .icon-btn svg { width:17px; height:17px; stroke:#475569; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .icon-btn .dot { position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:#DC2626; border:1.5px solid #fff; }
  .content { padding:22px 26px; }
  .page-title { font-size:21px; font-weight:800; color:#0F172A; }
  .page-sub { font-size:12.5px; color:#64748B; margin-top:3px; }
  .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px; }
  .stat { background:#fff; border:1px solid #E2E8F0; border-radius:14px; padding:15px 17px; }
  .stat .lbl { font-size:11px; font-weight:600; color:#64748B; letter-spacing:.03em; display:flex; justify-content:space-between; align-items:center; }
  .stat .lbl .ic { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
  .stat .lbl .ic svg { width:15px; height:15px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .stat .val { font-size:22px; font-weight:800; margin-top:7px; color:#0F172A; }
  .stat .note { font-size:11px; margin-top:3px; color:#64748B; }
  .stat .note b { color:#15803D; font-weight:700; }
  .stat .note .warn { color:#DC2626; font-weight:700; }
  .grid { display:grid; grid-template-columns:1fr 340px; gap:14px; margin-top:14px; align-items:start; }
  .card { background:#fff; border:1px solid #E2E8F0; border-radius:14px; padding:16px 18px; margin-bottom:14px; }
  .card h3 { font-size:14px; font-weight:800; color:#0F172A; display:flex; align-items:center; }
  .card h3 .link { margin-left:auto; font-size:11.5px; color:#1759C2; font-weight:700; }
  table { width:100%; border-collapse:collapse; margin-top:10px; }
  th { text-align:left; font-size:10.5px; color:#94A3B8; font-weight:700; letter-spacing:.05em; padding:7px 8px; border-bottom:1px solid #F2F6FC; }
  td { font-size:12.5px; padding:9px 8px; border-bottom:1px solid #F4F7F6; vertical-align:middle; }
  td .pk { font-weight:700; color:#0F172A; }
  td .sm { font-size:11px; color:#64748B; }
  .pill { font-size:10px; font-weight:700; padding:2.5px 9px; border-radius:20px; }
  .pill.green { background:#E7F6EE; color:#15803D; }
  .pill.amber { background:#FDF0DC; color:#B45309; }
  .pill.blue { background:#E3ECFD; color:#1D4ED8; }
  .seatbar { width:110px; height:7px; border-radius:6px; background:#E8EDEB; overflow:hidden; margin-top:4px; }
  .seatbar i { display:block; height:100%; background:#1759C2; border-radius:6px; }
  .rowline { display:flex; align-items:center; gap:10px; padding:9.5px 0; border-bottom:1px solid #F4F7F6; }
  .rowline:last-child { border-bottom:none; }
  .rowline .avatar { width:32px; height:32px; font-size:11px; }
  .rowline .who { flex:1; }
  .rowline .who .nm { font-size:12.5px; font-weight:700; }
  .rowline .who .sm { font-size:11px; color:#64748B; }
  .wa-btn { font-size:10.5px; font-weight:700; color:#15803D; background:#E7F6EE; padding:5px 10px; border-radius:8px; white-space:nowrap; }
  .amt { font-size:12.5px; font-weight:800; color:#0F172A; white-space:nowrap; }
  .amt .due { display:block; font-size:10px; color:#DC2626; font-weight:700; text-align:right; }
  .doc-item { margin-top:11px; }
  .doc-item .top { display:flex; font-size:12px; }
  .doc-item .top b { font-weight:700; }
  .doc-item .top span { margin-left:auto; color:#64748B; font-size:11px; }
  .docbar { height:7px; background:#E8EDEB; border-radius:6px; margin-top:5px; overflow:hidden; }
  .docbar i { display:block; height:100%; background:#D97706; }
  .bars { display:flex; align-items:flex-end; gap:16px; height:118px; margin-top:20px; padding:0 8px; }
  .bar-col { flex:1; text-align:center; }
  .bar-col .bar { background:linear-gradient(180deg,#267CFF,#1759C2); border-radius:7px 7px 0 0; margin:0 auto; width:34px; }
  .bar-col .bl { font-size:10.5px; color:#64748B; margin-top:7px; }
  .bar-col .bv { font-size:10.5px; font-weight:700; margin-bottom:5px; color:#0F172A; }

  /* ===== v3: menu induk + sub menu ===== */
  .parent { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px; font-size:13.5px; font-weight:600; color:#1F2937; margin-bottom:2px; }
  .parent svg.ic { width:17px; height:17px; stroke:#64748B; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
  .parent .chev { margin-left:auto; width:14px; height:14px; stroke:#94A3B8; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  .parent .badge { margin-left:auto; font-size:10px; font-weight:700; padding:1px 7px; border-radius:20px; color:#fff; background:#DC2626; }
  .parent .badge.amber { background:#D97706; }
  .parent .badge + .chev { margin-left:6px; }
  .parent .pro { background:#F5E7C1; color:#8A6D1B; font-size:8.5px; font-weight:700; padding:1.5px 6px; border-radius:20px; letter-spacing:.06em; margin-left:2px; }
  .parent.open { background:#EFF5FF; color:#1759C2; }
  .parent.open svg.ic { stroke:#1759C2; }
  .parent.plain.active { background:#E8F1FF; color:#1759C2; font-weight:700; }
  .parent.plain.active svg.ic { stroke:#1759C2; }
  .children { margin:2px 0 8px 21px; padding-left:14px; border-left:1.5px solid #E2E8F0; }
  .child { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; font-size:12.5px; color:#475569; margin-bottom:1px; position:relative; }
  .child::before { content:''; position:absolute; left:-15.5px; top:50%; width:9px; height:1.5px; background:#E2E8F0; }
  .child.active { background:#E8F1FF; color:#1759C2; font-weight:700; }
  .child .badge { margin-left:auto; font-size:10px; font-weight:700; padding:1px 7px; border-radius:20px; color:#fff; background:#D97706; }
  .menu-note { margin:10px 10px 0; font-size:10.5px; color:#94A3B8; line-height:1.5; padding:9px 10px; background:#F8FAFC; border-radius:9px; }

  /* ===== forms & public pages ===== */
  .btn-primary { display:inline-flex; align-items:center; gap:8px; background:#267CFF; color:#fff; font-weight:700; font-size:14px; padding:11px 22px; border-radius:10px; border:none; cursor:pointer; }
  .btn-primary:hover { background:#1759C2; }
  .btn-ghost { display:inline-flex; align-items:center; gap:8px; background:#fff; color:#1759C2; font-weight:700; font-size:14px; padding:11px 22px; border-radius:10px; border:1.5px solid #C7DEFF; cursor:pointer; }
  .field { margin-bottom:14px; }
  .field label { display:block; font-size:12.5px; font-weight:700; color:#0B1F3F; margin-bottom:6px; }
  .field input, .field select { width:100%; padding:11px 13px; border:1.5px solid #D8E2F0; border-radius:10px; font-size:14px; background:#fff; color:#1F2937; }
  .field input:focus, .field select:focus { outline:none; border-color:#267CFF; }
  .err { color:#DC2626; font-size:12px; margin-top:5px; }
  .alert-err { background:#FDECEC; color:#B91C1C; border-radius:10px; padding:11px 14px; font-size:13px; margin-bottom:16px; }
  .alert-ok { background:#E7F6EE; color:#15803D; border-radius:10px; padding:11px 14px; font-size:13px; margin-bottom:16px; }
  .auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:#F2F6FC; }
  .auth-card { background:#fff; border:1px solid #E3EAF4; border-radius:18px; padding:34px; width:100%; max-width:420px; box-shadow:0 12px 34px rgba(11,31,63,.07); }
  .logo-mark { width:52px; height:52px; border-radius:50%; background:#267CFF; color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; margin:0 auto 14px; }
  table td form { display:inline; }
  .mini-btn { font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:8px; border:none; cursor:pointer; background:#E8F1FF; color:#1759C2; }
  .mini-btn.green { background:#E7F6EE; color:#15803D; }
  .mini-btn.red { background:#FDECEC; color:#B91C1C; }
  .empty { text-align:center; color:#64748B; font-size:13.5px; padding:26px 10px; }
  a.parent, a.child { text-decoration:none; display:flex; }
  .flash { margin-bottom:16px; }