.faq-studio-hero { background: radial-gradient(circle at 78% 14%, rgba(73,217,232,.13), transparent 35%), linear-gradient(125deg, rgba(13,31,48,.98), rgba(7,17,29,.98)); }
.faq-studio-layout { display: grid; grid-template-columns: minmax(280px, .56fr) minmax(0, 1.65fr); gap: 1rem; align-items: start; }
.faq-studio-main { min-width: 0; display: grid; gap: 1rem; }
.faq-library { position: sticky; top: 1rem; padding: 1.1rem; max-height: calc(100vh - 2rem); overflow: hidden; }
.faq-library > header, .faq-editor-panel > header, .faq-preview-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.faq-library h2, .faq-editor-panel h2, .faq-preview-panel h2 { margin: .15rem 0 0; font-size: 1.05rem; }
.faq-library-list { display: grid; gap: .4rem; max-height: calc(100vh - 11rem); padding-top: .8rem; overflow: auto; }
.faq-library-row { width: 100%; display: grid; grid-template-columns: 9px minmax(0,1fr); gap: .7rem; align-items: start; padding: .8rem; border: 1px solid transparent; border-radius: .7rem; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.faq-library-row:hover { background: rgba(255,255,255,.035); }.faq-library-row.selected { border-color: rgba(73,217,232,.36); background: rgba(73,217,232,.075); }
.faq-library-row span:last-child { min-width: 0; display: grid; gap: .28rem; }.faq-library-row small { color: #7fa0b3; font-size: .62rem; letter-spacing: .08em; }.faq-library-row strong { overflow: hidden; font-size: .82rem; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; }
.faq-state { width: 7px; height: 7px; margin-top: .3rem; border-radius: 50%; background: #5b6770; }.faq-state.published { background: #4dd8a3; box-shadow: 0 0 10px rgba(77,216,163,.55); }.faq-library-empty { padding: 2rem 1rem; color: #78909e; text-align: center; font-size: .8rem; }
.faq-studio-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; }.faq-studio-toolbar > div { display: flex; align-items: center; gap: .8rem; }.faq-studio-toolbar span { font-size: .7rem; }
.faq-composer-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(310px,.92fr); gap: 1rem; align-items: start; }
.faq-editor-panel, .faq-preview-panel { padding: 1.25rem; }.faq-editor-grid { display: grid; grid-template-columns: minmax(0,1fr) 130px; gap: 1rem; }.faq-field-wide { grid-column: 1/-1; }
.faq-preview-panel { position: sticky; top: 1rem; background: radial-gradient(circle at 90% 15%,rgba(73,217,232,.08),transparent 38%),var(--sp-panel, #0c1625); }
.faq-preview-status { padding: .28rem .6rem; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #8296a5; font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; }.faq-preview-status.online { border-color: rgba(77,216,163,.35); color: #6fe0b5; }
.faq-site-preview { overflow: hidden; border: 1px solid rgba(131,192,207,.2); border-radius: .35rem; background: #07131f; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.faq-site-chrome { display: flex; align-items: center; gap: .35rem; padding: .7rem .85rem; border-bottom: 1px solid rgba(131,192,207,.15); color: #47d8e7; font-size: .55rem; font-weight: 800; letter-spacing: .16em; }.faq-site-chrome span { margin-right: auto; }.faq-site-chrome i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.2); }
.faq-site-question { position: relative; padding: 1.15rem 1.2rem .9rem; border-bottom: 1px solid rgba(131,192,207,.16); }.faq-site-question small { color: #49d9e8; font-size: .55rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }.faq-site-question h3 { margin: .55rem 2rem 0 0; color: #eef8fa; font-family: Georgia,serif; font-size: 1.15rem; font-weight: 400; line-height: 1.25; }.faq-site-question > span { position: absolute; right: 1.1rem; bottom: 1rem; color: #49d9e8; font-size: 1.3rem; }
.faq-site-preview > p { min-height: 130px; margin: 0; padding: 1.1rem 1.2rem 1.35rem; color: #91a8b5; font-size: .78rem; line-height: 1.65; white-space: pre-wrap; }
@media (max-width: 1120px) { .faq-studio-layout, .faq-composer-grid { grid-template-columns: 1fr; }.faq-library, .faq-preview-panel { position: static; max-height: none; }.faq-library-list { max-height: 340px; } }
@media (max-width: 700px) { .faq-studio-toolbar, .faq-studio-toolbar > div { align-items: flex-start; flex-wrap: wrap; }.faq-editor-grid { grid-template-columns: 1fr; }.faq-field-wide { grid-column: auto; } }