/* FLAPHOME presentation refinement. Business logic remains in app.js. */
:root { --purple: #6b25dc; --ink: #291842; }
body.app-page { background: #f8f7fc; }
.shell { max-width: 1200px; }
.topbar { padding: 24px 0; }
.brand-avatar { border-radius: 13px; box-shadow: 0 3px 12px #55339812; }
.brand-name { letter-spacing: -.8px; font-size: 24px; }
.brand-copy p { letter-spacing: 1.2px; }
.quick-nav { background: #f8f7fc; margin-bottom: 30px; gap: 31px; }
.quick-nav a { padding: 21px 4px 18px; font-size: 13px; }
.quick-nav a.active::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--purple); }
.hero { grid-template-columns: 1.12fr 1fr; min-height: 418px; border: 1px solid #e7dff3; border-radius: 25px; background: #eee8f8; box-shadow: 0 14px 40px #42245b06; }
.hero-copy { padding: 40px 20px 34px 42px; }
.hero h1 { font-size: 59px; letter-spacing: -2.5px; line-height: 1.17; margin-top: 16px; }
.hero-copy>.eyebrow { display: inline-flex; align-items: center; gap: 9px; letter-spacing: 1.5px; }
.hero-copy>.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); }
.hero-copy>p { font-size: 13px; line-height: 1.9; margin-top: 19px; }
.hero-art { background: #d8ff00; border-left: 1px solid #ded9a3; }
.hero-art>img { max-width: 365px; width: 85%; border-radius: 50%; }
.orbit-one { width: 460px; height: 460px; border-color: #fff9; }
.orbit-two { width: 350px; height: 350px; border-color: #fff9; }
.art-label { top: 23px; left: 23px; font-weight: 600; background: #f4ffd4; border-color: #fff; }
.hero-primary, button:not(.secondary):not(.status-toast-close) { box-shadow: 0 4px 10px #6825d51a; }
.hero-primary { min-height: 47px; border: 1px solid #7132d2; background: var(--purple); }
.hero-primary:hover { background: #581bc0; }
.hero-secondary:hover { color: #5e21bd; }
.hero-notes { padding-top: 20px; border-top: 1px solid #dbd0eb; margin-top: 26px; width: fit-content; }
.status-grid { margin: 20px 0 32px; padding: 23px 6px; border-radius: 17px; background: #fff; box-shadow: 0 4px 18px #39214e03; }
.status-card strong { font-size: 22px; font-weight: 720; letter-spacing: -.5px; margin-top: 12px; }
.status-card:first-child strong, .status-card:last-child strong { font-size: 17px; padding-top: 5px; }
.status-card>span svg { color: #7944c4; }
.panel { padding: 29px; border-color: #e9e2f0; border-radius: 20px; box-shadow: 0 5px 24px #42215c03; }
.section-title { padding-bottom: 19px; border-bottom: 1px solid #eee8f4; margin-bottom: 25px; }
.section-title h2 { font-size: 25px; font-weight: 750; }
.section-title .eyebrow { color: #74409f; font-size: 9px; letter-spacing: 1.6px; }
#projects { background: transparent; border: 0; padding: 0; box-shadow: none; }
#projects>.section-title { border-bottom: 0; padding: 7px 2px 0; }
.inline-controls { padding: 8px 10px; border: 1px solid #e6dfef; border-radius: 12px; background: #fff; gap: 10px; }
.inline-controls input:not([type=checkbox]) { min-height: 36px; padding: 8px; width: 137px; }
.inline-controls button { min-height: 36px; padding: 8px 12px; }
.project-list { gap: 19px; margin-bottom: 27px; }
.project-row { position: relative; padding: 24px; background: #fff; border-radius: 18px; border-color: #e5ddec; box-shadow: 0 5px 17px #35214404; gap: 18px; transition: border-color .2s, box-shadow .2s; }
.project-row:hover { box-shadow: 0 9px 26px #552b8610; background: #fff; border-color: #cbb5e7; }
.project-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid #f0eaf7; }
.project-monogram { width: 43px; height: 43px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #6027a9; background: #f1eafa; border: 1px solid #e0d3ef; font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; }
.project-heading strong { display: flex; flex-direction: column; gap: 5px; font-size: 16px; letter-spacing: -.3px; }
.project-subtitle { font-size: 10px; font-weight: 500; color: #71627f; letter-spacing: .3px; }
.project-state { margin-left: auto; display: inline-flex; align-items: center; padding: 7px 9px; border-radius: 7px; font-size: 10px; color: #654c7d; background: #f2eef7; white-space: nowrap; }
.project-meta { gap: 12px 17px; margin-top: 17px; margin-bottom: 18px; }
.project-meta span { white-space: normal; font-size: 11px; line-height: 1.6; }
.project-meta span:first-child { padding-bottom: 9px; border-bottom: 1px dashed #e8dfef; color: #73627f; }
.project-progress { height: 7px; background: #eee8f6; margin-top: 14px; }
.project-progress span { background: #7c3deb; }
.project-row-actions { border-top: 1px solid #f0eaf7; padding-top: 16px; flex-direction: row; }
.project-row-actions button { width: auto; flex: 1; border-color: #d7c5ef; background: #f6f0ff; color: #5920aa; }
.grid { gap: 20px; }
.stats dd { text-align: left; line-height: 1.7; }
.stats>div { padding: 14px 0; }
.create-intro { display: flex; align-items: center; gap: 22px; margin: -1px 0 26px; padding: 26px 29px; border-radius: 18px; background: #eee7f9; border: 1px solid #e0d3ef; }
.create-intro img { width: 76px; height: 76px; border-radius: 19px; flex: none; }
.create-intro .eyebrow { font-size: 9px; letter-spacing: 1.7px; margin-bottom: 9px; color: #704093; }
.create-intro h2 { font-size: 27px; letter-spacing: -.8px; line-height: 1.4; margin: 0 0 8px; color: var(--ink); }
.create-intro p { margin: 0; color: #695579; font-size: 12px; line-height: 1.8; }
.creator-steps { margin-left: auto; display: flex; flex-direction: column; gap: 9px; color: #655171; font-size: 11px; padding-left: 24px; border-left: 1px solid #d8c9e9; }
.creator-steps span { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.creator-steps b { color: #6638a0; font-size: 10px; }
#launch { padding: 30px 34px; }
#launch>.section-title { border: 0; padding-bottom: 0; margin-bottom: 24px; }
#launch .form-block { border: 1px solid #e9e2f1; border-radius: 15px; padding: 22px; margin-bottom: 20px; }
#launch .form-block h3 { display: flex; gap: 9px; align-items: center; margin: 0 0 21px; font-size: 15px; }
#launch .form-block h3 svg { color: #7845b9; }
.field-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-label { color: #5e4d70; font-size: 11px; font-weight: 600; line-height: 1.5; }
.form-grid { gap: 19px 18px; }
.form-grid input, .form-grid select { min-height: 46px; }
input, select, textarea { border-color: #ded5e9; border-radius: 10px; }
.metadata-upload { padding: 17px; border-style: dashed; border-radius: 11px; }
.metadata-status .preview-line { margin: 0; }
.preview-line { border-radius: 10px; padding: 12px 14px; line-height: 1.8; }
.advanced-block { padding: 21px 23px; margin: 16px 0; border-radius: 14px; background: #fcfbfe; }
.advanced-block summary { font-size: 14px; }
.advanced-block summary svg { color: #7b4caf; }
.advanced-block[open] summary { padding-bottom: 18px; margin-bottom: 19px; border-bottom: 1px solid #e9e0f1; }
.slider-grid { border-color: #e5dcec; background: #fcfbfe; border-radius: 11px; }
.slider-row { min-height: 63px; padding: 11px 15px; }
.rule-strip { border: 0; padding: 0; background: transparent; gap: 12px; margin-top: 23px; }
.rule-strip>div { background: #f8f5fc; padding: 15px; border: 1px solid #e8dff0; border-radius: 11px; gap: 5px; }
.rule-strip strong { margin-top: 4px; line-height: 1.6; }
.create-actions { margin-top: 25px; padding-top: 22px; border-top: 1px solid #ede5f4; justify-content: flex-end; }
#createLaunchBtn { padding: 14px 26px; min-height: 49px; min-width: 224px; border-radius: 11px; }
#ops { border-style: solid; }
.ops-context { background: #faf7fd; }
.guide-grid article { padding: 24px; border-radius: 15px; background: #faf7ff; border: 1px solid #e9dff3; }
.guide-grid b { font-size: 30px; }
.guide-grid h3 { margin: 18px 0 10px; }
.guide-panel details { padding: 22px 0; }
footer { padding: 30px 2px; margin-top: 34px; }
@media(max-width:1050px){.hero h1{font-size:49px}.hero-copy{padding:35px 25px}.hero{min-height:403px}.section-title{align-items:flex-start}.creator-steps{display:none}.project-state{font-size:9px}.project-row{padding:20px}.status-card strong{font-size:20px}}
@media(max-width:640px){
 .topbar{padding:19px 0}.brand-name{font-size:19px}.quick-nav{gap:0;margin-bottom:22px}.quick-nav a{font-size:11px;padding:16px 0;gap:4px}.quick-nav a.active::after{display:none}
 .hero{grid-template-columns:1fr;border-radius:20px}.hero-copy{padding:29px 25px}.hero h1{font-size:46px;margin-top:14px}.hero-copy>p{font-size:12px}.hero-art{border-left:0;border-top:1px solid #d2ec86;height:278px}.hero-art>img{width:264px}.hero-notes{gap:12px;font-size:9px}
 .status-grid{padding:19px 0;margin:18px 0 28px;gap:22px 0}.status-card strong{font-size:21px}.status-card:first-child strong,.status-card:last-child strong{font-size:13px;padding-top:3px}.status-card{padding:0 16px}
 .panel{padding:22px 18px;border-radius:17px}.section-title{padding-bottom:15px;margin-bottom:19px}.section-title h2{font-size:22px}#projects>.section-title{gap:18px}.inline-controls{padding:12px;gap:12px}.inline-controls input:not([type=checkbox]){flex:1;width:140px}.inline-controls button{flex:1}
 .project-list{gap:15px}.project-row{padding:20px}.project-heading{gap:10px}.project-heading strong{font-size:16px}.project-state{font-size:9px;padding:7px}.project-meta{gap:10px 13px}.project-row-actions button{min-height:42px}
 .create-intro{padding:21px 18px;gap:13px;margin-bottom:18px;border-radius:16px;align-items:flex-start}.create-intro img{width:48px;height:48px;border-radius:12px}.create-intro h2{font-size:20px;letter-spacing:-.5px}.create-intro p{font-size:11px}.create-intro .eyebrow{font-size:8px;margin:2px 0 7px;letter-spacing:1px}
 #launch{padding:21px 16px}#launch .section-title{gap:14px}#launch .form-block{padding:18px 13px;border-radius:12px}#launch .form-block h3{font-size:14px;margin-bottom:20px}.form-grid{gap:17px}.field-label{font-size:11px}
 .metadata-upload{padding:14px}.metadata-file-controls{display:flex;flex-wrap:wrap}.metadata-file-controls small{width:100%}.metadata-upload button{white-space:normal;font-size:11px}
 .advanced-block{padding:18px 13px}.advanced-block summary{font-size:13px}.slider-row{padding:12px 10px;grid-template-columns:minmax(0,1fr) 62px 15px}.slider-row>span{grid-column:1/-1}.slider-row input[type=range]{grid-column:1}
 .rule-strip{gap:10px}.rule-strip>div{padding:12px}.rule-strip strong{font-size:11px}.create-actions{margin-top:22px;padding-top:20px}#createLaunchBtn{width:100%;min-width:0}.grid{gap:0}.guide-grid{gap:13px}.guide-grid article{padding:20px}.guide-grid h3{margin-top:14px}
}