/* ================= WORKSPACE ================= */

.workspace{
max-width:1200px;
margin:auto;
}

.workspace-top{
display:grid;
grid-template-columns: minmax(0,1fr) 340px;
gap:28px;
align-items:start;
}

/* ================= VIEWER ================= */

.viewer{
background:#fff;
border-radius:14px;
padding:14px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
position:relative;
}

.pdf-container{
position:relative;
width:100%;
max-width:700px;
margin:0 auto;
}

/* page */

.pdf-page{
width:100%;
display:block;
}

.pdf-page canvas{
width:100%;
height:auto;
display:block;
border-radius:8px;
box-shadow:0 8px 30px rgba(0,0,0,.08);
transition:filter .2s ease;
}

.pdf-nav{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
margin-bottom:10px;
}

.nav-btn{
width:36px;
height:36px;
border-radius:8px;
border:none;
background:#f1f5f9;
cursor:pointer;
font-size:18px;
}

.nav-btn:hover{
background:#e2e8f0;
}

.page-info{
font-size:14px;
font-weight:600;
}

.goto-page{
display:flex;
gap:6px;
align-items:center;
}

.goto-input{
width:60px;
height:32px;
border-radius:6px;
border:1px solid #e2e8f0;
text-align:center;
}

.goto-btn{
height:32px;
padding:0 8px;
border:none;
border-radius:6px;
background:#f1f5f9;
cursor:pointer;
}

/* ================= WATERMARK ================= */

.watermark-display{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
z-index:10;

font-size:4.5rem;
font-weight:900;
color:rgba(220,38,38,0.22);
text-transform:uppercase;
transform:rotate(-28deg);
user-select:none;
}

/* ================= OVERLAY ================= */

.overlay{
position:absolute;
inset:0;
display:none;
flex-direction:column;
align-items:center;
justify-content:center;

background:rgba(255,255,255,.75);
backdrop-filter:blur(4px);

border-radius:12px;
z-index:20;
}

.overlay h3{
font-size:20px;
margin-bottom:6px;
}

.overlay p{
font-size:14px;
opacity:.7;
}

/* ================= TIMER ================= */

.timer{
font-size:22px;
font-weight:700;
margin:12px 0;
}

/* ================= PROGRESS ================= */

.progress{
width:60%;
height:8px;
background:#e2e8f0;
border-radius:20px;
overflow:hidden;
}

.progress-bar{
height:100%;
width:0%;
background:#3b82f6;
transition:width .3s ease;
}

/* ================= OPTIONS PANEL ================= */

.options-panel{
background:#fff;
border-radius:14px;
padding:18px;
box-shadow:0 8px 25px rgba(0,0,0,.08);

display:flex;
flex-direction:column;
gap:14px;

height:fit-content;
}

.options-panel label{
font-size:13px;
font-weight:600;
color:#334155;
margin-bottom:4px;
display:block;
}

.options-panel input,
.options-panel select{
width:90%;
height:42px;
border-radius:10px;
border:1px solid #e2e8f0;
padding:0 12px;
font-size:14px;
background:#f8fafc;
transition:.2s;
}

.options-panel input:focus,
.options-panel select:focus{
outline:none;
border-color:#3b82f6;
background:#fff;
box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

.input-hint{
display:block;
font-size:12px;
color:#64748b;
margin-top:4px;
}

/* ================= BUTTONS ================= */

.workspace-actions{
display:flex;
gap:10px;
margin-top:6px;
}

.workspace-actions .btn{
flex:1;
height:46px;
border-radius:10px;
font-weight:600;
font-size:14px;

display:flex;
align-items:center;
justify-content:center;
gap:8px;

border:none;
cursor:pointer;
transition:.2s;
}

/* lock */

.process-btn{
background:linear-gradient(135deg,#4f7cff,#2563eb);
color:#fff;
box-shadow:0 4px 12px rgba(37,99,235,.25);
}

.process-btn:hover{
transform:translateY(-1px);
}

.process-btn:disabled{
background:#cbd5e1;
color:#64748b;
box-shadow:none;
cursor:not-allowed;
}

/* download */

.download-btn{
background:#0f766e;
color:#fff;
box-shadow:0 4px 12px rgba(15,118,110,.25);
}

.download-btn:hover{
background:#0d9488;
transform:translateY(-1px);
}

.download-btn:disabled{
opacity:.5;
cursor:not-allowed;
box-shadow:none;
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){

.workspace-top{
grid-template-columns:1fr;
}

.viewer{
order:1;
}

.options-panel{
order:2;
}

.watermark-display{
font-size:3rem;
}

}