/* PressPage v1 — designer styles */
:root{
  --ink:#1a1a2e; --paper:#f4f1ea; --accent:#c0392b; --blue:#1a3a8f;
  --bar:#ffffff; --line:#d8d2c4; --sel:#2196f3;
  --sans:'Noto Sans Devanagari',system-ui,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{font-family:var(--sans); background:#e8e4d9; color:var(--ink); display:flex; flex-direction:column; overflow:hidden;}

/* ---------- top bar ---------- */
#topbar{display:flex; align-items:center; gap:12px; background:var(--ink); color:#fff; padding:8px 14px; flex:0 0 auto;}
.brand{font-size:22px; font-weight:800; white-space:nowrap;}
.brand span{font-family:'Rozha One','Tiro Devanagari Hindi',serif; letter-spacing:.5px;}
#designName{background:#2c2c44; border:1px solid #4a4a68; color:#fff; border-radius:8px; padding:8px 12px; font-size:15px; width:220px; font-family:var(--sans);}
.top-actions{margin-left:auto; display:flex; align-items:center; gap:8px;}
.zoom-ctl{display:flex; align-items:center; gap:4px; background:#2c2c44; border-radius:8px; padding:2px 6px;}
.zoom-ctl button{background:none; border:none; color:#fff; font-size:18px; width:30px; height:30px; cursor:pointer; border-radius:6px;}
.zoom-ctl button:hover{background:#3d3d5c;}
#zoomLabel{font-size:13px; min-width:48px; text-align:center;}
.btn{border:none; border-radius:10px; padding:10px 16px; font-size:15px; font-weight:700; cursor:pointer; font-family:var(--sans); background:#3d3d5c; color:#fff;}
.btn:hover{filter:brightness(1.15);}
.btn.primary{background:#27ae60;}
.btn.accent{background:var(--accent);}

/* ---------- toolbar ---------- */
#toolbar{display:flex; gap:10px; align-items:stretch; background:var(--bar); border-bottom:2px solid var(--line); padding:8px 12px; overflow-x:auto; flex:0 0 auto;}
.tb-group{display:flex; align-items:center; gap:6px; background:#faf8f2; border:1px solid var(--line); border-radius:12px; padding:6px 10px; white-space:nowrap;}
.tb-label{font-size:12px; font-weight:700; color:#8a8578; text-transform:uppercase;}
.tbtn{border:1px solid var(--line); background:#fff; border-radius:9px; padding:9px 13px; font-size:14px; font-weight:600; cursor:pointer; font-family:var(--sans);}
.tbtn:hover{border-color:var(--sel); background:#eef6ff;}
.tbtn.sm{padding:9px 10px;}
.tbtn.toggle.on{background:#dcefff; border-color:var(--sel);}
.tbtn.danger{color:#a93226;}
#toolbar select{border:1px solid var(--line); border-radius:9px; padding:8px; font-size:14px; font-family:var(--sans); background:#fff;}

/* ---------- workspace ---------- */
#workspace{flex:1; display:flex; min-height:0;}
#canvasScroll{flex:1; overflow:auto; display:flex; flex-direction:column; align-items:center; padding:26px 20px 40px;}
#canvasPad{background:transparent;}
#page{position:relative; background:#fff; box-shadow:0 6px 30px rgba(0,0,0,.28); overflow:hidden;}
#guides{position:absolute; inset:0; pointer-events:none; z-index:1;}
.guide-col{position:absolute; top:0; bottom:0; background:rgba(33,150,243,.07); border-left:1px dashed rgba(33,150,243,.5); border-right:1px dashed rgba(33,150,243,.5);}
.guide-margin{position:absolute; border:1px dashed rgba(192,57,43,.55); pointer-events:none;}
#elements{position:absolute; inset:0; z-index:2;}
#hint{margin-top:14px; font-size:13px; color:#7a7568; background:#fff; padding:8px 16px; border-radius:20px; border:1px solid var(--line);}

.el{position:absolute; touch-action:none;}
.el .inner{position:absolute; inset:0; overflow:hidden;}
.el.selected .inner{outline:2px solid var(--sel); outline-offset:0;}
.el.overflow .inner{outline:2px dashed #e74c3c;}
.overflow-badge{position:absolute; top:-24px; right:0; background:#e74c3c; color:#fff; font-size:11px; padding:2px 8px; border-radius:6px; display:none; z-index:50; white-space:nowrap;}
.el.overflow .overflow-badge{display:block;}
.handle{position:absolute; width:12px; height:12px; background:#fff; border:2px solid var(--sel); border-radius:50%; z-index:40; display:none;}
.el.selected .handle{display:block;}
.handle.nw{top:-7px; left:-7px; cursor:nwse-resize;}
.handle.ne{top:-7px; right:-7px; cursor:nesw-resize;}
.handle.sw{bottom:-7px; left:-7px; cursor:nesw-resize;}
.handle.se{bottom:-7px; right:-7px; cursor:nwse-resize;}
.handle.n{top:-7px; left:50%; margin-left:-6px; cursor:ns-resize;}
.handle.s{bottom:-7px; left:50%; margin-left:-6px; cursor:ns-resize;}
.handle.w{left:-7px; top:50%; margin-top:-6px; cursor:ew-resize;}
.handle.e{right:-7px; top:50%; margin-top:-6px; cursor:ew-resize;}
[contenteditable="true"]{outline:2px solid #27ae60 !important; cursor:text;}

/* element type styles (screen) */
.txt{width:100%; height:100%; overflow:hidden; word-wrap:break-word;}
.mh{text-align:center; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; overflow:hidden;}
.mh-topline,.mh-bottomline{display:flex; justify-content:space-between; align-items:center; gap:6px; padding:1px 4px; font-family:'Noto Sans Devanagari',sans-serif;}
.mh-name{font-family:'Rozha One','Tiro Devanagari Hindi',serif; line-height:1.05;}
.mh-tag{font-family:'Noto Sans Devanagari',sans-serif;}
.imgbox{width:100%; height:100%; position:relative; overflow:hidden; background:#ddd;}
.imgbox img{width:100%; height:100%; object-fit:cover; display:block;}
.imgcap{position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.72); color:#fff; font-size:9pt; padding:2px 6px; font-family:'Noto Sans Devanagari',sans-serif;}
.adbox{width:100%; height:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center;}
table.ptable{width:100%; height:100%; border-collapse:collapse; table-layout:fixed;}
table.ptable td, table.ptable th{border:1px solid #555; padding:2px 4px; overflow:hidden;}
table.ptable td:focus{outline:2px solid #27ae60; background:#fffbe8;}
.ruleline{width:100%; height:100%;}

/* ---------- side panel ---------- */
#panel{width:290px; flex:0 0 auto; background:var(--bar); border-left:2px solid var(--line); overflow-y:auto; padding:14px;}
.panel-title{font-size:16px; font-weight:800; margin-bottom:10px;}
.fgroup{margin-bottom:14px; border:1px solid var(--line); border-radius:10px; padding:10px;}
.fgroup h4{font-size:13px; color:#8a8578; margin-bottom:8px; text-transform:uppercase;}
.frow{display:flex; align-items:center; gap:6px; margin-bottom:8px;}
.frow label{font-size:13px; width:74px; flex:0 0 auto;}
.frow input[type=number]{width:64px; padding:6px; border:1px solid var(--line); border-radius:6px; font-size:13px;}
.frow input[type=text]{flex:1; padding:6px 8px; border:1px solid var(--line); border-radius:6px; font-size:13px; font-family:var(--sans); min-width:0;}
.frow input[type=color]{width:38px; height:30px; border:1px solid var(--line); border-radius:6px; padding:1px; background:#fff;}
.frow select{flex:1; padding:6px; border:1px solid var(--line); border-radius:6px; font-size:13px; font-family:var(--sans);}
.frow input[type=range]{flex:1;}
.pbtn{border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 10px; font-size:13px; cursor:pointer; font-family:var(--sans); font-weight:600;}
.pbtn:hover{border-color:var(--sel); background:#eef6ff;}
.pbtn.warn{color:#a93226;}
.pbtnrow{display:flex; gap:6px; flex-wrap:wrap;}
.style-presets{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.preset{border:2px solid var(--line); border-radius:8px; padding:8px 4px; text-align:center; cursor:pointer; background:#fff;}
.preset:hover{border-color:var(--sel);}
.preset b{display:block;}
.preset small{color:#8a8578;}
.tip{font-size:12px; color:#8a8578; line-height:1.6;}

/* ---------- modal ---------- */
#modal{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:100;}
#modal.hidden{display:none;}
.modal-box{background:#fff; border-radius:16px; width:min(480px,92vw); max-height:80vh; overflow:hidden; display:flex; flex-direction:column;}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); font-size:17px; font-weight:800;}
.modal-head button{border:none; background:none; font-size:20px; cursor:pointer;}
#modalBody{padding:16px 18px; overflow-y:auto;}
.design-row{display:flex; align-items:center; gap:8px; padding:10px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px;}
.design-row .nm{flex:1; font-weight:600;}
.design-row small{color:#8a8578; display:block; font-weight:400;}

/* ---------- toast ---------- */
#toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:12px 22px; border-radius:30px; font-size:15px; z-index:200; box-shadow:0 4px 18px rgba(0,0,0,.3);}
#toast.hidden{display:none;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  #workspace{flex-direction:column;}
  #panel{width:100%; border-left:none; border-top:2px solid var(--line); max-height:38vh;}
  #designName{width:120px;}
  .brand{font-size:18px;}
  .btn{padding:8px 10px; font-size:13px;}
  #canvasScroll{padding:14px 8px 30px;}
}

/* ---------- AI auto-design ---------- */
.credits-pill{display:inline-block; background:linear-gradient(135deg,#6c3483,#8e44ad); color:#fff; font-size:13px; font-weight:700; padding:7px 14px; border-radius:20px; cursor:pointer; white-space:nowrap;}
.credits-pill b{font-size:15px;}
.credits-pill.low{background:linear-gradient(135deg,#a93226,#c0392b); animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.75}}
.tbtn.ai{background:linear-gradient(135deg,#f5eef8,#e8daef); border-color:#a569bd; font-weight:800;}
.tbtn.ai:hover{background:#e8daef; border-color:#8e44ad;}
.ai-box{background:#f5eef8; border:1px solid #d2b4de; border-radius:12px; padding:14px 16px; font-size:14px; line-height:1.6;}
.ai-credits-line{background:#fef9e7; border:1px solid #f0d27a; border-radius:10px; padding:10px 14px; margin-bottom:12px; font-size:14px;}
.ai-credits-line .muted{color:#8a8578; font-size:12px;}
.ai-story{margin-bottom:10px;}
.ai-story-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;}
.ai-story-head label{font-size:13px; font-weight:700;}
.ai-text{width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; font-family:var(--sans); resize:vertical; line-height:1.6;}
.ai-text:focus{outline:none; border-color:#8e44ad; box-shadow:0 0 0 3px #f5eef8;}
.pbtn.sm{padding:6px 10px; font-size:12px;}
.pbtn.ai-go{background:linear-gradient(135deg,#8e44ad,#6c3483); color:#fff; border-color:#6c3483; font-size:15px; padding:11px 22px;}
.pbtn.ai-go:hover{background:#7d3c98;}
.pbtn.ai-go:disabled{opacity:.6; cursor:wait;}
.pbtn.ai-buy{margin-left:8px; text-decoration:none; display:inline-block;}
#aiAddStory{margin-top:2px;}