.sjp-page { --sjp-green: var(--accent, #c4f26b); color: var(--text, #eef1f6); min-width: 0; }
.sjp-page *, .sjp-dialog * { box-sizing: border-box; }
.sjp-page [hidden] { display: none !important; }
.sjp-page button, .sjp-page input, .sjp-page textarea, .sjp-page select { font: inherit; }
.sjp-page button { cursor: pointer; }
.sjp-page button, .sjp-page input, .sjp-page textarea, .sjp-page select { -webkit-tap-highlight-color: transparent; }
.sjp-page button:focus-visible, .sjp-page input:focus-visible, .sjp-page textarea:focus-visible, .sjp-page select:focus-visible, .sjp-page pre:focus-visible { outline: 2px solid var(--sjp-green); outline-offset: 4px; }
.sjp-page .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.sjp-page .panel { min-width: 0; }
.sjp-header { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 27px; }
.sjp-header .eyebrow { margin: 0 0 11px; color: var(--sjp-green); font-size: 10px; letter-spacing: .18em; font-weight: 600; }
.sjp-header .page-title { margin: 0; font-size: clamp(25px, 2.6vw, 34px); font-weight: 580; line-height: 1.35; letter-spacing: -.04em; }
.sjp-header .page-subtitle { margin: 11px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.sjp-header-actions { display: flex; gap: 15px; align-items: center; flex-shrink: 0; }
.sjp-preview-badge { display: inline-flex; gap: 7px; align-items: center; border: 1px solid var(--line); color: #b2baca; padding: 7px 10px; border-radius: 6px; font-size: 11px; }
.sjp-preview-badge > span { width: 5px; height: 5px; background: var(--sjp-green); border-radius: 50%; }
.sjp-notice { display: flex; gap: 10px; align-items: flex-start; padding: 13px 16px; border: 1px solid #303729; background: #151c13; border-radius: 9px; margin-bottom: 23px; color: #aab79b; font-size: 11px; line-height: 1.8; }
.sjp-notice > svg { flex-shrink: 0; margin-top: 2px; color: #bdd496; }
.sjp-notice p { margin: 0; }
.sjp-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; color: #9da7b8; border: 1px solid transparent; border-radius: 7px; background: transparent; }
.sjp-icon-button:hover { color: var(--text); background: #222a36; border-color: #313b4a; }
.sjp-text-button { color: #acb6c8; font-size: 11px !important; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; }
.sjp-text-button:hover { color: var(--sjp-green); }
.sjp-small-label { color: var(--muted); font-size: 10px; line-height: 1.6; }
.sjp-translation { overflow: hidden; }
.sjp-translation-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 23px; border-bottom: 1px solid var(--line); }
.sjp-language-pair { display: flex; align-items: center; gap: 18px; font-size: 13px; font-weight: 500; }
.sjp-swap { width: 30px; height: 30px; border: 1px solid var(--line); background: var(--panel-soft); }
.sjp-translation-columns { display: grid; grid-template-columns: 1fr 1fr; }
.sjp-editor-pane { min-width: 0; padding: 19px 23px; display: flex; flex-direction: column; }
.sjp-editor-pane + .sjp-editor-pane { border-left: 1px solid var(--line); background: #10151e; }
.sjp-editor-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 29px; color: #bbc4d3; font-size: 11px; }
.sjp-translation-text { min-height: 290px; width: 100%; resize: vertical; color: var(--text); background: transparent; border: 0; padding: 18px 1px; line-height: 2; font-size: 17px !important; }
.sjp-translation-text::placeholder { font-size: 13px; color: #5d687b; }
.sjp-translation-text[dir="rtl"] { font-family: "Noto Sans Arabic", "Microsoft Uighur", "Segoe UI", sans-serif; }
.sjp-editor-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #69758a; font-size: 10px; padding-top: 12px; }
.sjp-empty-result { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 290px; text-align: center; }
.sjp-empty-icon { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid #26313c; border-radius: 17px; color: #526475; background: #141c25; margin-bottom: 16px; }
.sjp-empty-result h2 { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: #828fa3; }
.sjp-empty-result p { color: #566276; font-size: 11px; line-height: 1.9; margin: 0; }
.sjp-translation-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 23px; border-top: 1px solid var(--line); }
.sjp-translation-actions > div { display: flex; align-items: center; gap: 12px; }
.sjp-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.sjp-info-card { padding: 23px; }
.sjp-feature-icon { display: inline-flex; align-items: center; justify-content: center; color: #9caac0; width: 34px; height: 34px; border: 1px solid #2a3442; background: #19212c; border-radius: 9px; }
.sjp-info-card h2 { margin: 16px 0 8px; font-size: 13px; font-weight: 500; }
.sjp-info-card p { font-size: 11px; line-height: 1.9; color: var(--muted); margin: 0; }
.sjp-local-status { position: fixed; bottom: 26px; left: 50%; z-index: 80; max-width: min(90vw, 500px); border-radius: 10px; color: #dfe9d3; background: #25301d; box-shadow: 0 8px 35px #0005; font-size: 12px; }
.sjp-local-status:not(:empty) { padding: 13px 18px; }
.sjp-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.sjp-voice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
.sjp-voice-main { display: grid; gap: 18px; min-width: 0; }
.sjp-section { padding: 23px; }
.sjp-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 21px; }
.sjp-section-heading > div { display: flex; align-items: center; gap: 10px; }
.sjp-section-heading h2 { font-size: 13px; font-weight: 500; margin: 0; }
.sjp-step { color: #647287; font: 11px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .05em; }
.sjp-voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.sjp-voice-card { position: relative; display: flex; align-items: center; gap: 11px; text-align: left; padding: 15px 12px; color: var(--text); border: 1px solid var(--line); border-radius: 11px; background: #171e28; }
.sjp-voice-card:hover { border-color: #526240; }
.sjp-voice-card.is-selected { border-color: #91b64c; background: #1b241b; }
.sjp-voice-avatar { display: grid; place-items: center; position: relative; flex-shrink: 0; width: 46px; height: 51px; border-radius: 10px; }
.sjp-voice-avatar small { position: absolute; font: 7px ui-monospace, monospace; bottom: 4px; right: 5px; opacity: .65; }
.sjp-tone-lime { color: #b7d291; background: linear-gradient(145deg, #3e4e32, #233126); }
.sjp-tone-blue { color: #a7b9db; background: linear-gradient(145deg, #354c65, #202c3b); }
.sjp-tone-rose { color: #d6adbc; background: linear-gradient(145deg, #573d50, #332631); }
.sjp-tone-amber { color: #d9c391; background: linear-gradient(145deg, #61533b, #332c23); }
.sjp-voice-card-info { display: grid; gap: 5px; }
.sjp-voice-card-info strong { font-size: 12px; font-weight: 500; }
.sjp-voice-card-info > span { color: #8b98ab; font-size: 10px; }
.sjp-voice-card-info small { color: #5f6d7f; font-size: 9px; }
.sjp-radio-dot { width: 12px; height: 12px; border: 1px solid #485469; border-radius: 50%; position: absolute; top: 12px; right: 10px; }
.sjp-voice-card.is-selected .sjp-radio-dot { border: 3px solid var(--sjp-green); background: #26361a; }
.sjp-script-text { width: 100%; min-height: 185px; resize: vertical; border: 0; border-bottom: 1px solid #252e3b; background: none; color: var(--text); font-size: 15px !important; line-height: 1.9; padding: 3px 0 20px; }
.sjp-script-text::placeholder { color: #657186; }
.sjp-audio-placeholder { display: flex; align-items: center; gap: 17px; padding: 23px; overflow: hidden; }
.sjp-audio-placeholder > div:nth-child(2) { flex: 1; }
.sjp-audio-placeholder strong { font-size: 12px; font-weight: 500; color: #9ba8bb; }
.sjp-audio-placeholder p { color: #5f6c80; font-size: 10px; line-height: 1.9; margin: 7px 0 0; }
.sjp-audio-placeholder .badge { font-size: 9px; color: #8e9baf; white-space: nowrap; }
.sjp-wave { width: 100px; height: 60px; display: flex; align-items: center; gap: 2px; flex-shrink: 0; opacity: .45; }
.sjp-wave i { width: 2px; height: calc(var(--bar-height) * .7); background: #7e9d65; border-radius: 2px; }
.sjp-voice-settings { padding: 24px 21px; }
.sjp-fieldset { padding: 0; border: 0; margin: 0 0 25px; min-width: 0; }
.sjp-fieldset legend { width: 100%; padding: 0 0 12px; font-size: 11px; }
.sjp-fieldset legend span, .sjp-field label > span { float: right; color: #67758a; font-size: 9px; }
.sjp-emotions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.sjp-emotion { padding: 9px 5px; background: #19212d; border: 1px solid #2b3442; border-radius: 7px; color: #8d9bb0; font-size: 11px !important; }
.sjp-emotion:hover { color: #ced9e9; }
.sjp-emotion.is-selected { color: #c4dcaa; background: #26311f; border-color: #687d44; }
.sjp-field { margin-bottom: 24px; }
.sjp-field label { display: block; margin-bottom: 10px; font-size: 11px; }
.sjp-field .select, .sjp-field .input { width: 100%; padding: 11px 12px; min-height: 40px; border-radius: 7px; background-color: #151d28; border: 1px solid #303b4b; color: #c4cddd; font-size: 12px; }
.sjp-field p { margin: 8px 0 0; color: #69788c; font-size: 10px; line-height: 1.8; }
.sjp-field output { float: right; color: var(--sjp-green); font: 11px ui-monospace, monospace; }
.sjp-range { width: 100%; accent-color: var(--sjp-green); cursor: pointer; }
.sjp-range-labels { display: flex; justify-content: space-between; color: #637186; font-size: 9px; margin-top: 7px; }
.sjp-setting-note { display: flex; align-items: flex-start; gap: 8px; margin: 30px 0 21px; color: #69788c; padding-top: 20px; border-top: 1px solid var(--line); }
.sjp-setting-note > svg { flex-shrink: 0; margin-top: 3px; }
.sjp-setting-note p { font-size: 10px; line-height: 1.8; margin: 0; }
.sjp-full-width { width: 100%; }
.sjp-voice-settings > .btn + .btn { margin-top: 10px; }
.sjp-local-hint { font-size: 9px; color: #657287; text-align: center; margin: 12px 0 0; }
.sjp-project-toolbar, .sjp-billing-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 26px 0 22px; }
.sjp-segmented { display: inline-flex; padding: 4px; border: 1px solid #252e3b; border-radius: 9px; background: #111722; gap: 3px; }
.sjp-segmented button { border: 0; background: transparent; color: #7f8da3; border-radius: 6px; padding: 9px 17px; font-size: 11px; white-space: nowrap; }
.sjp-segmented button.is-active { color: #d6e3c8; background: #2b3725; }
.sjp-segmented button:not(.is-active):hover { color: #c4ccda; background: #1c2430; }
.sjp-search { width: 230px; display: flex; align-items: center; gap: 9px; color: #6b788d; border: 1px solid #2a3443; border-radius: 8px; background: #141b26; padding: 0 13px; }
.sjp-search input { min-width: 0; width: 100%; padding: 11px 0; border: 0; color: var(--text); background: transparent; font-size: 11px; }
.sjp-search input::placeholder { color: #627087; }
.sjp-project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sjp-project-card { overflow: hidden; transition: border-color .16s; }
.sjp-project-card:hover { border-color: #455044; }
.sjp-project-cover { width: 100%; aspect-ratio: 1.7; min-height: 155px; display: block; overflow: hidden; position: relative; border: 0; padding: 0; text-align: left; }
.sjp-cover-city { background: linear-gradient(145deg, #2e4a50 0%, #d19b69 65%, #546053 100%); }
.sjp-cover-street { background: linear-gradient(125deg, #2b3a34 0%, #6e7c57 52%, #bdad7a 100%); }
.sjp-cover-audio { background: radial-gradient(ellipse at 75% 25%, #614f76, transparent 60%), linear-gradient(135deg, #252e48, #352844); }
.sjp-cover-drama { background: radial-gradient(ellipse at 75% 25%, #8a7361, transparent 60%), linear-gradient(135deg, #343443, #544031); }
.sjp-cover-art { position: absolute; inset: 0; opacity: .75; transition: transform .4s; }
.sjp-project-cover:hover .sjp-cover-art { transform: scale(1.04); }
.sjp-cover-city .sjp-cover-art { background: linear-gradient(90deg, transparent 0 6%, #162b31 6% 15%, transparent 15% 17%, #203238 17% 30%, transparent 30% 33%, #263b3e 33% 41%, transparent 41% 45%, #273d3c 45% 58%, transparent 58% 63%, #162e34 63% 73%, transparent 73% 76%, #254048 76% 91%, transparent 91%); clip-path: polygon(0 70%, 6% 70%, 6% 41%, 15% 41%, 15% 63%, 17% 63%, 17% 53%, 30% 53%, 30% 78%, 33% 78%, 33% 37%, 41% 37%, 41% 57%, 45% 57%, 45% 68%, 58% 68%, 58% 65%, 63% 65%, 63% 34%, 73% 34%, 73% 62%, 76% 62%, 76% 55%, 91% 55%, 91% 70%, 100% 70%, 100% 100%, 0 100%); }
.sjp-cover-street .sjp-cover-art { background: repeating-linear-gradient(95deg, #122823 0 17px, transparent 18px 51px); transform: skew(-7deg); clip-path: polygon(0 0, 43% 0, 30% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 71% 100%, 59% 0); opacity: .35; }
.sjp-cover-audio .sjp-cover-art { inset: 23% 0; background: repeating-linear-gradient(90deg, transparent 0 9px, #ae9ccf77 9px 12px); clip-path: polygon(0 47%, 5% 38%, 10% 44%, 15% 15%, 20% 41%, 25% 26%, 30% 9%, 35% 31%, 40% 19%, 45% 0, 50% 29%, 55% 15%, 60% 31%, 65% 9%, 70% 25%, 75% 35%, 80% 17%, 85% 39%, 90% 44%, 95% 35%, 100% 48%, 100% 54%, 95% 65%, 90% 56%, 85% 61%, 80% 83%, 75% 65%, 70% 75%, 65% 91%, 60% 69%, 55% 85%, 50% 71%, 45% 100%, 40% 81%, 35% 69%, 30% 91%, 25% 74%, 20% 59%, 15% 85%, 10% 56%, 5% 62%, 0 53%); }
.sjp-cover-drama .sjp-cover-art { width: 60%; height: 150%; inset: -20% 12% auto auto; background: linear-gradient(90deg, transparent, #d6b18320 25%, #14191d99 26% 27%, #d6b18320 28% 50%, #14191d99 51% 52%, #d6b18320 53% 76%, transparent 77%); transform: rotate(18deg); }
.sjp-project-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #08101699, transparent 80%); pointer-events: none; }
.sjp-example-tag { position: absolute; top: 13px; left: 13px; z-index: 1; border: 1px solid #ffffff38; background: #111a2455; color: #e4e8e9; font-size: 9px; border-radius: 4px; padding: 3px 7px; backdrop-filter: blur(6px); }
.sjp-cover-wordmark { position: absolute; left: 20px; bottom: 23px; z-index: 1; font: 500 23px/1.1 Georgia, serif; letter-spacing: .05em; color: #eeece3; }
.sjp-cover-wordmark em { font-weight: 400; font-size: 20px; letter-spacing: .08em; }
.sjp-project-duration { position: absolute; z-index: 1; right: 11px; bottom: 11px; padding: 4px 6px; border-radius: 4px; font: 9px ui-monospace, monospace; color: #e2e8ea; background: #07121b99; }
.sjp-cover-open { position: absolute; right: 15px; top: 14px; z-index: 1; color: #edf0eb; opacity: .6; }
.sjp-project-body { padding: 17px 19px; }
.sjp-project-meta { display: flex; justify-content: space-between; gap: 10px; color: #7c8a9e; font-size: 9px; }
.sjp-project-meta > span:last-child { color: #b0bda0; }
.sjp-project-body h2 { margin: 11px 0 8px; font-size: 14px; font-weight: 500; }
.sjp-project-body h2 button { font: inherit; color: inherit; text-align: left; border: 0; background: none; padding: 0; }
.sjp-project-body h2 button:hover { color: var(--sjp-green); }
.sjp-project-body > p { font-size: 10px; color: #6b7a90; line-height: 1.9; min-height: 37px; margin: 0; }
.sjp-project-bottom { margin-top: 16px; padding-top: 11px; border-top: 1px solid #222c39; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sjp-project-bottom > span { color: #647288; font-size: 9px; }
.sjp-project-count { margin: 20px 0 0; color: #617087; font-size: 10px; }
.sjp-search-empty { text-align: center; padding: 50px 20px; color: #738198; }
.sjp-search-empty > svg { margin: auto; }
.sjp-search-empty h2 { font-size: 16px; color: #c4cede; font-weight: 500; }
.sjp-search-empty p { font-size: 12px; }
.sjp-search-empty button { margin-top: 14px; }
.sjp-developer-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 20px 20px 36px 9px; gap: 24px; overflow: hidden; }
.sjp-terminal-label { font: 9px ui-monospace, monospace; color: #7f8c9f; letter-spacing: .12em; }
.sjp-developer-intro h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.45; letter-spacing: -.045em; font-weight: 500; margin: 17px 0; }
.sjp-developer-intro h2 span { color: #a7c685; }
.sjp-developer-intro p { color: #7d8ba0; font-size: 12px; line-height: 1.9; margin: 0 0 23px; }
.sjp-api-orbit { height: 235px; position: relative; }
.sjp-orbit-ring { position: absolute; width: 285px; height: 170px; border: 1px solid #35432c; border-radius: 50%; top: 35px; left: calc(50% - 142px); transform: rotate(-22deg); box-shadow: 0 0 60px #93bf4210 inset; }
.sjp-orbit-ring::after { content: ''; display: block; position: absolute; inset: -24px; border: 1px solid #253021; border-radius: 50%; transform: rotate(37deg); }
.sjp-orbit-core { position: absolute; width: 79px; height: 79px; top: 80px; left: calc(50% - 39px); display: grid; place-items: center; color: #c5e2a7; border: 1px solid #4d603b; background: linear-gradient(135deg, #2b3d24, #152417); border-radius: 20px; box-shadow: 0 0 70px #a5d14e15; }
.sjp-orbit-node { position: absolute; padding: 10px 13px; border-radius: 8px; background: #18201c; border: 1px solid #34402c; font-size: 10px; color: #aebba6; }
.sjp-orbit-translate { top: 18px; left: 16%; }
.sjp-orbit-voice { top: 102px; right: 0; }
.sjp-orbit-video { bottom: 15px; left: 10%; }
.sjp-orbit-caption { position: absolute; bottom: -12px; right: 0; color: #5c6a59; font: 9px ui-monospace, monospace; }
.sjp-developer-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(270px, 1fr); gap: 20px; }
.sjp-code-panel { overflow: hidden; display: flex; flex-direction: column; }
.sjp-code-header { display: flex; justify-content: space-between; align-items: center; padding: 11px 15px; border-bottom: 1px solid var(--line); background: #151c27; gap: 8px; }
.sjp-code-tabs { display: flex; gap: 3px; }
.sjp-code-tabs button { color: #6e7c93; border: 0; background: transparent; border-radius: 5px; padding: 8px 11px; font: 10px ui-monospace, monospace; }
.sjp-code-tabs button.is-active { color: #c2d1b1; background: #25321f; }
.sjp-code { padding: 24px; margin: 0; color: #aabf99; background: #0c121b; font: 11px/2 ui-monospace, SFMono-Regular, Consolas, monospace; overflow: auto; flex: 1; min-height: 380px; tab-size: 2; }
.sjp-code-footer { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); font-size: 9px; color: #63728a; }
.sjp-status-dot { width: 5px; height: 5px; border-radius: 50%; background: #879e62; }
.sjp-api-side { display: grid; gap: 18px; }
.sjp-api-side .sjp-section-heading { margin-bottom: 10px; }
.sjp-api-side .badge { font-size: 9px; color: #89966f; background: #20291b; border: 1px solid #313e25; }
.sjp-endpoint { display: flex; gap: 12px; align-items: flex-start; padding: 18px 0; }
.sjp-endpoint + .sjp-endpoint { border-top: 1px solid #242e3b; }
.sjp-endpoint > span { font: 8px ui-monospace, monospace; color: #9bc9a7; padding: 4px 5px; border: 1px solid #2d4b3a; border-radius: 4px; background: #1a2c24; }
.sjp-endpoint code { font: 11px ui-monospace, monospace; color: #b3bfd2; }
.sjp-endpoint p { color: #6c7b91; font-size: 10px; margin: 7px 0 0; }
.sjp-api-key-card { padding: 23px; }
.sjp-api-key-card > .sjp-feature-icon { float: right; }
.sjp-api-key-card h2 { font-size: 13px; font-weight: 500; margin: 0 0 11px; }
.sjp-api-key-card p { color: #75849b; font-size: 11px; line-height: 1.9; margin: 0 0 19px; max-width: 80%; }
.sjp-currency { color: #6e7c90; font-size: 10px; }
.sjp-currency strong { margin-left: 9px; color: #adb9ca; font-weight: 500; }
.sjp-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; padding-top: 9px; }
.sjp-plan { position: relative; padding: 29px 24px 25px; }
.sjp-plan-featured { border-color: #7c9950 !important; background: linear-gradient(155deg, #202a1c, #131b21 70%) !important; }
.sjp-plan-ribbon { position: absolute; top: -10px; left: 24px; padding: 4px 10px; border-radius: 4px; color: #cce5ac; background: #344624; border: 1px solid #586e3a; font-size: 9px; }
.sjp-plan-en { font: 9px ui-monospace, monospace; letter-spacing: .15em; color: #75849a; }
.sjp-plan h2 { font-size: 18px; font-weight: 500; margin: 14px 0 8px; }
.sjp-plan-description { color: #7d8ba1; font-size: 10px; line-height: 1.8; }
.sjp-plan-price { margin-top: 30px; font-size: 28px; letter-spacing: -.03em; font-weight: 500; }
.sjp-plan-price > span { display: block; color: #7e8ba0; font-size: 10px; letter-spacing: 0; font-weight: 400; margin-top: 7px; }
.sjp-plan-quota { color: #66758b; font-size: 10px; margin: 17px 0 21px; }
.sjp-plan ul { padding: 22px 0 0; margin: 23px 0 0; list-style: none; border-top: 1px solid #2a3441; display: grid; gap: 14px; }
.sjp-plan li { display: flex; align-items: center; gap: 8px; color: #96a4b8; font-size: 10px; line-height: 1.6; }
.sjp-plan li > svg { flex-shrink: 0; color: #849b68; }
.sjp-billing-footnote { text-align: center; color: #6d7d92; font-size: 10px; margin: 20px 0 28px; line-height: 1.8; }
.sjp-usage-panel { padding: 27px; }
.sjp-usage-panel > p { color: #79889f; font-size: 11px; line-height: 1.8; margin: 0 0 23px; }
.sjp-usage-panel .badge { color: #92a97e; font-size: 10px; }
.sjp-usage-row { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 14px; padding: 20px 10px; border-top: 1px solid #293442; align-items: center; font-size: 12px; color: #77889f; }
.sjp-usage-row strong { color: #b6c3d4; font-weight: 500; }
.sjp-usage-row > :last-child { text-align: right; }
.sjp-usage-table-head { background: #171f2c; border-radius: 6px; color: #64768e; font-size: 10px; padding: 13px 10px; border: 0; }
.sjp-usage-bottom { border-top: 1px solid #293442; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sjp-usage-bottom p { color: #6c7c92; font-size: 10px; line-height: 1.8; }
.sjp-settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 21px; align-items: start; }
.sjp-settings-section { padding: 25px; margin-bottom: 20px; }
.sjp-settings-section-title { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.sjp-settings-section-title h2 { font-size: 13px; font-weight: 500; margin: 0 0 6px; }
.sjp-settings-section-title p { font-size: 10px; color: #728299; line-height: 1.7; margin: 0; }
.sjp-settings-section > .sjp-field { margin-bottom: 0; }
.sjp-settings-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 20px; }
.sjp-readonly-field { min-height: 40px; padding: 11px 12px; font-size: 12px; color: #a7b5c9; border: 1px solid #2d3848; border-radius: 7px; background: #151d28; }
.sjp-readonly-field span { float: right; font-size: 9px; color: #5e6e85; padding-top: 2px; }
.sjp-toggle-row { display: flex; position: relative; justify-content: space-between; align-items: center; gap: 15px; padding-top: 23px; border-top: 1px solid #293442; cursor: pointer; }
.sjp-toggle-row strong { display: block; font-weight: 500; font-size: 11px; }
.sjp-toggle-row small { color: #6c7d94; font-size: 10px; line-height: 1.8; display: block; margin-top: 7px; }
.sjp-toggle-row > input { position: absolute; right: 0; width: 38px; height: 23px; opacity: 0; z-index: 1; cursor: pointer; }
.sjp-switch { width: 38px; height: 22px; border-radius: 20px; background: #344153; flex-shrink: 0; padding: 3px; transition: background .16s; }
.sjp-switch::before { content: ''; display: block; width: 16px; height: 16px; border-radius: 50%; background: #99a6b8; transition: transform .16s; }
.sjp-toggle-row > input:checked + .sjp-switch { background: #566d37; }
.sjp-toggle-row > input:checked + .sjp-switch::before { background: var(--sjp-green); transform: translateX(16px); }
.sjp-toggle-row > input:focus-visible + .sjp-switch { outline: 2px solid var(--sjp-green); outline-offset: 4px; }
.sjp-settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sjp-settings-actions > span { font-size: 10px; color: #75869e; line-height: 1.8; }
.sjp-settings-actions > div { display: flex; gap: 10px; flex-shrink: 0; }
.sjp-settings-aside { padding: 27px 23px; text-align: center; }
.sjp-local-avatar { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 15px; color: #c9e5ac; background: linear-gradient(145deg, #3c502f, #202d20); border: 1px solid #4f643e; font: 29px Georgia, serif; }
.sjp-settings-aside h2 { font-size: 13px; font-weight: 500; margin: 0 0 10px; }
.sjp-settings-aside p { color: #74869e; font-size: 10px; line-height: 1.9; margin: 0 0 23px; }
.sjp-settings-aside-row { display: flex; justify-content: space-between; padding: 13px 0; border-top: 1px solid #273341; font-size: 10px; color: #6c7d94; }
.sjp-settings-aside-row strong { color: #a5b5ca; font-weight: 400; }
.sjp-settings-aside-row:last-child { padding-bottom: 0; }
.sjp-storage-card { margin-top: 18px; text-align: left; padding: 23px; }
.sjp-storage-card .btn { font-size: 11px; }
.sjp-transcribe-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 21px; align-items: stretch; }
.sjp-audio-dropzone { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 13px; border: 1px dashed #40523b; background: radial-gradient(ellipse at center, #23321f55, #151e22 80%); border-radius: 12px; padding: 37px 20px; color: #bdcdb0; text-align: center; }
.sjp-audio-dropzone:hover, .sjp-audio-dropzone.is-dragging { border-color: #a2bf75; background: #1e2c20; }
.sjp-dropzone-icon { display: grid; place-items: center; width: 59px; height: 59px; border: 1px solid #3d4e33; border-radius: 16px; background: #263523; margin-bottom: 6px; color: #b3cf91; }
.sjp-audio-dropzone strong { font-size: 13px; font-weight: 500; }
.sjp-audio-dropzone > span:not(.sjp-dropzone-icon) { font-size: 9px; color: #6a7e8f; line-height: 1.8; }
.sjp-audio-dropzone small { font-size: 9px; color: #577167; }
.sjp-selected-media { display: flex; align-items: center; gap: 11px; border: 1px solid #34402c; background: #1d271d; border-radius: 8px; padding: 13px; margin-top: 14px; }
.sjp-selected-media > div { display: grid; gap: 6px; flex: 1; min-width: 0; }
.sjp-selected-media strong { color: #b4c6a8; font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
.sjp-selected-media span { color: #7a8d74; font-size: 9px; line-height: 1.6; }
.sjp-selected-media > .sjp-feature-icon { flex-shrink: 0; }
.sjp-transcribe-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 23px; }
.sjp-asr-checkbox { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; font-size: 11px; cursor: pointer; }
.sjp-asr-checkbox input { accent-color: var(--sjp-green); width: 14px; height: 14px; }
.sjp-asr-checkbox small { color: #61748d; display: inline-block; margin-left: 7px; font-size: 9px; }
.sjp-transcript-panel { padding: 23px; display: flex; flex-direction: column; background: #101720 !important; }
.sjp-transcript-empty { margin: auto; text-align: center; max-width: 270px; padding: 40px 10px; }
.sjp-transcript-lines { width: 94px; height: 100px; display: flex; flex-direction: column; gap: 12px; padding: 25px 17px; border: 1px solid #2c3a46; border-radius: 11px; background: #19232d; transform: rotate(-5deg); margin: 0 auto 29px; }
.sjp-transcript-lines i { height: 3px; background: #3d4e60; border-radius: 3px; width: 100%; }
.sjp-transcript-lines i:nth-child(2) { width: 78%; }
.sjp-transcript-lines i:nth-child(4) { width: 58%; }
.sjp-transcript-empty h2 { font-size: 16px; font-weight: 500; color: #8f9fb3; margin: 0 0 12px; }
.sjp-transcript-empty p { font-size: 11px; color: #60758f; line-height: 2; margin: 0 0 23px; }
.sjp-transcript-empty .badge { font-size: 9px; color: #62778f; border: 1px solid #2c3a49; padding: 6px 9px; border-radius: 5px; }
.sjp-help-hero { padding: 25px 20px 40px; text-align: center; }
.sjp-help-hero > .sjp-feature-icon { width: 44px; height: 44px; border-radius: 12px; color: #afc996; border-color: #3b4d32; background: #202e21; }
.sjp-help-hero h2 { font-size: 24px; font-weight: 500; letter-spacing: -.025em; margin: 18px 0 22px; }
.sjp-help-search { max-width: 490px; width: 100%; margin: auto; text-align: left; padding: 0 17px; }
.sjp-help-search input { padding: 16px 0; font-size: 12px; }
.sjp-help-hero > p { font-size: 10px; color: #5e738d; margin: 13px 0 0; }
.sjp-help-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 21px; align-items: start; }
.sjp-faq-list { padding: 3px 24px; }
.sjp-faq-item + .sjp-faq-item { border-top: 1px solid #293647; }
.sjp-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 23px 0; list-style: none; color: #bdccdd; font-size: 12px; line-height: 1.8; }
.sjp-faq-item summary::-webkit-details-marker { display: none; }
.sjp-faq-item summary > svg { flex-shrink: 0; color: #7c9270; }
.sjp-faq-item[open] summary > svg { transform: rotate(45deg); }
.sjp-faq-item summary:focus-visible { outline: 2px solid var(--sjp-green); outline-offset: 5px; }
.sjp-faq-item p { color: #7e94af; font-size: 11px; line-height: 2; margin: -4px 20px 24px 0; }
.sjp-help-no-results { padding: 28px 0; text-align: center; color: #8098b4; font-size: 12px; }
.sjp-help-no-results .btn { margin-top: 10px; }
.sjp-help-status, .sjp-help-links { padding: 23px; }
.sjp-help-status h2, .sjp-help-links h2 { font-size: 13px; font-weight: 500; margin: 15px 0 10px; }
.sjp-help-status p { color: #657e9a; font-size: 10px; line-height: 1.9; margin: 0 0 20px; }
.sjp-help-status > div { display: flex; justify-content: space-between; padding: 13px 0; border-top: 1px solid #293647; font-size: 10px; color: #6e85a0; }
.sjp-help-status > div strong { color: #a0b98b; font-weight: 400; }
.sjp-help-links { margin-top: 18px; }
.sjp-help-links h2 { margin-top: 0; margin-bottom: 18px; }
.sjp-help-links button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; padding: 12px 0; color: #95a9c1; background: none; text-align: left; font-size: 11px; }
.sjp-help-links button:hover { color: var(--sjp-green); }
.sjp-help-links button > span { flex: 1; }
.sjp-help-links button + button { border-top: 1px solid #293647; }
.sjp-help-result-count { color: #5d7590; font-size: 10px; margin-top: 18px; }
.sjp-account-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .9fr); max-width: 990px; margin: 34px auto 0; align-items: center; gap: 60px; }
.sjp-account-story { padding: 25px 0 40px; }
.sjp-account-mark { display: block; width: 57px; height: 57px; padding: 11px 10px; border: 1px solid #4b6237; border-radius: 16px; color: #c4e6a4; font-size: 18px; letter-spacing: -.12em; background: linear-gradient(145deg, #35472a, #142218); }
.sjp-account-mark span { position: relative; top: 10px; margin-left: 3px; }
.sjp-account-story .sjp-terminal-label { display: block; margin-top: 27px; font-size: 8px; letter-spacing: .15em; }
.sjp-account-story h2 { font-size: clamp(30px, 3.8vw, 46px); font-weight: 500; line-height: 1.5; letter-spacing: -.045em; margin: 17px 0 19px; }
.sjp-account-description { color: #8295ae; font-size: 12px; line-height: 2; margin: 0; }
.sjp-account-promises { display: grid; gap: 18px; margin-top: 36px; }
.sjp-account-promises > div { display: flex; align-items: flex-start; gap: 13px; }
.sjp-account-promises svg { color: #8da274; margin-top: 3px; }
.sjp-account-promises span { color: #b6c7db; font-size: 12px; }
.sjp-account-promises small { display: block; color: #637e9b; font-size: 10px; margin-top: 6px; }
.sjp-account-card { padding: 29px; background: linear-gradient(145deg, #18212c, #101923) !important; border-color: #344035 !important; }
.sjp-account-tabs { display: flex; gap: 25px; border-bottom: 1px solid #2a3746; margin-bottom: 29px; }
.sjp-account-tabs button { border: 0; border-bottom: 2px solid transparent; padding: 0 0 14px; background: none; color: #6f86a0; font-size: 13px; }
.sjp-account-tabs button.is-active { color: #c1d9aa; border-bottom-color: #aac878; }
.sjp-account-card h2 { font-size: 20px; font-weight: 500; margin: 0 0 11px; }
.sjp-account-form-intro { color: #7b92ac; font-size: 11px; line-height: 1.9; margin: 0 0 27px; }
.sjp-phone-input { display: flex; align-items: center; border: 1px solid #303b4b; border-radius: 7px; background: #151d28; }
.sjp-phone-input > span { color: #93a8c0; font-size: 11px; padding: 0 13px; border-right: 1px solid #324052; }
.sjp-phone-input input { border: 0; background: none; color: #c4cddd; padding: 12px; font-size: 12px; min-width: 0; width: 100%; }
.sjp-phone-input input::placeholder, .sjp-code-input input::placeholder { color: #5d7690; font-size: 11px; }
.sjp-code-input { display: flex; align-items: stretch; gap: 10px; }
.sjp-code-input .input { min-width: 0; flex: 1; }
.sjp-code-input .btn { flex-shrink: 0; font-size: 10px; padding: 0 11px; }
.sjp-account-disclaimer { color: #617c97; font-size: 9px; line-height: 1.9; text-align: center; margin: 15px 0 0; }
.sjp-account-card-footer { border-top: 1px solid #293746; padding-top: 17px; margin-top: 24px; display: flex; justify-content: space-between; align-items: center; }
.sjp-account-card-footer .badge { color: #7f9870; font-size: 9px; border: 1px solid #34452a; background: #202d20; }
.sjp-admin-warning { display: flex; align-items: flex-start; gap: 14px; padding: 19px 21px; border: 1px solid #5a4931; border-radius: 12px; background: #261f17; color: #c8ac80; margin-bottom: 22px; }
.sjp-admin-warning > svg { flex-shrink: 0; margin-top: 2px; }
.sjp-admin-warning > div { flex: 1; }
.sjp-admin-warning strong { font-size: 12px; font-weight: 500; }
.sjp-admin-warning p { font-size: 10px; line-height: 1.9; margin: 8px 0 0; color: #9f8a70; }
.sjp-admin-warning > .badge { flex-shrink: 0; color: #b99d73; border: 1px solid #59482f; font-size: 9px; }
.sjp-admin-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.sjp-admin-overview > div { padding: 21px; }
.sjp-admin-overview span { display: block; color: #718aa5; font-size: 10px; }
.sjp-admin-overview strong { display: block; color: #c1cfdf; font-size: 23px; font-weight: 500; margin: 12px 0 10px; }
.sjp-admin-overview small { display: block; color: #536d87; font-size: 9px; line-height: 1.7; }
.sjp-admin-tabs { display: flex; gap: 25px; border-bottom: 1px solid #283646; margin: 30px 0 23px; overflow-x: auto; }
.sjp-admin-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: #708ba7; font-size: 12px; padding: 0 2px 15px; white-space: nowrap; }
.sjp-admin-tabs button.is-active { color: #c5dcb0; border-bottom-color: #a8c879; }
.sjp-admin-panel { padding: 24px; }
.sjp-admin-panel .sjp-section-heading { margin-bottom: 16px; }
.sjp-admin-panel .badge { font-size: 9px; color: #8ea67a; border: 1px solid #35482e; background: #1d2b1f; }
.sjp-admin-panel .btn { font-size: 11px; }
.sjp-admin-caption { color: #718ca9; font-size: 11px; line-height: 1.9; margin: 0 0 22px; }
.sjp-admin-table-wrap { overflow-x: auto; }
.sjp-admin-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; color: #91a8c1; min-width: 510px; }
.sjp-admin-table th { padding: 12px 14px; font-weight: 400; font-size: 10px; color: #6683a1; background: #182332; }
.sjp-admin-table td { padding: 20px 14px; border-bottom: 1px solid #273747; }
.sjp-admin-table td > strong { display: block; color: #b6cadf; font-size: 12px; font-weight: 500; }
.sjp-admin-table td > small { display: block; margin-top: 8px; color: #57728e; font-size: 9px; }
.sjp-admin-table td:last-child, .sjp-admin-table th:last-child { text-align: right; }
.sjp-admin-status { display: inline-block; font-size: 9px; padding: 5px 8px; background: #253123; border: 1px solid #384d2c; border-radius: 4px; color: #97af83; white-space: nowrap; }
.sjp-admin-panel-footnote { display: flex; align-items: center; gap: 7px; padding-top: 17px; color: #5d7b99; font-size: 10px; line-height: 1.8; }
.sjp-admin-panel-footnote svg { flex-shrink: 0; }
.sjp-admin-model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sjp-admin-model-grid article { display: flex; gap: 13px; padding: 19px; border: 1px solid #2b3b4b; border-radius: 10px; background: #14202c; }
.sjp-admin-model-grid .sjp-feature-icon { flex-shrink: 0; }
.sjp-admin-model-grid h3 { font-size: 12px; font-weight: 500; color: #b8cbdf; margin: 0 0 8px; }
.sjp-admin-model-grid p { font-size: 10px; color: #6c89a7; line-height: 1.8; margin: 0 0 12px; }
.sjp-admin-model-grid article > div > span { color: #5d7b98; font-size: 9px; line-height: 1.7; }
.sjp-admin-voice-note { border-top: 1px solid #2a3a4a; padding-top: 22px; margin-top: 24px; }
.sjp-admin-voice-note h3 { font-size: 12px; font-weight: 500; margin: 0 0 11px; }
.sjp-admin-voice-note p { color: #6e8caa; font-size: 10px; line-height: 1.9; margin: 0 0 12px; }
.sjp-admin-billing-summary { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #2b3d4e; border-radius: 9px; margin: 23px 0; padding: 22px 0; background: #14202b; }
.sjp-admin-billing-summary > div { padding: 0 23px; }
.sjp-admin-billing-summary > div + div { border-left: 1px solid #2b3d4e; }
.sjp-admin-billing-summary span { color: #7694b3; font-size: 10px; display: block; }
.sjp-admin-billing-summary strong { color: #bfd2e8; font-size: 26px; font-weight: 400; display: block; margin: 10px 0; }
.sjp-admin-billing-summary small { color: #5e7d9b; font-size: 9px; line-height: 1.8; display: block; }
.sjp-admin-config-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 23px; }
.sjp-admin-config-actions { border-top: 1px solid #2a3b4c; padding-top: 23px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.sjp-admin-config-actions > span { color: #6584a1; font-size: 10px; line-height: 1.8; }
.sjp-admin-config-actions > div { display: flex; gap: 10px; flex-shrink: 0; }
.sjp-dialog { width: min(510px, calc(100vw - 32px)); border: 1px solid #3c493a; border-radius: 16px; background: #151d27; color: #d8e0eb; padding: 25px; box-shadow: 0 30px 100px #0009; }
.sjp-dialog::backdrop { background: #03070ccb; backdrop-filter: blur(6px); }
.sjp-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.sjp-dialog-heading h2 { font-size: 18px; font-weight: 500; margin: 0; }
.sjp-dialog [data-dialog-body] > p { font-size: 13px; line-height: 1.9; color: #9caec4; }
.sjp-dialog > .btn { margin-top: 13px; float: right; }
.sjp-dialog-steps { padding-left: 20px; display: grid; gap: 21px; }
.sjp-dialog-steps li { padding-left: 5px; color: #93b274; font-size: 13px; }
.sjp-dialog-steps strong { display: block; color: #d4dfed; font-weight: 500; margin-bottom: 7px; }
.sjp-dialog-steps span { color: #869bb5; line-height: 1.8; }
.sjp-dialog-note { padding: 13px 15px; border: 1px solid #34432c; background: #1b271c; border-radius: 8px; color: #a4b992 !important; font-size: 11px !important; line-height: 1.9 !important; margin-top: 23px; }
.sjp-config-list { margin: 0; }
.sjp-config-list > div { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 15px; border-bottom: 1px solid #2b394a; font-size: 12px; }
.sjp-config-list dt { color: #8399b4; }
.sjp-config-list dd { margin: 0; color: #c5d2e3; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.sjp-dialog-project { border-radius: 9px; min-height: 150px; padding: 45px 25px; display: flex; align-items: center; }
.sjp-dialog-project span { font: 24px Georgia, serif; color: #e8e5d9; letter-spacing: .06em; }
@media (min-width: 1600px) { .sjp-project-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1200px) {
  .sjp-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sjp-voice-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 15px; }
  .sjp-section { padding: 19px; }
  .sjp-voice-grid { grid-template-columns: 1fr; }
  .sjp-voice-card { padding: 12px; }
  .sjp-voice-card-info { grid-template-columns: auto auto; align-items: center; column-gap: 12px; }
  .sjp-voice-card-info small { grid-column: 1 / -1; }
  .sjp-plan { padding: 27px 19px 23px; }
  .sjp-plan-price { font-size: 24px; }
  .sjp-settings-layout { grid-template-columns: minmax(0, 1fr) 230px; gap: 17px; }
  .sjp-settings-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (max-width: 980px) {
  .sjp-account-layout { gap: 30px; grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); }
  .sjp-account-card { padding: 23px; }
  .sjp-account-story h2 { font-size: 33px; }
  .sjp-admin-overview { gap: 12px; }
  .sjp-admin-overview > div { padding: 17px; }
  .sjp-admin-overview strong { font-size: 20px; }
  .sjp-admin-config-actions { flex-direction: column; align-items: stretch; }
  .sjp-admin-config-actions > div { justify-content: flex-end; }
  .sjp-header { align-items: flex-start; }
  .sjp-header-actions { gap: 10px; }
  .sjp-header-actions .btn { font-size: 11px; }
  .sjp-voice-layout, .sjp-settings-layout { grid-template-columns: 1fr; }
  .sjp-voice-grid { grid-template-columns: 1fr 1fr; }
  .sjp-voice-card-info { display: grid; grid-template-columns: 1fr; gap: 5px; }
  .sjp-voice-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .sjp-voice-settings > .sjp-section-heading { grid-column: 1 / -1; }
  .sjp-voice-settings > .sjp-fieldset { grid-row: span 2; }
  .sjp-setting-note { grid-column: 1 / -1; margin: 0 0 20px; }
  .sjp-voice-settings > .btn + .btn { margin-top: 0; }
  .sjp-local-hint { grid-column: 1 / -1; }
  .sjp-settings-layout > aside { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .sjp-storage-card { margin-top: 0; }
  .sjp-settings-actions { flex-direction: row; align-items: center; margin-bottom: 15px; }
  .sjp-developer-layout { grid-template-columns: 1fr; }
  .sjp-api-side { grid-template-columns: 1.3fr 1fr; align-items: start; }
  .sjp-code { min-height: 330px; }
  .sjp-developer-intro { gap: 13px; }
  .sjp-orbit-ring { width: 220px; left: calc(50% - 110px); height: 150px; top: 45px; }
  .sjp-orbit-node { padding: 8px 10px; }
  .sjp-orbit-translate { left: 6%; top: 33px; }
  .sjp-orbit-voice { top: 100px; right: -4px; }
  .sjp-orbit-video { left: 0; bottom: 18px; }
  .sjp-plan-grid { gap: 12px; }
  .sjp-plan { padding: 26px 16px 21px; }
  .sjp-plan .btn { font-size: 11px; }
}
@media (max-width: 680px) {
  .sjp-account-layout { grid-template-columns: 1fr; margin-top: 10px; gap: 25px; }
  .sjp-account-story { padding: 12px 0; }
  .sjp-account-story h2 { font-size: 31px; }
  .sjp-account-promises { display: none; }
  .sjp-account-story .sjp-terminal-label { margin-top: 20px; font-size: 7px; }
  .sjp-account-description { font-size: 11px; }
  .sjp-account-card { padding: 24px 20px; }
  .sjp-account-card h2 { font-size: 18px; }
  .sjp-account-form-intro { font-size: 10px; }
  .sjp-admin-warning { gap: 11px; padding: 16px; }
  .sjp-admin-warning > .badge { display: none; }
  .sjp-admin-warning strong { font-size: 11px; }
  .sjp-admin-warning p { font-size: 9px; }
  .sjp-admin-overview { grid-template-columns: 1fr 1fr; gap: 11px; }
  .sjp-admin-overview > div { padding: 17px; }
  .sjp-admin-tabs { gap: 21px; margin: 24px 0 20px; }
  .sjp-admin-tabs button { font-size: 10px; padding-bottom: 13px; }
  .sjp-admin-panel { padding: 18px 15px; }
  .sjp-admin-panel .sjp-section-heading { flex-wrap: wrap; }
  .sjp-admin-panel .btn { font-size: 10px; padding: 9px 11px; }
  .sjp-admin-model-grid { grid-template-columns: 1fr; gap: 12px; }
  .sjp-admin-model-grid article { padding: 17px; }
  .sjp-admin-billing-summary { padding: 18px 0; }
  .sjp-admin-billing-summary > div { padding: 0 12px; }
  .sjp-admin-billing-summary span { font-size: 9px; }
  .sjp-admin-billing-summary small { font-size: 8px; }
  .sjp-admin-config-fields { grid-template-columns: 1fr; gap: 0; }
  .sjp-transcribe-layout, .sjp-help-layout { grid-template-columns: 1fr; }
  .sjp-transcribe-options { gap: 12px; }
  .sjp-transcribe-options .select { font-size: 10px; padding: 11px 8px; }
  .sjp-transcript-empty { padding: 33px 10px; max-width: 290px; }
  .sjp-help-hero { padding: 20px 0 30px; }
  .sjp-help-hero h2 { font-size: 21px; }
  .sjp-faq-list { padding: 0 20px; }
  .sjp-faq-item summary { font-size: 11px; padding: 19px 0; }
  .sjp-help-aside { display: grid; grid-template-columns: 1fr; gap: 18px; }
  .sjp-help-links { margin-top: 0; }
  .sjp-header { gap: 15px; margin-bottom: 20px; }
  .sjp-header .page-title { font-size: 25px; }
  .sjp-header .page-subtitle { font-size: 11px; max-width: 90%; }
  .sjp-header .eyebrow { font-size: 8px; letter-spacing: .13em; }
  .sjp-header-actions { flex-direction: column-reverse; align-items: flex-end; gap: 10px; }
  .sjp-preview-badge { font-size: 9px; padding: 6px 8px; }
  .sjp-header-actions .btn { padding: 9px 10px; font-size: 10px; white-space: nowrap; }
  .sjp-notice { font-size: 10px; padding: 11px 13px; }
  .sjp-translation-toolbar { padding: 12px 16px; gap: 10px; }
  .sjp-language-pair { gap: 10px; font-size: 12px; }
  .sjp-translation-toolbar > .sjp-small-label { max-width: 80px; text-align: right; font-size: 9px; }
  .sjp-translation-columns { grid-template-columns: 1fr; }
  .sjp-editor-pane { padding: 14px 17px; }
  .sjp-editor-pane + .sjp-editor-pane { border-left: 0; border-top: 1px solid var(--line); }
  .sjp-translation-text { min-height: 210px; }
  .sjp-empty-result { min-height: 185px; }
  .sjp-translation-actions { padding: 15px; gap: 12px; }
  .sjp-translation-actions > div { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sjp-translation-actions .btn { font-size: 11px; padding: 10px 12px; }
  .sjp-translation-actions .sjp-small-label { font-size: 8px; }
  .sjp-info-grid { grid-template-columns: 1fr; gap: 12px; }
  .sjp-info-card { padding: 19px; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: center; }
  .sjp-info-card > .sjp-feature-icon { grid-row: span 2; align-self: start; }
  .sjp-info-card h2 { margin: 0 0 5px; }
  .sjp-info-card p { font-size: 10px; }
  .sjp-voice-grid { gap: 9px; }
  .sjp-voice-avatar { width: 35px; height: 43px; border-radius: 8px; }
  .sjp-voice-avatar svg { width: 18px; }
  .sjp-voice-card { gap: 8px; padding: 11px 8px; }
  .sjp-voice-card-info strong { font-size: 11px; }
  .sjp-voice-card-info > span { font-size: 9px; }
  .sjp-voice-card-info small { font-size: 8px; }
  .sjp-radio-dot { width: 9px; height: 9px; top: 8px; right: 6px; }
  .sjp-voice-card.is-selected .sjp-radio-dot { border-width: 2px; }
  .sjp-audio-placeholder { padding: 17px; gap: 12px; }
  .sjp-wave { width: 60px; gap: 1px; }
  .sjp-wave i { width: 1px; }
  .sjp-audio-placeholder .badge { display: none; }
  .sjp-voice-settings { grid-template-columns: 1fr; padding: 20px; }
  .sjp-voice-settings > .sjp-fieldset { grid-row: auto; }
  .sjp-voice-settings > .btn + .btn { margin-top: 9px; }
  .sjp-emotions { grid-template-columns: repeat(3, 1fr); }
  .sjp-project-toolbar { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .sjp-search { width: 100%; }
  .sjp-segmented { align-self: flex-start; }
  .sjp-segmented button { font-size: 10px; padding: 9px 13px; }
  .sjp-project-grid { gap: 14px; grid-template-columns: 1fr; }
  .sjp-project-cover { aspect-ratio: 1.85; }
  .sjp-project-body { padding: 17px 19px; }
  .sjp-project-body > p { min-height: 0; }
  .sjp-cover-wordmark { font-size: 27px; }
  .sjp-cover-wordmark em { font-size: 23px; }
  .sjp-developer-intro { grid-template-columns: 1fr; padding: 15px 3px 30px; }
  .sjp-developer-intro h2 { font-size: 34px; }
  .sjp-developer-intro p { font-size: 11px; }
  .sjp-api-orbit { height: 220px; max-width: 330px; width: 100%; margin: 0 auto; }
  .sjp-orbit-ring { width: 240px; height: 150px; left: calc(50% - 120px); }
  .sjp-orbit-caption { bottom: -5px; }
  .sjp-api-side { grid-template-columns: 1fr; }
  .sjp-code { padding: 20px 16px; font-size: 10px; line-height: 1.9; }
  .sjp-code-tabs button { font-size: 9px; padding: 8px 9px; }
  .sjp-plan-grid { grid-template-columns: 1fr; gap: 25px; }
  .sjp-plan { padding: 27px; }
  .sjp-plan-price { margin-top: 24px; font-size: 29px; }
  .sjp-plan-description { font-size: 11px; }
  .sjp-plan li { font-size: 11px; }
  .sjp-billing-heading { align-items: center; gap: 10px; }
  .sjp-currency { text-align: right; font-size: 9px; }
  .sjp-currency strong { display: block; margin: 4px 0 0; }
  .sjp-usage-panel { padding: 20px 16px; }
  .sjp-usage-row { grid-template-columns: 1fr 1.1fr .7fr; font-size: 10px; gap: 10px; padding: 17px 3px; }
  .sjp-usage-table-head { font-size: 9px; padding: 12px 5px; }
  .sjp-usage-bottom { flex-direction: column; align-items: flex-start; gap: 9px; }
  .sjp-settings-section { padding: 21px 18px; }
  .sjp-settings-fields { grid-template-columns: 1fr; gap: 0; }
  .sjp-settings-layout > aside { grid-template-columns: 1fr; }
  .sjp-settings-actions { flex-direction: column; align-items: stretch; }
  .sjp-settings-actions > div { justify-content: flex-end; }
  .sjp-settings-actions .btn { font-size: 11px; }
  .sjp-toggle-row small { font-size: 9px; }
  .sjp-dialog { padding: 21px; }
  .sjp-dialog-heading h2 { font-size: 16px; }
  .sjp-dialog-steps li, .sjp-dialog [data-dialog-body] > p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sjp-page *, .sjp-page *::before, .sjp-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}