:root { --facebook: #1877f2; --ink: #090a0c; --mobile-bg: #0c1d24; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: #fff; color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
.registration-page, .registration-layout { min-height: 100vh; }
.form-card { width: min(100%, 42rem); margin: auto; padding: 2rem; }
.visual-panel, .language, .meta-brand { display: none; }
.form-heading { margin-bottom: 1.65rem; }
.brand-mark, .desktop-logo { display: grid; place-items: center; border-radius: 50%; background: var(--facebook); color: #fff; font-family: Arial, sans-serif; font-weight: 800; }
.brand-mark { width: 3rem; height: 3rem; margin: 0 auto 1.05rem; padding-top: .48rem; font-size: 2.75rem; line-height: 1; }
.form-heading h1 { margin: 0; font-family: Georgia, serif; font-size: 1.12rem; font-weight: 700; }
.form-control { height: 4rem; padding: 0 1.6rem; border: 1px solid #bfc7ce; border-radius: 1.5rem !important; background: #fff; color: #536779; font-size: 1.3rem; box-shadow: none !important; }
.form-control::placeholder { color: #536779; opacity: 1; }
.form-control:focus { border: 2px solid #3989ff; }
.input-group > .form-control { border-radius: 1.5rem !important; }
.input-group > .btn { position: absolute; z-index: 4; right: 1.25rem; top: 50%; transform: translateY(-50%); padding: 0; border: 0; color: #0659d7; background: transparent; font-weight: 700; }
.btn-primary { height: 4.35rem; margin-top: 1rem; border: 0; border-radius: 99px; background: var(--facebook); font-size: 1.25rem; }
.btn-primary:hover, .btn-primary:focus { background: #1469d5; }
.mobile-label { display:none; }
.text-action { display: block; margin: 2rem auto 0; border: 0; background: transparent; color: #080808; font-size: 1.2rem; }
.create-account { display: block; width: 100%; height: 4.35rem; margin-top: 7rem; border: 1px solid #3989ff; border-radius: 99px; background: transparent; color: #3989ff; font-size: 1.2rem; }
.alert { margin-top: 1rem; }

@media (min-width: 768px) {
  .registration-layout { display: grid; grid-template-columns: 56% 44%; padding-top: 50px; }
  .visual-panel { position: relative; display: block; overflow: hidden; min-height: 100vh; padding: 2.7rem 3.4rem; }
  .desktop-logo { width: 4.6rem; height: 4.6rem; padding-top: .65rem; font-size: 4.2rem; }
  .visual-copy { position: absolute; z-index: 2; top: 45%; left: 3.4rem; transform: translateY(-20%); }
  .visual-copy h2 { margin: 0; font-size: clamp(3.8rem, 6vw, 5.5rem); font-weight: 700; line-height: .98; letter-spacing: -.08em; }
  .visual-copy span { color: #1c6bef; }
  .story-collage { position:absolute; top:7%; right:-3%; width:min(53vw,42rem); pointer-events:none; }
  .collage-image { display:block; width:100%; height:auto; }
  .story-card { position: absolute; overflow: hidden; border-radius: 1.25rem; box-shadow: 0 3px 13px #0003; }
  .story-large { top: 12%; left: 56%; width: min(29vw, 18rem); height: 58%; background: #6e9cc5 url('../images/story-friends.png') center / cover no-repeat; }
  .story-progress { position:absolute; z-index:2; top:4%; left:8%; width:84%; height:5px; border-radius:4px; background:#e7e9edcc; }
  .story-time { position:absolute; z-index:3; top:12%; right:-1.8rem; padding:.45rem .7rem; border-radius:.75rem; background:#655cf0; color:#fff; font-size:.9rem; font-weight:bold; }
  .story-small { top: 25.5%; left: 38%; width: min(23vw, 15rem); height: 30%; background: linear-gradient(145deg,#eee,#a6a6a6 46%,#f4f2ed 47%); }
  .shop-icon { position:absolute; top:1.15rem; left:1.15rem; color:#fff; font-size:2rem; }
  .music-card { position:absolute; z-index:2; top:48%; left:43%; width:min(20vw,13rem); height:36%; padding:1rem; border-radius:1.25rem; background:#fff; box-shadow:0 3px 13px #0003; }
  .music-art { display:grid; place-items:center; height:72%; border-radius:.65rem; background:linear-gradient(135deg,#cdf24f,#ca38a9 48%,#503596); color:#fff; font-size:4rem; }
  .music-card i { display:block; width:75%; height:.55rem; margin-top:.8rem; border-radius:9px; background:#e5e7e9; }
  .music-card i + i { width:52%; margin-top:.45rem; }
  .profile-orb { position:absolute; z-index:3; top:69%; left:57%; display:grid; place-items:center; width:9rem; height:9rem; border:5px solid var(--facebook); border-radius:50%; background:linear-gradient(140deg,#70c476,#e7c193); color:#fff; font-size:4rem; box-shadow:0 2px 7px #0003; }
  .reaction { position:absolute; z-index:4; top:17%; left:34%; display:grid; place-items:center; width:4.2rem; height:4.2rem; border-radius:50%; background:#ffd658; color:#422316; font-size:3.5rem; font-weight:bold; transform:rotate(-15deg); }
  .heart { position:absolute; z-index:4; top:56%; left:78%; display:grid; place-items:center; width:5rem; height:5rem; border-radius:50%; background:#f9114d; color:#fff; font-size:3rem; }
  .form-card { display:flex; flex-direction:column; justify-content:center; width:100%; max-width:none; margin:0; padding:0 clamp(3rem,8vw,8rem); }
  .form-heading { text-align:left !important; margin-bottom:1.15rem; }
  .form-heading .brand-mark { display:none; }
  .form-heading h1 { font-size:1.2rem; }
  .text-action { margin-top:2rem; }
}

@media (max-width: 767.98px) {
  body { background: var(--mobile-bg); }
  .registration-page { display:grid; place-items:center; padding:.25rem 0; }
  .form-card { display:flex; flex-direction:column; width:100%; max-width:27rem; min-height:calc(80vh - .3rem); padding:.35rem .625rem .75rem; background:#0d1e25; color:#fff; }
  .language { display:block; margin:.1rem 0 3.7rem; text-align:center; color:#aeb7bd; font-size:.68rem; }
  .language span { margin-left:.2rem; }
  .form-heading { margin-bottom:4.1rem; }
  .brand-mark { width:2.45rem; height:2.45rem; margin-bottom:1rem; padding-top:.35rem; font-size:2.25rem; }
  .form-heading h1 { display:none; }
  .form-control { height:2.75rem; padding:0 1.15rem; border-color:#536773; border-radius:1.2rem !important; background:transparent; color:#e9f2ff; font-size:.89rem; }
  .form-control::placeholder { color:#e9f2ff; }
  .form-control:focus { border-color:#75a5c4; }
  .mb-3 { margin-bottom:.9rem !important; }
  .mb-4 { margin-bottom:.6rem !important; }
  .input-group > .btn { right:1rem; color:#9ac9ff; font-size:.67rem; }
  .btn-primary { height:2.15rem; margin-top:0; font-size:.78rem; }
  .desktop-label { display:none; }
  .mobile-label { display:inline; }
  .text-action { margin-top:.85rem; color:#fff; font-size:.75rem; font-weight:600; }
  .create-account { flex-shrink:0; height:2.15rem; margin-top:auto; border-color:#3989ff; color:#55a7f5; font-size:.75rem; }
  .meta-brand { display:block; flex-shrink:0; margin-top:.8rem; color:#dce2e6; text-align:center; font-size:.75rem; }
  .meta-brand span { margin-right:.18rem; font-size:1.05rem; vertical-align:-.08rem; }
  .alert { font-size:.75rem; }
}