/* ============================================================
       DESIGN TOKENS — Enterprise Banking Theme
       ============================================================ */
    :root{
      --primary:#123EAB;
      --primary-dark:#0c2d7a;
      --primary-light:#3D63D8;
      --secondary:#2F80ED;
      --accent:#F59E0B;
      --accent-dark:#D97F06;
      --success:#22C55E;
      --success-soft:#ECFDF3;
      --success-border:#BBF7D0;
      --bg:#F5F7FC;
      --card:#FFFFFF;
      --card-glass:rgba(255,255,255,.68);
      --ink:#0F172A;
      --ink-soft:#64748B;
      --ink-faint:#94A3B8;
      --line:#E7ECF4;
      --line-soft:rgba(226,232,240,.6);
      --danger:#EF4444;
      --danger-soft:#FEF2F2;
      --radius:20px;
      --radius-sm:12px;
      --radius-lg:26px;
      /* layered, low-opacity shadows read as "premium" instead of a single hard drop shadow */
      --shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 20px -8px rgba(15,23,42,.06), 0 24px 48px -20px rgba(18,62,171,.10);
      --shadow-hover:0 2px 4px rgba(15,23,42,.05), 0 16px 28px -8px rgba(15,23,42,.08), 0 32px 64px -20px rgba(18,62,171,.18);
      --shadow-btn:0 1px 2px rgba(12,45,122,.15), 0 12px 24px -6px rgba(18,62,171,.35), 0 24px 40px -16px rgba(18,62,171,.28);
      --input-h:56px;
      /* 4px base spacing scale, used throughout for consistency */
      --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:72px;
      --transition:0.25s cubic-bezier(.4,0,.2,1);
      --transition-slow:0.45s cubic-bezier(.16,1,.3,1);
    }
    @media (prefers-reduced-motion: reduce){
      *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
    }

    /* ============================================================
       BASE & BACKGROUND DECORATIONS
       ============================================================ */
    *,*::before,*::after{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    :focus-visible{
      outline:2.5px solid var(--secondary);
      outline-offset:2px;
      border-radius:4px;
    }
    body{
      margin:0;
      font-family:'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
      color:var(--ink);
      background:
        radial-gradient(1200px 800px at 8% -10%, rgba(47,128,237,.16) 0%, transparent 55%),
        radial-gradient(900px 700px at 100% 0%, rgba(18,62,171,.12) 0%, transparent 50%),
        radial-gradient(1000px 900px at 50% 120%, rgba(245,158,11,.06) 0%, transparent 60%),
        var(--bg);
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      min-height:100vh;
      position:relative;
      overflow-x:hidden;
    }
    body::before,
    body::after{
      content:"";
      position:fixed;
      border-radius:50%;
      pointer-events:none;
      z-index:0;
      filter:blur(80px);
      opacity:.5;
    }
    body::before{
      width:480px; height:480px;
      top:-160px; left:-120px;
      background:radial-gradient(circle, rgba(47,128,237,.30) 0%, transparent 70%);
    }
    body::after{
      width:420px; height:420px;
      bottom:-120px; right:-80px;
      background:radial-gradient(circle, rgba(18,62,171,.20) 0%, transparent 70%);
    }
    .bg-dots{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:0;
      background-image:
        radial-gradient(circle, rgba(18,62,171,.09) 1px, transparent 1px),
        radial-gradient(circle, rgba(47,128,237,.07) 1px, transparent 1px);
      background-size:30px 30px, 46px 46px;
      background-position:0 0, 15px 15px;
      opacity:.4;
      -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 40%, transparent 85%);
      mask-image:linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 40%, transparent 85%);
    }
    /* floating ambient dots — a quiet, deliberate signature rather than a busy pattern */
    .bg-float{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:0;
      overflow:hidden;
    }
    .bg-float span{
      position:absolute;
      display:block;
      border-radius:50%;
      background:radial-gradient(circle at 35% 35%, rgba(47,128,237,.5), rgba(18,62,171,.05) 70%);
      animation:floatY 14s ease-in-out infinite;
    }
    .bg-float span:nth-child(1){ width:10px; height:10px; top:18%; left:6%; animation-delay:0s; }
    .bg-float span:nth-child(2){ width:6px; height:6px; top:32%; left:92%; animation-delay:2.4s; }
    .bg-float span:nth-child(3){ width:8px; height:8px; top:68%; left:10%; animation-delay:4.8s; }
    .bg-float span:nth-child(4){ width:5px; height:5px; top:82%; left:88%; animation-delay:1.2s; }
    .bg-float span:nth-child(5){ width:7px; height:7px; top:52%; left:4%; animation-delay:6s; }
    @keyframes floatY{
      0%,100%{ transform:translateY(0) scale(1); opacity:.5; }
      50%{ transform:translateY(-18px) scale(1.15); opacity:.85; }
    }
    .page{
      position:relative;
      z-index:1;
      max-width:960px;
      margin:0 auto;
      padding:var(--sp-8) var(--sp-5) var(--sp-10);
    }

    /* ============================================================
       HERO SECTION
       ============================================================ */
    .hero{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:var(--sp-7);
      align-items:center;
      margin-bottom:var(--sp-8);
      animation:fadeIn .7s cubic-bezier(.16,1,.3,1) both;
    }
    .hero-left{ min-width:0; }
    .logo-wrap{
      margin-bottom:var(--sp-6);
      display:inline-flex;
      align-items:center;
      padding:10px 16px;
      background:rgba(255,255,255,.78);
      backdrop-filter:blur(14px) saturate(160%);
      -webkit-backdrop-filter:blur(14px) saturate(160%);
      border:1px solid rgba(255,255,255,.9);
      border-radius:var(--radius-sm);
      box-shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 24px rgba(15,23,42,.07);
    }
    .logo-wrap img{
      max-height:52px;
      max-width:230px;
      width:auto;
      height:auto;
      object-fit:contain;
      display:block;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--accent-dark);
      font-size:11px;
      font-weight:700;
      letter-spacing:.24em;
      text-transform:uppercase;
      margin-bottom:var(--sp-3);
    }
    .eyebrow::before{
      content:"";
      width:6px; height:6px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 4px rgba(245,158,11,.18);
    }
    .hero h1{
      margin:0 0 var(--sp-3);
      font-size:clamp(28px, 4.6vw, 40px);
      font-weight:700;
      line-height:1.12;
      letter-spacing:-.03em;
      background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 60%, var(--secondary) 100%);
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .hero-desc{
      margin:0;
      font-size:14.5px;
      line-height:1.7;
      color:var(--ink-soft);
      max-width:460px;
      font-weight:400;
    }
    .hero-art{
      display:flex;
      align-items:center;
      justify-content:center;
      animation:fadeIn .9s cubic-bezier(.16,1,.3,1) .15s both, floatArt 7s ease-in-out 1s infinite;
    }
    .hero-art svg{
      width:100%;
      max-width:300px;
      height:auto;
      filter:drop-shadow(0 22px 36px rgba(18,62,171,.16));
    }
    @keyframes floatArt{
      0%,100%{ transform:translateY(0); }
      50%{ transform:translateY(-8px); }
    }

    /* ============================================================
       FORM CARDS
       ============================================================ */
    .wrap{ max-width:100%; }
    .card{
      position:relative;
      background:var(--card-glass);
      backdrop-filter:blur(22px) saturate(160%);
      -webkit-backdrop-filter:blur(22px) saturate(160%);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
      border:1px solid rgba(255,255,255,.7);
      padding:var(--sp-7) var(--sp-7) var(--sp-6);
      margin-bottom:var(--sp-6);
      transition:transform var(--transition-slow), box-shadow var(--transition-slow), border-color var(--transition);
      animation:fadeIn .6s cubic-bezier(.16,1,.3,1) both;
      overflow:hidden;
      isolation:isolate;
    }
    /* hairline top sheen — a quiet glass highlight instead of a decorative border */
    .card::before{
      content:"";
      position:absolute;
      inset:0 0 auto 0;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
      z-index:1;
    }
    .card::after{
      content:"";
      position:absolute;
      top:-60%; right:-20%;
      width:60%; height:220%;
      background:radial-gradient(circle, rgba(47,128,237,.05) 0%, transparent 65%);
      pointer-events:none;
      z-index:-1;
    }
    .card:nth-of-type(1){ animation-delay:.05s; }
    .card:nth-of-type(2){ animation-delay:.12s; }
    .card:nth-of-type(3){ animation-delay:.19s; }
    .card:hover{
      transform:translateY(-3px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(255,255,255,.95);
    }
    .card-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:var(--sp-4);
      margin-bottom:var(--sp-6);
      padding-bottom:var(--sp-5);
      border-bottom:1px solid var(--line-soft);
    }
    .card-head-main{ flex:1; min-width:0; }
    .section-title{
      display:flex;
      align-items:center;
      gap:var(--sp-3);
      margin:0 0 var(--sp-2);
      font-size:19px;
      font-weight:700;
      color:var(--ink);
      line-height:1.2;
      letter-spacing:-.01em;
    }
    .section-title .num{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:36px;
      height:36px;
      border-radius:50%;
      font-size:15px;
      font-weight:800;
      flex-shrink:0;
      position:relative;
    }
    .section-title .num::after{
      content:"";
      position:absolute;
      inset:-4px;
      border-radius:50%;
      border:1.5px dashed currentColor;
      opacity:.25;
    }
    .card--step1 .section-title .num{
      background:linear-gradient(135deg, rgba(47,128,237,.16), rgba(47,128,237,.06));
      color:var(--secondary);
    }
    .card--step2 .section-title .num{
      background:linear-gradient(135deg, rgba(34,197,94,.16), rgba(34,197,94,.06));
      color:var(--success);
    }
    .card--step3 .section-title .num{
      background:linear-gradient(135deg, rgba(245,158,11,.18), rgba(245,158,11,.06));
      color:var(--accent-dark);
    }
    .card-desc{
      margin:0;
      padding-left:48px;
      font-size:13px;
      color:var(--ink-soft);
      line-height:1.55;
    }
    .card-icon{
      width:46px;
      height:46px;
      border-radius:15px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
    }
    .card-icon svg{ width:21px; height:21px; stroke-width:1.75; }
    .card-icon--blue{ background:linear-gradient(150deg, rgba(47,128,237,.16), rgba(47,128,237,.05)); color:var(--secondary); }
    .card-icon--green{ background:linear-gradient(150deg, rgba(34,197,94,.16), rgba(34,197,94,.05)); color:var(--success); }
    .card-icon--amber{ background:linear-gradient(150deg, rgba(245,158,11,.2), rgba(245,158,11,.06)); color:var(--accent-dark); }

    /* ============================================================
       FORM FIELDS & INPUTS
       ============================================================ */
    label{
      display:block;
      font-size:12.5px;
      font-weight:600;
      color:var(--ink);
      margin:0 0 var(--sp-2);
      letter-spacing:.01em;
    }
    .field{ margin-bottom:4px; }
    .field + .field,
    .field + .select-wrap,
    .select-wrap + #bankSumberWrap,
    #bankSumberWrap + #entriesContainer,
    #entriesContainer + .add-btn{
      margin-top:var(--sp-5);
    }
    .input-shell,
    .select-shell{
      position:relative;
    }
    .input-shell .field-icon,
    .select-shell .field-icon{
      position:absolute;
      left:16px;
      top:50%;
      transform:translateY(-50%);
      width:19px;
      height:19px;
      stroke-width:1.75;
      color:var(--ink-faint);
      pointer-events:none;
      z-index:1;
      transition:color var(--transition), transform var(--transition);
    }
    .input-shell:focus-within .field-icon,
    .select-shell:focus-within .field-icon{
      color:var(--secondary);
      transform:translateY(-50%) scale(1.08);
    }
    input[type=text],
    input[type=number],
    select{
      width:100%;
      height:var(--input-h);
      padding:0 var(--sp-4);
      border:1.5px solid var(--line);
      border-radius:var(--radius-sm);
      font-size:14px;
      font-family:inherit;
      font-weight:500;
      color:var(--ink);
      background:rgba(255,255,255,.75);
      backdrop-filter:blur(4px);
      transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition);
    }
    .input-shell input[type=text],
    .input-shell input[type=number]{
      padding-left:48px;
    }
    .select-shell select{
      padding-left:var(--sp-4);
      padding-right:44px;
      appearance:none;
      -webkit-appearance:none;
      cursor:pointer;
    }
    .select-shell::after{
      content:"";
      position:absolute;
      right:18px;
      top:50%;
      width:9px;
      height:9px;
      border-right:2px solid var(--ink-faint);
      border-bottom:2px solid var(--ink-faint);
      transform:translateY(-65%) rotate(45deg);
      pointer-events:none;
      transition:border-color var(--transition), transform var(--transition);
    }
    .select-shell:focus-within::after{
      border-color:var(--secondary);
    }

    /* Keeps an element functional (focusable, part of form value/validation) while
       removing it entirely from the visual layout — used for the native <select>
       that backs the segmented card selector below. */
    .visually-hidden{
      position:absolute;
      width:1px; height:1px;
      padding:0; margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }

    /* ============================================================
       SEGMENTED CARD SELECTOR (Tipe Transaksi)
       ============================================================ */
    .segmented-select{
      display:flex;
      gap:var(--sp-3);
      align-items:stretch;
    }
    .segment-card{
      flex:1;
      display:flex;
      flex-direction:column;
      gap:4px;
      text-align:left;
      padding:var(--sp-4) var(--sp-4);
      background:#F8F9FB;
      border:1.5px solid #E7E9EF;
      border-radius:var(--radius-sm);
      font-family:inherit;
      cursor:pointer;
      transition:background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    }
    .segment-title{
      font-size:13.5px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.04em;
      color:var(--ink);
    }
    .segment-desc{
      font-size:12px;
      font-weight:400;
      line-height:1.45;
      color:var(--ink-soft);
    }
    .segment-card:hover{
      border-color:#294A9F;
      transform:translateY(-1px);
    }
    .segment-card:active{ transform:translateY(0); }
    .segment-card.is-selected{
      background:#fff;
      border-color:#294A9F;
      box-shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 20px -8px rgba(41,74,159,.25);
    }
    .segment-card.is-selected .segment-title{ color:#294A9F; }
    .segmented-select.is-invalid .segment-card{
      border-color:var(--danger);
      background:var(--danger-soft);
      animation:shake .35s ease;
    }
    @media (max-width:640px){
      .segmented-select{ flex-direction:column; }
    }
    input[type=text]{ text-transform:uppercase; }
    input::placeholder{ color:var(--ink-faint); text-transform:none; font-weight:400; }
    input:hover,
    select:hover{
      border-color:#CBD5E1;
      background:#fff;
    }
    input:focus,
    select:focus{
      outline:none;
      border-color:var(--secondary);
      background:#fff;
      box-shadow:0 0 0 4px rgba(47,128,237,.12), 0 6px 16px -6px rgba(47,128,237,.25);
      transform:translateY(-1px);
    }
    input.valid{
      border-color:var(--success);
      background:var(--success-soft);
    }
    input.invalid{
      border-color:var(--danger);
      background:var(--danger-soft);
      animation:shake .35s ease;
    }
    @keyframes shake{
      0%,100%{ transform:translateX(0); }
      25%{ transform:translateX(-4px); }
      75%{ transform:translateX(4px); }
    }

    /* Dynamic entry rows (generated by JavaScript) */
    .entry-row{
      border:1.5px dashed #D7E1F2;
      border-radius:var(--radius-sm);
      padding:var(--sp-5) var(--sp-4) var(--sp-3);
      margin-top:var(--sp-4);
      background:linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(247,249,252,.6) 100%);
      position:relative;
      transition:border-color var(--transition);
      animation:fadeIn .35s cubic-bezier(.16,1,.3,1);
    }
    .entry-row:hover{ border-color:#BFD2F0; }
    .entry-row .entry-label{
      display:inline-block;
      font-size:11px;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--secondary);
      margin-bottom:8px;
    }
    .entry-row label{
      margin-top:12px;
    }
    .entry-row label:first-of-type{ margin-top:0; }
    .entry-row input[type=text],
    .entry-row input[type=number]{
      padding-left:16px;
    }
    .remove-btn{
      position:absolute;
      top:14px;
      right:14px;
      border:none;
      background:var(--danger-soft);
      color:var(--danger);
      font-family:inherit;
      font-size:11px;
      font-weight:700;
      padding:6px 12px;
      border-radius:999px;
      cursor:pointer;
      transition:background var(--transition), transform var(--transition);
    }
    .remove-btn:hover{
      background:#FEE2E2;
      transform:scale(1.03);
    }
    .lookup-status{
      font-size:12px;
      margin-top:8px;
      font-weight:600;
      display:none;
      line-height:1.5;
    }
    .lookup-status.loading{ color:var(--ink-soft); display:block; }
    .lookup-status.found{ color:#15803D; display:block; }
    .lookup-status.notfound{ color:var(--danger); display:block; }
    .sum-check{
      font-size:12px;
      margin-top:10px;
      padding:10px 12px;
      border-radius:12px;
      font-weight:600;
      display:none;
      line-height:1.5;
    }
    .sum-check.ok{
      display:block;
      background:var(--success-soft);
      color:#15803D;
      border:1px solid var(--success-border);
    }
    .sum-check.bad{
      display:block;
      background:var(--danger-soft);
      color:var(--danger);
      border:1px solid #FECACA;
    }

    /* ============================================================
       ADD BUTTON
       ============================================================ */
    .add-btn{
      width:100%;
      margin-top:var(--sp-4);
      padding:var(--sp-4);
      border:1.5px dashed rgba(47,128,237,.4);
      border-radius:var(--radius-sm);
      background:rgba(255,255,255,.6);
      color:var(--primary);
      font-family:inherit;
      font-size:13px;
      font-weight:700;
      letter-spacing:.01em;
      cursor:pointer;
      transition:all var(--transition);
    }
    .add-btn:hover:not(:disabled){
      background:rgba(47,128,237,.06);
      border-color:var(--secondary);
      transform:translateY(-1px);
      box-shadow:0 8px 20px -8px rgba(47,128,237,.3);
    }
    .add-btn:disabled{
      opacity:.45;
      cursor:not-allowed;
    }

    /* ============================================================
       UPLOAD AREA
       ============================================================ */
    .upload-box{
      border:2px dashed #CBD5E1;
      border-radius:var(--radius);
      padding:var(--sp-8) var(--sp-5) var(--sp-6);
      text-align:center;
      cursor:pointer;
      background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(247,249,252,.45) 100%);
      transition:all var(--transition-slow);
      position:relative;
      overflow:hidden;
    }
    .upload-box:hover{
      border-color:rgba(245,158,11,.6);
      background:linear-gradient(180deg, rgba(255,251,235,.7), rgba(255,251,235,.5));
      transform:translateY(-2px);
      box-shadow:0 16px 32px -12px rgba(245,158,11,.22);
    }
    .upload-box.has-file{
      border-color:var(--success);
      border-style:solid;
      background:var(--success-soft);
    }
    .upload-box.error{
      border-color:var(--danger);
      background:var(--danger-soft);
    }
    .upload-icon{
      width:58px;
      height:58px;
      margin:0 auto var(--sp-3);
      border-radius:50%;
      background:linear-gradient(150deg, rgba(245,158,11,.18), rgba(245,158,11,.06));
      color:var(--accent-dark);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
      transition:transform var(--transition);
    }
    .upload-box:hover .upload-icon{ transform:translateY(-3px) scale(1.05); }
    .upload-icon svg{ width:26px; height:26px; stroke-width:1.75; }
    #uploadLabel{
      font-size:14.5px;
      font-weight:600;
      color:var(--ink);
      margin-bottom:var(--sp-1);
    }
    .upload-box small{
      display:block;
      color:var(--ink-soft);
      font-size:12px;
    }
    .preview{
      margin:var(--sp-4) auto 0;
      max-width:100%;
      max-height:200px;
      border-radius:var(--radius-sm);
      display:none;
      box-shadow:0 16px 36px rgba(15,23,42,.14);
      border:3px solid #fff;
    }
    .error-text{
      font-size:12px;
      color:var(--danger);
      margin-top:10px;
      display:none;
      font-weight:600;
    }

    /* ============================================================
       SUBMIT & STATUS
       ============================================================ */
    .submit-btn{
      width:100%;
      height:58px;
      margin-top:var(--sp-2);
      border:none;
      border-radius:var(--radius-sm);
      background:linear-gradient(120deg, var(--primary-light) 0%, var(--primary) 45%, var(--primary-dark) 100%);
      background-size:200% 100%;
      background-position:0% 0%;
      color:#fff;
      font-family:inherit;
      font-size:15px;
      font-weight:700;
      cursor:pointer;
      letter-spacing:.01em;
      box-shadow:var(--shadow-btn);
      transition:transform var(--transition), box-shadow var(--transition), opacity var(--transition), background-position var(--transition-slow);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      position:relative;
      overflow:hidden;
    }
    .submit-btn::before{
      content:"";
      width:18px;
      height:18px;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4'/%3E%3C/svg%3E");
      background-size:contain;
      background-repeat:no-repeat;
      flex-shrink:0;
      position:relative;
      z-index:1;
    }
    .submit-btn span{ position:relative; z-index:1; }
    .submit-btn:hover:not(:disabled){
      transform:translateY(-2px);
      box-shadow:0 4px 8px rgba(12,45,122,.2), 0 20px 40px -10px rgba(18,62,171,.4);
      background-position:100% 0%;
    }
    .submit-btn:active:not(:disabled){ transform:translateY(0); }
    .submit-btn:disabled{
      opacity:.55;
      cursor:not-allowed;
      transform:none;
    }
    .status-msg{
      margin-top:var(--sp-5);
      padding:0;
      border-radius:var(--radius-sm);
      font-size:14px;
      font-weight:600;
      display:none;
      overflow:hidden;
      animation:fadeIn .4s cubic-bezier(.16,1,.3,1);
    }
    .status-msg.success{
      display:flex;
      align-items:flex-start;
      gap:var(--sp-4);
      padding:var(--sp-4) var(--sp-5);
      background:linear-gradient(135deg, rgba(236,253,243,.9), rgba(236,253,243,.6));
      backdrop-filter:blur(10px);
      border:1px solid var(--success-border);
      color:#166534;
      box-shadow:0 1px 2px rgba(34,197,94,.06), 0 14px 28px -10px rgba(34,197,94,.16);
    }
    .status-msg.success::before{
      content:"";
      width:24px;
      height:24px;
      flex-shrink:0;
      margin-top:1px;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322C55E' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
      background-size:contain;
      background-repeat:no-repeat;
    }
    .status-msg.error{
      display:block;
      padding:14px 16px;
      background:var(--danger-soft);
      border:1px solid #FECACA;
      color:#B91C1C;
    }
    .status-msg .trx-id,
    .trx-id{
      display:inline-block;
      margin-top:4px;
      padding:4px 10px;
      border-radius:8px;
      background:rgba(255,255,255,.75);
      font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size:12px;
      font-weight:700;
      color:var(--primary);
      letter-spacing:.02em;
    }
    .footer-note{
      text-align:center;
      color:var(--ink-faint);
      font-size:12px;
      margin-top:var(--sp-4);
      line-height:1.5;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:6px;
    }
    .footer-note::before{
      content:"";
      width:5px; height:5px;
      border-radius:50%;
      background:var(--success);
      flex-shrink:0;
    }

    /* ============================================================
       ANIMATIONS
       ============================================================ */
    @keyframes fadeIn{
      from{ opacity:0; transform:translateY(10px); }
      to{ opacity:1; transform:translateY(0); }
    }

    /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width:768px){
      .page{ padding:var(--sp-6) var(--sp-4) var(--sp-8); }
      .hero{
        grid-template-columns:1fr;
        gap:var(--sp-5);
        margin-bottom:var(--sp-6);
      }
      .hero-art{ order:-1; }
      .hero-art svg{ max-width:230px; }
      .card-desc{ padding-left:0; margin-top:var(--sp-2); }
      .card{ padding:var(--sp-5) var(--sp-5) var(--sp-5); border-radius:var(--radius); }
      .card-head{ padding-bottom:var(--sp-4); margin-bottom:var(--sp-5); }
    }
    @media (max-width:480px){
      .page{ padding:var(--sp-5) var(--sp-3) var(--sp-7); }
      .hero h1{ font-size:25px; }
      .hero-desc{ font-size:13.5px; }
      .logo-wrap img{ max-height:42px; }
      .section-title{ font-size:16px; }
      .section-title .num{ width:32px; height:32px; font-size:13px; }
      .card-head{ flex-direction:row; gap:var(--sp-3); }
      .card-icon{ width:38px; height:38px; border-radius:12px; }
      .card-icon svg{ width:18px; height:18px; }
      input[type=text], input[type=number], select{ height:52px; font-size:13.5px; }
      .submit-btn{ height:54px; font-size:14px; }
      .upload-box{ padding:var(--sp-6) var(--sp-4) var(--sp-5); }
    }
    @media (max-width:360px){
      .hero h1{ font-size:22px; }
      .card{ padding:var(--sp-4); }
    }