/* Book Commissioning - modern UI layer (loaded after the legacy Bootstrap 3 styles) */
:root{
  --bg:#f4f6fb; --surface:#fff; --ink:#1b2437; --muted:#6b7589; --line:#e4e8f0;
  --brand:#1b6ca8;--brand-dark:#14304a;--brand-light:#2f9bd8;--brand-soft:#7fb3de; --brand-d:#15547f; --brand-l:#e8f1fa; --accent:#12b886;
  --danger:#e03131; --warn:#f08c00; --side:#111a33; --side-ink:#b8c2dc;
  --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0e1424;--surface:#161e33;--ink:#e8ecf6;--muted:#97a2bb;--line:#26314d;--brand-l:#1d2a52;--side:#0a1022}
}
*{box-sizing:border-box}
html,body{background:var(--bg)!important;color:var(--ink);font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:14px}
a{color:var(--brand)} a:hover{color:var(--brand-d);text-decoration:none}

/* ---------- Auth pages ---------- */
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:linear-gradient(135deg,var(--brand-dark) 0%,var(--brand) 55%,var(--brand-light) 100%)!important}
.auth-wrap{display:grid;grid-template-columns:1.05fr 1fr;width:100%;max-width:980px;background:var(--surface);
  border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.auth-hero{padding:48px 40px;color:#fff;background:linear-gradient(160deg,var(--brand-dark),var(--brand));display:flex;flex-direction:column;justify-content:space-between}
.auth-hero h1{font-size:30px;line-height:1.2;margin:28px 0 12px;font-weight:700;color:#fff}
.auth-hero p{opacity:.85;line-height:1.6}
.auth-hero ul{list-style:none;padding:0;margin:24px 0 0}
.auth-hero li{margin:10px 0;opacity:.92}
.auth-hero li:before{content:"\2713";display:inline-block;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.18);text-align:center;line-height:22px;margin-right:10px;font-size:12px}
.auth-logo{background:#fff;border-radius:10px;padding:8px 12px;display:inline-block}
.auth-logo img{height:44px;display:block}
.auth-panel{padding:44px 40px}
.auth-panel h2{margin:0 0 4px;font-size:24px;font-weight:700}
.auth-panel .sub{color:var(--muted);margin-bottom:22px}
.tabs{display:flex;background:var(--bg);border-radius:10px;padding:4px;margin-bottom:22px}
.tabs button{flex:1;border:0;background:transparent;padding:10px;border-radius:8px;font-weight:600;color:var(--muted);cursor:pointer}
.tabs button.on{background:var(--surface);color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.tab-pane{display:none}.tab-pane.on{display:block}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:12px;margin-bottom:6px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.field input{width:100%;height:46px;border:1px solid var(--line);border-radius:10px;padding:0 14px;background:var(--surface);color:var(--ink);font-size:15px;outline:0;transition:.15s}
.field input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-l)}
.btn-app{display:inline-block;width:100%;height:46px;line-height:46px;text-align:center;border:0;border-radius:10px;
  background:var(--brand);color:#fff!important;font-weight:600;font-size:15px;cursor:pointer;transition:.15s}
.btn-app:hover{background:var(--brand-d)}
.alert-app{padding:12px 14px;border-radius:10px;margin-bottom:16px;font-size:13px;background:#fff0f0;color:var(--danger);border:1px solid #ffd6d6}
.alert-app.ok{background:#e6fcf5;color:#0b7a5a;border-color:#c3fae8}
.err-card{background:var(--surface);border-radius:20px;padding:48px;text-align:center;max-width:420px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.err-code{font-size:72px;font-weight:800;color:var(--brand);line-height:1}
.err-card .btn-app{margin-top:12px}
@media(max-width:820px){.auth-wrap{grid-template-columns:1fr}.auth-hero{display:none}.auth-panel{padding:32px 24px}}

/* ---------- App shell ---------- */
body.app{padding:0!important;margin:0}
.side{position:fixed;inset:0 auto 0 0;width:250px;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;z-index:1040;transition:transform .2s}
.side .brand{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.07)}
.side .brand span{display:inline-block;background:#fff;border-radius:8px;padding:6px 10px}
.side .brand img{height:38px;display:block}
.side nav{flex:1;overflow:auto;padding:14px 12px}
.side .grp{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--side-mute,#6c7aa0);margin:18px 10px 6px}
.side a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:var(--side-ink);font-weight:500;margin-bottom:2px}
.side a .fa{width:18px;text-align:center;opacity:.85}
.side a:hover{background:rgba(255,255,255,.07);color:#fff}
.side a.on{background:var(--brand);color:#fff}
.side .me{padding:14px 18px;border-top:1px solid rgba(255,255,255,.07);font-size:12px}
.side .me b{display:block;color:#fff;font-size:13px}
.topbar{position:sticky;top:0;z-index:1030;height:60px;margin-left:250px;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.topbar h1{font-size:17px;margin:0;font-weight:700}
.topbar .who{display:flex;align-items:center;gap:10px;color:var(--muted)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-l);color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:700}
.burger{display:none;border:0;background:none;font-size:20px;color:var(--ink)}
.app-main{margin-left:250px;padding:26px 28px 40px;min-height:calc(100vh - 60px)}
.app-main .container{width:100%!important;max-width:none!important;padding:0!important}
.app-foot{margin-left:250px;padding:16px 28px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}
@media(max-width:900px){
  .side{transform:translateX(-100%)}.side.open{transform:none}
  .topbar,.app-main,.app-foot{margin-left:0}.burger{display:block}.topbar{padding:0 16px}.app-main{padding:18px 14px}
}

/* ---------- Legacy Bootstrap 3 content, modernised ---------- */
.app-main .panel,.app-main .well,.app-main .box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.app-main .panel-heading{background:transparent!important;border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0}
.app-main .panel-title{font-weight:700;color:var(--ink)!important}
.app-main h1,.app-main h2,.app-main h3,.app-main h4{color:var(--ink);font-weight:700}
.app-main .table{background:var(--surface);border-radius:var(--radius);overflow:hidden;border-collapse:separate;border-spacing:0;border:1px solid var(--line)}
.app-main .table>thead>tr>th,.app-main .table>tbody>tr>th{background:var(--bg);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line)!important}
.app-main .table>tbody>tr>td{border-top:1px solid var(--line);vertical-align:middle}
.app-main .table-striped>tbody>tr:nth-of-type(odd){background:transparent}
.app-main .table-hover>tbody>tr:hover{background:var(--brand-l)}
.app-main .form-control,.app-main select,.app-main textarea,.app-main input[type=text],.app-main input[type=email],.app-main input[type=password],.app-main input[type=date]{
  border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);box-shadow:none;height:auto;min-height:38px;padding:8px 12px}
.app-main .form-control:focus,.app-main select:focus,.app-main textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l);outline:0}
.app-main .btn{border-radius:9px;font-weight:600;border:0;padding:8px 16px;transition:.15s}
.app-main .btn-primary,.app-main .btn-info{background:var(--brand);color:#fff}.app-main .btn-primary:hover,.app-main .btn-info:hover{background:var(--brand-d)}
.app-main .btn-success{background:var(--accent);color:#fff}
.app-main .btn-danger{background:var(--danger);color:#fff}
.app-main .btn-warning{background:var(--warn);color:#fff}
.app-main .btn-default{background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.app-main .label,.app-main .badge{border-radius:20px;padding:4px 10px;font-weight:600}
.app-main .modal-content{border-radius:var(--radius);border:0;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.app-main .pagination>li>a,.app-main .pagination>li>span{border-radius:8px;margin:0 2px;border:1px solid var(--line)}
.app-main .pagination>.active>a{background:var(--brand);border-color:var(--brand)}
#back-to-top{border-radius:50%;background:var(--brand);border:0}

/* ---------- Author dashboard ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:28px;line-height:1.1}.stat span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.card-app{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}
.card-app h3{margin:0 0 14px;font-size:16px}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;background:var(--brand-l);color:var(--brand)}
.pill.ok{background:#e6fcf5;color:#0b7a5a}.pill.wait{background:#fff4e6;color:#d9480f}.pill.no{background:#fff0f0;color:var(--danger)}
.tbl{width:100%;border-collapse:collapse}.tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;padding:10px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 10px;border-bottom:1px solid var(--line)}
.empty{color:var(--muted);text-align:center;padding:28px}
.topbar h1{background:none!important;color:var(--ink)!important;padding:0!important;margin:0!important;border:0!important;box-shadow:none!important;width:auto!important;height:auto!important}

/* grid (sortable tables) */
.grid-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin:0 0 20px;overflow:hidden}
.grid-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.grid-search{position:relative}.grid-search .fa{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
.grid-search input{height:38px;border:1px solid var(--line);border-radius:9px;padding:0 12px 0 32px;min-width:240px;background:var(--surface);color:var(--ink);outline:0}
.grid-search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.grid-count{color:var(--muted);font-size:12px}.grid-sp{flex:1}
.grid-size{color:var(--muted);font-size:12px;margin:0;font-weight:500}.grid-size select{border:1px solid var(--line);border-radius:8px;height:32px;background:var(--surface);color:var(--ink)}
.grid-scroll{overflow:auto}
.grid-wrap table{margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;width:100%}
.grid-table th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.grid-table th.sortable:after{content:"\21C5";margin-left:6px;opacity:.35;font-size:11px}
.grid-table th.asc:after{content:"\25B2";opacity:1;color:var(--brand)}.grid-table th.desc:after{content:"\25BC";opacity:1;color:var(--brand)}
.grid-table th.sortable:hover{color:var(--brand)}
.grid-empty{padding:28px;text-align:center;color:var(--muted)}
.grid-pager{display:flex;gap:4px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line)}
.grid-pager:empty{display:none}
.grid-pager .pg{min-width:34px;height:34px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;cursor:pointer}
.grid-pager .pg.on{background:var(--brand);border-color:var(--brand);color:#fff}.grid-pager .pg:disabled{opacity:.4;cursor:default}
.pg-gap{padding:6px 4px;color:var(--muted)}

/* modal / popup forms / confirm */
body.bc-lock{overflow:hidden}
.bc-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px}
.bc-back{position:absolute;inset:0;background:rgba(10,16,34,.55);backdrop-filter:blur(2px)}
.bc-card{position:relative;width:100%;max-width:560px;max-height:92vh;display:flex;flex-direction:column;background:var(--surface);color:var(--ink);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden;animation:bcpop .16s ease-out}
.bc-card.wide{max-width:860px}.bc-card.small{max-width:420px}
@keyframes bcpop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.bc-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.bc-head b{font-size:16px}.bc-x{border:0;background:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}
.bc-body{overflow:auto}
.bc-framewrap{position:relative;min-height:260px}.bc-frame{width:100%;height:260px;border:0;display:block;opacity:0;transition:opacity .15s}
.bc-framewrap.ready .bc-frame{opacity:1}.bc-framewrap.ready .bc-loading{display:none}
.bc-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.bc-confirm{padding:26px 24px 22px;text-align:center}
.bc-ico{width:52px;height:52px;border-radius:50%;margin:0 auto 12px;background:var(--brand-l);color:var(--brand);font-size:26px;font-weight:700;line-height:52px}
.bc-confirm p{font-size:15px;margin:0 0 20px}
.bc-actions{display:flex;gap:10px;justify-content:center}
.bc-actions button{min-width:110px;height:40px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-weight:600;cursor:pointer}
.bc-actions .b-ok{background:var(--brand);border-color:var(--brand);color:#fff}.bc-actions .b-ok.danger{background:var(--danger);border-color:var(--danger)}

/* embedded (inside popup) */
body.embed{padding:18px 22px!important;background:var(--surface)!important}
body.embed .container,body.embed .container-fluid{width:100%!important;max-width:none!important;padding:0!important}
body.embed .navbar,body.embed #back-to-top{display:none!important}

.auth-logo{display:inline-flex;align-items:center;gap:14px;padding:10px 16px}
.auth-logo i{width:1px;height:34px;background:var(--line)}
.auth-logo img{height:40px;width:auto}
.side .brand span{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px}
.side .brand img{height:auto;max-width:100%;max-height:44px;width:auto}

body.embed .app-main{margin:0;padding:0;min-height:0}
body.embed .app-main h1,body.embed .app-main h2,body.embed .app-main h3{font-size:18px;margin:0 0 14px;padding:0;border:0}
body.embed .app-main hr{display:none}
body.embed .app-main .table{border:0;table-layout:auto}
body.embed .app-main .table input,body.embed .app-main .table select{min-width:130px;width:100%}
body.embed .app-main .table>thead>tr>th,body.embed .app-main .table>tbody>tr>th,body.embed .app-main .table th{background:var(--bg)!important;color:var(--muted)!important}
body.embed .app-main .btn-success,body.embed .app-main input[type=submit]{background:var(--brand);color:#fff;border:0;border-radius:9px;padding:9px 18px;font-weight:600}
body.embed .app-main .form-group{margin-bottom:14px}
body.embed table th,body.embed .table th{background:var(--bg)!important;color:var(--muted)!important}

/* logos in the top bar: product left, platform right */
.side .brand{padding:20px;font-size:15px;color:#fff;letter-spacing:.02em}
.tb-logo img{height:38px;width:auto;display:block}
.tb-logo2{height:32px;width:auto;display:block;margin-right:6px}
.topbar{height:64px}.topbar .who{gap:14px}
@media(max-width:600px){.tb-logo img{height:28px}.tb-logo2{display:none}}

/* button roles (set by js/app.js): green = submit/save, red = delete/remove, grey = cancel/reset/close */
:root{--ok:#16a34a;--ok-d:#15803d;--del:#dc2626;--del-d:#b91c1c}
.bc-submit,.app-main .bc-submit,body.embed .bc-submit{background:var(--ok)!important;border:1px solid var(--ok)!important;color:#fff!important}
.bc-submit:hover{background:var(--ok-d)!important;border-color:var(--ok-d)!important}
.bc-del,.app-main .bc-del,body.embed .bc-del{background:var(--del)!important;border:1px solid var(--del)!important;color:#fff!important}
.bc-del:hover{background:var(--del-d)!important;border-color:var(--del-d)!important}
.bc-cancel,.app-main .bc-cancel,body.embed .bc-cancel{background:#e9ecf3!important;border:1px solid #d3d9e6!important;color:#38425a!important}
.bc-cancel:hover{background:#dde2ee!important}
.bc-del-icon,.fa-trash,.fa-trash-o{color:var(--del)!important}
a.bc-del-link{color:var(--del)}
.bc-actions .b-ok{background:var(--ok);border-color:var(--ok)}.bc-actions .b-ok.danger{background:var(--del);border-color:var(--del)}
.bc-actions .b-cancel{background:#e9ecf3;color:#38425a}
.gs .save button[type=submit]{background:var(--ok);color:#fff;border:0;border-radius:9px;padding:11px 26px;font-weight:600}
.gs .save button[type=reset]{border:0;border-radius:9px;padding:11px 22px;font-weight:600}
.lp-rec a{color:var(--brand)!important;font-weight:600}

/* product logo in the left panel, client logo in the top bar */
.side .brand{padding:16px 18px;color:inherit}
.side .brand a{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;padding:10px 12px}
.side .brand img{display:block;max-width:100%;max-height:46px;width:auto;height:auto}
.tb-logo img{height:40px}

.gs input[type=checkbox],.app-main input[type=checkbox],.app-main input[type=radio]{width:auto!important;min-height:0!important;height:auto!important;display:inline-block;margin-right:6px}

/* ===== workflow-style list pages: header band, round icon actions, tinted tables ===== */
.pg-hero{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 24px;margin:0 0 20px;border-radius:16px;color:#fff;
  background:linear-gradient(120deg,var(--brand-dark),var(--brand));box-shadow:0 8px 24px rgba(20,48,74,.22)}
.pg-hero h1{margin:0;font-size:21px;font-weight:700;color:#fff!important;line-height:1.2}
.pg-crumb{font-size:12px;opacity:.8}.pg-crumb a{color:#fff!important;text-decoration:underline}
.pg-sp{flex:1}
.pg-count{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700}
.pg-count b{font-size:15px;margin-left:4px}
.pg-add{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;border-radius:10px;background:#fff;color:var(--brand)!important;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.18);transition:.15s;white-space:nowrap}
.pg-add:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.25)}
#pg-actions{display:flex;gap:10px;flex-wrap:wrap}

a.act,button.act,input.act{display:inline-flex!important;align-items:center;justify-content:center;width:34px;height:34px;padding:0!important;margin:0 3px;border-radius:50%!important;
  border:1px solid transparent!important;font-size:14px;cursor:pointer;transition:.15s;text-decoration:none!important}
.act-edit{background:#fff4e8!important;color:#d2631d!important;border-color:#f6d3bb!important}
.act-edit:hover{background:#e8742a!important;color:#fff!important;box-shadow:0 4px 10px rgba(232,116,42,.35);transform:translateY(-2px)}
.act-del{background:#fdeaea!important;color:#c0392b!important;border-color:#f3c4c4!important}
.act-del:hover{background:#d64545!important;color:#fff!important;box-shadow:0 4px 10px rgba(214,69,69,.35);transform:translateY(-2px)}
.act-view{background:#e8f1fa!important;color:var(--brand)!important;border-color:#cfe3f3!important}
.act-view:hover{background:var(--brand)!important;color:#fff!important;transform:translateY(-2px)}
.act i{color:inherit!important}

.grid-wrap{border-radius:16px}
.grid-wrap .grid-table thead th{background:#eef3f8!important;color:var(--brand-dark)!important;border-bottom:2px solid #d5e1ed!important;padding:12px 14px;font-size:12px}
.grid-wrap .grid-table tbody td{padding:11px 14px;border-top:1px solid #eef1f5!important;background:var(--surface)}
.grid-wrap .grid-table tbody tr:nth-child(even) td{background:#f9fbfd}
.grid-wrap .grid-table tbody tr:hover td{background:#eef5fb}
.grid-pager .pg.on{background:linear-gradient(135deg,#e8742a,#f08a45);border-color:transparent}
.grid-table th.sortable.asc:after,.grid-table th.sortable.desc:after{color:var(--brand)}
@media (prefers-color-scheme:dark){.grid-wrap .grid-table thead th{background:#1d2a45!important;color:#dbe4f5!important}.grid-wrap .grid-table tbody tr:nth-child(even) td{background:#192239}.grid-wrap .grid-table tbody tr:hover td{background:#22304f}}

/* ===== bright, clearly visible top bar ===== */
.topbar{height:68px;background:linear-gradient(100deg,var(--brand-dark) 0%,var(--brand) 60%,var(--brand-light) 100%)!important;border-bottom:0!important;
  box-shadow:0 6px 20px rgba(15,61,99,.28);color:#fff}
.topbar .tb-logo{display:flex;align-items:center;background:#fff;border-radius:12px;padding:7px 16px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.topbar .tb-logo img{height:40px;width:auto}
.topbar .who{color:#fff!important;font-weight:600;gap:12px}
.topbar .who span{color:#fff}
.topbar .avatar{width:40px;height:40px;background:#fff;color:var(--brand);font-size:16px;box-shadow:0 3px 10px rgba(0,0,0,.2)}
.topbar .burger{color:#fff;font-size:22px}
.topbar h1{color:#fff!important}

/* legacy wrappers: no white slabs, no red rules */
.app-main>.container,.app-main>.container>.row,.app-main .container.hide-mt{background:transparent!important;box-shadow:none!important;border:0!important;min-height:0!important;padding-top:0!important}
.app-main hr{display:none}
.app-main .container-fluid{background:transparent!important}
.pg-back{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff!important;font-size:17px;transition:.15s;flex:none}
.pg-back:hover{background:#fff;color:var(--brand)!important;transform:translateX(-2px)}

/* ===== forms + header alignment ===== */
.topbar{height:64px;padding:0 24px}
.topbar .tb-logo{padding:4px 14px;border-radius:10px}
.topbar .tb-logo img{height:34px}
.topbar>div:first-child{align-items:center}
.pg-hero{margin-top:0}
.app-main .x_title{border:0!important;padding:0!important;margin:0!important;min-height:0}
.app-main .x_title:empty{display:none}
.app-main .x_panel,.app-main .x_content{background:var(--surface);border:0;box-shadow:none;padding:0}
.app-main .x_panel{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:22px 24px}
.app-main label,.app-main .control-label{font-weight:600;font-size:13px;color:var(--ink);margin-bottom:6px}
.app-main .form-group{margin-bottom:16px}
.app-main input[type=file],.app-main input[type=file].btn{width:100%;background:var(--bg)!important;color:var(--ink)!important;border:1.5px dashed var(--line)!important;border-radius:10px!important;padding:9px 12px!important;font-weight:500;text-align:left;height:auto}
.app-main input[type=file]::file-selector-button{margin-right:12px;border:0;border-radius:8px;padding:7px 14px;background:var(--brand);color:#fff;font-weight:600;cursor:pointer}
.app-main input[type=file]:hover{border-color:var(--brand)!important}
.app-main input[type=radio],.app-main input[type=checkbox]{accent-color:var(--brand)}
.app-main .radio-inline,.app-main .checkbox-inline{font-weight:500;margin-right:14px}
.app-main textarea.form-control{min-height:90px}
@media(max-width:600px){.topbar .tb-logo img{height:28px}}

/* ===== sectioned forms (like workflow-new add-article) ===== */
.fu-sec{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px 24px 8px;margin-bottom:18px}
.fu-sec h4{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;margin:0 0 18px;padding:0 0 12px;border-bottom:1px solid var(--line);color:var(--ink)}
.fu-sec h4 i{width:32px;height:32px;border-radius:9px;background:var(--brand-l);color:var(--brand);display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.fu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:4px 20px}
.app-main .fu-field,.fu-field{width:auto!important;float:none!important;padding:0!important;margin:0 0 14px!important;min-width:0}
.fu-field.fu-wide{grid-column:1/-1}
.fu-field label,.fu-field .control-label{float:none!important;display:block;text-align:left!important;width:auto!important;padding:0!important;margin:0 0 6px!important}
.fu-field .form-control,.fu-field select,.fu-field input[type=text],.fu-field input[type=email],.fu-field input[type=date]{width:100%!important}
.fu-field .col-md-1,.fu-field [class*="col-md-"],.fu-field [class*="col-sm-"]{width:auto!important;float:none!important;padding:0!important}
.fu-bar{position:sticky;bottom:0;z-index:20;display:flex;gap:12px;justify-content:flex-end;align-items:center;padding:14px 20px;margin:6px 0 0;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:14px;box-shadow:0 -6px 20px rgba(20,48,74,.08)}
.fu-bar .btn,.fu-bar input[type=submit],.fu-bar input[type=reset],.fu-bar a{min-width:120px;height:42px;border-radius:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin:0!important}
.form-horizontal.fu-form .form-group{margin-left:0;margin-right:0}
@media (prefers-color-scheme:dark){.fu-bar{background:rgba(22,30,51,.92)}}

/* ===== modern dropdowns (Select2) and date picker, like workflow-new ===== */
.select2-container{width:100%!important;font-size:14px}
.select2-container--default .select2-selection--single,.select2-container--default .select2-selection--multiple{min-height:42px;border:1px solid var(--line);border-radius:10px;background:var(--surface);display:flex;align-items:center}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ink);line-height:40px;padding-left:14px;padding-right:34px;width:100%}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--muted)}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:40px;right:6px}
.select2-container--default .select2-selection--single .select2-selection__clear{margin-right:6px;color:var(--muted)}
.select2-container--default.select2-container--focus .select2-selection--single,.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.select2-container--default .select2-selection--multiple .select2-selection__choice{background:var(--brand-l);border:1px solid transparent;color:var(--brand);border-radius:8px;padding:2px 8px;margin-top:6px}
.select2-dropdown{border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(16,24,40,.18);overflow:hidden;background:var(--surface);z-index:3000}
.select2-search--dropdown{padding:8px}
.select2-search--dropdown .select2-search__field{height:38px;border:1px solid var(--line);border-radius:9px;padding:0 10px;background:var(--surface);color:var(--ink);outline:0}
.select2-container--default .select2-results__option{padding:9px 14px;color:var(--ink)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--brand);color:#fff}
.select2-container--default .select2-results__option[aria-selected=true]{background:var(--brand-l);color:var(--brand);font-weight:600}
.select2-container--default .select2-results__option--highlighted[aria-selected=true]{background:var(--brand);color:#fff}
select.select2-hidden-accessible{position:absolute!important}
.bc-date{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7589' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;padding-right:38px!important;cursor:pointer}
#ui-datepicker-div{z-index:3500!important;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(16,24,40,.22);padding:10px;background:var(--surface);font-family:inherit;width:290px}
.ui-datepicker .ui-datepicker-header{background:var(--brand);border:0;border-radius:10px;color:#fff;padding:8px 0}
.ui-datepicker .ui-datepicker-title select{background:#fff;color:var(--ink);border:0;border-radius:6px;padding:2px;margin:0 2px;width:auto;min-height:0;height:auto}
.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{top:7px;cursor:pointer}
.ui-datepicker .ui-datepicker-prev .ui-icon,.ui-datepicker .ui-datepicker-next .ui-icon{filter:invert(1)}
.ui-datepicker th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase}
.ui-datepicker td{padding:1px}
.ui-datepicker td a,.ui-datepicker td span{border:0!important;background:transparent!important;border-radius:8px;text-align:center;padding:7px 0;color:var(--ink)!important}
.ui-datepicker td a:hover{background:var(--brand-l)!important;color:var(--brand)!important}
.ui-datepicker td a.ui-state-active{background:var(--brand)!important;color:#fff!important;font-weight:700}
.ui-datepicker td .ui-state-highlight{box-shadow:inset 0 0 0 1.5px var(--brand)}
.ui-datepicker .ui-state-disabled{opacity:.35}

/* ===== dialogs + popups in the workflow-new style ===== */
.bc-dlg{position:fixed;inset:0;z-index:99990;display:flex;align-items:center;justify-content:center;background:rgba(15,32,52,.5);backdrop-filter:blur(3px);padding:16px;animation:bcFade .2s ease}
.bc-dbox{width:min(480px,100%);max-height:90vh;display:flex;flex-direction:column;background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:0 28px 70px rgba(15,35,60,.38);animation:bcPopBox .45s cubic-bezier(.2,1.2,.3,1) backwards}
.bc-dbox:before{content:"";display:block;height:5px;flex:0 0 auto;background:linear-gradient(90deg,var(--brand),var(--brand-soft))}
.tone-danger .bc-dbox:before{background:linear-gradient(90deg,#d64545,#f19a9a)}
.tone-warn .bc-dbox:before{background:linear-gradient(90deg,#e8932a,#f5c98a)}
.bc-din{padding:24px 28px 22px;text-align:center;overflow:auto}
.bc-dic{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e6f1fa;color:var(--brand);font:700 28px/1 inherit;animation:bcPop .5s cubic-bezier(.2,1.4,.3,1) .1s backwards}
.tone-danger .bc-dic{background:#fdeeee;color:#d64545;font-size:25px}.tone-warn .bc-dic{background:#fff3e0;color:#e8932a}
.bc-din h3{margin:0 0 6px;font-size:21px;font-weight:700;color:var(--ink)}
.bc-din p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.bc-din ul{list-style:none;margin:16px 0 0;padding:0;text-align:left;max-height:44vh;overflow:auto}
.bc-din li{margin:0 0 8px;padding:10px 14px;background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:10px;animation:bcRise .35s ease backwards}
.bc-din li b{display:block;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.bc-din li span{color:var(--ink);font-weight:600;font-size:13.5px}
.bc-dbtns{display:flex;justify-content:center;gap:10px;margin-top:20px}
.bc-dbtns button{min-width:130px;height:44px;padding:0 24px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:.15s}
.bc-dbtns button:hover{transform:translateY(-1px);background:var(--bg)}
.bc-dbtns .bc-b-go{border:0;color:#fff;background:linear-gradient(120deg,var(--brand),var(--brand-dark));box-shadow:0 5px 14px rgba(27,108,168,.3)}
.tone-danger .bc-dbtns .bc-b-go{background:linear-gradient(120deg,#e25555,#c0392b);box-shadow:0 6px 16px rgba(214,69,69,.35)}
.bc-dbtns .bc-b-go:hover{filter:brightness(1.08);background-color:initial}
@keyframes bcFade{from{opacity:0}to{opacity:1}}
@keyframes bcPopBox{from{opacity:0;transform:translateY(18px) scale(.93)}to{opacity:1;transform:none}}
@keyframes bcPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes bcRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* form popup */
.bc-card{border-radius:18px;animation:bcPopBox .4s cubic-bezier(.2,1.2,.3,1) backwards;box-shadow:0 28px 70px rgba(15,35,60,.38)}
.bc-card:before{content:"";display:block;height:5px;flex:0 0 auto;background:linear-gradient(90deg,var(--brand),var(--brand-soft))}
.bc-head{justify-content:flex-start;gap:14px;padding:16px 22px;background:linear-gradient(180deg,var(--brand-l),transparent)}
.bc-hic{width:42px;height:42px;border-radius:12px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 6px 14px rgba(27,108,168,.3);flex:none}
.bc-ht{flex:1;min-width:0}.bc-ht b{display:block;font-size:18px;color:var(--ink);line-height:1.2}.bc-ht small{color:var(--muted);font-size:12.5px}
.bc-x{width:34px;height:34px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:22px;transition:.15s}
.bc-x:hover{background:#fdeaea;color:var(--del)}
.bc-ring{width:38px;height:38px;border:4px solid var(--line);border-top-color:var(--brand);border-radius:50%;display:block;animation:bcSpin .8s linear infinite}
@keyframes bcSpin{to{transform:rotate(360deg)}}

/* inputs: validation highlight */
.bc-invalid,.select2-container.bc-invalid .select2-selection{border-color:var(--del)!important;box-shadow:0 0 0 4px rgba(220,38,38,.15)!important;animation:bcShake .4s ease}
@keyframes bcShake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}

/* inputs inside popups: tidy, full-width, no card-in-card, no peach table header */
body.embed{background:var(--surface)!important;padding:20px 24px 14px!important}
body.embed .app-main .x_panel,body.embed .app-main .card-app,body.embed .app-main .panel{border:0!important;box-shadow:none!important;padding:0!important;background:transparent!important;margin:0!important}
body.embed .app-main .x_title,body.embed .app-main .panel-heading,body.embed .app-main h1,body.embed .app-main h2,body.embed .app-main h3.page-title{display:none!important}
body.embed .app-main .table{margin:0 0 14px;border:1px solid var(--line)!important;border-radius:12px!important;overflow:hidden;width:100%;table-layout:auto}
body.embed .app-main .table th,body.embed table th{background:var(--brand-l)!important;color:var(--brand)!important;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:11px 12px!important;border:0!important}
body.embed .app-main .table td{padding:10px 12px!important;border-top:1px solid var(--line)!important;background:var(--surface)}
body.embed .app-main .table input,body.embed .app-main .table select{min-width:0!important;width:100%!important;height:42px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--surface);color:var(--ink);box-shadow:none}
body.embed .app-main input:focus,body.embed .app-main select:focus,body.embed .app-main textarea:focus{border-color:var(--brand)!important;box-shadow:0 0 0 4px var(--brand-l)!important;outline:0}
body.embed .app-main .table-responsive{overflow:visible;border:0}
body.embed .app-main .btn,body.embed .app-main input[type=submit],body.embed .app-main input[type=reset]{height:42px;min-width:120px;border-radius:10px;font-weight:700}
body.embed .app-main .form-group{margin-bottom:14px}
body.embed .app-main .form-group>label,body.embed .app-main .control-label{display:block;text-align:left!important;width:auto!important;float:none!important;margin-bottom:6px}
body.embed .app-main .form-group [class*="col-"]{width:100%!important;float:none!important;padding:0!important}

/* add-book: setup card + upload zone */
.fu-setup .form-group{float:none!important;width:100%!important;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 14px!important;padding:0!important}
.fu-setup .form-group label{margin:0!important;float:none!important}
.fu-setup .form-group:nth-child(2) label:last-of-type{margin-left:auto!important}
.fu-setup #duplicate{width:100%!important;float:none!important;padding:0!important}
.fu-hint{color:var(--muted);font-size:13px;margin:0 0 10px}.fu-hint i{color:var(--brand);margin-right:6px}
.dropzone{border:2px dashed var(--line)!important;border-radius:14px!important;background:var(--bg)!important;min-height:130px;padding:18px!important;text-align:center;transition:.15s}
.dropzone:hover,.dropzone.dz-drag-hover{border-color:var(--brand)!important;background:var(--brand-l)!important}
.dropzone h3{font-size:15px!important;margin:0 0 6px!important;color:var(--ink)}
.dropzone .dz-message{color:var(--muted);margin:14px 0}

.tone-success .bc-dbox:before{background:linear-gradient(90deg,#16a34a,#86e0a8)}
.tone-success .bc-dic{background:#e8f7ef;color:#16a34a;font-size:26px}
.tone-success .bc-dbtns .bc-b-go{background:linear-gradient(120deg,#1fb55a,#15803d);box-shadow:0 6px 16px rgba(22,163,74,.3)}

/* compact common action icons */
a.act,button.act,input.act{width:30px!important;height:30px!important;margin:0 2px!important;font-size:13px!important;min-width:0!important;line-height:1!important}
td:has(>.act){white-space:nowrap;width:1%;text-align:center}
.act-del:hover,.act-edit:hover,.act-view:hover{transform:none}
input.act{font-family:FontAwesome}

/* ===== book dashboard ===== */
#frmSubmissions{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 18px 4px;margin:0 0 16px;box-shadow:var(--shadow)}
#frmSubmissions .form-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px!important}
#frmSubmissions .form-group>div{width:auto!important;float:none!important;padding:0!important}
#frmSubmissions .select2-container{min-width:320px;width:320px!important}
#frmSubmissions a.btn[target=_blank]{margin-left:auto;float:none!important}
.dash-stats{margin:0 0 16px}
.stat.ok b{color:#16a34a}.stat.wait b{color:#d9480f}.stat.no b{color:var(--del)}
.dash-bks{border-collapse:separate!important;border-spacing:0}
.dash-bks tbody tr.row-ok td:first-child{box-shadow:inset 4px 0 0 #16a34a}
.dash-bks tbody tr.row-no td:first-child{box-shadow:inset 4px 0 0 var(--del)}
.dash-bks tbody tr.success td,.dash-bks tbody tr.success{background:transparent!important}
.dash-bks td.chk{text-align:center}
.dash-bks input[type=checkbox]{width:18px!important;height:18px!important;min-height:0!important;accent-color:var(--brand);cursor:pointer}
.dash-bks input[type=checkbox]:disabled{opacity:.45;cursor:not-allowed}
.dash-bks .pill{white-space:nowrap}
.chip-link{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px solid #cfe3f3;background:#e8f1fa;color:var(--brand)!important;font-size:12px;font-weight:700;white-space:nowrap}
.chip-link:hover{background:var(--brand);color:#fff!important}
.chip-link.off{background:var(--bg);border-color:var(--line);color:var(--muted)!important}
.dash-gone{color:var(--muted);font-style:italic}
td.dash-actions{background:var(--bg)!important;border-top:1px solid var(--line)!important;padding:14px 16px!important}
td.dash-actions .dataTables_paginate{float:none!important;display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
td.dash-actions b{font-weight:600}
td.dash-actions input[type=checkbox].btn{width:18px;height:18px;padding:0;background:none!important;border:0!important}

/* ===== compact buttons everywhere ===== */
.app-main .btn,.app-main input[type=submit],.app-main input[type=reset],.app-main input[type=button],.app-main button[type=submit],.app-main button[type=reset],
body.embed .btn,body.embed input[type=submit],body.embed input[type=reset],body.embed input[type=button],body.embed button[type=submit],body.embed button[type=reset],.btn-app{
  height:34px!important;min-width:0!important;padding:0 16px!important;font-size:13px!important;line-height:32px!important;border-radius:8px!important;font-weight:600!important;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:none!important;margin:0 6px 0 0}
body.embed .app-main .btn,body.embed .app-main input[type=submit],body.embed .app-main input[type=reset]{height:34px!important;min-width:0!important}
.btn-app{width:auto;min-width:130px}
.fu-bar .btn,.fu-bar input[type=submit],.fu-bar input[type=reset],.fu-bar a{height:36px!important;min-width:104px!important}
.fu-bar{padding:10px 16px}
.pg-add{height:36px!important;padding:0 16px!important;font-size:13px!important}
.bc-dbtns button{height:38px;min-width:110px;font-size:13.5px}
/* "+ Add ..." row buttons: light brand style instead of a big solid block */
.app-main .btn-info,.app-main a.btn-info,body.embed .btn-info,body.embed .btn-primary{background:var(--brand-l)!important;color:var(--brand)!important;border:1px solid transparent!important}
.app-main .btn-info:hover,body.embed .btn-info:hover{background:var(--brand)!important;color:#fff!important}
/* tighter table rows inside popups */
body.embed .app-main .table td{padding:7px 10px!important}
body.embed .app-main .table input,body.embed .app-main .table select{height:36px}
body.embed .app-main .table th{padding:9px 10px!important}
body.embed{padding:16px 20px 10px!important}
/* the Submit / Reset pair sits together on one line */
body.embed form>div:has(>input[type=submit]),body.embed form>p:has(>input[type=submit]){display:flex;gap:8px;align-items:center;margin-top:10px}

/* ===== rich text editor ===== */
.richText{border:1px solid var(--line)!important;border-radius:12px!important;background:var(--surface)!important;overflow:hidden;box-shadow:none!important}
.richText .richText-toolbar{background:var(--bg)!important;border-bottom:1px solid var(--line)!important;padding:6px 8px!important}
.richText .richText-toolbar ul{display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:0}
.richText .richText-toolbar ul li{list-style:none;float:none!important;margin:0!important}
.richText .richText-toolbar ul li a{border:0!important;border-radius:7px;color:var(--ink)!important;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0 8px!important;transition:.15s}
.richText .richText-toolbar ul li a:hover{background:var(--brand-l)!important;color:var(--brand)!important}
.richText .richText-toolbar ul li a.is-selected{background:var(--brand)!important;color:#fff!important}
.richText .richText-editor{background:var(--surface)!important;color:var(--ink)!important;padding:14px 16px!important;border:0!important;font-size:14px;line-height:1.6;outline:0}
.richText:focus-within{border-color:var(--brand)!important;box-shadow:0 0 0 4px var(--brand-l)!important}
.richText .richText-help{display:none}
.richText .richText-form input,.richText .richText-form select{height:34px}
.richText .richText-dropdown-outer{z-index:3000}

/* ===== popup forms: two columns, no wasted space ===== */
body.embed .em-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;align-items:start}
body.embed .em-grid>.form-group{margin:0 0 14px!important;padding:0!important;width:auto!important;float:none!important;min-width:0}
body.embed .em-grid>.em-wide,body.embed .em-grid>.form-group:only-child{grid-column:1/-1}
body.embed .app-main input[type=text],body.embed .app-main input[type=email],body.embed .app-main input[type=password],body.embed .app-main input[type=number],
body.embed .app-main input[type=tel],body.embed .app-main input.bc-date,body.embed .app-main select,body.embed .app-main textarea,body.embed .app-main .form-control,body.embed .select2-container{width:100%!important;max-width:100%!important;display:block}
body.embed .app-main input[type=radio],body.embed .app-main input[type=checkbox]{display:inline-block!important;width:auto!important}
body.embed .app-main .form-group>[class*="col-"]{display:block;width:100%!important;padding:0!important;float:none!important}
body.embed .app-main .em-grid label.radio-inline,body.embed .app-main .em-grid label{display:inline-block}
body.embed .app-main .em-grid .form-group>label:first-child{display:block}
body.embed .em-bar{display:flex;gap:10px;justify-content:flex-start;margin:6px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
body.embed .em-bar .btn,body.embed .em-bar input{margin:0!important}
@media(max-width:640px){body.embed .em-grid{grid-template-columns:1fr}}
/* the green submit / red delete / grey cancel roles always win over the generic info/primary styles */
body .bc-submit,body .app-main .bc-submit,body.embed .app-main .bc-submit,body.embed .bc-submit{background:var(--ok)!important;border:1px solid var(--ok)!important;color:#fff!important}
body .bc-del,body .app-main .bc-del{background:var(--del)!important;border-color:var(--del)!important;color:#fff!important}
body .bc-cancel,body .app-main .bc-cancel,body.embed .app-main .bc-cancel{background:#e9ecf3!important;border:1px solid #d3d9e6!important;color:#38425a!important}
body.embed{padding:16px 22px 12px!important}

/* popup footer: add-row on the left, Cancel/Reset then Submit aligned to the right */
body.embed .em-bar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:8px 0 0;padding-top:14px;border-top:1px solid var(--line)}
body.embed .em-bar .em-add{margin-right:auto!important}
body.embed .em-bar .btn,body.embed .em-bar input,body.embed .em-bar button,body.embed .em-bar a{margin:0!important;height:36px!important;min-width:96px!important}
body.embed .em-bar .em-add{background:var(--brand-l)!important;color:var(--brand)!important;border:1px solid transparent!important}
body.embed .em-bar .em-add:hover{background:var(--brand)!important;color:#fff!important}
body.embed .em-grid input[type=text],body.embed .em-grid input[type=number]{width:100%!important}
body.embed .em-grid>.em-bar,body.embed form>.em-bar{grid-column:1/-1;width:100%}

/* file inputs were clipped by the compact button height */
body .app-main input[type=file],body .app-main input[type=file].btn,body.embed .app-main input[type=file]{height:auto!important;min-height:44px;line-height:normal!important;padding:6px 10px!important;display:flex!important;align-items:center;overflow:visible}
body .app-main input[type=file]::file-selector-button{height:30px;line-height:30px;padding:0 14px;margin-right:12px}
/* tables inside forms use the full card width; inputs inside them are readable */
.fu-sec table,.fu-sec .table{width:100%!important}
.fu-sec table input,.fu-sec table select{min-width:120px;width:100%!important}
.fu-sec table td:first-child{white-space:nowrap}
/* one header colour for every table in the app (the legacy peach is gone) */
body .app-main .table>thead>tr>th,body .app-main table.table th,body .app-main .fu-sec table th{background:var(--brand-l)!important;color:var(--brand)!important;border:0!important;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
/* "+ Add ..." row buttons */
body .app-main .bc-add,body .bc-add{background:var(--brand-l)!important;color:var(--brand)!important;border:1px solid transparent!important}
body .app-main .bc-add:hover{background:var(--brand)!important;color:#fff!important}

/* logos: exact alignment (legacy img{margin-bottom:20px} stretched the white pills) */
.topbar .tb-logo img,.side .brand img,.auth-logo img,.gs .logo-box img{margin:0!important;display:block;vertical-align:middle}
.topbar .tb-logo{align-self:center;height:46px;padding:0 14px;border-radius:10px;display:flex;align-items:center;margin:0}
.topbar .tb-logo img{height:32px;width:auto}
.topbar>div:first-child{display:flex;align-items:center;gap:14px;height:100%}
.topbar .who{height:100%;align-items:center}
.side .brand{display:flex;align-items:center;justify-content:center;height:68px;padding:0 18px}
.side .brand a{height:46px;width:100%;padding:0 12px;border-radius:10px}
.side .brand img{max-height:34px;width:auto;max-width:100%}
.auth-logo{align-items:center}
.auth-logo img{height:38px}

/* theme colour picker (Global Settings) */
.gs input[type=color]{-webkit-appearance:none;appearance:none;width:100%!important;height:44px!important;min-height:44px;padding:4px!important;border:1px solid var(--line)!important;border-radius:10px!important;background:var(--surface)!important;cursor:pointer;display:block}
.gs input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.gs input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}
.gs input[type=color]::-moz-color-swatch{border:0;border-radius:7px}
.gs .theme-row{display:flex;align-items:center;gap:12px}.gs .theme-row code{font-size:13px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 10px;min-width:84px;text-align:center}
.gs .theme-presets{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.gs .theme-presets button{width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}

/* left panel follows the theme colour */
.side{background:var(--side)!important;color:var(--side-ink)}
.side a{color:var(--side-ink)}
.side .brand,.side .me,.side nav{border-color:rgba(255,255,255,.09)}
.side a:hover{background:rgba(255,255,255,.09)}
.side a.on{background:var(--brand)!important;color:#fff!important;box-shadow:0 6px 16px rgba(0,0,0,.25)}

/* legacy header rows coloured with the bgcolor="#FFCE9D" attribute -> same header style as every other table */
body .app-main table thead tr[bgcolor],body .app-main table tr[bgcolor="#FFCE9D" i],body .app-main table thead tr[bgcolor] td,body .app-main table tr[bgcolor="#FFCE9D" i] td,
body.embed table thead tr[bgcolor],body.embed table tr[bgcolor="#FFCE9D" i],body.embed table tr[bgcolor="#FFCE9D" i] td{
  background:var(--brand-l)!important;color:var(--brand)!important;border:0!important}
body .app-main table thead tr[bgcolor] td,body .app-main table tr[bgcolor="#FFCE9D" i] td,body.embed table tr[bgcolor="#FFCE9D" i] td{
  font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:11px 12px!important}
body .app-main table thead tr[bgcolor] td b,body .app-main table tr[bgcolor="#FFCE9D" i] td b{color:inherit;font-weight:700}

/* password eye + strength meter + login helper links */
.pw-wrap{position:relative;display:block;width:100%}
.pw-wrap input{padding-right:46px!important}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;color:var(--muted);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;z-index:2}
.pw-eye:hover{color:var(--brand);background:var(--brand-l)}
td .pw-wrap{display:block}
.pw-meter{display:flex;align-items:center;gap:6px;margin:-6px 0 14px}
.pw-meter i{flex:1;height:5px;border-radius:3px;background:var(--line);display:block}
.pw-meter i.s1{background:#dc2626}.pw-meter i.s2{background:#f08c00}.pw-meter i.s3{background:#84cc16}.pw-meter i.s4{background:#16a34a}
.pw-meter span{min-width:64px;text-align:right;font-size:12px;color:var(--muted);font-weight:600}
.auth-links{margin-top:14px;text-align:center;font-size:13px}.auth-links a{color:var(--brand);font-weight:600}
.side .me .me-links{display:flex;flex-direction:column;gap:2px;margin:6px 0 2px}
.side .me .me-links a{padding:6px 0;color:var(--side-ink);font-size:12.5px}.side .me .me-links a:hover{color:#fff}

/* log out, always in reach in the top bar */
.topbar .tb-out{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:6px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff!important;font-size:17px;transition:.15s}
.topbar .tb-out:hover{background:#dc2626;border-color:#dc2626;transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.tone-warn .bc-dbtns .bc-b-go{background:linear-gradient(120deg,#f0a13a,#d9822b);box-shadow:0 6px 16px rgba(232,147,42,.35)}

/* visitors who arrive by an e-mail link (no sign-in): slim branded header, centred content, footer without the sidebar offset */
.pub-top{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px;background:#fff;border-bottom:1px solid var(--line)}
.pub-top img{height:38px;width:auto;margin:0!important}.pub-top i{width:1px;height:30px;background:var(--line)}
.app-foot.pub{margin-left:0;text-align:center}
body.pub{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)!important}
body.pub .hide-mt{background:transparent!important;flex:1 0 auto;min-height:0!important}
body.pub .app-foot{margin-top:auto;flex:0 0 auto;padding:14px 20px;background:transparent}
body.pub .hide-mt{width:100%!important;padding:0 16px 24px!important}

/* Add Book: the uploaded XML shows a clear Remove link */
.dropzone .dz-preview .dz-remove{display:inline-block;margin-top:8px;padding:5px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:#c0392b!important;font-size:12px;font-weight:600;text-decoration:none!important;cursor:pointer}
.dropzone .dz-preview .dz-remove:hover{background:#fdeeee}