:root{
    --bg:#0f1724;
    --panel:#0b1220;
    --accent:#06b6d4;
    --paper-bg:#fff;
    --paper-shadow: 0 6px 18px rgba(2,6,23,0.2);
  }
  body{font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; background:#f3f4f6; color:#111;}
  .container{padding:16px; max-width:1100px; margin:0 auto;}

  /* Result container (where PNG is shown) */
  .result-area{display:flex; gap:12px; align-items:flex-start; margin-bottom:18px;}
  .result-area img{max-width:100%; height:auto; border:1px solid #ddd; border-radius:6px; box-shadow:0 1px 6px rgba(0,0,0,0.06);}

  .btn{background:var(--accent); color:white; border:none; padding:10px 12px; border-radius:8px; cursor:pointer; font-weight:600;}
  .btn.secondary{background:#334155;}
  .small{padding:6px 8px; font-size:14px;}

  /* Editor overlay */
  .editor-overlay{position:fixed; inset:0; display:none; z-index:1200; background:rgba(6,8,14,0.6); align-items:center; justify-content:center; padding:18px;}
  .editor-panel{width:100%; max-width:1200px; max-height:96vh; background:transparent; display:flex; gap:12px;}
  .sidebar{width:260px; background:#fff; border-radius:10px; padding:14px; overflow:auto; box-shadow:0 10px 30px rgba(2,6,23,0.2);}
  .editor-canvas-wrap{flex:1; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:flex-start;}

  /* A4 page container - keep aspect ratio close to A4 (1:1.414) */
  .page{background:var(--paper-bg); width:800px; height:1131px; border-radius:6px; position:relative; box-shadow:var(--paper-shadow); overflow:hidden; border:1px solid #e6e6e6;}
  @media (max-width:900px){
    .page{width:540px; height:761px;}
    .sidebar{display:none;}
    .editor-panel{max-width:100%;}
  }
  @media (max-width:420px){
    .page{width:320px; height:452px;} /* mobile small */
  }

  /* Widgets inside page */
  .widget{
    position:absolute;
    min-width:120px;
    min-height:60px;
    background:linear-gradient(180deg, #fff,#fafafa);
    border:1px dashed rgba(15,23,42,0.12);
    box-shadow:0 4px 12px rgba(2,6,23,0.06);
    padding:8px;
    box-sizing:border-box;
    border-radius:6px;
    touch-action:none; /* for pointer events */
    overflow:auto;
  }
  .widget .title{font-weight:700; margin-bottom:6px; font-size:14px;}
  .widget .content{font-size:13px; outline:none;}

  /* resize handle */
  .resize-handle{
    width:18px; height:18px; position:absolute; right:4px; bottom:4px; border-radius:4px; background:#0b1220; opacity:0.8;
    display:flex; align-items:center; justify-content:center; color:white; font-size:12px; cursor:se-resize; touch-action:none;
  }

  /* toolbar */
  .toolbar{display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap;}
  .pages-strip{display:flex; gap:10px; overflow:auto; padding:8px;}
  .page-mini{width:80px; height:113px; border:1px solid #ddd; border-radius:4px; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .page-mini.active{outline:3px solid var(--accent); transform:scale(1.02);}

  /* bottom toolbar for mobile */
  .mobile-toolbar{display:none; position:fixed; left:0; right:0; bottom:0; padding:8px; background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.98)); box-shadow:0 -6px 18px rgba(0,0,0,0.12);}
  @media (max-width:900px){ .mobile-toolbar{display:flex; gap:8px; justify-content:center;} .sidebar{display:none;} }

  /* hint */
  .hint{font-size:13px; color:#475569; margin-top:8px;}




  .widget {
    background: #fff;
    border-radius: 10px;
    border: 1px dashed rgba(0,0,0,0.06);
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
    transition: box-shadow .12s, transform .06s;
  }
  .widget .title { font-weight:700; margin-bottom:8px; }
  .widget.active-widget { box-shadow: 0 6px 20px rgba(0,0,0,.06); transform: translateY(-2px); }
  .page { background: #fff; border-radius:8px; padding:18px; }