:root{
  --pink:#ff77a9; --pink-deep:#ff5e9c;
  --purple:#a07bff; --purple-deep:#7c5cff;
  --ink:#6b3a5b; --ink-soft:#8a5678;
  --glass:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.7);
  --shadow:0 16px 40px rgba(180,80,140,.22);
  --radius:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Quicksand',system-ui,sans-serif;color:var(--ink);min-height:100vh;
  padding:28px 18px 70px;
  background:linear-gradient(135deg,#ffe0ef 0%,#ffd6f0 35%,#e9d5ff 70%,#dcc8ff 100%);
  background-attachment:fixed}

h1{font-family:'Pacifico',cursive;font-weight:400;color:var(--purple-deep);
  font-size:2rem;text-align:center;margin-bottom:4px}
.sub{text-align:center;color:var(--ink-soft);font-weight:500;margin-bottom:22px;font-size:.92rem}

.card{background:var(--glass);border:1.5px solid var(--glass-border);border-radius:var(--radius);
  box-shadow:var(--shadow);backdrop-filter:blur(14px);padding:22px}
.wrap{max-width:960px;margin:0 auto}

/* login */
#login{max-width:360px;margin:8vh auto 0}
label{display:block;font-size:.78rem;font-weight:700;color:var(--ink-soft);
  margin:12px 2px 5px;text-transform:uppercase;letter-spacing:.5px}
input[type=text],input[type=password],input[type=url],textarea,select{
  width:100%;font-family:inherit;font-size:.95rem;color:var(--ink);
  background:rgba(255,255,255,.75);border:1.5px solid var(--glass-border);
  border-radius:12px;padding:10px 13px;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(255,120,180,.22)}
textarea{resize:vertical;min-height:56px;line-height:1.4}

.btn{font-family:inherit;font-weight:700;font-size:.9rem;cursor:pointer;border:none;
  color:#fff;background:linear-gradient(135deg,var(--pink),var(--purple));
  padding:11px 20px;border-radius:999px;box-shadow:0 8px 20px rgba(255,120,180,.4);
  transition:transform .2s,filter .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:rgba(255,255,255,.7);color:var(--purple-deep);
  box-shadow:0 6px 16px rgba(180,80,140,.18)}
.btn.danger{background:linear-gradient(135deg,#ff8a8a,#ff5e9c)}
.btn.sm{padding:8px 14px;font-size:.82rem}
.err{color:#c0356b;font-weight:600;font-size:.85rem;margin-top:10px;min-height:1.1em;text-align:center}

/* toolbar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:960px;margin:0 auto 18px}
.bar .right{display:flex;gap:10px;align-items:center}
.badge{font-size:.78rem;font-weight:700;color:var(--purple-deep);
  background:rgba(255,255,255,.6);border:1px solid var(--glass-border);
  padding:6px 12px;border-radius:999px}
a.view{text-decoration:none}

.section-title{font-weight:700;color:var(--purple-deep);font-size:1.05rem;margin:6px 2px 12px;
  display:flex;align-items:center;gap:8px}

/* book editor cards */
.books{display:grid;gap:16px}
.book-edit{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start}
.book-edit .cov{width:64px;height:88px;border-radius:6px 10px 10px 6px;
  display:flex;align-items:center;justify-content:center;font-size:1.9rem;color:#fff;
  background:linear-gradient(150deg,var(--pink),var(--purple-deep));
  box-shadow:0 8px 16px rgba(180,80,140,.3),inset -6px 0 10px rgba(0,0,0,.15)}
.grid2{display:grid;grid-template-columns:90px 1fr;gap:10px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
.foot .left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.toggle{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;color:var(--ink-soft)}
.toggle input{width:auto}
.ord{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:var(--ink-soft)}
.ord input{width:64px}
.saved{color:#2a9d63;font-weight:700;font-size:.82rem;opacity:0;transition:opacity .3s}
.saved.show{opacity:1}
hr.div{border:none;border-top:1px dashed rgba(160,110,150,.3);margin:26px 0}
.mini{font-size:.72rem;color:var(--ink-soft);margin-top:3px}