:root{
--blue-dark:#123b66;
--blue:#1d5d91;
--blue-light:#eaf3fb;
--red:#d81e2c;
--text:#182433;
--muted:#687789;
--bg:#f6f8fb;
--white:#fff;
--border:#dfe6ee;
--shadow:0 12px 35px rgba(18,59,102,.10);
--radius:16px
}

*{
box-sizing:border-box
}

html{
scroll-behavior:smooth
}

body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
color:var(--text);
background:var(--bg);
line-height:1.6
}

a{
text-decoration:none;
color:inherit
}

button,
input,
select,
textarea{
font:inherit
}

button{
cursor:pointer
}

.primary-action,
.secondary-action{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 20px;
border-radius:10px;
font-weight:700;
transition:.2s ease
}

.primary-action{
background:var(--blue-dark);
color:white;
border:1px solid var(--blue-dark)
}

.secondary-action{
background:white;
color:var(--blue-dark);
border:1px solid var(--blue-dark)
}

.primary-action:hover,
.secondary-action:hover{
transform:translateY(-1px);
box-shadow:0 5px 15px rgba(18,59,102,.12)
}

.site-header{
height:72px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 6%;
background:#fff;
border-bottom:1px solid var(--border);
position:sticky;
top:0;
z-index:50
}

.brand{
display:flex;
align-items:center;
gap:10px;
font-weight:700
}

.qba-logo{
display:flex;
align-items:center;
gap:8px
}

.logo-triangle{
width:34px;
height:34px;
background:var(--red);
clip-path:polygon(0 50%,100% 0,100% 100%);
display:flex;
align-items:center;
justify-content:center;
color:white
}

.logo-triangle span{
font-size:13px;
margin-left:8px
}

.hero{
max-width:1200px;
margin:auto;
padding:100px 6%;
display:grid;
grid-template-columns:1.2fr .8fr;
gap:70px;
align-items:center
}

.hero h1{
font-size:clamp(40px,6vw,72px);
line-height:1.05;
margin:18px 0
}

.hero h1 span{
display:block;
color:var(--blue)
}

.hero p{
font-size:19px;
color:var(--muted);
max-width:650px
}

.hero-actions{
display:flex;
gap:14px;
margin-top:30px;
flex-wrap:wrap
}

.hero-card{
background:white;
padding:28px;
border-radius:24px;
box-shadow:var(--shadow)
}

.live-dot{
font-size:12px;
color:var(--blue);
margin-bottom:18px
}

.paper-preview{
background:#fff;
border:1px solid var(--border);
padding:35px;
min-height:350px;
box-shadow:0 5px 20px rgba(0,0,0,.06)
}

.paper-preview h3{
text-align:center
}

.fake-line{
height:8px;
background:#e5eaf0;
border-radius:5px;
margin:14px 0
}

.fake-line.short{
width:60%
}

.section{
max-width:1200px;
margin:auto;
padding:90px 6%
}

.section.alternate{
max-width:none;
background:#edf3f8
}

.section>h2{
font-size:40px;
margin-top:8px
}

.section-label{
font-size:12px;
font-weight:800;
letter-spacing:1.5px;
color:var(--blue)
}

.feature-grid,
.mode-grid,
.plan-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:35px
}

.feature-card,
.mode-card,
.plan-card{
background:#fff;
border:1px solid var(--border);
border-radius:var(--radius);
padding:28px;
box-shadow:0 5px 20px rgba(0,0,0,.03)
}

.feature-card>span,
.mode-card>span{
font-size:30px
}

.feature-card h3,
.mode-card h3{
margin-bottom:5px
}

.feature-card p,
.mode-card p,
.plan-card p{
color:var(--muted)
}

.plan-card.featured{
border:2px solid var(--blue)
}

footer{
padding:40px 6%;
background:var(--blue-dark);
color:#fff;
display:flex;
justify-content:space-between;
gap:20px
}

.auth-page{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:30px
}

.auth-card{
width:min(460px,100%);
background:#fff;
padding:40px;
border-radius:20px;
box-shadow:var(--shadow)
}

.auth-brand{
margin-bottom:35px
}

.auth-heading h1{
font-size:34px;
margin:8px 0
}

.auth-heading p{
color:var(--muted)
}

.auth-form{
display:flex;
flex-direction:column;
gap:9px
}

.auth-form label{
font-weight:700;
margin-top:8px
}

.auth-form input,
.auth-form select,
.auth-form textarea,
.form-group input,
.form-group select,
.form-group textarea{
width:100%;
padding:12px 13px;
border:1px solid var(--border);
border-radius:9px;
background:#fff;
outline:none
}

.auth-form input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
border-color:var(--blue)
}

.password-field{
display:flex
}

.password-field input{
border-radius:9px 0 0 9px
}

.toggle-password{
border:1px solid var(--border);
background:#f5f7fa;
border-radius:0 9px 9px 0
}

.check-row{
display:flex!important;
align-items:center;
gap:8px;
font-weight:400!important
}

.check-row input{
width:auto
}

.auth-submit{
margin-top:15px;
border:0;
padding:13px;
border-radius:10px;
background:var(--blue-dark);
color:white;
font-weight:700
}

