*,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    body {
      font-family: 'Outfit', 'Noto Sans TC', sans-serif;
      background: #EEF1F6;
      color: #1A2E5B;
      min-height: 100vh
    }

    ::-webkit-scrollbar {
      width: 4px
    }

    ::-webkit-scrollbar-track {
      background: #F1F5F9
    }

    ::-webkit-scrollbar-thumb {
      background: #CBD5E1;
      border-radius: 3px
    }

    @keyframes fadeSlide {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes slideUpTray {
      from {
        transform: translateY(100%)
      }

      to {
        transform: translateY(0)
      }
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .35
      }
    }

    @keyframes micRing {
      0% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, .7)
      }

      70% {
        box-shadow: 0 0 0 9px rgba(217, 119, 6, 0)
      }

      100% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, 0)
      }
    }

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes cardIn {
      from {
        opacity: 0;
        transform: translateY(14px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes sectionIn {
      from {
        opacity: 0;
        transform: translateY(6px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .pcard:hover {
      transform: translateY(-3px) !important;
      box-shadow: 0 8px 28px rgba(0, 0, 0, .1) !important
    }

    .cta-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(26, 46, 91, .42) !important
    }

    .nav-btn:hover {
      background: rgba(255, 255, 255, .07) !important
    }

    .omni:focus-within .omni-ring {
      opacity: 1 !important
    }

    .tech-section {
      animation: sectionIn .35s ease both
    }

    /* ── React Flow 方塊圖 ──────────────────────── */
    .reactflow-diagram {
      width: 100%;
      height: 480px;
      border: 1.5px solid #E2E8F0;
      border-radius: 14px;
      overflow: hidden;
      background: linear-gradient(135deg, #FAFBFC 0%, #F1F5F9 100%);
      margin: 16px 0;
      position: relative;
    }
    .reactflow-diagram .react-flow__node {
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }
    .reactflow-diagram .react-flow__node:hover {
      z-index: 10 !important;
    }
    .rf-node {
      padding: 12px 18px;
      border-radius: 12px;
      min-width: 140px;
      text-align: center;
      font-family: 'Outfit', 'Noto Sans TC', sans-serif;
      cursor: grab;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
      position: relative;
    }
    .rf-node:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
    }
    .rf-node-pmg {
      background: linear-gradient(135deg, #DBEAFE 0%, #EFF6FF 100%);
      border: 2px solid #2563EB;
      box-shadow: 0 2px 10px rgba(37,99,235,.12);
    }
    .rf-node-nopmg {
      background: linear-gradient(135deg, #F1F5F9 0%, #F8FAFC 100%);
      border: 2px dashed #94A3B8;
      box-shadow: 0 2px 8px rgba(0,0,0,.05);
    }
    .rf-node-label {
      font-size: 12px;
      font-weight: 700;
      color: #1A2E5B;
      line-height: 1.4;
    }
    .rf-node-brand {
      font-size: 10px;
      font-weight: 600;
      color: #2563EB;
      margin-top: 4px;
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: .03em;
    }
    .rf-node-nopmg .rf-node-brand {
      color: #64748B;
    }
    .rf-node-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 800;
      color: #fff;
    }
    .rf-node-pmg .rf-node-badge {
      background: linear-gradient(135deg, #2563EB, #1D4ED8);
    }
    .rf-node-nopmg .rf-node-badge {
      background: #94A3B8;
    }
    .rf-legend {
      position: absolute;
      bottom: 12px;
      left: 12px;
      display: flex;
      gap: 12px;
      padding: 6px 14px;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(8px);
      border-radius: 10px;
      border: 1px solid #E2E8F0;
      z-index: 5;
      font-size: 10px;
      font-weight: 600;
      color: #475569;
      font-family: 'Outfit', sans-serif;
    }
    .rf-legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      display: inline-block;
      margin-right: 4px;
      vertical-align: middle;
    }
    .react-flow__edge-text {
      font-size: 10px !important;
      font-weight: 600 !important;
      fill: #475569 !important;
    }
    .react-flow__edge-textbg {
      fill: rgba(255,255,255,.85) !important;
      rx: 4 !important;
      ry: 4 !important;
    }
    .react-flow__controls {
      border-radius: 10px !important;
      box-shadow: 0 2px 12px rgba(0,0,0,.1) !important;
      border: 1px solid #E2E8F0 !important;
    }
    .react-flow__controls-button {
      border-bottom: 1px solid #F1F5F9 !important;
    }

    /* ── Login Screen ──────────────────────────── */
    #login-screen {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #0D1117 0%, #1A2E5B 50%, #2D4A8A 100%);
      position: relative;
      overflow: hidden;
    }
    #login-screen::before {
      content: '';
      position: absolute;
      top: -50%; left: -50%;
      width: 200%; height: 200%;
      background: radial-gradient(ellipse at 30% 20%, rgba(217,119,6,.12) 0%, transparent 50%),
                  radial-gradient(ellipse at 70% 80%, rgba(37,99,235,.1) 0%, transparent 50%);
      animation: loginBgShift 12s ease-in-out infinite alternate;
    }
    @keyframes loginBgShift {
      from { transform: translate(0, 0) rotate(0deg); }
      to   { transform: translate(-3%, 2%) rotate(2deg); }
    }
    .login-card {
      position: relative; z-index: 2;
      background: rgba(255,255,255,.06);
      backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 24px;
      padding: 48px 40px;
      width: 400px; max-width: 92vw;
      box-shadow: 0 24px 80px rgba(0,0,0,.4);
      animation: cardIn .5s cubic-bezier(.16,1,.3,1) both;
    }
    .login-card h1 {
      font-size: 22px; font-weight: 800; color: #fff;
      margin-bottom: 4px; letter-spacing: .03em;
    }
    .login-card .subtitle {
      font-size: 11px; color: rgba(255,255,255,.5);
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: .12em; text-transform: uppercase;
      margin-bottom: 32px;
    }
    .login-field {
      margin-bottom: 18px;
    }
    .login-field label {
      display: block; font-size: 11px; font-weight: 700;
      color: rgba(255,255,255,.6); margin-bottom: 6px;
      letter-spacing: .05em;
    }
    .login-field input {
      width: 100%; padding: 12px 16px;
      border-radius: 12px; border: 1.5px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.08); color: #fff;
      font-size: 14px; font-family: 'Outfit', sans-serif;
      outline: none; transition: border-color .2s, box-shadow .2s;
    }
    .login-field input::placeholder { color: rgba(255,255,255,.3); }
    .login-field input:focus {
      border-color: #D97706;
      box-shadow: 0 0 0 3px rgba(217,119,6,.2);
    }
    .login-btn {
      width: 100%; padding: 13px;
      border-radius: 14px; border: none;
      background: linear-gradient(135deg, #D97706, #F59E0B);
      color: #fff; font-size: 14px; font-weight: 800;
      cursor: pointer; letter-spacing: .04em;
      box-shadow: 0 6px 24px rgba(217,119,6,.35);
      transition: transform .15s, box-shadow .15s;
    }
    .login-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 32px rgba(217,119,6,.45);
    }
    .login-btn:active { transform: translateY(0); }
    .login-btn:disabled {
      opacity: .6; cursor: not-allowed; transform: none;
      box-shadow: none;
    }
    .login-error {
      background: rgba(220,38,38,.15); border: 1px solid rgba(220,38,38,.3);
      color: #FCA5A5; border-radius: 10px; padding: 10px 14px;
      font-size: 12px; font-weight: 600; margin-bottom: 16px;
      display: none; animation: fadeSlide .25s ease;
    }
    .login-error.show { display: block; }
    .login-success {
      background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.3);
      color: #6EE7B7; border-radius: 10px; padding: 10px 14px;
      font-size: 12px; font-weight: 600; margin-bottom: 16px;
      display: none; animation: fadeSlide .25s ease;
    }
    .login-success.show { display: block; }
    .login-link {
      color: rgba(255,255,255,.5); font-size: 12px;
      text-decoration: none; cursor: pointer;
      transition: color .2s;
    }
    .login-link:hover { color: #D97706; }
    .login-footer {
      display: flex; justify-content: space-between; align-items: center;
      margin-top: 16px;
    }
    .logout-btn {
      padding: 5px 13px; font-size: 11px; font-weight: 600;
      border: 1.5px solid #E2E8F0; border-radius: 7px;
      background: #fff; color: #64748B; cursor: pointer;
      transition: background .15s, color .15s;
    }
    .logout-btn:hover { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }