:root{
    --primary:#111827; --bg:#FAFAFA; --card:#FFFFFF; --blue:#2563EB; --purple:#7C3AED;
    --success:#22C55E; --warning:#F59E0B; --error:#EF4444;
    --border: rgba(17,24,39,0.08); --border-strong: rgba(17,24,39,0.14); --muted:#6B7280;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{ background:var(--bg); color:var(--primary); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; }
  h1,h2,h3,h4{ font-family:'Plus Jakarta Sans', sans-serif; }
  a{ text-decoration:none; color:inherit; }
  .icon{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; display:block; flex-shrink:0; }
  :focus-visible{ outline:2.5px solid var(--blue); outline-offset:3px; border-radius:4px; }

  .shell{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }

  /* ---------- LEFT ---------- */
  .form-side{ display:flex; flex-direction:column; padding:32px 0; overflow-y:auto; }
  .form-topbar{ display:flex; justify-content:space-between; align-items:center; padding:0 56px; }
  .logo{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-0.02em; }
  .logo .mark{ width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--blue),var(--purple)); display:flex; align-items:center; justify-content:center; color:white; font-size:13px; font-weight:800; }
  .step-tag{ font-size:12px; font-weight:600; color:var(--muted); background:var(--card); border:1px solid var(--border); padding:6px 12px; border-radius:100px; }

  .form-wrap{ max-width:460px; margin:0 auto; width:100%; padding:32px 24px 20px; }

  /* stepper */
  .stepper{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .step-dot{ height:4px; flex:1; border-radius:100px; background:var(--border); transition:background .25s ease; }
  .step-dot.done, .step-dot.active{ background:var(--primary); }
  .stepper-labels{ display:flex; justify-content:space-between; margin-bottom:26px; }
  .stepper-labels span{ font-size:11.5px; font-weight:600; color:var(--muted); }
  .stepper-labels span.active{ color:var(--primary); }

  .form-wrap h1{ font-size:27px; letter-spacing:-0.03em; margin-bottom:9px; line-height:1.15; }
  .form-wrap .sub{ color:var(--muted); font-size:14px; margin-bottom:26px; line-height:1.6; }

  .step-panel{ display:none; }
  .step-panel.active{ display:block; animation:fadein .25s ease; }
  @keyframes fadein{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

  /* account type toggle */
  .type-toggle{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
  .type-opt{ position:relative; border:1.5px solid var(--border-strong); border-radius:14px; padding:18px 16px; cursor:pointer; transition:all .18s ease; background:var(--card); }
  .type-opt:hover{ border-color:var(--primary); transform:translateY(-1px); box-shadow:0 8px 20px rgba(17,24,39,0.06); }
  .type-opt.selected{ border-color:var(--blue); background:linear-gradient(160deg, rgba(37,99,235,0.06), rgba(124,58,237,0.03)); box-shadow:0 8px 20px rgba(37,99,235,0.1); }
  .type-opt .check{ position:absolute; top:14px; right:14px; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--border-strong); }
  .type-opt.selected .check{ border-color:var(--blue); background:var(--blue); }
  .type-opt.selected .check::after{ content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/60% no-repeat; }
  .type-opt .ti{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; color:white; }
  .type-opt strong{ font-size:14.5px; display:block; margin-bottom:4px; }
  .type-opt p{ font-size:12px; color:var(--muted); line-height:1.5; }

  .field{ margin-bottom:16px; }
  .field label{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; margin-bottom:8px; }
  .field label .opt{ font-weight:400; color:var(--muted); font-size:11.5px; }
  .field .input-icon{ position:relative; }
  .field .input-icon svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:var(--muted); pointer-events:none; }
  .field .input-icon input, .field .input-icon select{ padding-left:40px; }
  .field input, .field select{
    width:100%; padding:12.5px 15px; border:1.5px solid var(--border-strong); border-radius:11px; font-size:14px;
    font-family:'Inter',sans-serif; background:var(--card); transition:all .15s ease; appearance:none; -webkit-appearance:none;
  }
  .field select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; background-size:15px; padding-right:38px; cursor:pointer;
  }
  .field select:disabled{ background-color:#F3F4F6; cursor:not-allowed; color:var(--muted); }
  .field input:focus, .field select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,0.1); }
  .field input::placeholder{ color:#9CA3AF; }
  .field .hint{ font-size:12px; color:var(--muted); margin-top:6px; }

  /* phone country selector */
  .phone-field{ display:flex; gap:8px; position:relative; }
  .phone-country-btn{
    display:flex; align-items:center; gap:7px; height:48px; padding:0 12px; border:1.5px solid var(--border-strong);
    border-radius:11px; background:var(--card); cursor:pointer; font-size:14px; font-weight:600; color:var(--primary);
    font-family:'Inter',sans-serif; flex-shrink:0; transition:border-color .15s ease;
  }
  .phone-country-btn:hover{ border-color:var(--primary); }
  .phone-country-btn .icon{ stroke:var(--muted); margin-left:2px; }
  .phone-field input[type="tel"]{ flex:1; height:48px; padding:0 15px; border:1.5px solid var(--border-strong); border-radius:11px; font-size:14px; font-family:'Inter',sans-serif; }
  .phone-field input[type="tel"]:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,0.1); }
  .phone-country-menu{
    display:none; position:absolute; top:56px; left:0; z-index:20; background:var(--card); border:1.5px solid var(--border-strong);
    border-radius:12px; box-shadow:0 12px 32px rgba(17,24,39,0.14); min-width:220px; overflow:hidden; padding:6px;
  }
  .phone-country-menu.open{ display:block; }
  .phone-country-opt{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer; }
  .phone-country-opt:hover{ background:var(--bg); }
  .phone-country-opt .dial{ color:var(--muted); font-weight:500; }
  .phone-country-opt .opt-left{ display:flex; align-items:center; gap:9px; }
  .flag-icon{ display:inline-flex; align-items:center; border-radius:2px; overflow:hidden; box-shadow:0 0 0 1px rgba(17,24,39,0.08); flex-shrink:0; }

  .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

  /* platform card list */
  .platform-fixed-row{ display:grid; grid-template-columns:34px 84px 1fr; gap:12px; align-items:center; margin-bottom:9px; }
  .p-ico{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .p-label{ font-size:13.5px; font-weight:600; color:var(--primary); }
  .platform-fixed-row input{
    width:100%; height:44px; padding:0 14px; border:1.5px solid var(--border-strong); border-radius:10px;
    font-size:13.5px; font-family:'Inter',sans-serif; background:var(--card); color:var(--primary); transition:all .15s ease;
  }
  .platform-fixed-row input::placeholder{ color:#9CA3AF; }
  .platform-fixed-row input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(37,99,235,0.1); }
  #platformList.has-error{ animation:shake .3s ease; }
  #platformList.has-error .platform-fixed-row input{ border-color:var(--error); }
  @keyframes shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }

  .required-mark{ color:var(--error); font-weight:800; }
  .section-title{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin-bottom:6px; }
  .platform-counter{ margin-left:auto; font-size:11.5px; font-weight:700; color:var(--muted); background:var(--bg); border:1px solid var(--border); padding:3px 10px; border-radius:100px; text-transform:none; letter-spacing:0; }
  .platform-counter.met{ color:var(--success); background:rgba(34,197,94,0.08); border-color:rgba(34,197,94,0.25); }
  .field-error{ display:none; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--error); background:rgba(239,68,68,0.06); border:1px solid rgba(239,68,68,0.2); padding:9px 13px; border-radius:9px; margin-top:2px; }
  .field-error.show{ display:flex; }
  .field-error::before{ content:'!'; width:16px; height:16px; border-radius:50%; background:var(--error); color:white; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

  .checkbox-row{ display:flex; align-items:flex-start; gap:10px; margin:22px 0 20px; padding:14px 16px; background:var(--card); border:1px solid var(--border); border-radius:11px; }
  .checkbox-row input{ margin-top:2px; width:16px; height:16px; accent-color:var(--blue); flex-shrink:0; }
  .checkbox-row label{ font-size:12.5px; color:var(--muted); line-height:1.55; }
  .checkbox-row a{ color:var(--blue); font-weight:600; }

  .btn{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:15px; padding:14.5px 22px; border-radius:12px; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:all .15s ease; }
  .btn-primary{ background:var(--primary); color:white; box-shadow:0 4px 14px rgba(17,24,39,0.18); flex:1; }
  .btn-primary:hover{ background:#000; transform:translateY(-1px); box-shadow:0 8px 22px rgba(17,24,39,0.26); }
  .btn-outline{ background:var(--card); color:var(--primary); border:1.5px solid var(--border-strong); }
  .btn-outline:hover{ border-color:var(--primary); }
  .step-nav{ display:flex; gap:12px; }

  .review-note{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:13px 15px; background:rgba(245,158,11,0.07); border:1px solid rgba(245,158,11,0.25); border-radius:11px; }
  .review-note svg{ stroke:var(--warning); width:17px; height:17px; margin-top:1px; flex-shrink:0; }
  .review-note p{ font-size:12.5px; color:#92620a; line-height:1.55; }

  .foot-note{ text-align:center; font-size:13px; color:var(--muted); margin-top:20px; }
  .foot-note a{ color:var(--blue); font-weight:600; }

  /* ---------- RIGHT ---------- */
  .visual-side{ position:relative; background:linear-gradient(160deg, #111827, #1f2937); overflow:hidden; display:flex; align-items:center; justify-content:center; padding:48px; }
  .visual-side::before{
    content:''; position:absolute; inset:0; opacity:0.5;
    background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size:36px 36px; mask-image:radial-gradient(circle at 60% 30%, black, transparent 70%);
  }
  .mesh{ position:absolute; border-radius:50%; filter:blur(90px); }
  .vmesh1{ width:400px; height:400px; background:var(--blue); opacity:0.35; top:-100px; right:-100px; }
  .vmesh2{ width:340px; height:340px; background:var(--purple); opacity:0.3; bottom:-80px; left:-80px; }

  .visual-card{ position:relative; z-index:2; max-width:380px; width:100%; }
  .status-preview{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:18px; padding:22px; backdrop-filter:blur(10px); color:white; margin-bottom:16px; }
  .status-preview .sp-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
  .status-preview .sp-top strong{ font-size:13.5px; }
  .status-badge{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; background:rgba(245,158,11,0.18); color:#FCD34D; display:flex; align-items:center; gap:5px; }
  .status-badge .dot{ width:6px; height:6px; border-radius:50%; background:#FCD34D; animation:pulse 1.6s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:0.3;} }
  .sp-row{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.08); font-size:12.5px; }
  .sp-row:last-child{ border:none; padding-bottom:0; }
  .sp-row span:first-child{ color:rgba(255,255,255,0.5); }
  .sp-row span:last-child{ font-weight:600; }

  .visual-quote{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:18px; padding:24px; backdrop-filter:blur(10px); color:white; }
  .visual-quote p{ font-size:14px; line-height:1.65; margin-bottom:14px; }
  .visual-quote .who{ display:flex; align-items:center; gap:10px; }
  .visual-quote .av{ width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--purple)); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
  .visual-quote strong{ font-size:12.5px; display:block; color:white; }
  .visual-quote span{ font-size:11px; color:rgba(255,255,255,0.5); }

  @media (max-width: 900px){ .shell{ grid-template-columns:1fr; } .visual-side{ display:none; } .form-topbar{ padding:0 24px; } }
  @media (max-width: 480px){ .row-2{ grid-template-columns:1fr; } .platform-fixed-row{ grid-template-columns:34px 1fr; row-gap:8px; } .platform-fixed-row input{ grid-column:1 / -1; } .type-toggle{ grid-template-columns:1fr; } }