.form-message{
min-height:24px;
font-size:14px;
margin-top:5px
}

.auth-switch{
text-align:center;
margin-top:25px
}

.auth-switch a{
color:var(--blue);
font-weight:700
}

.back-home{
display:block;
text-align:center;
color:var(--muted);
margin-top:20px
}

.dashboard-page,
.editor-page{
min-height:100vh
}

.dashboard-header,
.editor-header{
height:68px;
background:#fff;
border-bottom:1px solid var(--border);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 25px;
position:sticky;
top:0;
z-index:30
}

.dashboard-user{
position:relative
}

.user-menu-button{
border:1px solid var(--border);
background:#fff;
padding:8px 12px;
border-radius:10px;
display:flex;
gap:8px;
align-items:center
}

.user-menu{
display:none;
position:absolute;
right:0;
top:48px;
background:#fff;
border:1px solid var(--border);
box-shadow:var(--shadow);
border-radius:12px;
padding:7px;
min-width:180px
}

.user-menu.active{
display:block
}

.user-menu button{
display:block;
width:100%;
border:0;
background:none;
text-align:left;
padding:10px;
border-radius:7px
}

.user-menu button:hover{
background:var(--bg)
}

.dashboard-main{
max-width:1200px;
margin:auto;
padding:45px 25px
}

.dashboard-welcome{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px
}

.dashboard-welcome h1{
font-size:36px
}

.dashboard-stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin:35px 0
}

.stat-card{
background:#fff;
border:1px solid var(--border);
border-radius:15px;
padding:22px;
display:flex;
gap:15px;
align-items:center
}

.stat-card>span{
font-size:30px
}

.stat-card strong{
display:block;
font-size:25px
}

.stat-card small{
color:var(--muted)
}

.projects-header{
display:flex;
justify-content:space-between;
align-items:center
}

.dashboard-project-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px
}

.project-card{
background:#fff;
border:1px solid var(--border);
border-radius:15px;
padding:20px
}

.project-card h3{
margin-top:0
}

.project-card p{
color:var(--muted);
font-size:14px
}

.empty-dashboard{
background:#fff;
border:1px dashed var(--border);
border-radius:18px;
padding:50px;
text-align:center;
grid-column:1/-1
}

.editor-brand{
display:flex;
align-items:center;
gap:12px
}

.editor-brand>div:last-child{
display:flex;
flex-direction:column
}

.editor-brand>div:last-child span{
font-size:12px;
color:var(--muted)
}

.back-dashboard{
font-size:22px
}

.editor-status{
display:flex;
align-items:center;
gap:10px
}

.editor-status button{
border:1px solid var(--border);
background:#fff;
padding:8px 13px;
border-radius:8px
}

#saveStatus{
font-size:13px;
color:var(--muted)
}

.editor-layout{
display:grid;
grid-template-columns:245px 1fr;
min-height:calc(100vh - 68px)
}

.editor-sidebar{
background:#fff;
border-right:1px solid var(--border);
padding:20px
}

.editor-mode{
background:var(--blue-light);
padding:14px;
border-radius:12px;
margin-bottom:15px
}

.editor-mode small{
display:block;
font-size:10px;
color:var(--blue)
}

.editor-navigation{
display:flex;
flex-direction:column;
gap:5px
}

.editor-nav-item{
border:0;
background:transparent;
text-align:left;
padding:11px;
border-radius:9px;
color:var(--text)
}

.editor-nav-item.active,
.editor-nav-item:hover{
background:var(--blue-light);
color:var(--blue-dark)
}

.ai-assistant-box{
margin-top:25px;
padding:16px;
border:1px solid var(--border);
border-radius:13px
}

.ai-assistant-box span{
font-size:22px
}

.ai-assistant-box p{
font-size:12px;
color:var(--muted)
}

.ai-assistant-box button{
border:0;
background:var(--blue-dark);
color:#fff;
padding:8px 12px;
border-radius:7px
}

.editor-workspace{
padding:40px;
min-width:0
}

.editor-section{
display:none
}

.editor-section.active{
display:block
}

.editor-section-heading{
margin-bottom:30px
}

.editor-section-heading h1{
font-size:34px;
margin:5px 0
}

.editor-section-heading p{
color:var(--muted)
}

.form-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px
}

.form-group.full{
grid-column:1/-1
}

.form-group label{
display:block;
font-weight:700;
font-size:14px;
margin-bottom:6px
}

.form-group textarea{
resize:vertical
}

.editor-form-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:25px;
flex-wrap:wrap
}

.structure-toolbar,
.data-toolbar,
.bibliography-toolbar{
display:flex;
gap:10px;
margin-bottom:20px;
flex-wrap:wrap
}

.chapter-list{
display:flex;
flex-direction:column;
gap:12px
}

.chapter-item{
background:#fff;
border:1px solid var(--border);
border-radius:13px;
padding:15px
}

.chapter-header{
display:flex;
gap:8px;
align-items:center
}

.chapter-header input,
.subsection-item input{
flex:1;
border:1px solid var(--border);
padding:9px;
border-radius:7px
}

