:root {
  --ink: #f4fbff;
  --muted: #8ba5b8;
  --night: #030a12;
  --panel: #081725;
  --line: rgba(136, 205, 239, .16);
  --blue: #00bdf2;
  --blue-bright: #59ddff;
  --twitch: #9147ff;
  --max: 1050px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 320px; margin: 0; color: var(--ink); background: radial-gradient(circle at 8% -5%, rgba(0, 189, 242, .12), transparent 26rem), var(--night); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(89, 221, 255, .72); outline-offset: 3px; }
.editor-glow { position: fixed; top: 10%; right: -240px; z-index: -1; width: 680px; height: 680px; border-radius: 50%; background: rgba(8, 125, 255, .09); filter: blur(120px); pointer-events: none; }
.editor-header, .editor-shell { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.editor-header { display: flex; align-items: center; justify-content: space-between; min-height: 86px; border-bottom: 1px solid var(--line); }
.editor-brand { display: inline-flex; align-items: center; gap: 12px; }
.editor-mark { display: grid; place-items: center; width: 44px; aspect-ratio: 1; border: 1px solid rgba(136, 229, 255, .42); border-radius: 13px; background: linear-gradient(135deg, #02d2f5, #087dff); box-shadow: 0 0 30px rgba(0, 189, 242, .22); font-size: 11px; font-weight: 900; }
.editor-brand > span:last-child { display: grid; line-height: 1; }
.editor-brand strong { font-size: 15px; }
.editor-brand small { margin-top: 6px; color: #668399; font-size: 8px; font-weight: 850; letter-spacing: .21em; }
.header-tools { display: flex; align-items: center; gap: 10px; }
.header-tools a, .header-tools button { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; color: #8eabba; background: rgba(255, 255, 255, .025); font-size: 10px; font-weight: 800; }
.header-tools button { cursor: pointer; }

.editor-shell { padding: 76px 0 120px; }
.loading-panel, .access-panel { display: flex; min-height: 510px; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.loading-ring { width: 46px; height: 46px; border: 3px solid rgba(89, 221, 255, .12); border-top-color: var(--blue-bright); border-radius: 50%; animation: spin .8s linear infinite; }
.loading-panel h1, .access-panel h1 { margin: 25px 0 0; font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: .98; letter-spacing: -.055em; }
.loading-panel p, .access-panel p { max-width: 610px; margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.panel-kicker { color: var(--blue-bright); font-size: 9px; font-weight: 900; letter-spacing: .22em; }
.twitch-lock { display: grid; place-items: center; width: 78px; aspect-ratio: 1; margin-bottom: 24px; border: 1px solid rgba(169, 112, 255, .35); border-radius: 24px; color: white; background: rgba(145, 71, 255, .13); box-shadow: 0 0 50px rgba(145, 71, 255, .16); }
.twitch-lock svg { width: 36px; fill: currentColor; }
.twitch-button, .secondary-action { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; padding: 0 21px; border-radius: 13px; font-size: 12px; font-weight: 850; }
.twitch-button { color: white; background: var(--twitch); box-shadow: 0 14px 34px rgba(145, 71, 255, .24); }
.twitch-button svg { width: 20px; fill: currentColor; }
.secondary-action { border: 1px solid var(--line); color: #cce5f1; background: rgba(255, 255, 255, .03); }
.security-note { display: flex; align-items: center; gap: 9px; margin-top: 24px; color: #607f92; font-size: 10px; }
.security-note svg { width: 18px; fill: none; stroke: #7b9baf; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.access-panel code { padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; color: #cbefff; background: #071522; font-size: .9em; }

.studio-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 42px; }
.studio-heading h1 { margin: 12px 0 0; font-size: clamp(3rem, 6vw, 5.5rem); line-height: .95; letter-spacing: -.06em; }
.studio-heading > div:first-child > p { margin: 19px 0 0; color: var(--muted); font-size: 14px; }
.identity-card { display: flex; flex: 0 0 auto; align-items: center; min-width: 255px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: rgba(8, 23, 37, .86); }
.identity-avatar { position: relative; display: grid; place-items: center; width: 44px; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(96, 220, 255, .35); border-radius: 12px; background: linear-gradient(135deg, #00c7ef, #0c6dff); font-size: 11px; font-weight: 900; }
.identity-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.identity-card > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; margin-left: 11px; }
.identity-card small { color: #648296; font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.identity-card strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
.identity-card > i { display: grid; place-items: center; width: 22px; aspect-ratio: 1; margin-left: auto; border-radius: 50%; color: #00131c; background: var(--blue-bright); font-size: 11px; font-style: normal; font-weight: 900; }

#profile-form { display: grid; gap: 16px; }
.form-card { padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(10, 28, 43, .96), rgba(5, 16, 27, .96)); box-shadow: 0 24px 70px rgba(0, 0, 0, .18); }
.form-card-heading { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 28px; }
.form-number { display: grid; place-items: center; width: 40px; aspect-ratio: 1; border: 1px solid rgba(89, 221, 255, .19); border-radius: 12px; color: var(--blue-bright); background: rgba(0, 189, 242, .06); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.form-card-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.form-card-heading p { margin: 5px 0 0; color: #6f8ca0; font-size: 11px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field-wide { grid-column: 1 / -1; }
.field { display: grid; gap: 8px; color: #a8bfce; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.field > span:first-child { display: flex; justify-content: space-between; align-items: center; }
.field b { padding: 3px 6px; border-radius: 99px; color: #84dff3; background: rgba(0, 189, 242, .08); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.field small { color: #557286; font-size: 8px; }
.field input:not([type="color"]), .field textarea, .field select { width: 100%; border: 1px solid rgba(136, 205, 239, .15); border-radius: 11px; outline: 0; padding: 13px 14px; color: white; background: #04101a; font-size: 12px; font-weight: 500; letter-spacing: 0; transition: border-color 160ms ease, box-shadow 160ms ease; }
.field input:not([type="color"]), .field select { min-height: 47px; }
.field textarea { resize: vertical; min-height: 105px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: #365365; }
.field input:not([type="color"]):focus, .field textarea:focus, .field select:focus { border-color: rgba(89, 221, 255, .45); box-shadow: 0 0 0 3px rgba(0, 189, 242, .06); }
.color-control { display: flex; min-height: 47px; align-items: center; gap: 12px; padding: 7px 12px; border: 1px solid rgba(136, 205, 239, .15); border-radius: 11px; background: #04101a; }
.color-control input { width: 32px; height: 32px; border: 0; padding: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.color-control .color-hex-input { min-height: 32px; border: 0; padding: 0; color: #d6ebf5; background: transparent; box-shadow: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 750; text-transform: uppercase; }
.color-control .color-hex-input:focus { border: 0; box-shadow: none; }
.color-control:focus-within { border-color: rgba(89, 221, 255, .45); box-shadow: 0 0 0 3px rgba(0, 189, 242, .06); }

.copy-groups { display: grid; gap: 28px; }
.copy-group { padding-top: 27px; border-top: 1px solid rgba(136, 205, 239, .1); }
.copy-group:first-child { padding-top: 0; border-top: 0; }
.copy-group h3 { margin: 0 0 17px; color: #d8edf7; font-size: 13px; letter-spacing: -.01em; }
.copy-group .field textarea { min-height: 86px; }

.custom-links-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 31px; padding-top: 27px; border-top: 1px solid rgba(136, 205, 239, .1); }
.custom-links-heading h3 { margin: 0; font-size: 15px; }
.custom-links-heading p { margin: 5px 0 0; color: #688599; font-size: 10px; }
.custom-links-heading button { flex: 0 0 auto; min-height: 40px; border: 1px solid rgba(89, 221, 255, .24); border-radius: 10px; padding: 0 14px; color: #a9eafa; background: rgba(0, 189, 242, .07); cursor: pointer; font-size: 10px; font-weight: 850; }
.custom-links-heading button:disabled { color: #527184; border-color: var(--line); cursor: default; }
.custom-social-list { display: grid; gap: 12px; margin-top: 18px; }
.custom-social-row { padding: 17px; border: 1px solid rgba(136, 205, 239, .13); border-radius: 15px; background: rgba(2, 12, 21, .55); }
.custom-social-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.custom-social-toolbar > strong { color: #91adbd; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.custom-social-toolbar > div { display: flex; gap: 6px; }
.custom-social-toolbar button { min-width: 32px; min-height: 30px; border: 1px solid var(--line); border-radius: 8px; padding: 0 9px; color: #84a4b6; background: rgba(255, 255, 255, .025); cursor: pointer; font-size: 9px; font-weight: 800; }
.custom-social-toolbar button:disabled { opacity: .35; cursor: default; }
.custom-social-toolbar button[data-action="remove"] { color: #e990a5; }
.custom-social-fields { display: grid; grid-template-columns: 1fr 1.1fr 1.8fr 86px; align-items: end; gap: 11px; }
.custom-color-field input { width: 100%; height: 47px; border: 1px solid rgba(136, 205, 239, .15); border-radius: 11px; padding: 7px; background: #04101a; cursor: pointer; }
.custom-social-empty { margin: 18px 0 0; padding: 18px; border: 1px dashed rgba(136, 205, 239, .14); border-radius: 13px; color: #557286; text-align: center; font-size: 10px; }

.save-bar { position: sticky; bottom: 14px; z-index: 4; display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; padding: 12px 14px 12px 20px; border: 1px solid rgba(106, 220, 255, .25); border-radius: 17px; background: rgba(5, 18, 30, .92); box-shadow: 0 20px 55px rgba(0, 0, 0, .4); backdrop-filter: blur(18px); }
.save-message { color: #75a0b8; font-size: 11px; }
.save-message.is-error { color: #ff7c9a; }
.save-message.is-success { color: #6ce9bc; }
.save-bar > div:last-child { display: flex; gap: 9px; }
.save-bar a, .save-bar button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border-radius: 11px; padding: 0 18px; font-size: 11px; font-weight: 850; }
.save-bar a { border: 1px solid var(--line); color: #a8c2d1; }
.save-bar button { border: 0; color: #00131c; background: linear-gradient(100deg, #61e2ff, #00b9ef 55%, #087dff); cursor: pointer; }
.save-bar button:disabled { cursor: wait; opacity: .62; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 780px) {
  .editor-header, .editor-shell { width: min(calc(100% - 28px), var(--max)); }
  .editor-brand small { display: none; }
  .header-tools a { display: none; }
  .editor-shell { padding-top: 55px; }
  .studio-heading { align-items: flex-start; flex-direction: column; }
  .identity-card { width: 100%; }
  .field-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .form-card { padding: 23px 18px; }
  .custom-links-heading { align-items: stretch; flex-direction: column; }
  .custom-links-heading button { width: 100%; }
  .custom-social-fields { grid-template-columns: 1fr; }
  .custom-social-toolbar { align-items: flex-start; }
  .save-bar { align-items: stretch; flex-direction: column; padding: 14px; }
  .save-bar > div:last-child { display: grid; grid-template-columns: 1fr 1.2fr; }
}

@media (max-width: 460px) {
  .save-bar > div:last-child { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}