:root {
    --bg: #05070f;
    --panel: #0c1526;
    --panel-2: #0b1120;
    --border: rgba(80,120,180,0.22);
    --cyan: #22d3ee;
    --cyan-dim: rgba(34,211,238,0.1);
    --blue: #3ba6ff;
    --text: #dbe4f3;
    --text-dim: #7c8aa5;
    --amber: #f5a623;
    --amber-dim: rgba(245,166,35,0.1);
    --green: #22c55e;
    --purple: #b06bff;
  }
  * { box-sizing: border-box; }
  .hidden { display:none !important; }
  body {
    margin: 0; min-height: 100vh;
    background: radial-gradient(circle at 50% 0%, #0d1830 0%, var(--bg) 60%);
    font-family: 'Inter','Segoe UI',sans-serif; color: var(--text);
  }
  .icon { display:inline-block; vertical-align:middle; }
  button, input, textarea, select { font-family: inherit; }

  .page { max-width: 640px; margin: 0 auto; padding: 20px 16px 90px; }
  @media (min-width: 640px) { .page { padding-left:24px; padding-right:24px; } }
  @media (min-width: 1000px) { .page { max-width: 760px; padding-left:32px; padding-right:32px; } }

  .header { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
  .header-title { font-weight:800; font-size:19px; letter-spacing:0.5px; }
  .header-sub { font-size:12px; color:var(--text-dim); margin-top:2px; }
  .back-btn { background:none; border:none; cursor:pointer; padding:0; display:flex; }

  .verified-pill {
    display:flex; align-items:center; gap:8px; border:1px solid rgba(34,197,94,0.4);
    background: rgba(34,197,94,0.08); border-radius:12px; padding:8px 12px; margin-bottom:16px;
  }
  .verified-pill .t1 { font-size:11.5px; font-weight:700; color:var(--green); }
  .verified-pill .t2 { font-size:9.5px; color:var(--text-dim); }

  .card { background: linear-gradient(180deg,#0c1526,#0a0f1c); border:1px solid var(--border); border-radius:16px; padding:18px; margin-bottom:16px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
  .card h2 { font-size:15px; font-weight:700; margin:0 0 4px; display:flex; align-items:center; gap:8px; }
  .card-sub { font-size:12px; color:var(--text-dim); margin:0 0 14px; }

  .field-row { display:flex; gap:12px; flex-wrap:wrap; }
  .field-group { flex:1 1 220px; margin-bottom:14px; }
  .field-label { font-size:12.5px; color:var(--text-dim); margin-bottom:7px; display:flex; align-items:center; gap:5px; }
  .required { color:#ff6b81; }
  .field, textarea.field, select.field {
    width:100%; background:var(--panel-2); border:1px solid var(--border); border-radius:10px;
    color:var(--text); font-size:14px; padding:12px 13px; outline:none; transition:border-color 0.15s ease;
  }
  .field::placeholder { color:#5b6472; }
  .field:focus { border-color: var(--cyan); }
  textarea.field { resize:vertical; min-height:80px; }
  .helper-text { font-size:11.5px; color:var(--text-dim); margin-top:6px; }

  .skill-picker { display:flex; flex-wrap:wrap; gap:8px; }
  .skill-tag {
    font-size:12px; font-weight:600; padding:8px 13px; border-radius:20px; cursor:pointer;
    background:var(--panel-2); border:1px solid var(--border); color:var(--text-dim); transition: all 0.15s ease;
  }
  .skill-tag.selected { color:#04121f; background: linear-gradient(135deg,#22d3ee,#3ba6ff); border-color:transparent; }

  .avatar-upload {
    display:flex; align-items:center; gap:14px; background:var(--panel-2); border:1px dashed var(--border);
    border-radius:14px; padding:14px;
  }
  .avatar-preview {
    width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,#1a2540,#0d1220);
    border:2px solid var(--cyan); display:flex; align-items:center; justify-content:center; font-weight:700; color:#c9d6e8; flex-shrink:0;
  }
  .upload-btn {
    font-size:12.5px; font-weight:700; color:var(--cyan); background:rgba(34,211,238,0.08);
    border:1px solid rgba(34,211,238,0.35); border-radius:9px; padding:9px 13px; cursor:pointer;
  }
  .upload-hint { font-size:11px; color:var(--text-dim); margin-top:6px; }

  .id-preview {
    display:flex; align-items:center; gap:10px; background:rgba(34,211,238,0.06);
    border:1px solid rgba(34,211,238,0.25); border-radius:12px; padding:12px 14px; font-size:12.5px; color:var(--text-dim);
  }
  .id-preview b { color:var(--cyan); }

  .checkbox-row { display:flex; align-items:flex-start; gap:10px; font-size:12.5px; color:var(--text-dim); line-height:1.5; }
  .checkbox-row input { margin-top:2px; width:16px; height:16px; accent-color: var(--cyan); flex-shrink:0; }

  .notice {
    margin-top:4px; padding:12px 13px; border-radius:10px; background: var(--amber-dim);
    border:1px solid rgba(245,166,35,0.25); color: var(--amber); font-size:12.5px; line-height:1.55; display:flex; gap:8px;
  }
  .notice svg { flex-shrink:0; margin-top:1px; }

  .submit-btn {
    width:100%; margin-top:6px; padding:16px; border-radius:12px; border:none;
    background: linear-gradient(135deg,#4a5cff,#7a3bff); color:#fff; font-weight:800; font-size:15px;
    letter-spacing:0.02em; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
    box-shadow: 0 8px 20px rgba(90,60,255,0.35); transition: filter 0.15s ease, transform 0.1s ease;
  }
  .submit-btn:hover { filter: brightness(1.08); }
  .submit-btn:active { transform: scale(0.985); }
  .submit-btn:disabled { opacity:0.5; cursor:not-allowed; }

  .footer-note {
    margin-top:18px; display:flex; align-items:center; gap:10px; background:var(--panel-2);
    border:1px solid var(--border); border-radius:14px; padding:14px; font-size:11.5px; color:var(--text-dim);
  }

  .toast {
    position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
    background:#0f2417; border:1px solid rgba(34,197,94,0.4); color:var(--green);
    padding:12px 18px; border-radius:12px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px;
    opacity:0; pointer-events:none; transition: opacity 0.25s ease, transform 0.25s ease; z-index:50; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  }
  .toast.show { opacity:1; transform: translateX(-50%) translateY(0); }
  .toast.error { background:#2a0f14; border-color:rgba(255,92,129,0.4); color:#ff6b81; }

  .success-screen { text-align:center; padding: 60px 16px; }
  .success-icon { width:64px; height:64px; border-radius:50%; background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.4); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
  .success-title { font-size:19px; font-weight:800; }
  .success-sub { font-size:13px; color:var(--text-dim); margin-top:8px; line-height:1.6; max-width:360px; margin-left:auto; margin-right:auto; }
  .success-id { margin-top:16px; display:inline-block; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:10px 16px; font-size:13px; font-weight:700; color:var(--cyan); }