.chapter-actions,
.subsection-item{
display:flex;
gap:6px;
align-items:center
}

.chapter-actions button,
.subsection-item button{
border:1px solid var(--border);
background:#fff;
border-radius:7px;
padding:7px
}

.subsection-list{
padding:10px 0 5px 30px;
display:flex;
flex-direction:column;
gap:7px
}

.content-layout{
display:grid;
grid-template-columns:220px 1fr;
gap:15px;
min-height:550px
}

.content-sidebar{
background:#fff;
border:1px solid var(--border);
border-radius:12px;
padding:8px
}

.content-sidebar-item{
width:100%;
text-align:left;
border:0;
background:none;
padding:10px;
border-radius:7px
}

.content-sidebar-item.active{
background:var(--blue-light);
font-weight:700
}

.content-sidebar-item.sub{
padding-left:20px;
font-size:13px
}

.content-editor-area{
background:#fff;
border:1px solid var(--border);
border-radius:12px;
overflow:hidden
}

.editor-toolbar{
display:flex;
gap:5px;
padding:9px;
border-bottom:1px solid var(--border);
background:#f7f9fb;
flex-wrap:wrap
}

.editor-toolbar button{
min-width:35px;
border:1px solid var(--border);
background:#fff;
padding:6px;
border-radius:6px
}

.content-editable{
min-height:450px;
padding:30px;
outline:none
}

.content-footer{
border-top:1px solid var(--border);
padding:8px 15px;
display:flex;
justify-content:space-between;
font-size:12px;
color:var(--muted)
}

.live-workspace{
background:#eef2f6;
border-radius:15px;
padding:15px
}

.live-toolbar{
background:#fff;
padding:12px;
border-radius:10px;
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:15px
}

.live-document{
min-height:650px;
display:flex;
justify-content:center;
padding:30px
}

.live-paper{
background:#fff;
width:min(800px,100%);
min-height:900px;
padding:70px;
box-shadow:0 5px 25px rgba(0,0,0,.12)
}

.live-placeholder{
color:var(--muted)
}

.analysis-item{
padding:12px;
border-left:3px solid var(--blue);
background:var(--bg);
margin:8px 0;
border-radius:5px
}

.analysis-item p{
margin:5px 0 0;
color:var(--muted)
}

.cover-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:35px
}

.template-gallery{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin-bottom:20px
}

.template-thumb{
padding:25px 10px;
background:#fff;
border:1px solid var(--border);
border-radius:10px
}

.template-thumb.selected{
border:2px solid var(--blue)
}

.color-field{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 0
}

.cover-preview-wrap>span{
font-size:12px;
color:var(--muted)
}

.cover-page{
background:#fff;
width:100%;
max-width:420px;
min-height:590px;
margin:10px auto;
padding:50px 30px;
box-shadow:var(--shadow);
text-align:center;
border-top:15px solid var(--blue-dark);
display:flex;
flex-direction:column;
align-items:center;
gap:10px
}

.cover-page .cp-title{
font-size:25px;
font-weight:800;
margin:auto 0
}

.source-form{
display:none;
background:#fff;
border:1px solid var(--border);
padding:20px;
border-radius:12px;
margin-bottom:20px
}

.source-form.active{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px
}

.source-form input{
padding:10px;
border:1px solid var(--border);
border-radius:8px
}

.source-form-actions{
grid-column:1/-1;
display:flex;
justify-content:flex-end;
gap:8px
}

.source-card{
background:#fff;
border:1px solid var(--border);
padding:15px;
border-radius:10px;
margin-bottom:8px
}

.source-card button{
margin-top:8px;
padding:6px 10px;
border:1px solid var(--border);
background:#fff;
border-radius:7px
}

.data-card{
background:#fff;
border:1px solid var(--border);
border-radius:12px;
padding:20px;
margin-bottom:15px
}

.coming-soon-panel{
background:#fff;
border:1px solid var(--border);
border-radius:15px;
padding:60px;
text-align:center
}

.export-summary{
background:#fff;
border:1px solid var(--border);
padding:20px;
border-radius:12px;
margin-bottom:20px
}

.export-actions{
display:flex;
gap:15px;
flex-wrap:wrap
}

.export-pdf,
.export-word{
padding:15px 20px;
border:0;
border-radius:10px;
font-weight:700
}

.export-pdf{
background:#d81e2c;
color:#fff
}

.export-word{
background:#123b66;
color:#fff
}

.modal-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.55);
display:none;
align-items:center;
justify-content:center;
padding:20px;
z-index:100
}

.modal-overlay.active{
display:flex
}

.modal-box{
background:#fff;
max-width:500px;
width:100%;
border-radius:18px;
padding:30px;
box-shadow:var(--shadow)
}

@media print{

.site-header,
.dashboard-header,
.editor-header,
.editor-sidebar,
.editor-toolbar,
.editor-form-actions,
.export-actions{
display:none!important
}

body{
background:#fff
}

.editor-layout{
display:block
}

.editor-workspace{
padding:0
}

.editor-section{
display:block!important
}

}