:root{
  --bg:#f4f1ea; --card:#fff; --ink:#2a2622; --muted:#7b736a;
  --accent:#e2612c; --accent2:#2f7d6e; --line:#ddd6cb;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Trebuchet MS",Verdana,system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
}
.hidden{display:none !important}
.spacer{flex:1}

/* ---------- bare de sus ---------- */
.topbar{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; background:var(--card);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.topbar.dark{background:#2a2622; color:#fff; border-color:#000}
.brand{font-size:22px; font-weight:bold; letter-spacing:.5px}
.brand::before{content:"📖 "}
.authorbox{font-size:13px; color:var(--muted)}
.authorbox input{
  font:inherit; font-size:14px; color:var(--ink); padding:6px 8px;
  border:1px solid var(--line); border-radius:8px; margin-left:6px;
}
.title-input{
  font:inherit; font-size:18px; font-weight:bold; padding:8px 10px;
  border:1px solid var(--line); border-radius:8px; min-width:260px; background:#fffdf8;
}
.save-state{font-size:12px; color:var(--muted); min-width:72px; text-align:right}

/* ---------- butoane ---------- */
.btn{
  font:inherit; font-size:14px; cursor:pointer;
  background:var(--accent); color:#fff; border:none;
  padding:9px 14px; border-radius:10px;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:#fff; color:var(--ink); border:1px solid var(--line)}
.topbar.dark .btn.ghost{background:transparent; color:#fff; border-color:#5a534b}
.btn.danger{color:#b3391a}
.btn.big{font-size:17px; padding:14px 22px}
.btn.wide{display:block; width:100%; margin-top:8px}

/* ---------- raft ---------- */
.shelf-wrap{max-width:1000px; margin:0 auto; padding:24px 16px 60px}
.shelf-wrap h1{margin:10px 0 4px; font-size:26px}
.hint{color:var(--muted); font-size:14px; margin:0 0 18px}
.shelf{display:flex; flex-wrap:wrap; gap:18px}
.book-card{
  width:200px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.05);
}
.book-card:hover{transform:translateY(-2px)}
.book-cover{height:130px; display:flex; align-items:center; justify-content:center; font-size:46px}
.book-meta{padding:10px 12px}
.book-meta b{display:block; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.book-meta small{color:var(--muted); font-size:12px}
.book-row{display:flex; gap:6px; padding:0 10px 10px}
.book-row button{
  font:inherit; font-size:12px; cursor:pointer; background:#f7f4ee;
  border:1px solid var(--line); border-radius:8px; padding:4px 8px;
}
.shelf-actions{margin-top:26px; display:flex; gap:10px; align-items:center}

/* ---------- editor ---------- */
.editor{display:flex; gap:16px; padding:16px; align-items:flex-start}
.palette{
  width:230px; flex:0 0 230px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px; position:sticky; top:70px;
  max-height:calc(100vh - 90px); overflow:auto;
}
.pal-group{margin-bottom:16px}
.pal-title{font-size:12px; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.bg-list{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.bg-chip{height:34px; border-radius:8px; border:2px solid transparent; cursor:pointer}
.bg-chip.sel{border-color:var(--accent)}
.tabs{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px}
.tabs button{
  font:inherit; font-size:12px; cursor:pointer; background:#f7f4ee;
  border:1px solid var(--line); border-radius:999px; padding:3px 9px;
}
.tabs button.sel{background:var(--accent2); color:#fff; border-color:var(--accent2)}
.sticker-list{display:grid; grid-template-columns:repeat(5,1fr); gap:4px}
.sticker-list button{
  font-size:22px; line-height:1; aspect-ratio:1; cursor:pointer;
  background:#fffdf8; border:1px solid var(--line); border-radius:8px;
}
.sticker-list button:hover{background:#ffeede}

.stage-col{flex:1; min-width:0}
.stage-box{
  position:relative; width:100%; aspect-ratio:16/10;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:#fff; box-shadow:0 3px 0 rgba(0,0,0,.05);
}
.stage{position:absolute; inset:0; overflow:hidden}
.item{position:absolute; cursor:grab; user-select:none; touch-action:none; transform-origin:center}
.item.sel{outline:2px dashed var(--accent); outline-offset:3px}
.item.sticker{line-height:1; text-align:center}
.item.text{
  padding:4px 6px; font-family:"Comic Sans MS","Trebuchet MS",sans-serif;
  font-weight:bold; white-space:pre-wrap; max-width:80%;
}
.item.text[contenteditable="true"]{cursor:text; background:rgba(255,255,255,.65); border-radius:6px}
.item.photo img{width:100%; height:100%; object-fit:contain; pointer-events:none; display:block}

.item-tools{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.item-tools button{
  font:inherit; font-size:16px; cursor:pointer; background:#fff;
  border:1px solid var(--line); border-radius:8px; padding:4px 10px; min-width:38px;
}
.item-tools button.danger{color:#b3391a}

.pagetext-wrap{margin-top:10px}
.page-text{
  min-height:70px; background:#fffdf8; border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 14px; font-size:17px; line-height:1.45;
}
.page-text:empty:before{content:attr(data-placeholder); color:#b3aaa0}
.page-text:focus{outline:2px solid var(--accent2); outline-offset:1px}

.pagebar{display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap}
.counter{font-size:13px; color:var(--muted)}
.thumbs{display:flex; gap:8px; margin-top:12px; overflow-x:auto; padding-bottom:6px}
.thumb{
  flex:0 0 96px; height:60px; border:2px solid var(--line); border-radius:8px;
  cursor:pointer; position:relative; overflow:hidden; font-size:10px;
}
.thumb.sel{border-color:var(--accent)}
.thumb span{position:absolute; left:3px; bottom:2px; background:rgba(0,0,0,.45); color:#fff; border-radius:4px; padding:0 4px}
.thumb .mini{position:absolute; inset:0}
.thumb .mini i{position:absolute; transform:translate(-50%,-50%); font-style:normal}

/* ---------- citire ---------- */
.reader{
  display:flex; align-items:center; gap:14px; justify-content:center;
  padding:24px 16px 50px; background:#2a2622; min-height:calc(100vh - 56px);
}
.read-page{width:min(1000px,100%)}
.stage-box.read{box-shadow:0 10px 30px rgba(0,0,0,.5); border-color:#000}
.read-text{
  margin-top:14px; background:#fffdf8; border-radius:var(--radius);
  padding:16px 20px; font-size:20px; line-height:1.5; min-height:40px;
}
.reader .counter{color:#bbb; text-align:center; margin-top:10px}
.nav-arrow{
  font-size:40px; line-height:1; background:transparent; color:#fff;
  border:none; cursor:pointer; padding:10px 6px; opacity:.7;
}
.nav-arrow:hover{opacity:1}

@media (max-width:820px){
  .editor{flex-direction:column}
  .palette{position:static; width:100%; flex:none; max-height:none}
  .sticker-list{grid-template-columns:repeat(8,1fr)}
}