/* ============================================================
   JIMY PANEL v123  |  halaman Create Server: kuota, langkah bernomor, cek nama, ringkasan, wajib join channel
   Dimuat paling akhir, hanya menambah kelas baru berawalan cx-. Hapus file ini + <link>-nya untuk kembali ke tampilan lama.
   ============================================================ */
.cx-quota { padding: 14px 15px; border-radius: 16px; background: var(--card2, rgba(0, 0, 0, .04)); border: 1px solid var(--line); margin-bottom: 14px; }
.cx-qtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.cx-qtop b { font-family: var(--display); font-weight: 800; font-size: 14px; }
.cx-qrole { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--muted); }
.cx-qrole .i { font-size: 17px; color: var(--red); }
.cx-bar { height: 8px; border-radius: 99px; background: rgba(128, 128, 128, .2); overflow: hidden; margin: 10px 0 8px; }
.cx-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--amber, #ffb020)); transition: width .5s ease; }
.cx-quota small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }

.cx-step { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; margin: 18px 2px 9px; }
.cx-step i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; background: var(--red); color: #fff; flex: none; }
.cx-step small { margin-left: auto; font-weight: 500; font-size: 11.5px; color: var(--dim, var(--muted)); text-align: right; }

.cx-dice { width: 34px; height: 34px; margin-right: -6px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--muted); background: var(--card2, rgba(0, 0, 0, .05)); border: 1px solid var(--line); transition: .15s; }
.cx-dice .i { font-size: 17px; }
.cx-dice:hover { color: var(--red); border-color: var(--red); }
.cx-dice:active .i { transform: rotate(180deg); transition: transform .3s; }
#nameField.err { border-color: var(--red); }

.cx-sug { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.cx-chip { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; font-family: var(--mono); color: var(--text); background: var(--card2, rgba(0, 0, 0, .05)); border: 1px solid var(--line); }
.cx-chip:hover { border-color: var(--red); color: var(--red); }

.cx-join { margin: 14px 0 0; padding: 14px; border-radius: 16px; border: 1px solid var(--amber, #ffb020); background: rgba(255, 176, 32, .12); display: flex; flex-direction: column; gap: 12px; }
.cx-jt { display: flex; gap: 12px; align-items: flex-start; }
.cx-jt > .i { font-size: 22px; color: var(--amber, #ffb020); flex: none; margin-top: 1px; }
.cx-jt b { display: block; font-size: 14px; font-weight: 800; }
.cx-jt span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.cx-jb { display: flex; flex-wrap: wrap; gap: 8px; }

.cx-sum { margin: 16px 0 12px; padding: 4px 14px 8px; border-radius: 16px; background: var(--card2, rgba(0, 0, 0, .04)); border: 1px dashed var(--line2, var(--line)); }
.cx-st { display: flex; align-items: center; gap: 8px; padding: 11px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cx-st .i { font-size: 15px; }
.cx-r { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.cx-r:first-of-type { border-top: 0; }
.cx-r span { color: var(--muted); flex: none; }
.cx-r b { font-weight: 700; text-align: right; word-break: break-word; }
.cx-r b.g { color: var(--green); }
.cx-r em { color: var(--dim, var(--muted)); font-weight: 500; }

.cx-acts { display: flex; gap: 8px; margin: 2px 0 4px; }
.cx-acts .btn { flex: 1; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .cx-bar i, .cx-dice:active .i { transition: none; } }

/* ---- kartu jam di Beranda (role Unlimited): jam hidup, tanggal, tahun, ringkasan create ---- */
.card.ck { padding: 16px 18px 14px; margin-top: 12px; position: relative; overflow: hidden; }
.card.ck::before { content: ''; position: absolute; right: -40px; top: -50px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(46, 226, 123, .16), transparent 70%); pointer-events: none; }
.ck-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ck-inf { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--green); background: rgba(46, 226, 123, .12); border: 1px solid rgba(46, 226, 123, .35); }
.ck-inf .i { font-size: 16px; }
.ck-tz { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: var(--muted); padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line); }
.ck-time { font-family: var(--display); font-weight: 900; font-size: 46px; line-height: 1.05; margin: 12px 0 2px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ck-time small { font-size: 24px; font-weight: 800; color: var(--muted); margin-left: 2px; }
.ck-date { font-size: 14px; font-weight: 600; color: var(--muted); }
.ck-row { display: flex; gap: 10px; margin-top: 14px; }
.ck-row > div { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--card2, rgba(0, 0, 0, .04)); border: 1px solid var(--line); }
.ck-row b { display: block; font-family: var(--display); font-size: 24px; font-weight: 900; line-height: 1.1; }
.ck-row span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.ck-row .ok b { color: var(--green); }
.ck-row .warn { border-color: var(--amber, #ffb020); background: rgba(255, 176, 32, .1); }
.ck-row .warn b { color: var(--amber, #ffb020); }