:root {
    --red: #e50914;
    --ink: #20242b;
    --muted: #747b86;
    --line: #e4e7ec;
    --surface: #fff;
    --page: #f3f4f6;
    --sidebar: #15181d;
    --brand-color: #e50914;
    --app-color: #3979df;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--page); font-family: "DM Sans", sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.app-builder-brand { color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.3rem; font-weight: 900; letter-spacing: .04em; }
.app-builder-brand > span { color: var(--red); }
.app-builder-brand em { margin-left: 5px; color: #8d949f; font-size: .53rem; font-style: normal; letter-spacing: .15em; }

.app-builder-login { min-height: 100vh; min-height: 100svh; padding: 28px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: radial-gradient(circle at 82% 14%, rgba(57, 121, 223, .23), transparent 28%), radial-gradient(circle at 12% 88%, rgba(229, 9, 20, .08), transparent 34%), linear-gradient(140deg, #07090c, #151922); }
.app-builder-login-glow { width: 520px; height: 520px; position: absolute; top: -250px; right: -120px; border-radius: 50%; background: rgba(57, 121, 223, .25); filter: blur(80px); }
.app-builder-login-card { width: min(480px, 100%); padding: 32px 34px 36px; position: relative; border: 1px solid rgba(255, 255, 255, .14); border-radius: 24px; color: #fff; background: rgba(20, 23, 29, .92); box-shadow: 0 36px 100px rgba(0, 0, 0, .45); backdrop-filter: blur(18px); }
.app-builder-login-icon { width: 52px; height: 52px; position: absolute; top: 27px; right: 30px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: var(--brand-color); box-shadow: 0 14px 32px color-mix(in srgb, var(--brand-color) 35%, transparent); font-size: 1.35rem; }
.app-builder-login-card h1 { margin: 34px 0 10px; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(1.8rem, 5vw, 2.45rem); line-height: 1.1; }
.app-builder-login-card > p { color: #aeb4bf; line-height: 1.65; }
.app-builder-login-form { margin-top: 22px; display: grid; gap: 14px; }
.app-builder-login-form label, .app-builder-form > label { display: grid; gap: 7px; font-size: .78rem; font-weight: 800; }
.app-builder-login-form input { width: 100%; min-height: 49px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 11px; color: #fff; outline: 0; background: rgba(255, 255, 255, .07); }
.app-builder-login-form input:focus { border-color: var(--brand-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color) 18%, transparent); }
.app-builder-login-form button { min-height: 50px; border: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; background: var(--brand-color); font-weight: 900; cursor: pointer; }
.app-builder-login-divider { margin: 20px 0 14px; position: relative; color: #747b86; font-size: .68rem; text-align: center; }
.app-builder-login-divider::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; border-top: 1px solid rgba(255, 255, 255, .11); }
.app-builder-login-divider span { padding: 0 10px; position: relative; background: #15181e; }
.app-builder-google-login { min-height: 50px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 11px; color: #fff; background: rgba(255, 255, 255, .07); font-size: .82rem; font-weight: 800; text-decoration: none; transition: border-color .2s, background .2s; }
.app-builder-google-login:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .11); }

.app-builder-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.app-builder-sidebar { height: 100vh; padding: 28px 20px 20px; position: sticky; top: 0; display: flex; flex-direction: column; color: #fff; background: var(--sidebar); }
.app-builder-sidebar nav { margin-top: 44px; display: grid; gap: 6px; }
.app-builder-sidebar nav > span { margin: 0 11px 8px; color: #747b85; font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.app-builder-sidebar nav a { min-height: 44px; padding: 0 12px; border-radius: 10px; display: flex; align-items: center; gap: 11px; color: #aeb3bd; font-size: .86rem; font-weight: 700; text-decoration: none; }
.app-builder-sidebar nav a i { width: 18px; text-align: center; }
.app-builder-sidebar nav a:hover, .app-builder-sidebar nav a.is-active { color: #fff; background: rgba(255, 255, 255, .075); }
.app-builder-sidebar nav a.is-active i { color: var(--brand-color); }
.app-builder-sidebar-account { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .09); display: grid; grid-template-columns: 38px minmax(0, 1fr) 28px; align-items: center; gap: 10px; }
.app-builder-sidebar-account > span { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--brand-color); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; }
.app-builder-sidebar-account div { min-width: 0; display: grid; gap: 2px; }
.app-builder-sidebar-account strong, .app-builder-sidebar-account small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-builder-sidebar-account strong { font-size: .75rem; }
.app-builder-sidebar-account small { color: #818893; font-size: .58rem; }
.app-builder-sidebar-account a { color: #858c96; text-align: center; }

.app-builder-main { min-width: 0; padding: 32px clamp(24px, 4vw, 54px) 48px; }
.app-builder-topbar { max-width: 1180px; margin: 0 auto 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.app-builder-topbar p { margin: 0 0 5px; color: var(--brand-color); font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.app-builder-topbar h1 { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.15; }
.app-builder-open { min-height: 42px; padding: 0 15px; border: 1px solid #dfe3e8; border-radius: 10px; display: flex; align-items: center; gap: 8px; color: #515862; background: #fff; font-size: .75rem; font-weight: 800; text-decoration: none; }
.app-builder-notice { max-width: 1180px; margin: 0 auto 18px; padding: 13px 16px; border: 1px solid #cfe8da; border-radius: 11px; color: #168a50; background: #f3faf6; font-size: .8rem; font-weight: 700; }
.app-builder-notice.is-error { border-color: #f2c6c9; color: #b20710; background: #fff5f5; }
.app-builder-login-card .app-builder-notice { margin: 14px 0; color: #ff9da3; background: rgba(229, 9, 20, .08); }
.app-builder-grid { max-width: 1180px; margin: auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); gap: 24px; align-items: start; }
.app-builder-panel, .app-builder-preview-panel { border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(22, 26, 31, .055); }
.app-builder-panel { padding: 25px; }
.app-builder-panel-heading { padding-bottom: 20px; border-bottom: 1px solid #edf0f3; display: flex; align-items: center; gap: 13px; }
.app-builder-panel-heading > span { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--brand-color); background: color-mix(in srgb, var(--brand-color) 10%, #fff); }
.app-builder-panel h2, .app-builder-preview-panel h2 { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.04rem; }
.app-builder-panel-heading p, .app-builder-preview-heading p { margin: 4px 0 0; color: var(--muted); font-size: .72rem; }

.app-builder-form { margin-top: 22px; display: grid; gap: 20px; }
.app-builder-form > label, .app-builder-form fieldset { color: #4c535d; }
.app-builder-form small { color: #9298a1; font-size: .65rem; font-weight: 600; }
.app-builder-field-label { color: #4c535d; font-size: .78rem; font-weight: 800; }
.app-builder-form input[name="title"], .app-builder-teacher-fields input, .app-builder-domain-input { width: 100%; min-height: 47px; border: 1px solid #dce0e5; border-radius: 10px; color: #343941; background: #fff; outline: 0; }
.app-builder-form input[name="title"], .app-builder-teacher-fields input { padding: 0 13px; }
.app-builder-teacher-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app-builder-teacher-fields label { display: grid; gap: 7px; color: #4c535d; font-size: .78rem; font-weight: 800; }
.app-builder-teacher-fields input[readonly] { color: #777e88; background: #f5f6f8; cursor: not-allowed; }
.app-builder-form input:focus, .app-builder-domain-input:focus-within { border-color: var(--brand-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color) 10%, transparent); }
.app-builder-domain-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; overflow: hidden; }
.app-builder-domain-input input { min-width: 0; height: 45px; padding: 0 6px 0 13px; border: 0; outline: 0; background: transparent; }
.app-builder-domain-input input[readonly] { color: #656c76; background: #f8f9fa; }
.app-builder-domain-input b { height: 45px; padding: 0 13px; border-left: 1px solid #e4e7eb; display: flex; align-items: center; color: #7d848e; background: #f7f8f9; font-size: .72rem; }
.app-builder-domain-status { min-height: 20px; display: flex; align-items: center; gap: 6px; color: #8c939c; font-size: .66rem; font-weight: 700; }
.app-builder-domain-status.is-checking { color: #8b651d; }
.app-builder-domain-status.is-available { color: #168a50; }
.app-builder-domain-status.is-unavailable { color: #b20710; }
.app-builder-form fieldset { margin: 0; padding: 0; border: 0; }
.app-builder-form legend { margin-bottom: 8px; font-size: .78rem; font-weight: 800; }
.app-builder-color-row { min-height: 48px; padding: 6px 9px; border: 1px solid #dce0e5; border-radius: 10px; display: flex; align-items: center; gap: 10px; }
.app-builder-color-row > input { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: transparent; cursor: pointer; }
.app-builder-color-row > input[type="text"] { width: 86px; height: 34px; padding: 0 9px; border: 1px solid #e1e4e8; border-radius: 7px; color: #343941; background: #f8f9fa; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; font-weight: 800; text-transform: uppercase; outline: 0; }
.app-builder-color-row > input[type="text"].is-invalid { border-color: #d44; color: #b20710; background: #fff5f5; }
.app-builder-swatches { margin-left: auto; display: flex; gap: 7px; }
.app-builder-swatches button { width: 25px; height: 25px; padding: 0; border: 3px solid #fff; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px #d8dce1; cursor: pointer; }
.app-builder-title-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.app-builder-title-options label { min-width: 0; cursor: pointer; }
.app-builder-title-options input { position: absolute; opacity: 0; pointer-events: none; }
.app-builder-title-options span { min-height: 67px; padding: 10px; border: 1px solid #dfe3e8; border-radius: 10px; display: grid; align-content: center; gap: 5px; color: #343941; background: #fff; transition: border-color .2s, box-shadow .2s; }
.app-builder-title-options input:checked + span { border-color: var(--brand-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-color) 12%, transparent); }
.app-builder-title-options b { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.app-builder-title-options em { color: var(--app-color); font-style: normal; }
.app-builder-title-options small { font-size: .57rem; }
.app-builder-title-style > small { margin-top: 7px; display: block; }
.app-builder-icon-field { display: grid; gap: 8px; }
.app-builder-icon-upload { min-height: 92px; padding: 12px; border: 1px dashed #cbd1d8; border-radius: 12px; display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; align-items: center; gap: 13px; background: #fafbfc; }
.app-builder-icon-upload > img { width: 66px; height: 66px; border: 1px solid #e1e4e8; border-radius: 15px; object-fit: cover; background: #fff; box-shadow: 0 5px 14px rgba(28, 32, 38, .08); }
.app-builder-icon-upload > div { min-width: 0; display: grid; gap: 4px; }
.app-builder-icon-upload strong { overflow: hidden; color: #3c424b; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.app-builder-icon-upload small { line-height: 1.45; }
.app-builder-icon-button { min-height: 38px; padding: 0 12px; border: 1px solid #d8dce2; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #4e5661; background: #fff; font-size: .7rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.app-builder-icon-button:hover { border-color: var(--brand-color); color: var(--brand-color); }
.app-builder-icon-button input { width: 1px; height: 1px; position: absolute; overflow: hidden; opacity: 0; }
.app-builder-toggle { min-height: 62px; padding: 11px 12px; border: 1px solid #e1e4e8; border-radius: 11px; grid-template-columns: 42px minmax(0, 1fr) !important; align-items: center; }
.app-builder-toggle > input { position: absolute; opacity: 0; }
.app-builder-toggle > span { width: 38px; height: 22px; border-radius: 999px; position: relative; background: #cfd4da; transition: .2s; }
.app-builder-toggle > span::after { content: ""; width: 16px; height: 16px; position: absolute; top: 3px; left: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .18); transition: .2s; }
.app-builder-toggle > input:checked + span { background: var(--brand-color); }
.app-builder-toggle > input:checked + span::after { transform: translateX(16px); }
.app-builder-toggle div { display: grid; gap: 3px; }
.app-builder-toggle strong { font-size: .76rem; }
.app-builder-connected { padding: 13px; border: 1px solid color-mix(in srgb, var(--brand-color) 22%, #e5e7eb); border-radius: 11px; display: flex; gap: 11px; color: #3e4650; background: color-mix(in srgb, var(--brand-color) 5%, #fff); }
.app-builder-connected > i { margin-top: 2px; color: var(--brand-color); }
.app-builder-connected div { display: grid; gap: 3px; }
.app-builder-connected strong { font-size: .74rem; }
.app-builder-connected small { line-height: 1.45; }
.app-builder-submit { min-height: 49px; border: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; background: var(--brand-color); box-shadow: 0 12px 25px color-mix(in srgb, var(--brand-color) 24%, transparent); font-weight: 900; cursor: pointer; }
.app-builder-submit:disabled, .app-builder-login-form button:disabled { cursor: wait; opacity: .78; }
.app-builder-sidebar-account a.is-loading { color: #fff; pointer-events: none; }

.app-builder-preview-panel { padding: 23px; position: sticky; top: 25px; }
.app-builder-preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.app-builder-status { min-height: 25px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; color: #737a84; background: #f0f2f4; font-size: .6rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.app-builder-status i { width: 6px; height: 6px; border-radius: 50%; background: #969ca5; }
.app-builder-status.is-ready { color: #168a50; background: #edf9f2; }
.app-builder-status.is-ready i { background: #20a768; }
.app-builder-status.is-waiting_ssl, .app-builder-status.is-provisioning { color: #a66a0a; background: #fff7e8; }
.app-builder-status.is-waiting_ssl i, .app-builder-status.is-provisioning i { background: #eea52c; }
.app-builder-preview-controls { margin-top: 18px; display: grid; gap: 7px; }
.app-builder-preview-toolbar { padding: 4px; border: 1px solid #e2e5e9; border-radius: 10px; display: flex; align-items: center; gap: 3px; background: #f6f7f9; }
.app-builder-preview-toolbar button { min-height: 31px; padding: 0 10px; border: 0; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #727984; background: transparent; font-size: .65rem; font-weight: 800; cursor: pointer; }
.app-builder-preview-toolbar button.is-active { color: #343941; background: #fff; box-shadow: 0 2px 6px rgba(20, 24, 29, .1); }
.app-builder-preview-toolbar > span { margin-left: auto; padding-right: 7px; color: #9298a1; font-size: .58rem; font-weight: 700; }
.app-builder-preview-toolbar > span.is-updating { color: #8b651d; }
.app-builder-preview-toolbar > span.is-saved { color: #168a50; }
.app-builder-preview-toolbar > span.is-error { color: #b20710; }
.app-builder-phone { width: min(342px, 100%); height: auto; aspect-ratio: 390 / 844; margin: 18px auto 14px; padding: 7px; border-radius: 32px; background: #16191e; box-shadow: 0 25px 60px rgba(20, 24, 29, .2); }
.app-builder-phone iframe { width: 100%; height: 100%; border: 0; border-radius: 25px; display: block; background: #fff; }
.app-builder-preview-url { margin: 0; color: #858c96; font-size: .65rem; text-align: center; }
.app-builder-preview-url i { margin-right: 4px; color: #20a768; }

@media (max-width: 920px) {
    .app-builder-shell { grid-template-columns: 1fr; }
    .app-builder-sidebar { height: auto; padding: 17px 20px; position: static; flex-direction: row; align-items: center; gap: 18px; }
    .app-builder-sidebar nav { margin: 0 0 0 auto; display: flex; }
    .app-builder-sidebar nav > span, .app-builder-sidebar nav a:not(.is-active), .app-builder-sidebar-account div { display: none; }
    .app-builder-sidebar-account { width: auto; margin: 0; padding: 0; border: 0; grid-template-columns: 34px 28px; }
    .app-builder-sidebar-account > span { width: 34px; height: 34px; }
    .app-builder-grid { grid-template-columns: 1fr; }
    .app-builder-preview-panel { position: static; }
    .app-builder-main { padding-top: 25px; }
}

@media (max-width: 560px) {
    .app-builder-main { padding: 22px 14px 36px; }
    .app-builder-sidebar { padding: 14px; }
    .app-builder-brand { font-size: 1.05rem; }
    .app-builder-brand em { display: none; }
    .app-builder-topbar { align-items: flex-start; }
    .app-builder-topbar h1 { font-size: 1.55rem; }
    .app-builder-open { width: 41px; padding: 0; justify-content: center; font-size: 0; }
    .app-builder-panel, .app-builder-preview-panel { padding: 18px; border-radius: 15px; }
    .app-builder-color-row { flex-wrap: wrap; }
    .app-builder-swatches { width: 100%; margin: 3px 0 0; }
    .app-builder-title-options { grid-template-columns: 1fr; }
    .app-builder-teacher-fields { grid-template-columns: 1fr; }
    .app-builder-icon-upload { grid-template-columns: 58px minmax(0, 1fr); }
    .app-builder-icon-upload > img { width: 58px; height: 58px; border-radius: 13px; }
    .app-builder-icon-button { grid-column: 1 / -1; }
    .app-builder-preview-toolbar { flex-wrap: wrap; }
    .app-builder-preview-toolbar > span { width: 100%; margin: 2px 0 0; padding: 3px 6px; text-align: center; }
    .app-builder-login { padding: 14px; }
    .app-builder-login-card { padding: 26px 22px 30px; }
    .app-builder-login-icon { right: 20px; }
}