:root{
  --sidebar-width: 320px;
  --a4-bg: #fff;
  --app-bg: transparent;
  --accent: #1f6feb;
  --ink: #1d3557;
  --muted: #4f6280;
}

*{box-sizing: border-box;}
body,html{height:100%;margin:0;font-family:"Trebuchet MS", "Segoe UI", sans-serif;}
#app{display:flex;min-height:calc(100vh - 62px);background:var(--app-bg);}

/* Sidebar */
#sidebar{
  width:var(--sidebar-width);
  padding:16px 14px;
  background:rgba(255,255,255,0.86);
  border-right:1px solid #dde6f2;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset;
  backdrop-filter: blur(8px);
  overflow:auto;
}
#sidebar h3{margin:0;color:var(--ink);font-size:18px;}
.sidebar-head{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.selected-chip{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 10px;
  border:1px solid #c9d7ea;
  border-radius:10px;
  background:#f5f9ff;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  line-height:1.3;
  word-break:break-word;
}
.panel{
  border:1px solid #dbe5f2;
  border-radius:12px;
  background:#fff;
  margin:0 0 10px;
  overflow:hidden;
}
.panel summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  background:#f3f7fd;
  color:var(--ink);
  font-weight:700;
}
.panel summary::-webkit-details-marker{display:none;}
.panel .control{padding:10px 12px 0;}
.panel .control:last-child{padding-bottom:12px;}
.control{margin-bottom:10px;}
.control label{display:block;font-size:13px;margin-bottom:6px;color:#2a3f5f;}
.inline-checks{display:flex;gap:10px;}
.inline-checks label{display:flex;align-items:center;gap:6px;margin:0;}
.control input[type="number"], .control select, .control input[type="color"], .control input[type="url"], .control input[type="range"]{width:100%;padding:7px;border:1px solid #cfdae8;border-radius:8px;background:#fff;}
.action-row{display:flex;gap:8px;margin-top:12px;}
.action-row button{flex:1;padding:9px 12px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-weight:700;}
#applyBtn{background:var(--accent);color:#fff;}
#applyBtn:hover{background:#1758b8;}
#resetStyleBtn{background:#fff;color:#2f4563;border-color:#b8c8df;}
#resetStyleBtn:hover{background:#f4f8ff;}

/* Main area */
#main{flex:1;display:flex;flex-direction:column;padding:18px;overflow:auto;}
#a4-wrapper{display:flex;justify-content:center;align-items:flex-start;padding:12px;}

/* A4 style: using mm for print size; on screen we'll clamp the px size for convenience */
.a4{
  width:210mm; /* print size */
  height:297mm;
  max-width: 794px; /* approx 210mm at 96dpi */
  max-height: 1123px;
  background:var(--a4-bg);
  border:1px solid #d0d4da;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  padding:20mm;
  overflow:auto;
  position:relative;
}

/* Visual selection */
.selected-outline{
  outline: 3px dashed rgba(31,111,235,0.62);
  outline-offset: -4px;
}

/* Make editable cursor obvious */
.a4 [contenteditable="true"]:focus{
  outline: 2px solid rgba(0,120,255,0.2);
}

/* Responsive adjustments */
@media (max-width:900px){
  #app{display:block;min-height:calc(100vh - 62px);}
  #sidebar{width:100%;border-right:none;border-bottom:1px solid #dde6f2;max-height:none;}
  #main{padding:10px;}
}