/* Bot builder, on top of base.css + checkout.css. Discord preview colours are Discord's own so
   the mock reads as Discord; everything else stays on the site tokens. */
.preview-bar{background:var(--ink);color:var(--bg);font-size:.85rem;padding:.45rem 0;text-align:center}
.checkout .lede{color:var(--ink-2);margin:-.75rem 0 1.75rem;max-width:40rem}

/* Package picker */
.tabs{display:inline-flex;gap:.25rem;padding:.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:1rem}
.tab{font:inherit;font-size:.9rem;font-weight:600;color:var(--ink-2);background:none;border:0;border-radius:.35rem;padding:.45rem .9rem;cursor:pointer}
.tab[aria-selected="true"]{background:var(--bg);color:var(--ink);box-shadow:0 1px 2px rgb(16 24 40 / .08)}
.packages{display:grid;gap:.75rem;margin-bottom:1rem}
@media (min-width:44em){.packages{grid-template-columns:1fr 1fr}}
.pkg{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.1rem;border:1px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer;transition:border-color .15s,background-color .15s}
.pkg:hover{background:var(--surface)}
.pkg:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pkg input{position:absolute;opacity:0;pointer-events:none}
.pkg:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.pkg-head{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
.pkg-name{font-weight:650}
.pkg-price{font-weight:650;white-space:nowrap}
.pkg-price small{font-weight:500;color:var(--ink-3);font-size:.8rem}
.pkg-blurb{font-size:.88rem;color:var(--ink-2);margin:0}
.pkg-feats{margin:.35rem 0 0;padding:0;list-style:none;display:grid;gap:.2rem;font-size:.84rem;color:var(--ink-2)}
.pkg-feats li{display:flex;gap:.45rem}
.pkg-feats li::before{content:"";flex:none;width:.35rem;height:.35rem;border-radius:50%;background:var(--ink-3);margin-top:.55rem}
.pkg-tag{display:inline-block;font-size:.75rem;font-weight:600;padding:.15rem .55rem;border-radius:1rem;border:1px solid var(--line-strong);color:var(--ink-2);margin-left:.4rem;vertical-align:.1em}
.pkg-robux{font-size:.8rem;color:var(--ink-3)}

/* Uploads */
.upload{display:flex;gap:.9rem;align-items:center}
.upload-thumb{flex:none;background:var(--surface-2) center/cover no-repeat;border:1px solid var(--line)}
.upload-thumb.round{width:3.5rem;height:3.5rem;border-radius:50%}
.upload-thumb.wide{width:6.5rem;height:2.3rem;border-radius:.4rem}
.upload .link-btn{margin-left:.6rem}
.upload .help{margin-top:.3rem}
.counter.over{color:#c4372f}

.stepper{display:flex;align-items:center;gap:.6rem}
.stepper output{min-width:1.5rem;text-align:center;font-weight:650}
.stepper .btn{width:2.25rem;padding:0;font-size:1.1rem}
.stepper .help{margin:0 0 0 .4rem}

.inline-form{display:flex;gap:.5rem}
.inline-form input{flex:1;min-width:0}
.avatar-fallback{width:3rem;height:3rem;border-radius:50%;background:var(--surface-2) center/cover no-repeat;display:grid;place-items:center;font-weight:650;color:var(--ink-2)}

/* Payment plan */
.plan{border:0;padding:0;margin:0 0 1rem;min-width:0}
.plan legend{padding:0;margin-bottom:.5rem}
.plan-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.5rem}
.plan-opt{display:flex;flex-direction:column;padding:.6rem .75rem;border:1px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer;font-size:.9rem}
.plan-opt:has(input:checked){border-color:var(--ink);background:var(--surface)}
.plan-opt input{position:absolute;opacity:0;pointer-events:none}
.plan-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.plan-opt b{font-weight:650}
.plan-opt span{color:var(--ink-3);font-size:.82rem}
.plan[disabled]{opacity:.5}
.code-field{margin-bottom:.4rem}
#code-msg.bad{color:#c4372f}
#code-msg.good{color:#1f8a4c}

/* Discord profile mock */
.dc-wrap{margin-bottom:1rem}
.dc-label{font-size:.85rem;font-weight:600;color:var(--ink-2);margin:0 0 .5rem}
.dc-card{background:#232428;color:#dbdee1;border-radius:.6rem;overflow:hidden;box-shadow:var(--shadow);font-size:.88rem;line-height:1.35}
.dc-banner{height:6.6rem;background:#5865f2 center/cover no-repeat}
.dc-avatar-wrap{position:relative;width:5.6rem;height:5.6rem;margin:-2.9rem 0 0 1rem}
.dc-avatar{width:100%;height:100%;border-radius:50%;border:.38rem solid #232428;background:#4e5058 center/cover no-repeat;display:grid;place-items:center;font-size:1.8rem;font-weight:700;color:#fff}
.dc-status{position:absolute;right:.2rem;bottom:.2rem;width:1.35rem;height:1.35rem;border-radius:50%;background:#23a55a;border:.3rem solid #232428}
.dc-body{padding:.5rem 1rem 1rem}
.dc-name{font-size:1.2rem;font-weight:700;color:#f2f3f5;margin:0;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;word-break:break-word}
.dc-app{font-size:.75rem;font-weight:600;background:#5865f2;color:#fff;border-radius:.25rem;padding:.15rem .4rem;letter-spacing:.02em}
.dc-handle{margin:.1rem 0 .7rem;color:#b5bac1;font-size:.85rem}
.dc-section{background:#2b2d31;border-radius:.45rem;padding:.65rem .75rem;margin-top:.5rem}
.dc-h{margin:0 0 .3rem;font-size:.75rem;font-weight:700;color:#f2f3f5}
.dc-bio{margin:0;white-space:pre-wrap;word-break:break-word;color:#dbdee1}
.dc-bio.empty{color:#80848e}

/* Summary extras */
.totals .neg dd{color:#1f8a4c}
.robux-box{margin-top:.25rem}
.robux-box .robux-steps{margin:0 0 .75rem}
#paypal-buttons{margin-top:.5rem}
.thumb{overflow:hidden}
.thumb .mini{width:100%;height:100%;background:var(--surface-2) center/cover}

/* Cropper */
.cropper{border:0;padding:0;border-radius:var(--radius);background:var(--bg);color:var(--ink);box-shadow:var(--shadow-lg);width:min(100% - 2rem,34rem)}
.cropper::backdrop{background:rgb(0 0 0 / .55)}
.crop-inner{padding:1.25rem}
.crop-inner h2{font-size:1.15rem;margin-bottom:1rem}
.crop-stage{background:#111;border-radius:var(--radius-sm);overflow:hidden;touch-action:none;cursor:grab}
.crop-stage:active{cursor:grabbing}
.crop-stage canvas{display:block;width:100%;height:auto}
.crop-controls{display:flex;align-items:center;gap:.75rem;margin-top:1rem}
.crop-controls input{flex:1;accent-color:var(--ink)}
.crop-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}

/* Order page */
.order-wrap{max-width:46rem;margin:0 auto}
.track{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:0}
.track li{display:grid;grid-template-columns:1.75rem 1fr;gap:.9rem;padding:.2rem 0 1.1rem;position:relative}
.track li::before{content:"";width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--line-strong);background:var(--bg);margin:.2rem 0 0 .3rem;z-index:1}
.track li::after{content:"";position:absolute;left:.82rem;top:1.5rem;bottom:0;width:2px;background:var(--line)}
.track li:last-child::after{display:none}
.track li.done::before{background:var(--ink);border-color:var(--ink)}
.track li.now::before{border-color:var(--ink);box-shadow:0 0 0 4px var(--accent-soft)}
.track b{display:block;font-weight:650}
.track span{font-size:.88rem;color:var(--ink-3)}
.order-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.order-list a{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--radius-sm);text-decoration:none;background:var(--bg)}
.order-list a:hover{background:var(--surface)}
.pill{font-size:.78rem;font-weight:600;padding:.1rem .5rem;border-radius:1rem;background:var(--surface-2);color:var(--ink-2)}
.dc-mini{flex:none;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--surface-2) center/cover no-repeat}
#o-live{margin:.5rem 0 1rem}
#login-error{color:#c4372f}

/* Builder admin */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem;margin:0 0 1.25rem}
.stat-row div{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.85rem 1rem}
.stat-row dt{font-size:.8rem;color:var(--ink-3)}
.stat-row dd{margin:.15rem 0 0;font-size:1.3rem;font-weight:650}
.step > h2{display:flex;align-items:center;gap:.75rem;font-size:1.1rem;letter-spacing:-.01em;padding:1.1rem 1.5rem;border-bottom:1px solid var(--line)}
.step .table-wrap{overflow-x:auto;margin:0 0 1rem;padding:0}
.admin-table{width:100%;border-collapse:collapse;font-size:.9rem}
.admin-table th{text-align:left;font-size:.78rem;font-weight:600;color:var(--ink-3);padding:.5rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
.admin-table td{padding:.65rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
.admin-table td small{display:block;color:var(--ink-3);font-size:.8rem}
.admin-table td small.bad{color:#c4372f;max-width:18rem}
.admin-table tr.off td{color:var(--ink-3)}
.admin-table .acts{white-space:nowrap;text-align:right}
.admin-table .acts .btn{margin-left:.3rem}
.admin-table a{color:var(--ink)}
.code-form{display:grid;gap:0 1rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));align-items:end}
.code-form .c-pk{grid-column:1/-1;border:0;padding:0;margin:0 0 1rem}
.code-form .c-pk legend{margin-bottom:.4rem;padding:0}
.code-actions{grid-column:1/-1;margin-bottom:.5rem}
#gate{max-width:32rem}
.notice-plain{border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.1rem;margin:0 0 1rem;background:var(--surface)}
.notice-plain p{margin:0 0 .75rem;color:var(--ink-2);font-size:.95rem}
.pkg-robux a{color:var(--ink-2);text-underline-offset:.2em}
.pkg-robux a:hover{color:var(--ink)}