.page-studio-view { width:100%; padding:0 !important; align-items:stretch !important; }
#pageStudioApp { width:100%; min-width:0; }
.ps-shell { width:min(1380px,100%); margin:0 auto; color:var(--text); }
.ps-hero { margin-bottom:1rem; padding:1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border:1px solid var(--border); border-radius:26px; background:radial-gradient(circle at 90% 0,color-mix(in srgb,var(--accent) 25%,transparent),transparent 22rem),var(--surface); box-shadow:0 20px 55px rgba(16,18,24,.07); }
.ps-eyebrow { display:flex; align-items:center; gap:.4rem; color:var(--accent-hover); font-size:.58rem; font-weight:900; letter-spacing:.11em; }
.ps-eyebrow svg { width:15px; height:15px; }
.ps-hero h2 { margin:.45rem 0 .25rem; font-size:clamp(2.2rem,6vw,4.4rem); line-height:.92; letter-spacing:-.065em; }
.ps-hero p { margin:0; color:var(--text-3); font-size:.7rem; line-height:1.5; }
.ps-hero-badge { min-width:92px; padding:.75rem; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb,var(--surface) 84%,transparent); text-align:center; }
.ps-hero-badge strong,.ps-hero-badge span { display:block; }.ps-hero-badge strong { font-size:1.25rem; }.ps-hero-badge span { margin-top:.15rem; color:var(--text-3); font-size:.52rem; font-weight:800; }
.ps-lock { width:min(480px,100%); margin:2rem auto; padding:1.4rem; border:1px solid var(--border); border-radius:24px; background:var(--surface); text-align:center; box-shadow:0 22px 64px rgba(16,18,24,.1); }
.ps-lock > span { width:50px; height:50px; margin:0 auto; display:grid; place-items:center; border-radius:16px; color:#17120e; background:var(--accent); }.ps-lock > span svg { width:22px; }
.ps-lock h3 { margin:.8rem 0 .35rem; font-size:1.25rem; }.ps-lock p { margin:0;color:var(--text-3);font-size:.67rem;line-height:1.5; }
.ps-pin { margin-top:1rem; display:flex; gap:.55rem; }.ps-pin input { min-width:0; height:50px; flex:1; padding:0 1rem; border:1px solid var(--border); outline:0; border-radius:14px; color:var(--text); background:var(--surface-2); font:900 1rem/1 monospace; letter-spacing:.18em; text-align:center; }.ps-pin input:focus { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent); }
.ps-primary,.ps-secondary,.ps-danger { min-height:46px; padding:0 .9rem; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border:1px solid var(--border); border-radius:13px; color:var(--text); background:var(--surface); font:inherit; font-size:.66rem; font-weight:900; cursor:pointer; }.ps-primary { color:#17120e;border-color:var(--accent);background:var(--accent); }.ps-danger { color:#d44e59;border-color:color-mix(in srgb,#d44e59 35%,var(--border));background:color-mix(in srgb,#d44e59 7%,var(--surface)); }.ps-primary svg,.ps-secondary svg,.ps-danger svg { width:15px;height:15px; }.ps-primary:disabled,.ps-secondary:disabled,.ps-danger:disabled { opacity:.55;cursor:wait; }
.ps-message { min-height:1rem; margin:.7rem 0 0; color:#d2692e; font-size:.61rem; }
.ps-dashboard[hidden],.ps-lock[hidden],.ps-editor-modal[hidden],.ps-share-result[hidden] { display:none !important; }
.ps-topbar { position:sticky; z-index:20; top:.5rem; margin-bottom:.7rem; padding:.65rem; display:flex; align-items:center; justify-content:space-between; gap:.55rem; border:1px solid var(--border); border-radius:18px; background:color-mix(in srgb,var(--surface) 90%,transparent); backdrop-filter:blur(18px); box-shadow:0 12px 34px rgba(16,18,24,.09); }
.ps-topbar > div { display:flex;align-items:center;gap:.45rem; }.ps-status { min-width:0; }.ps-status strong,.ps-status span { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.ps-status strong { max-width:260px;font-size:.72rem; }.ps-status span { margin-top:.15rem;color:var(--text-3);font-size:.52rem; }
.ps-pages { margin-bottom:.7rem; display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; }.ps-pages::-webkit-scrollbar { display:none; }.ps-page-pill { flex:0 0 auto; min-height:44px; padding:.45rem .7rem; display:flex; align-items:center; gap:.5rem; border:1px solid var(--border); border-radius:14px; color:var(--text); background:var(--surface); font:inherit; cursor:pointer; }.ps-page-pill.active { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }.ps-page-pill b { width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--surface-2); }.ps-page-pill strong,.ps-page-pill small { display:block; }.ps-page-pill strong { max-width:130px;font-size:.62rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.ps-page-pill small { margin-top:.12rem;color:var(--text-3);font-size:.49rem; }
.ps-builder-nav { display:none; }
.ps-workspace { display:grid; grid-template-columns:minmax(290px,.72fr) minmax(0,1.28fr); gap:.8rem; align-items:start; }
.ps-sidebar { display:grid; gap:.7rem; }.ps-panel { padding:1rem; border:1px solid var(--border); border-radius:20px; background:var(--surface); box-shadow:0 12px 34px rgba(16,18,24,.05); }.ps-panel summary { display:flex;align-items:center;justify-content:space-between;gap:.7rem;cursor:pointer;list-style:none;font-size:.7rem;font-weight:900; }.ps-panel summary::-webkit-details-marker { display:none; }.ps-panel summary svg { width:16px;height:16px;color:var(--accent-hover); }.ps-settings-grid { margin-top:.85rem; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }.ps-field { min-width:0; }.ps-field.full { grid-column:1/-1; }.ps-field span { display:block;margin-bottom:.35rem;color:var(--text-3);font-size:.53rem;font-weight:850;letter-spacing:.04em; }.ps-field input,.ps-field select,.ps-field textarea { width:100%;min-width:0;border:1px solid var(--border);outline:0;border-radius:12px;color:var(--text);background:var(--surface-2);font:inherit;font-size:.66rem; }.ps-field input,.ps-field select { height:44px;padding:0 .7rem; }.ps-field textarea { min-height:95px;padding:.7rem;resize:vertical;line-height:1.5; }.ps-field input:focus,.ps-field select:focus,.ps-field textarea:focus { border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); }.ps-color-field { display:flex;gap:.35rem; }.ps-color-field input[type=color] { width:46px;padding:4px; }.ps-color-field input[type=text] { flex:1;font-family:monospace; }
.ps-icon-grid { grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:.35rem; }.ps-icon-grid button { aspect-ratio:1;border:1px solid var(--border);border-radius:11px;color:var(--text);background:var(--surface-2);font-size:1rem;cursor:pointer; }.ps-icon-grid button.active { border-color:var(--accent);background:var(--accent-subtle); }
.ps-theme-presets { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem; }.ps-theme-presets button { min-height:38px; border:1px solid var(--border); border-radius:11px; color:var(--text-2); background:var(--surface-2); font:inherit; font-size:.52rem; font-weight:850; cursor:pointer; }.ps-theme-presets button:active { transform:scale(.97); }
.ps-block-palette { margin-top:.8rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; }.ps-block-palette button { min-height:62px;padding:.5rem .2rem;display:grid;place-items:center;gap:.2rem;border:1px solid var(--border);border-radius:12px;color:var(--text-2);background:var(--surface-2);font:inherit;font-size:.52rem;font-weight:800;cursor:pointer; }.ps-block-palette button:active { transform:scale(.97); }.ps-block-palette svg { width:17px;height:17px;color:var(--accent-hover); }
.ps-main { min-width:0; }.ps-mode-tabs { margin-bottom:.65rem;padding:.28rem;display:grid;grid-template-columns:1fr 1fr;border-radius:14px;background:var(--surface-2); }.ps-mode-tabs button { min-height:42px;border:0;border-radius:11px;color:var(--text-3);background:transparent;font:inherit;font-size:.63rem;font-weight:850;cursor:pointer; }.ps-mode-tabs button.active { color:var(--text);background:var(--surface);box-shadow:0 5px 14px rgba(16,18,24,.08); }
.ps-canvas { min-height:440px;padding:1rem;display:grid;align-content:start;gap:.55rem;border:1px solid var(--border);border-radius:22px;background:var(--surface-2); }.ps-canvas-empty { padding:3rem 1rem;display:grid;place-items:center;gap:.5rem;color:var(--text-3);text-align:center;border:1px dashed var(--border-strong);border-radius:17px; }.ps-canvas-empty svg { width:28px;height:28px; }.ps-canvas-empty strong { color:var(--text);font-size:.8rem; }.ps-canvas-empty span { max-width:280px;font-size:.6rem;line-height:1.5; }
.ps-block { padding:.75rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.65rem;border:1px solid var(--border);border-radius:15px;background:var(--surface);cursor:pointer;transition:border-color .16s,transform .16s,box-shadow .16s; }.ps-block:hover { border-color:color-mix(in srgb,var(--accent) 55%,var(--border));box-shadow:0 8px 22px rgba(16,18,24,.06); }.ps-block:active { transform:scale(.995); }.ps-block.selected { border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); }.ps-block-icon { width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:var(--accent-hover);background:var(--accent-subtle); }.ps-block-icon svg { width:17px;height:17px; }.ps-block-copy { min-width:0; }.ps-block-copy strong,.ps-block-copy small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.ps-block-copy strong { font-size:.66rem; }.ps-block-copy small { margin-top:.2rem;color:var(--text-3);font-size:.53rem; }.ps-block-actions { display:flex;gap:.25rem; }.ps-block-actions button { width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;color:var(--text-3);background:var(--surface-2);cursor:pointer; }.ps-block-actions svg { width:14px;height:14px; }.ps-block-actions .delete { color:#d44e59; }
.ps-preview { min-height:440px;padding:clamp(1rem,4vw,2.4rem);border:1px solid var(--border);border-radius:22px;overflow:hidden;background:var(--ps-bg,#f6f6f7);color:var(--ps-text,#17181c); }.ps-preview.dark { --ps-bg:#090a0d !important;--ps-surface:#15171c !important;--ps-text:#f6f7f9 !important;--ps-muted:#989da8 !important;--ps-line:#2b2e35 !important; }.ps-preview-head { margin-bottom:1rem;display:flex;align-items:center;gap:.65rem; }.ps-preview-head b { width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:#17120e;background:var(--ps-accent); }.ps-preview-head strong,.ps-preview-head small { display:block; }.ps-preview-head strong { font-size:.74rem; }.ps-preview-head small { margin-top:.15rem;color:var(--ps-muted);font-size:.5rem; }.ps-preview-body { display:grid;gap:.55rem; }.ps-preview-body.grid { grid-template-columns:1fr 1fr; }.ps-preview-body.cards>.preview-block,.ps-preview-body.grid>.preview-block { padding:1rem;border:1px solid var(--ps-line);border-radius:16px;background:var(--ps-surface); }.preview-block h2 { margin:0;font-size:2rem;line-height:1;letter-spacing:-.05em; }.preview-block p { margin:0;color:var(--ps-muted);font-size:.68rem;line-height:1.6;white-space:pre-wrap; }.preview-block.callout { padding:1rem;border-left:3px solid var(--ps-accent);background:color-mix(in srgb,var(--ps-accent) 10%,var(--ps-surface)); }.preview-block.callout strong { display:block;margin-bottom:.3rem;font-size:.66rem; }.preview-block input[type=text],.preview-block textarea,.preview-block select { width:100%;min-height:44px;padding:0 .7rem;border:1px solid var(--ps-line);border-radius:11px;color:var(--ps-text);background:var(--ps-surface);font:inherit;font-size:.66rem; }.preview-block textarea { min-height:90px;padding:.7rem;resize:vertical; }.preview-block.button { min-height:44px;padding:0 .8rem;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;border:1px solid var(--ps-accent);border-radius:11px;color:#17120e;background:var(--ps-accent);font-size:.65rem;font-weight:850; }.preview-block.button svg { width:14px;height:14px; }.preview-block.image,.preview-block.embed { min-height:120px;display:grid;place-items:center;overflow:hidden;border-radius:15px;color:var(--ps-muted);background:var(--ps-surface);font-size:.6rem; }.preview-block.image img { width:100%;max-height:300px;object-fit:cover; }.preview-block.embed span { display:inline-flex;align-items:center;gap:.35rem; }.preview-block.embed svg { width:16px;height:16px;color:var(--ps-accent); }.preview-block.divider { height:1px;background:var(--ps-line); }.preview-block.spacer { height:28px; }
.ps-share-result { margin-top:.7rem;padding:.75rem;display:flex;align-items:center;gap:.55rem;border:1px solid color-mix(in srgb,#42af82 40%,var(--border));border-radius:14px;background:color-mix(in srgb,#42af82 8%,var(--surface)); }.ps-share-result code { min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.58rem; }.ps-share-result a { min-height:36px;padding:0 .7rem;display:flex;align-items:center;border-radius:10px;color:#17120e;background:var(--accent);font-size:.57rem;font-weight:850;text-decoration:none; }
.ps-editor-backdrop { position:fixed;z-index:47000;inset:0;padding:1rem;display:grid;place-items:center;background:rgba(7,8,11,.7);backdrop-filter:blur(14px); }.ps-editor-modal { width:min(520px,100%);max-height:min(86dvh,760px);overflow:auto;border:1px solid var(--border);border-radius:24px;color:var(--text);background:var(--surface);box-shadow:0 34px 100px rgba(0,0,0,.4); }.ps-editor-modal header { position:sticky;z-index:2;top:0;padding:1rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(15px); }.ps-editor-modal h3 { margin:0;font-size:1rem; }.ps-editor-modal header button { width:36px;height:36px;border:1px solid var(--border);border-radius:11px;color:var(--text);background:var(--surface-2);font-size:1.2rem; }.ps-editor-fields { padding:1rem;display:grid;grid-template-columns:1fr 1fr;gap:.7rem; }.ps-editor-actions { position:sticky;bottom:0;padding:1rem;display:flex;justify-content:flex-end;gap:.5rem;border-top:1px solid var(--border);background:var(--surface); }
.ps-inbox-list { padding:1rem;display:grid;gap:.7rem; }.ps-inbox-item { padding:.9rem;border:1px solid var(--border);border-radius:16px;background:var(--surface-2); }.ps-inbox-item>div { display:flex;justify-content:space-between;gap:.8rem;align-items:start;margin-bottom:.6rem; }.ps-inbox-item strong,.ps-inbox-item small { display:block; }.ps-inbox-item small { color:var(--text-3);font-size:.56rem; }.ps-inbox-item dl { margin:0;display:grid;grid-template-columns:minmax(82px,.45fr) 1fr;gap:.35rem .65rem;font-size:.62rem; }.ps-inbox-item dt { color:var(--text-3);font-weight:850;text-transform:uppercase;letter-spacing:.06em; }.ps-inbox-item dd { margin:0;white-space:pre-wrap;word-break:break-word; }
.ps-logic-panel { grid-column:1/-1; margin-top:.25rem; padding:.8rem; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--border)); border-radius:16px; background:color-mix(in srgb,var(--accent) 7%,var(--surface-2)); }.ps-logic-panel>header { margin-bottom:.7rem; display:flex; align-items:center; gap:.55rem; }.ps-logic-panel>header>svg { width:19px; height:19px; color:var(--accent-hover); }.ps-logic-panel>header strong,.ps-logic-panel>header small { display:block; }.ps-logic-panel>header strong { font-size:.61rem; letter-spacing:.06em; }.ps-logic-panel>header small { margin-top:.15rem; color:var(--text-3); font-size:.52rem; }.ps-logic-grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.preview-logic { width:max-content; margin:0 0 .45rem; padding:.25rem .4rem; display:flex; align-items:center; gap:.25rem; border-radius:999px; color:var(--ps-text); background:color-mix(in srgb,var(--ps-accent) 22%,transparent); font-size:.42rem; font-weight:950; letter-spacing:.06em; }.preview-logic svg { width:10px; height:10px; }
.preview-block.hero { min-height:200px; padding:1.2rem; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--ps-line); border-radius:18px; background:radial-gradient(circle at 85% 10%,color-mix(in srgb,var(--ps-accent) 32%,transparent),transparent 13rem),var(--ps-surface); }.preview-block.hero>small { margin-bottom:.5rem; color:var(--ps-accent); font-size:.48rem; font-weight:900; letter-spacing:.1em; }.preview-block.card { padding:1rem; border:1px solid var(--ps-line); border-radius:16px; background:var(--ps-surface); }.preview-block.stat { min-height:105px; padding:1rem; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--ps-line); border-radius:16px; background:var(--ps-surface); }.preview-block.stat>small { color:var(--ps-muted); font-size:.48rem; }.preview-block.stat>strong { font-size:2rem; letter-spacing:-.05em; }.preview-block.badge { width:max-content; padding:.35rem .55rem; border:1px solid var(--ps-line); border-radius:999px; font-size:.48rem; font-weight:900; }.preview-block.progress { padding:.8rem; border:1px solid var(--ps-line); border-radius:14px; background:var(--ps-surface); }.preview-block.progress>span { display:flex; justify-content:space-between; font-size:.52rem; }.preview-block.progress>i { height:7px; margin-top:.5rem; display:block; overflow:hidden; border-radius:999px; background:var(--ps-line); }.preview-block.progress u { height:100%; display:block; border-radius:inherit; background:var(--ps-accent); }.preview-block.quote { margin:0; padding:1rem; border:1px solid var(--ps-line); border-radius:16px; background:var(--ps-surface); }.preview-block.quote p { color:var(--ps-text); font-size:1.15rem; line-height:1.25; }.preview-block.quote small { display:block; margin-top:.55rem; color:var(--ps-muted); }
@media(max-width:850px){.ps-hero{padding:1.1rem;border-radius:22px}.ps-hero-badge{display:none}.ps-builder-nav{position:sticky;z-index:18;top:calc(4.3rem + env(safe-area-inset-top));margin:0 0 .7rem;padding:.3rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(16px)}.ps-builder-nav button{min-height:38px;display:flex;align-items:center;justify-content:center;gap:.3rem;border:0;border-radius:10px;color:var(--text-3);background:transparent;font:inherit;font-size:.56rem;font-weight:850}.ps-builder-nav svg{width:14px;height:14px;color:var(--accent-hover)}.ps-workspace{grid-template-columns:1fr}.ps-sidebar{grid-template-columns:1fr}.ps-topbar{top:calc(.25rem + env(safe-area-inset-top));}.ps-status{flex:1}.ps-status strong{max-width:150px}.ps-topbar .ps-secondary span,.ps-topbar .ps-primary span{display:none}.ps-topbar .ps-secondary,.ps-topbar .ps-primary{width:44px;padding:0}.ps-canvas,.ps-preview{min-height:360px;border-radius:19px}.ps-pages{margin-inline:-.1rem}.ps-preview-body.grid{grid-template-columns:1fr}#psSettingsPanel,#psBlocksPanel,#psCanvasPanel{scroll-margin-top:9rem}}
@media(max-width:430px){.ps-shell{padding-bottom:calc(6rem + env(safe-area-inset-bottom))}.ps-settings-grid{grid-template-columns:1fr}.ps-field.full,.ps-icon-grid,.ps-theme-presets{grid-column:auto}.ps-icon-grid{grid-template-columns:repeat(5,1fr)}.ps-theme-presets{grid-template-columns:repeat(2,1fr)}.ps-block-palette{grid-template-columns:repeat(3,1fr)}.ps-block{grid-template-columns:auto minmax(0,1fr)}.ps-block-actions{grid-column:1/-1;justify-content:flex-end}.ps-editor-backdrop{padding:0;place-items:end center}.ps-editor-modal{width:100%;max-height:92dvh;border-radius:24px 24px 0 0;padding-bottom:env(safe-area-inset-bottom)}.ps-editor-fields,.ps-logic-grid{grid-template-columns:1fr}.ps-share-result{align-items:stretch;flex-direction:column}.ps-share-result a{justify-content:center}}
@media(prefers-reduced-motion:reduce){.ps-primary,.ps-secondary,.ps-danger,.ps-block-palette button{transition:none}}