*{box-sizing:border-box} :root{--nav:#132b3a;--orange:#f7941d;--green:#167447;--line:#d7dde1;--muted:#65717c;--bg:#edf1f3}
body{margin:0;font:13px Arial,Helvetica,sans-serif;color:#1c252b;background:var(--bg);overflow:hidden}
button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid #cbd3d8;background:#fff;border-radius:5px;padding:8px 11px}button:hover{background:#f6f8f9}.primary{background:#1f5d9b!important;color:#fff;border-color:#1f5d9b!important}
.toolbar{height:58px;background:#fff;border-bottom:1px solid #cfd6da;display:flex;align-items:center;gap:8px;padding:8px 14px}.logo{width:145px;margin-right:8px}.toolbar #status{margin-left:auto;color:#1f5d9b;font-size:12px;font-weight:600}
.layout{height:calc(100vh - 58px);display:grid;grid-template-columns:390px 1fr;gap:10px;padding:10px}.panel{background:#fff;border:1px solid #cfd6da;border-radius:7px;min-height:0}.editor{display:flex;flex-direction:column;overflow:hidden}.panel-title{padding:11px 14px;font-weight:700;border-bottom:1px solid var(--line);font-size:14px}
.project-fields{padding:12px 14px 8px;display:grid;gap:8px}.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}label{display:grid;gap:4px;font-size:11px;color:#53616b;font-weight:700}input,select,textarea{width:100%;border:1px solid #cbd3d8;border-radius:5px;padding:8px;background:#fff;color:#172129}textarea{resize:vertical}
.source-strip{margin:0 14px 10px;padding:9px;background:#f5f8fa;border:1px solid #dde4e8;border-radius:6px;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.source-strip button{height:34px}
.search-area{padding:0 14px 10px;border-bottom:1px solid var(--line)}.searchbox{display:flex;align-items:center;border:1px solid #cbd3d8;border-radius:5px;padding-left:8px}.searchbox input{border:0;outline:0}.searchbox span{font-size:18px;color:#7a858d}.group-filters{display:flex;gap:5px;overflow:auto;padding:8px 0 6px}.filter{white-space:nowrap;padding:5px 8px;font-size:10px;border-radius:99px}.filter.active{background:#eaf2f8;border-color:#8bb0cf;color:#1f5d9b}
.preset-results{max-height:180px;overflow:auto;display:grid;gap:5px}.preset-row{display:grid;grid-template-columns:42px 1fr auto;gap:8px;align-items:center;border:1px solid #e0e5e8;border-radius:5px;padding:5px}.preset-thumb{width:42px;height:42px;background:#f1f3f4;border-radius:4px;display:grid;place-items:center;overflow:hidden;color:#9aa3a8}.preset-thumb img{width:100%;height:100%;object-fit:contain}.preset-row b{display:block;font-size:11px}.preset-row small{display:block;color:#71808a;font-size:9px;margin-top:2px}.preset-row button{padding:5px 7px;color:#1f5d9b}.create-btn{width:100%;margin-top:7px;border-style:dashed;color:#41505a}
.added{min-height:0;display:flex;flex-direction:column;flex:1}.added-head{padding:9px 14px;border-bottom:1px solid var(--line)}.added-head div{display:flex;justify-content:space-between}.added-head span{color:#78838b;font-size:10px}.added-items{overflow:auto;padding:7px;display:grid;gap:6px}.added-empty{text-align:center;color:#8a949b;padding:25px 10px;font-size:11px}
.added-row{border:1px solid #dce2e6;border-radius:6px;padding:7px}.added-top{display:grid;grid-template-columns:1fr auto;gap:6px}.added-name{font-weight:700;font-size:11px}.added-group{font-size:9px;color:#71808a;margin-top:2px}.added-controls{display:grid;grid-template-columns:68px 1fr auto auto;gap:5px;margin-top:6px}.added-controls input,.added-controls select{padding:5px;font-size:10px}.icon{padding:5px 7px}.delete{color:#b33}
.preview-panel{display:flex;flex-direction:column;min-width:0}.preview-head{height:48px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:7px 11px}.preview-head b{display:block}.preview-head span{display:block;font-size:10px;color:#78838b;margin-top:2px}.page-tabs{display:flex;gap:4px}.page-tabs button{padding:6px 9px;font-size:11px}.page-tabs .active{background:#253f50;color:#fff;border-color:#253f50}
.desk{flex:1;overflow:auto;background:#d9dfe2;padding:22px;display:flex;justify-content:center;align-items:flex-start}.paper{width:794px;min-height:1123px;background:#fff;box-shadow:0 2px 12px #7b858a66;position:relative;overflow:hidden}.hidden{display:none!important}
.cover-page{background:#faf8f4}.cover-bg{position:absolute;inset:0;background:url("assets/cover-proof.jpg") center/cover no-repeat}.cover-content{position:absolute;inset:0;padding:88px 68px 75px;display:flex;flex-direction:column}.cover-project{font-size:48px;font-weight:700;line-height:1.03;max-width:88%;overflow-wrap:anywhere;margin-top:150px}.cover-type{font-size:25px;margin-top:35px}.cover-meta{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:35px}.cover-meta div{display:flex;flex-direction:column;gap:7px}.cover-meta b{font-size:20px}.cover-meta span{font-size:13px;color:#454545}
.list-page{padding:28px 28px 34px}.doc-header{display:grid;grid-template-columns:150px 1fr 115px;gap:14px;align-items:center;border-bottom:7px solid var(--orange);padding-bottom:9px}.doc-header img{width:140px}.doc-header>div:nth-child(2){text-align:center}.doc-header>div:nth-child(2)>b{display:block;font-size:24px;letter-spacing:.04em}.doc-header>div:nth-child(2)>span{font-size:11px;color:#56626b}.doc-date{text-align:right}.doc-date small{display:block;color:#7b858c;font-size:8px}.doc-date b{font-size:11px}
.doc-group{margin-top:17px}.doc-group h2{text-align:center;font-size:17px;margin:0 0 7px;text-transform:uppercase}.doc-table{width:100%;border-collapse:collapse;table-layout:fixed}.doc-table th,.doc-table td{border:1px solid #2f3539;padding:5px;text-align:center;vertical-align:middle}.doc-table th{font-size:8px}.doc-table .q{width:7%}.doc-table .i{width:17%}.doc-table .p{width:24%}.doc-table .n{width:29%}.doc-table .s{width:8%}.doc-table .c{width:5%}.doc-pic{height:68px;display:grid;place-items:center}.doc-pic img{max-width:100%;max-height:66px;object-fit:contain}.doc-item{font-size:9px;font-weight:700}.doc-notes{font-size:8px;line-height:1.25;white-space:pre-line}.doc-source{font-size:8px;font-weight:800;color:#d94c42;margin-top:4px}.tick{font-size:13px}.doc-empty{text-align:center;color:#929ba1;padding:80px 20px}
dialog{border:1px solid #cbd3d8;border-radius:8px;box-shadow:0 20px 70px #0005;padding:18px;width:min(600px,94vw)}dialog::backdrop{background:#0b182266}dialog h2{margin:0 0 14px}.form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.wide{grid-column:1/-1}.check{display:flex;grid-template-columns:auto 1fr;align-items:center;justify-content:start}.check input{width:auto}.dialog-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:15px}.pic-preview img{width:100px;height:70px;object-fit:contain;border:1px solid #ddd}.preset-dialog{width:min(820px,94vw)}.modal-head{display:flex;justify-content:space-between}.modal-head h2{margin-bottom:3px}.modal-head p{margin:0;color:#6c7880;font-size:11px}.modal-head button{border:0;font-size:20px}.preset-manager-tools{display:grid;grid-template-columns:1fr auto;gap:8px;margin:12px 0}.preset-manager-list{max-height:480px;overflow:auto;display:grid;gap:6px}.manager-row{display:grid;grid-template-columns:50px 1fr 110px 90px auto auto;gap:8px;align-items:center;border:1px solid #dde3e7;border-radius:6px;padding:7px}.manager-row img{width:48px;height:40px;object-fit:contain}.manager-row small{display:block;color:#78848c}.manager-row button{padding:5px 7px}
@media(max-width:900px){body{overflow:auto}.layout{height:auto;grid-template-columns:1fr}.editor{max-height:none}.preview-panel{min-height:700px}.desk{overflow:auto}.toolbar{flex-wrap:wrap;height:auto}.paper{transform-origin:top left}.added-items{max-height:400px}}
@media print{body{overflow:visible;background:#fff}.toolbar,.editor,.preview-head{display:none!important}.layout{display:block;height:auto;padding:0}.preview-panel{border:0}.desk{display:block;background:#fff;padding:0;overflow:visible}.paper{width:210mm;min-height:297mm;box-shadow:none;page-break-after:always}.hidden{display:block!important}.cover-content{padding:24mm 18mm 20mm}.cover-project{font-size:14mm;margin-top:42mm}.cover-type{font-size:7mm}.cover-meta b{font-size:5mm}.list-page{padding:8mm}.doc-empty{display:none}.doc-group{break-inside:avoid}.cover-page{break-after:page}}
@page{size:A4 portrait;margin:0}
/* V2.1 visual refinements */
body{background:#e9eef1}
.toolbar{
min-height:66px;height:auto;background:#0f2736;color:#fff;border-bottom:0;
padding:10px 16px;box-shadow:0 2px 10px rgba(8,22,31,.16);gap:14px
}
.toolbar-brand{display:flex;align-items:center;gap:13px;min-width:260px}
.toolbar .logo{width:150px;filter:brightness(0) invert(1)}
.toolbar-title{display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.18);padding-left:13px}
.toolbar-title strong{font-size:14px;color:#fff}
.toolbar-title span{font-size:9px;color:#93a8b5;letter-spacing:.14em;margin-top:2px}
.toolbar-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.toolbar button{background:#173748;border-color:#345263;color:#eef5f8}
.toolbar button:hover{background:#214658}
.toolbar .primary{background:#f28b24!important;border-color:#f28b24!important;color:#fff!important}
.toolbar #status{color:#b9cbd5;margin-left:auto}
.layout{height:calc(100vh - 66px);gap:12px;padding:12px;background:#e9eef1}
.panel{border:1px solid #ccd6dc;border-radius:12px;box-shadow:0 2px 8px rgba(25,42,53,.05)}
.preview-panel{background:#f6f8f9}
.preview-head{background:#fff;border-radius:12px 12px 0 0;padding:9px 13px}
.preview-badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#eef3f6;color:#475965;font-size:10px!important}
.desk{background:#dfe5e8;padding:24px}
.paper{border-radius:10px;box-shadow:0 4px 18px rgba(45,59,68,.16)}
.list-page{padding:0 0 34px;overflow:hidden}
.doc-header{
background:#102a3a;color:#fff;border-bottom:0;padding:17px 22px;
display:grid;grid-template-columns:160px 1fr 120px;gap:14px;align-items:center
}
.doc-logo-wrap img{width:145px;filter:brightness(0) invert(1)}
.doc-title{text-align:center}.doc-title>b{display:block;font-size:25px;letter-spacing:.05em;color:#fff}
.doc-title>span{font-size:11px;color:#d7e2e8}
.doc-date{text-align:right;color:#fff}.doc-date small{color:#a9bdc9}.doc-date b{color:#fff;font-size:12px}
#docGroups,.doc-empty{margin-left:22px;margin-right:22px}
.doc-group{margin-top:20px;background:#f7f9fa;border-radius:10px;padding:10px 10px 12px;border:1px solid #e0e5e8}
.doc-group h2{text-align:left;padding:0 2px 8px;font-size:16px;color:#173447}
.doc-table{background:#fff;border-collapse:separate;border-spacing:0;border:1px solid #d7dee3;border-radius:8px;overflow:hidden}
.doc-table th,.doc-table td{border:0;border-right:1px solid #e0e5e8;border-bottom:1px solid #e0e5e8;padding:7px}
.doc-table th:last-child,.doc-table td:last-child{border-right:0}
.doc-table tbody tr:last-child td{border-bottom:0}
.doc-table th{background:#eef2f4;color:#344955;font-size:8px}
.doc-table tbody tr:nth-child(even){background:#fbfcfd}
.doc-pic{height:64px}
.doc-source{color:#cb4b42}
.item-management-dialog{width:min(900px,94vw)}
.cover-page{display:none!important}
/* V2.2 */
.toolbar .logo{filter:none!important}
.doc-logo-wrap img{filter:none!important}
.preset-manager-tools{grid-template-columns:minmax(220px,1fr) auto!important;align-items:center}
.preset-tool-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.preset-tool-actions button{white-space:nowrap}
@media(max-width:720px){
.preset-manager-tools{grid-template-columns:1fr!important}
.preset-tool-actions{justify-content:flex-start}
}
/* V2.3 — print fidelity fix
Keeps the PDF/print output visually aligned with the live A4 preview. */
@media print {
html, body {
margin: 0 !important;
padding: 0 !important;
width: 210mm !important;
min-width: 210mm !important;
background: #fff !important;
overflow: visible !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
* {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.toolbar,
.editor,
.preview-head,
dialog,
.toast {
display: none !important;
}
.layout,
.preview-panel,
.desk {
display: block !important;
width: 210mm !important;
min-width: 210mm !important;
max-width: 210mm !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: #fff !important;
overflow: visible !important;
}
.cover-page {
display: none !important;
}
#listPage,
.list-page,
.paper {
display: block !important;
position: relative !important;
width: 210mm !important;
min-width: 210mm !important;
max-width: 210mm !important;
min-height: 297mm !important;
height: auto !important;
margin: 0 !important;
padding: 0 0 9mm !important;
transform: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: #fff !important;
overflow: visible !important;
}
.doc-header {
width: 100% !important;
margin: 0 !important;
padding: 5mm 6mm !important;
background: #102a3a !important;
color: #fff !important;
border: 0 !important;
}
.doc-logo-wrap img {
filter: none !important;
}
#docGroups,
.doc-empty {
margin-left: 6mm !important;
margin-right: 6mm !important;
}
.doc-group {
background: #f7f9fa !important;
border: 1px solid #e0e5e8 !important;
border-radius: 3mm !important;
break-inside: avoid-page !important;
page-break-inside: avoid !important;
}
.doc-table {
background: #fff !important;
border: 1px solid #d7dee3 !important;
border-radius: 2mm !important;
}
.doc-table th {
background: #eef2f4 !important;
color: #344955 !important;
}
.doc-table tbody tr:nth-child(even) {
background: #fbfcfd !important;
}
.doc-table tr {
break-inside: avoid !important;
page-break-inside: avoid !important;
}
}
@page {
size: A4 portrait;
margin: 0;
}
/* V2.4 */
.manage-presets-btn{
width:100%;margin-top:7px;background:#f28b24!important;border-color:#f28b24!important;
color:#fff!important;font-weight:800;box-shadow:0 2px 5px rgba(242,139,36,.2)
}
.manage-presets-btn:hover{background:#dc7415!important}
.group-select-row{display:grid;grid-template-columns:1fr 36px;gap:5px}
.small-plus{padding:0;height:34px;font-size:17px;font-weight:800;color:#1f5d9b}
.preset-dialog{width:min(980px,95vw);padding:0;overflow:hidden;border-radius:14px;border:1px solid #cbd5db}
.preset-modal-head{padding:20px 22px;background:#102a3a;color:#fff;margin:0;align-items:flex-start}
.preset-modal-head h2{font-size:23px;margin:3px 0 4px;color:#fff}
.preset-modal-head p{color:#b9c9d2!important;font-size:12px!important;max-width:620px}
.modal-kicker{font-size:9px;letter-spacing:.16em;color:#f3a450;font-weight:800}
.modal-close{background:transparent!important;color:#fff!important;border:1px solid #48606e!important;border-radius:8px!important;font-size:20px!important}
.preset-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#dfe5e8;border-bottom:1px solid #d7dfe4}
.preset-stats div{background:#f7f9fa;padding:11px 16px}
.preset-stats b{display:block;font-size:17px;color:#17394b}.preset-stats span{font-size:9px;color:#74828b}
.preset-manager-tools{padding:13px 16px!important;margin:0!important;background:#fff;border-bottom:1px solid #e0e5e8;grid-template-columns:minmax(220px,1fr) auto!important;align-items:center}
.preset-search-wrap{display:flex;align-items:center;border:1px solid #ccd5db;border-radius:7px;padding-left:9px;background:#fff}
.preset-search-wrap span{font-size:18px;color:#78858e}.preset-search-wrap input{border:0!important;outline:0!important}
.preset-tool-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.orange-action{background:#f28b24!important;border-color:#f28b24!important;color:#fff!important;font-weight:750}
.preset-management-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;min-height:430px}
.preset-library-panel{padding:14px 16px;background:#f6f8f9}
.groups-panel{padding:14px;border-left:1px solid #dce3e7;background:#fff}
.subpanel-title{margin-bottom:10px}.subpanel-title b{display:block;font-size:13px;color:#223743}.subpanel-title span{font-size:9px;color:#7c8991}
.preset-manager-list{max-height:390px!important;padding-right:2px}
.manager-row{grid-template-columns:52px minmax(150px,1fr) 105px 90px auto auto!important;background:#fff;border-radius:9px!important;padding:8px!important}
.group-create-form{display:grid;grid-template-columns:1fr auto;gap:6px;margin-bottom:10px}
.groups-manager-list{display:grid;gap:6px;max-height:330px;overflow:auto}
.group-manager-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px;padding:8px 9px;border:1px solid #e0e5e8;border-radius:8px;background:#fafbfc}
.group-manager-row b{font-size:11px}.group-manager-row span{display:block;font-size:9px;color:#7a868e;margin-top:2px}.group-manager-row button{padding:5px 7px;color:#ad3b34}
.preview-badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#eef3f6;color:#475965;font-size:10px!important}
.list-pages{display:flex;flex-direction:column;gap:22px;align-items:center;width:100%}
.list-page{padding:0 0 25px!important}
.doc-header{min-height:82px}
.doc-title>b{font-size:28px!important}
.doc-title>span{font-size:13px!important}
.doc-date small{font-size:9px!important}.doc-date b{font-size:13px!important}
.doc-group h2{font-size:19px!important}
.doc-table th{font-size:10px!important;padding:8px 5px!important}
.doc-item{font-size:11.5px!important;line-height:1.25}
.doc-notes{font-size:10.5px!important;line-height:1.35}
.doc-source{font-size:9.5px!important}
.doc-table td{font-size:11px!important;padding:7px!important}
.doc-pic{height:76px!important}.doc-pic img{max-height:74px!important}
.page-footer{display:flex;justify-content:space-between;align-items:center;margin:14px 22px 0;padding-top:8px;border-top:1px solid #d9e0e4;color:#77838b;font-size:9px}
.page-footer b{color:#314855;font-size:10px}
.print-cover-only{display:none!important}
@media(max-width:760px){
.preset-management-grid{grid-template-columns:1fr}
.groups-panel{border-left:0;border-top:1px solid #dce3e7}
.manager-row{grid-template-columns:46px minmax(120px,1fr) auto auto!important}
.manager-row>div:nth-child(3),.manager-row>div:nth-child(4){display:none}
.preset-manager-tools{grid-template-columns:1fr!important}
.preset-tool-actions{justify-content:flex-start}
}
/* V2.4 print: cover back in export, hidden from live preview */
@media print{
body{background:#fff!important}
.toolbar,.editor,.preview-head,dialog,.toast{display:none!important}
.layout,.preview-panel,.desk{display:block!important;width:210mm!important;max-width:210mm!important;margin:0!important;padding:0!important;border:0!important;background:#fff!important;overflow:visible!important}
.print-cover-only{
display:block!important;position:relative!important;width:210mm!important;min-height:297mm!important;height:297mm!important;
margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;
page-break-after:always!important;break-after:page!important;overflow:hidden!important
}
.print-cover-only .cover-bg{display:block!important}
.list-pages{display:block!important;width:210mm!important}
.list-pages .paper{
display:block!important;width:210mm!important;min-width:210mm!important;max-width:210mm!important;min-height:297mm!important;
margin:0!important;padding:0 0 9mm!important;border:0!important;border-radius:0!important;box-shadow:none!important;
page-break-after:always!important;break-after:page!important
}
.list-pages .paper:last-child{page-break-after:auto!important;break-after:auto!important}
.page-footer{margin-left:6mm!important;margin-right:6mm!important}
#docGroups{margin-left:6mm!important;margin-right:6mm!important}
}
/* V2.5 — project/client is now the main document title */
.doc-title>b{
font-size:26px!important;
line-height:1.08!important;
letter-spacing:.01em!important;
text-transform:uppercase;
overflow-wrap:anywhere;
}
.doc-title>span{
display:block;
margin-top:5px;
font-size:10px!important;
font-weight:800;
letter-spacing:.18em;
color:#b9cbd5!important;
}
/* V2.6 — fuller A4 usage + cleaner checklist boxes */
/* Make the page content use more of the printable A4 area */
.list-page{
min-height:1123px!important;
display:flex!important;
flex-direction:column!important;
}
.doc-page-body{
flex:1 1 auto;
display:block;
}
.doc-group{
margin-top:14px!important;
}
.page-footer{
margin-top:auto!important;
padding-top:10px!important;
}
/* Slightly taller rows / bigger visuals so pages feel intentionally filled */
.doc-table td{
min-height:46px;
}
.doc-pic{
height:82px!important;
}
.doc-pic img{
max-height:80px!important;
}
/* Pretty checklist boxes for PICK / LOAD / RETURN */
.tick{
font-size:0!important;
text-align:center!important;
}
.tick::before{
content:"";
display:inline-block;
width:16px;
height:16px;
border:1.8px solid #81909a;
border-radius:4px;
background:#fff;
box-shadow:inset 0 0 0 2px #fff;
vertical-align:middle;
}
/* Softer table layout */
.doc-table th{
letter-spacing:.03em;
}
.doc-table tbody tr{
background:#fff;
}
.doc-table tbody tr:nth-child(even){
background:#f8fafb!important;
}
/* Better use of screen preview width without changing true A4 export */
.desk{
align-items:flex-start!important;
}
.list-pages{
width:100%;
}
.list-pages .paper{
max-width:100%;
}
/* Print-specific page filling and checkbox fidelity */
@media print{
.list-pages .paper{
height:297mm!important;
min-height:297mm!important;
display:flex!important;
flex-direction:column!important;
}
.doc-page-body{
flex:1 1 auto!important;
}
.page-footer{
margin-top:auto!important;
}
.tick::before{
width:4.2mm!important;
height:4.2mm!important;
border:0.45mm solid #81909a!important;
border-radius:1mm!important;
}
}
/* =========================================================
V2.7 — reliable A4 export rebuild
========================================================= */
/* Source now lives only in the SOURCE column. */
.source-cell{
font-size:9px;
line-height:1.2;
font-weight:800;
text-align:center;
white-space:nowrap;
}
/* Print cover is completely absent from the live UI. */
.print-cover-only{
display:none;
}
/* Screen preview stays centered and independent from print layout. */
@media screen{
#listPages .paper{
width:794px;
min-height:1123px;
margin:0 auto;
}
}
/*
Final print rules intentionally override all earlier versions.
Important: the cover uses a normal ![]()
, not a CSS background,
so the artwork prints even if "Background graphics" is off.
*/
@media print{
@page{
size:A4 portrait;
margin:0;
}
html,
body{
width:auto!important;
min-width:0!important;
margin:0!important;
padding:0!important;
background:#fff!important;
overflow:visible!important;
-webkit-print-color-adjust:exact!important;
print-color-adjust:exact!important;
}
*{
-webkit-print-color-adjust:exact!important;
print-color-adjust:exact!important;
}
/* Remove all app chrome. */
.toolbar,
.editor,
.preview-head,
dialog,
.toast{
display:none!important;
}
/* App wrappers must not introduce desktop offsets into print. */
.layout,
.preview-panel,
.desk{
display:block!important;
position:static!important;
width:auto!important;
min-width:0!important;
max-width:none!important;
height:auto!important;
min-height:0!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
background:transparent!important;
overflow:visible!important;
}
/* ---------- COVER = PAGE 1 ---------- */
.print-cover-only{
display:block!important;
position:relative!important;
width:210mm!important;
height:297mm!important;
min-height:297mm!important;
max-height:297mm!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
page-break-after:always!important;
break-after:page!important;
background:#fff!important;
}
.cover-background-img{
position:absolute!important;
inset:0!important;
width:210mm!important;
height:297mm!important;
object-fit:cover!important;
object-position:center!important;
display:block!important;
}
.print-cover-overlay{
position:absolute!important;
inset:0!important;
width:210mm!important;
height:297mm!important;
padding:18mm 17mm 18mm!important;
display:flex!important;
flex-direction:column!important;
z-index:2!important;
}
.print-cover-logo{
width:50mm!important;
height:auto!important;
display:block!important;
}
.cover-copy{
margin-top:46mm!important;
max-width:165mm!important;
}
.cover-project{
font-size:13mm!important;
line-height:1.03!important;
font-weight:800!important;
color:#161616!important;
overflow-wrap:anywhere!important;
}
.cover-type{
font-size:6.5mm!important;
margin-top:9mm!important;
color:#202020!important;
}
.cover-meta{
margin-top:auto!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:14mm!important;
width:100%!important;
color:#202020!important;
}
.cover-meta div{
display:flex!important;
flex-direction:column!important;
gap:2mm!important;
}
.cover-meta b{
font-size:4.5mm!important;
}
.cover-meta span{
font-size:3mm!important;
}
/* ---------- PACKING LIST PAGES ---------- */
.list-pages{
display:block!important;
width:auto!important;
margin:0!important;
padding:0!important;
}
.list-pages .paper,
.list-pages .list-page{
display:flex!important;
flex-direction:column!important;
position:relative!important;
width:210mm!important;
min-width:210mm!important;
max-width:210mm!important;
height:297mm!important;
min-height:297mm!important;
max-height:297mm!important;
margin:0!important;
padding:0 0 7mm!important;
overflow:hidden!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
transform:none!important;
background:#fff!important;
page-break-after:always!important;
break-after:page!important;
}
.list-pages .paper:last-child{
page-break-after:auto!important;
break-after:auto!important;
}
.doc-header{
flex:0 0 auto!important;
width:210mm!important;
min-height:22mm!important;
margin:0!important;
padding:4mm 6mm!important;
background:#102a3a!important;
color:#fff!important;
border:0!important;
border-radius:0!important;
}
.doc-logo-wrap img{
width:38mm!important;
filter:none!important;
}
.doc-title>b{
font-size:6.5mm!important;
line-height:1.05!important;
color:#fff!important;
}
.doc-title>span{
font-size:2.6mm!important;
color:#c7d5dd!important;
}
.doc-date small{
font-size:2.2mm!important;
color:#a9bdc9!important;
}
.doc-date b{
font-size:3mm!important;
color:#fff!important;
}
.doc-page-body{
flex:1 1 auto!important;
min-height:0!important;
margin:0!important;
padding:0 6mm!important;
overflow:hidden!important;
}
.doc-group{
margin-top:4mm!important;
padding:2.5mm!important;
background:#f7f9fa!important;
border:0.3mm solid #e0e5e8!important;
border-radius:2.5mm!important;
break-inside:avoid!important;
page-break-inside:avoid!important;
}
.doc-group h2{
margin:0 0 2mm!important;
padding:0!important;
font-size:4.4mm!important;
line-height:1.1!important;
}
.doc-table{
width:100%!important;
border-collapse:separate!important;
border-spacing:0!important;
border:0.25mm solid #d7dee3!important;
border-radius:1.8mm!important;
overflow:hidden!important;
background:#fff!important;
}
.doc-table th{
background:#eef2f4!important;
color:#344955!important;
font-size:2.35mm!important;
padding:1.8mm 1mm!important;
}
.doc-table td{
font-size:2.7mm!important;
padding:1.8mm 1.2mm!important;
}
.doc-item{
font-size:2.8mm!important;
}
.doc-notes{
font-size:2.5mm!important;
line-height:1.3!important;
}
.source-cell{
font-size:2.3mm!important;
}
.doc-pic{
height:18mm!important;
}
.doc-pic img{
max-height:17.5mm!important;
}
.tick::before{
width:4mm!important;
height:4mm!important;
border:0.4mm solid #81909a!important;
border-radius:1mm!important;
}
.page-footer{
flex:0 0 auto!important;
margin:auto 6mm 0!important;
padding-top:2mm!important;
border-top:0.25mm solid #d9e0e4!important;
font-size:2.2mm!important;
}
.page-footer b{
font-size:2.4mm!important;
}
/* Never print obsolete cover implementation if an old browser cache sees it. */
.cover-page:not(#printCoverPage),
.cover-bg{
display:none!important;
}
}
/* =========================================================
V2.9 — typography aligned with Print Proof Generator
Print Proof uses Segoe UI / Arial and more comfortable sizing.
========================================================= */
body,
button,
input,
select,
textarea{
font-family:"Segoe UI",Arial,sans-serif!important;
}
/* Screen preview */
.doc-title>b{
font-size:29px!important;
font-weight:750!important;
letter-spacing:.01em!important;
}
.doc-title>span{
font-size:12px!important;
font-weight:700!important;
}
.doc-date b{font-size:14px!important}
.doc-group h2{
font-size:20px!important;
font-weight:750!important;
}
.doc-table th{
font-size:11px!important;
font-weight:750!important;
padding:9px 6px!important;
}
.doc-table td{
font-size:12.5px!important;
line-height:1.35!important;
padding:9px 7px!important;
}
.doc-item{
font-size:13px!important;
font-weight:700!important;
line-height:1.3!important;
}
.doc-notes{
font-size:12px!important;
line-height:1.45!important;
}
.source-cell{
font-size:11px!important;
line-height:1.25!important;
}
.page-footer{
font-size:10.5px!important;
}
.page-footer b{
font-size:11px!important;
}
/* Give the larger type a little more breathing room */
.doc-group{
padding:11px 11px 13px!important;
}
.doc-pic{
height:86px!important;
}
.doc-pic img{
max-height:84px!important;
}
@media print{
body,
button,
input,
select,
textarea{
font-family:"Segoe UI",Arial,sans-serif!important;
}
.doc-title>b{
font-size:7mm!important;
font-weight:750!important;
letter-spacing:.01em!important;
}
.doc-title>span{
font-size:3mm!important;
font-weight:700!important;
}
.doc-date b{font-size:3.3mm!important}
.doc-group h2{
font-size:4.8mm!important;
font-weight:750!important;
}
.doc-table th{
font-size:2.65mm!important;
font-weight:750!important;
padding:2mm 1.1mm!important;
}
.doc-table td{
font-size:3mm!important;
line-height:1.35!important;
padding:2mm 1.35mm!important;
}
.doc-item{
font-size:3.15mm!important;
font-weight:700!important;
line-height:1.3!important;
}
.doc-notes{
font-size:2.85mm!important;
line-height:1.4!important;
}
.source-cell{
font-size:2.55mm!important;
line-height:1.2!important;
}
.doc-pic{
height:20mm!important;
}
.doc-pic img{
max-height:19.5mm!important;
}
.page-footer{
font-size:2.35mm!important;
}
.page-footer b{
font-size:2.55mm!important;
}
}
/* =========================================================
V3.0 — fuller A4 pages + improved cover composition
========================================================= */
/* Keep Proof-like typography but use page space more efficiently */
.doc-page-body{
display:flex!important;
flex-direction:column!important;
flex:1 1 auto!important;
}
.page-footer{margin-top:auto!important}
.doc-group{
margin-top:12px!important;
padding:10px 10px 11px!important;
}
.doc-table th{padding:8px 5px!important}
.doc-table td{padding:8px 6px!important}
.doc-pic{height:80px!important}
.doc-pic img{max-height:78px!important}
/* Cover: larger logo and visually closer to project/client title */
@media print{
.print-cover-logo{
width:66mm!important;
max-width:none!important;
}
.cover-copy{
margin-top:28mm!important;
max-width:170mm!important;
}
.cover-project{
font-size:13.5mm!important;
line-height:1.02!important;
}
.cover-type{
margin-top:7mm!important;
}
.doc-page-body{
display:flex!important;
flex-direction:column!important;
flex:1 1 auto!important;
}
.doc-group{
margin-top:3.2mm!important;
padding:2.3mm!important;
}
.doc-table th{padding:1.7mm 1mm!important}
.doc-table td{padding:1.7mm 1.2mm!important}
.doc-pic{height:18.5mm!important}
.doc-pic img{max-height:18mm!important}
}
/* =========================================================
V3.1 — larger editor sidebar + smarter page filling
========================================================= */
.layout{
grid-template-columns:470px minmax(0,1fr)!important;
}
.panel-title{
font-size:16px!important;
padding:13px 16px!important;
}
.project-fields{padding:14px 16px 10px!important;gap:10px!important}
label{font-size:12px!important;gap:5px!important}
input,select,textarea{
font-size:13px!important;
padding:9px 10px!important;
}
.source-strip{margin:0 16px 12px!important;padding:11px!important}
.search-area{padding:0 16px 12px!important}
.searchbox input{font-size:13px!important}
.filter{font-size:11px!important;padding:6px 10px!important}
.preset-results{max-height:220px!important;gap:7px!important}
.preset-row{
grid-template-columns:52px 1fr auto!important;
padding:7px!important;
gap:10px!important;
border-radius:8px!important;
}
.preset-thumb{width:52px!important;height:52px!important}
.preset-row b{font-size:13px!important}
.preset-row small{font-size:10.5px!important}
.preset-row button{font-size:12px!important;padding:7px 9px!important}
.create-btn,.manage-presets-btn{
padding:10px 12px!important;
font-size:12.5px!important;
}
.added-head{padding:11px 16px!important}
.added-head b{font-size:13px!important}
.added-head span{font-size:11px!important}
.added-items{padding:9px!important;gap:8px!important}
.added-row{padding:9px!important;border-radius:8px!important}
.added-name{font-size:13px!important}
.added-group{font-size:10.5px!important}
.added-controls{
grid-template-columns:82px 1fr auto auto!important;
gap:7px!important;
margin-top:8px!important;
}
.added-controls input,.added-controls select{font-size:11.5px!important;padding:7px!important}
@media(max-width:1100px){
.layout{grid-template-columns:420px minmax(0,1fr)!important}
}
@media(max-width:900px){
.layout{grid-template-columns:1fr!important}
}
/* Packing list can split a group between pages.
Do not force the entire group card onto the next page. */
.doc-group{
break-inside:auto!important;
page-break-inside:auto!important;
}
.doc-table{
break-inside:auto!important;
page-break-inside:auto!important;
}
.doc-table tr{
break-inside:avoid!important;
page-break-inside:avoid!important;
}
@media print{
.doc-group{
break-inside:auto!important;
page-break-inside:auto!important;
}
.doc-table{
break-inside:auto!important;
page-break-inside:auto!important;
}
}
/* =========================================================
V3.2 — dedicated A4 cover based on the Print Proof artwork
========================================================= */
/* The exported cover now uses an A4 portrait artwork without the old embedded logo.
The real SVG logo is placed separately, so size and position are controllable. */
@media print{
.cover-background-img{
content:url("assets/cover-a4.jpg")!important;
width:210mm!important;
height:297mm!important;
object-fit:cover!important;
object-position:center!important;
}
.print-cover-overlay{
padding:16mm 17mm 18mm!important;
}
.print-cover-logo{
width:78mm!important;
max-width:78mm!important;
height:auto!important;
margin:0!important;
}
.cover-copy{
margin-top:16mm!important;
max-width:174mm!important;
}
.cover-project{
font-size:13.8mm!important;
line-height:1.02!important;
font-weight:800!important;
}
.cover-type{
font-size:6.6mm!important;
margin-top:6mm!important;
}
}
/* Optional screen-safe dimensions if the print cover is ever previewed later. */
.print-cover-logo{height:auto}
/* =========================================================
V3.3 — packing-list date + tighter cover logo/title lockup
========================================================= */
@media print{
.print-cover-overlay{
padding-top:38mm!important;
}
/* Logo is intentionally lower and the title sits directly beneath it. */
.print-cover-logo{
width:78mm!important;
margin:0!important;
}
.cover-copy{
margin-top:5mm!important;
max-width:174mm!important;
}
.cover-project{
font-size:13.8mm!important;
line-height:1.02!important;
}
.cover-type{
margin-top:5mm!important;
}
.cover-meta{
grid-template-columns:1fr 1fr 1fr!important;
gap:8mm!important;
}
}
/* =========================================================
V3.5 — Print Proof Generator visual shell
Based on the supplied Print Proof interface reference.
========================================================= */
.proof-shell{
width:100%;
background:#fff;
box-shadow:0 1px 0 #d7dee3;
position:relative;
z-index:10;
}
.proof-brandbar{
height:78px;
background:#1c2229;
display:flex;
align-items:center;
padding:0 24px;
}
.proof-brand{
display:flex;
align-items:center;
height:100%;
}
.proof-logo{
width:272px;
height:auto;
display:block;
filter:none!important;
}
.proof-divider{
width:1px;
height:46px;
background:#49515a;
margin:0 20px 0 72px;
}
.proof-product{
display:flex;
flex-direction:column;
justify-content:center;
}
.proof-product strong{
color:#fff;
font-size:20px;
line-height:1.1;
font-weight:800;
}
.proof-product span{
margin-top:7px;
color:#d4dbe0;
font-size:11px;
}
.proof-actionbar{
min-height:59px;
display:flex;
align-items:center;
gap:10px;
padding:9px 15px;
background:#fff;
border-bottom:1px solid #d7dee3;
}
.proof-actions{
display:flex;
align-items:center;
gap:9px;
flex-wrap:wrap;
}
.proof-actionbar button{
min-height:36px;
padding:0 15px;
border:0;
border-radius:7px;
background:#e9eef2;
color:#101820;
font-family:"Segoe UI",Arial,sans-serif;
font-size:12px;
font-weight:750;
cursor:pointer;
box-shadow:none;
}
.proof-actionbar button:hover{
background:#dde5ea;
}
.proof-actionbar .orange-top-action{
background:#f68b1f!important;
color:#fff!important;
}
.proof-actionbar .orange-top-action:hover{
background:#e67b11!important;
}
.proof-project-status{
display:flex;
align-items:center;
gap:7px;
min-width:0;
font-size:10.5px;
color:#667680;
}
.proof-project-status b{
color:#1265a8;
font-weight:700;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
max-width:260px;
}
/* Override the old toolbar geometry now that the interface has two bars. */
.layout{
height:calc(100vh - 137px)!important;
padding:12px!important;
gap:12px!important;
}
/* Continue the Print Proof sizing language in the editor. */
.editor{
border-radius:8px!important;
}
.panel-title{
padding:14px 17px!important;
font-size:16px!important;
}
.project-fields{
padding:15px 17px 11px!important;
}
.search-area{
padding-left:17px!important;
padding-right:17px!important;
}
.source-strip{
margin-left:17px!important;
margin-right:17px!important;
}
.create-btn,
.manage-presets-btn{
min-height:39px!important;
font-size:13px!important;
border-radius:7px!important;
}
.preview-head{
min-height:50px;
padding:10px 15px!important;
}
.preview-head b{
font-size:13px!important;
}
.preview-head span{
font-size:10px!important;
}
@media(max-width:900px){
.proof-brandbar{
height:auto;
min-height:72px;
padding:12px 15px;
}
.proof-logo{width:210px}
.proof-divider{margin:0 14px;height:38px}
.proof-product strong{font-size:16px}
.proof-actionbar{
align-items:flex-start;
flex-direction:column;
}
.proof-project-status{padding:0 2px 3px}
.layout{height:auto!important}
}
@media(max-width:620px){
.proof-logo{width:175px}
.proof-divider{margin:0 10px}
.proof-product strong{font-size:14px}
.proof-product span{font-size:9px}
.proof-actionbar button{
min-height:34px;
padding:0 11px;
font-size:11px;
}
}
/* Header/action bars never appear in the exported A4 document. */
@media print{
.proof-shell{
display:none!important;
}
}
/* =========================================================
V3.7 — dedicated print document
Screen preview and PDF export no longer share layout geometry.
========================================================= */
.print-root{
display:none;
}
/* Screen preview remains unchanged. */
@media screen{
#printRoot{display:none!important}
}
/* Final print layer: exact A4, no inherited app offsets. */
@media print{
@page{
size:A4 portrait;
margin:0;
}
html,body{
margin:0!important;
padding:0!important;
width:auto!important;
min-width:0!important;
background:#fff!important;
overflow:visible!important;
-webkit-print-color-adjust:exact!important;
print-color-adjust:exact!important;
}
body > *:not(#printRoot){
display:none!important;
}
#printRoot{
display:block!important;
position:static!important;
width:210mm!important;
margin:0!important;
padding:0!important;
background:#fff!important;
}
/* COVER PAGE */
.print-cover-page{
display:block!important;
position:relative!important;
box-sizing:border-box!important;
width:210mm!important;
height:297mm!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
background:#fff!important;
break-after:page!important;
page-break-after:always!important;
}
.print-cover-bg{
position:absolute!important;
inset:0!important;
width:210mm!important;
height:297mm!important;
object-fit:cover!important;
object-position:center!important;
display:block!important;
}
.print-cover-content{
position:absolute!important;
inset:0!important;
box-sizing:border-box!important;
width:210mm!important;
height:297mm!important;
padding:37mm 17mm 18mm!important;
display:flex!important;
flex-direction:column!important;
z-index:2!important;
}
.print-cover-logo-v37{
width:78mm!important;
height:auto!important;
display:block!important;
margin:0!important;
}
.print-cover-copy{
margin-top:5mm!important;
max-width:174mm!important;
}
.print-cover-project{
font-family:"Segoe UI",Arial,sans-serif!important;
font-size:13.8mm!important;
line-height:1.02!important;
font-weight:800!important;
color:#161616!important;
overflow-wrap:anywhere!important;
}
.print-cover-type{
margin-top:5mm!important;
font-size:6.6mm!important;
color:#202020!important;
}
.print-cover-meta{
margin-top:auto!important;
width:100%!important;
display:grid!important;
grid-template-columns:1fr 1fr 1fr!important;
gap:8mm!important;
color:#202020!important;
}
.print-cover-meta div{
display:flex!important;
flex-direction:column!important;
gap:2mm!important;
}
.print-cover-meta b{font-size:4.5mm!important}
.print-cover-meta span{font-size:3mm!important}
/* PACKING LIST PAGES */
#printListPages{
display:block!important;
width:210mm!important;
margin:0!important;
padding:0!important;
}
#printListPages .paper,
#printListPages .list-page{
position:relative!important;
box-sizing:border-box!important;
width:210mm!important;
height:297mm!important;
min-width:210mm!important;
max-width:210mm!important;
min-height:297mm!important;
max-height:297mm!important;
margin:0!important;
padding:0 0 7mm!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
transform:none!important;
overflow:hidden!important;
background:#fff!important;
display:flex!important;
flex-direction:column!important;
break-after:page!important;
page-break-after:always!important;
}
#printListPages .paper:last-child{
break-after:auto!important;
page-break-after:auto!important;
}
#printListPages .doc-header{
box-sizing:border-box!important;
flex:0 0 22mm!important;
width:210mm!important;
min-height:22mm!important;
margin:0!important;
padding:4mm 6mm!important;
border:0!important;
border-radius:0!important;
background:#102a3a!important;
color:#fff!important;
}
#printListPages .doc-logo-wrap img{
width:38mm!important;
filter:none!important;
}
#printListPages .doc-title>b{
font-size:7mm!important;
line-height:1.05!important;
}
#printListPages .doc-title>span{
font-size:3mm!important;
}
#printListPages .doc-date b{
font-size:3.3mm!important;
}
#printListPages .doc-page-body{
box-sizing:border-box!important;
flex:1 1 auto!important;
min-height:0!important;
width:210mm!important;
margin:0!important;
padding:0 6mm!important;
overflow:hidden!important;
}
#printListPages .doc-group{
margin-top:3.2mm!important;
padding:2.3mm!important;
border:0.3mm solid #e0e5e8!important;
border-radius:2.5mm!important;
background:#f7f9fa!important;
break-inside:auto!important;
page-break-inside:auto!important;
}
#printListPages .doc-group h2{
margin:0 0 2mm!important;
font-size:4.8mm!important;
}
#printListPages .doc-table{
width:100%!important;
border-collapse:separate!important;
border-spacing:0!important;
border:0.25mm solid #d7dee3!important;
border-radius:1.8mm!important;
overflow:hidden!important;
background:#fff!important;
}
#printListPages .doc-table tr{
break-inside:avoid!important;
page-break-inside:avoid!important;
}
#printListPages .doc-table th{
font-size:2.65mm!important;
padding:1.7mm 1mm!important;
}
#printListPages .doc-table td{
font-size:3mm!important;
padding:1.7mm 1.2mm!important;
}
#printListPages .doc-item{
font-size:3.15mm!important;
}
#printListPages .doc-notes{
font-size:2.85mm!important;
line-height:1.4!important;
}
#printListPages .source-cell{
font-size:2.55mm!important;
}
#printListPages .doc-pic{
height:18.5mm!important;
}
#printListPages .doc-pic img{
max-height:18mm!important;
}
#printListPages .tick::before{
width:4mm!important;
height:4mm!important;
border:0.4mm solid #81909a!important;
border-radius:1mm!important;
}
#printListPages .page-footer{
flex:0 0 auto!important;
margin:auto 6mm 0!important;
padding-top:2mm!important;
border-top:0.25mm solid #d9e0e4!important;
font-size:2.35mm!important;
}
#printListPages .page-footer b{
font-size:2.55mm!important;
}
}
/* =========================================================
V3.8 — Kaisar SemiBold typography
Place your licensed file at: assets/Kaisar-Semi-Bold.ttf
========================================================= */
@font-face{
font-family:"KaisarSB";
src:url("assets/Kaisar-Semi-Bold.ttf") format("truetype");
font-style:normal;
font-weight:600;
font-display:swap;
}
/* Requested use only:
- Project/client title in packing-list page header
- PACKING LIST subtitle below it
- Group headings
- Entire cover content
*/
.doc-title>b,
.doc-title>span,
.doc-group h2{
font-family:"KaisarSB","Segoe UI",Arial,sans-serif!important;
font-weight:600!important;
}
.print-cover-project,
.print-cover-type,
.print-cover-meta,
.print-cover-meta b,
.print-cover-meta span{
font-family:"KaisarSB","Segoe UI",Arial,sans-serif!important;
font-weight:600!important;
}
/* Slight optical tuning for this display face */
.doc-title>b{
letter-spacing:.015em!important;
}
.doc-title>span{
letter-spacing:.14em!important;
}
.doc-group h2{
letter-spacing:.025em!important;
}
@media print{
#printListPages .doc-title>b,
#printListPages .doc-title>span,
#printListPages .doc-group h2{
font-family:"KaisarSB","Segoe UI",Arial,sans-serif!important;
font-weight:600!important;
}
.print-cover-project,
.print-cover-type,
.print-cover-meta,
.print-cover-meta b,
.print-cover-meta span{
font-family:"KaisarSB","Segoe UI",Arial,sans-serif!important;
font-weight:600!important;
}
}
/* =========================================================
V3.9 — visual country flags in SOURCE
========================================================= */
.source-cell{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:3px!important;
text-align:center!important;
white-space:nowrap!important;
}
.source-flag{
display:block!important;
font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif!important;
font-size:18px!important;
line-height:1!important;
}
.source-country{
display:block!important;
font-size:10px!important;
font-weight:800!important;
line-height:1!important;
}
@media print{
#printListPages .source-cell{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:.8mm!important;
}
#printListPages .source-flag{
font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif!important;
font-size:4.8mm!important;
line-height:1!important;
}
#printListPages .source-country{
font-size:2.35mm!important;
line-height:1!important;
}
}
/* V4.0 — supplied SVG source flags */
.source-flag{display:none!important}
.source-flag-img{
display:block!important;width:30px!important;height:20px!important;
object-fit:contain!important;margin:0 auto!important;
}
.source-country{margin-top:2px!important}
@media print{
#printListPages .source-flag-img{
display:block!important;width:8mm!important;height:5.3mm!important;
object-fit:contain!important;margin:0 auto!important;
}
}
/* =========================================================
V4.4 — Packing Reminders on the cover
========================================================= */
@media print{
.cover-reminders{
box-sizing:border-box!important;
width:100%!important;
margin-top:11mm!important;
padding:6mm 6.5mm!important;
background:#fff!important;
border-radius:4mm!important;
color:#17222b!important;
box-shadow:0 .7mm 2.5mm rgba(0,0,0,.10)!important;
}
.cover-reminders-title{
font-family:"KaisarSB","Segoe UI",Arial,sans-serif!important;
font-size:4.7mm!important;
line-height:1!important;
font-weight:600!important;
letter-spacing:.05em!important;
margin:0 0 4mm!important;
color:#102a3a!important;
}
.cover-reminders-grid{
display:grid!important;
grid-template-columns:1fr 1fr!important;
column-gap:7mm!important;
row-gap:3.3mm!important;
}
.cover-reminder{
display:grid!important;
grid-template-columns:5mm 1fr!important;
gap:2.2mm!important;
align-items:start!important;
min-width:0!important;
}
.cover-check{
box-sizing:border-box!important;
display:block!important;
width:4.2mm!important;
height:4.2mm!important;
margin-top:.25mm!important;
border:.45mm solid #8a979f!important;
border-radius:1.1mm!important;
background:#fff!important;
}
.cover-reminder div{
min-width:0!important;
}
.cover-reminder b{
display:block!important;
font-family:"KaisarSB","Segoe UI",Arial,sans-serif!important;
font-size:3.25mm!important;
line-height:1.05!important;
font-weight:600!important;
color:#102a3a!important;
margin:0 0 .8mm!important;
}
.cover-reminder small{
display:block!important;
font-family:"Segoe UI",Arial,sans-serif!important;
font-size:2.55mm!important;
line-height:1.32!important;
font-weight:500!important;
color:#45545e!important;
}
/* Keep project manager / dates anchored at the bottom below reminders. */
.print-cover-meta{
margin-top:auto!important;
}
}
/* V4.6 — packing completion/sign-off area on cover */
@media print{
.cover-packed-info{
box-sizing:border-box!important;
width:100%!important;
min-height:31mm!important;
margin-top:10mm!important;
padding:5mm 6.5mm!important;
background:rgba(255,255,255,.82)!important;
border:.3mm solid rgba(16,42,58,.15)!important;
border-radius:4mm!important;
color:#102a3a!important;
}
.cover-packed-heading{
font-family:"KaisarSB","Segoe UI",Arial,sans-serif!important;
font-size:4mm!important;
font-weight:600!important;
letter-spacing:.045em!important;
margin-bottom:5mm!important;
}
.cover-packed-fields{
display:grid!important;
grid-template-columns:2fr 1fr!important;
gap:8mm!important;
}
.cover-packed-fields>div{
border-bottom:.35mm solid #78868e!important;
padding-bottom:2.2mm!important;
display:flex!important;
flex-direction:column!important;
gap:1.3mm!important;
}
.cover-packed-fields span{
font-family:"Segoe UI",Arial,sans-serif!important;
font-size:2.5mm!important;
text-transform:uppercase!important;
letter-spacing:.08em!important;
color:#65747c!important;
}
.cover-packed-fields b{
font-family:"KaisarSB","Segoe UI",Arial,sans-serif!important;
font-size:4mm!important;
font-weight:600!important;
min-height:4mm!important;
}
}
/* =========================================================
V4.7 — manual packing sign-off + mobile responsive layout
========================================================= */
/* The PACKING COMPLETED BY block is for handwriting only.
It sits below the dark separator line in the cover artwork. */
@media print{
.cover-packed-info{
margin-top:24mm!important;
min-height:28mm!important;
padding:5mm 6.5mm!important;
}
.cover-packed-fields{
grid-template-columns:2fr 1fr!important;
gap:8mm!important;
}
.manual-write-line{
display:block!important;
min-height:6mm!important;
width:100%!important;
border-bottom:.35mm solid #71818a!important;
color:transparent!important;
}
}
/* ---------- Mobile / tablet layout ---------- */
@media (max-width: 900px){
body{
overflow:auto!important;
background:#e9eef1!important;
}
.proof-shell{
position:sticky!important;
top:0!important;
z-index:50!important;
}
.proof-brandbar{
min-height:64px!important;
padding:10px 12px!important;
}
.proof-brand{
width:100%!important;
min-width:0!important;
}
.proof-logo{
width:180px!important;
max-width:48vw!important;
}
.proof-divider{
height:34px!important;
margin:0 10px!important;
}
.proof-product{
min-width:0!important;
}
.proof-product strong{
font-size:15px!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.proof-product span{
font-size:9px!important;
margin-top:4px!important;
}
.proof-actionbar{
display:block!important;
padding:8px 10px!important;
}
.proof-actions{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:7px!important;
}
.proof-actionbar button{
width:100%!important;
min-height:42px!important;
padding:0 9px!important;
font-size:12px!important;
}
.proof-project-status{
margin-top:7px!important;
width:100%!important;
min-width:0!important;
}
.proof-project-status b{
max-width:65vw!important;
}
.layout{
display:block!important;
height:auto!important;
min-height:0!important;
padding:8px!important;
}
.editor,
.preview-panel{
width:100%!important;
max-width:none!important;
min-width:0!important;
}
.editor{
margin-bottom:10px!important;
overflow:visible!important;
}
.project-fields{
display:block!important;
padding:12px!important;
}
.project-fields .two{
grid-template-columns:1fr!important;
}
.project-fields label{
margin-bottom:9px!important;
}
input,
select,
textarea{
min-height:44px!important;
font-size:16px!important;
}
.source-strip{
grid-template-columns:1fr!important;
margin:0 12px 10px!important;
}
.source-strip button{
min-height:42px!important;
}
.search-area{
padding:0 12px 12px!important;
}
.searchbox{
min-height:46px!important;
}
.searchbox input{
font-size:16px!important;
}
.group-filters{
padding-top:10px!important;
}
.filter{
min-height:36px!important;
font-size:11px!important;
}
.preset-results{
max-height:none!important;
}
.preset-row{
grid-template-columns:52px minmax(0,1fr) auto!important;
}
.preset-row button{
min-height:38px!important;
}
.added-items{
max-height:none!important;
}
.added-controls{
grid-template-columns:80px minmax(0,1fr) 42px 42px!important;
}
.added-controls input,
.added-controls select{
min-height:40px!important;
font-size:14px!important;
}
.preview-panel{
min-height:0!important;
}
.desk{
padding:8px!important;
overflow:auto!important;
justify-content:flex-start!important;
}
/* Scale A4 preview to fit small screens without horizontal page clipping. */
.list-pages{
align-items:flex-start!important;
}
#listPages .paper{
width:794px!important;
min-width:794px!important;
transform:scale(.72)!important;
transform-origin:top left!important;
margin-bottom:-314px!important;
}
}
@media (max-width: 620px){
.proof-brandbar{
min-height:58px!important;
}
.proof-logo{
width:145px!important;
}
.proof-divider{
height:30px!important;
margin:0 8px!important;
}
.proof-product strong{
font-size:13px!important;
}
.proof-product span{
display:none!important;
}
.proof-actions{
grid-template-columns:1fr 1fr!important;
}
.proof-actionbar button{
font-size:11px!important;
}
.panel-title{
font-size:15px!important;
}
.preset-row{
grid-template-columns:44px minmax(0,1fr) auto!important;
}
.preset-thumb{
width:44px!important;
height:44px!important;
}
/* Scale preview further for phones. */
#listPages .paper{
transform:scale(.54)!important;
margin-bottom:-517px!important;
}
.preset-dialog{
width:96vw!important;
max-height:88vh!important;
overflow:auto!important;
}
.preset-management-grid{
display:block!important;
}
.groups-panel{
border-left:0!important;
border-top:1px solid #dce3e7!important;
}
.manager-row{
grid-template-columns:44px minmax(0,1fr) auto auto!important;
}
.manager-row>div:nth-child(3),
.manager-row>div:nth-child(4){
display:none!important;
}
}
/* V4.8 — remove duplicate separator around manual sign-off block */
@media print{
.cover-packed-info{
border:none!important;
box-shadow:none!important;
}
}
/* =========================================================
V4.9 — orange quantity badge in Packing List
========================================================= */
.qty-badge{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-width:28px!important;
height:28px!important;
padding:0 7px!important;
border-radius:999px!important;
background:#f28b24!important;
color:#fff!important;
font-family:"Segoe UI",Arial,sans-serif!important;
font-size:12px!important;
line-height:1!important;
font-weight:800!important;
box-shadow:0 1px 2px rgba(0,0,0,.08)!important;
}
@media print{
#printListPages .qty-badge{
min-width:6.8mm!important;
height:6.8mm!important;
padding:0 1.6mm!important;
border-radius:99mm!important;
background:#f28b24!important;
color:#fff!important;
font-size:2.9mm!important;
font-weight:800!important;
box-shadow:none!important;
}
}
/* =========================================================
V5.0 — hard fix for duplicate cover separator
The cover background contains its own horizontal rule.
Paint a clean patch behind the sign-off area so that rule
cannot run through / appear above the manual fields.
========================================================= */
@media print{
.cover-packed-info{
position:relative!important;
z-index:5!important;
margin-top:26mm!important;
border:none!important;
outline:none!important;
box-shadow:none!important;
overflow:visible!important;
}
/* cover-background line mask */
.cover-packed-info::before{
content:""!important;
position:absolute!important;
z-index:-1!important;
left:-8mm!important;
right:-8mm!important;
top:-7mm!important;
height:10mm!important;
background:rgba(248,247,238,.96)!important;
border:0!important;
box-shadow:none!important;
pointer-events:none!important;
}
.cover-packed-info::after{
content:none!important;
display:none!important;
}
/* Only the two handwriting lines remain. */
.cover-packed-fields>div{
border:0!important;
padding-bottom:0!important;
}
.manual-write-line{
border:0!important;
border-bottom:.35mm solid #71818a!important;
box-shadow:none!important;
outline:none!important;
}
}
/* =========================================================
V5.1 — remove V5.0 white masking bar
Keep the artwork untouched; place sign-off below its line.
========================================================= */
@media print{
.cover-packed-info{
margin-top:26mm!important;
position:relative!important;
z-index:2!important;
border:none!important;
outline:none!important;
box-shadow:none!important;
}
.cover-packed-info::before,
.cover-packed-info::after{
content:none!important;
display:none!important;
background:none!important;
width:0!important;
height:0!important;
}
.cover-packed-fields>div{
border:0!important;
padding-bottom:0!important;
}
.manual-write-line{
display:block!important;
border:0!important;
border-bottom:.35mm solid #71818a!important;
box-shadow:none!important;
outline:none!important;
}
}
/* V5.4 — choose quantity before adding a preset */
.preset-add-controls{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important}
.preset-add-qty{box-sizing:border-box!important;width:52px!important;min-width:52px!important;height:36px!important;min-height:36px!important;padding:0 5px!important;border:1px solid #cbd5db!important;border-radius:7px!important;background:#fff!important;color:#17222b!important;font-size:13px!important;font-weight:800!important;text-align:center!important}
.preset-add-qty:focus{outline:2px solid rgba(242,139,36,.25)!important;border-color:#f28b24!important}
.preset-add-controls button{white-space:nowrap!important}
@media(max-width:620px){.preset-add-qty{width:50px!important;min-width:50px!important;height:40px!important;min-height:40px!important;font-size:16px!important}}
/* ============================================================
V6.0 — AI Render Analysis
============================================================ */
.ai-top-action{background:#162d3c!important;color:#fff!important;border:1px solid #2f5268!important;box-shadow:0 1px 0 rgba(255,255,255,.08) inset!important}
.ai-top-action:hover{background:#203f52!important;border-color:#477089!important}
.ai-render-dialog{width:min(920px,calc(100vw - 28px));max-height:min(860px,calc(100vh - 28px));padding:0;border:0;border-radius:16px;box-shadow:0 26px 80px rgba(7,22,31,.34);overflow:hidden;background:#f5f7f8;color:#142530}
.ai-render-dialog::backdrop{background:rgba(8,22,30,.66);backdrop-filter:blur(3px)}
.ai-dialog-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding:24px 26px 20px;background:#102a3a;color:white}
.ai-dialog-head h2{margin:3px 0 5px;font-size:25px;line-height:1.1}.ai-dialog-head p{margin:0;max-width:680px;color:#c7d4db;font-size:13px;line-height:1.5}
.ai-kicker{font-size:10px;font-weight:900;letter-spacing:.15em;color:#f39a3b}.icon-close{border:0!important;background:rgba(255,255,255,.08)!important;color:#fff!important;border-radius:50%!important;width:34px;height:34px;font-size:24px;line-height:1;padding:0!important}
.ai-workflow{padding:20px 24px;max-height:62vh;overflow:auto}.ai-upload-card{display:flex;align-items:center;gap:14px;padding:15px;border:1.5px dashed #aab9c2;border-radius:12px;background:#fff;transition:.15s}.ai-upload-card.dragover{border-color:#f28b24;background:#fff9f1}.ai-upload-icon{display:grid;place-items:center;width:48px;height:54px;border-radius:8px;background:#eff3f5;color:#d05f12;font-weight:900;font-size:12px}.ai-upload-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.ai-upload-copy b{font-size:14px}.ai-upload-copy span{font-size:12px;color:#667984;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ai-upload-card button{white-space:nowrap}
.ai-analysis-note{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:11px 13px;border-radius:9px;background:#e9f0f4;color:#34505f;font-size:11px;line-height:1.45}.ai-analysis-note b{white-space:nowrap;color:#173a4e}.ai-status{display:flex;align-items:center;gap:13px;margin-top:14px;padding:17px;border-radius:10px;background:#fff;border:1px solid #dde5e9}.ai-status div{display:flex;flex-direction:column;gap:2px}.ai-status small{color:#70808a}.ai-spinner{width:22px;height:22px;border:3px solid #e2e8eb;border-top-color:#f28b24;border-radius:50%;animation:aiSpin .85s linear infinite}@keyframes aiSpin{to{transform:rotate(360deg)}}
.ai-results-wrap{margin-top:16px}.ai-results-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.ai-results-head>div{display:flex;flex-direction:column}.ai-results-head b{font-size:15px}.ai-results-head span{font-size:11px;color:#6b7a83}.ai-review-badge{display:inline-flex!important;align-items:center;padding:5px 8px;border-radius:999px;background:#fff0da;color:#a95413!important;font-weight:800!important}.ai-warnings{margin-bottom:9px;padding:10px 12px;border-radius:8px;background:#fff5dc;border:1px solid #f1d493;font-size:11px;color:#775414;line-height:1.45}
.ai-results{display:flex;flex-direction:column;gap:8px}.ai-result-row{display:grid;grid-template-columns:30px 64px minmax(180px,1.45fr) minmax(110px,.8fr) 88px;gap:9px;align-items:center;padding:10px 11px;background:#fff;border:1px solid #dfe6e9;border-radius:10px}.ai-result-row.ai-low{border-color:#ecd8b9}.ai-result-check{width:18px;height:18px;accent-color:#f28b24}.ai-result-qty{width:58px!important;height:36px!important;text-align:center!important;font-weight:900!important}.ai-result-main{min-width:0}.ai-result-name{display:block;width:100%;box-sizing:border-box;border:0!important;padding:2px 0!important;background:transparent!important;font-weight:800!important;font-size:13px!important;box-shadow:none!important}.ai-result-evidence{display:block;margin-top:2px;font-size:10px;color:#74828b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ai-result-group{height:34px!important;font-size:11px!important}.ai-confidence{justify-self:end;display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.ai-confidence.high{background:#e1f4e8;color:#287044}.ai-confidence.medium{background:#fff0d9;color:#9b5c15}.ai-confidence.low{background:#f5e6e2;color:#9b493c}.ai-preset-match{font-size:9px;font-weight:800;color:#2f6a82}.ai-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;background:#fff;border-top:1px solid #dce3e7}.ai-analyse-btn{background:#17394c!important;color:white!important;border-color:#17394c!important}.ai-analyse-btn:disabled{opacity:.45!important;cursor:not-allowed}
@media(max-width:760px){.ai-dialog-head{padding:18px}.ai-workflow{padding:14px;max-height:67vh}.ai-upload-card{align-items:flex-start;flex-wrap:wrap}.ai-upload-copy{min-width:180px}.ai-upload-card button{width:100%}.ai-analysis-note{display:block}.ai-analysis-note b{display:block;margin-bottom:3px}.ai-result-row{grid-template-columns:26px 56px 1fr 76px}.ai-result-group{grid-column:3/4}.ai-confidence{grid-column:4/5;grid-row:1/3}.ai-dialog-actions{padding:10px 12px;flex-wrap:wrap}.ai-dialog-actions button{flex:1 1 auto}.proof-actions .ai-top-action{order:5}}
/* V6.1 — explicit preliminary-list decision controls */
.ai-review-actions{
position:sticky;
bottom:-20px;
z-index:5;
display:flex;
justify-content:flex-end;
gap:8px;
margin:14px -24px -20px;
padding:13px 24px;
background:rgba(255,255,255,.97);
border-top:1px solid #dce3e7;
box-shadow:0 -8px 20px rgba(15,38,52,.07);
}
@media(max-width:760px){
.ai-review-actions{bottom:-14px;margin:12px -14px -14px;padding:10px 14px;flex-direction:column}
.ai-review-actions button{width:100%}
}
/* ============================================================
V6.2 — AI review footer always visible
============================================================ */
.ai-render-dialog{
display:none;
flex-direction:column;
height:min(860px,calc(100vh - 28px));
max-height:calc(100vh - 28px);
overflow:hidden!important;
}
.ai-render-dialog[open]{
display:flex;
}
.ai-dialog-head{
flex:0 0 auto;
}
.ai-workflow{
flex:1 1 auto;
min-height:0;
max-height:none!important;
overflow-y:auto!important;
overscroll-behavior:contain;
}
.ai-dialog-actions{
flex:0 0 auto;
position:relative;
z-index:20;
margin:0;
border-top:1px solid #dce3e7;
box-shadow:0 -8px 22px rgba(15,38,52,.08);
}
.ai-review-actions{
display:none!important;
}
@media(max-width:760px){
.ai-render-dialog{
height:calc(100vh - 16px);
max-height:calc(100vh - 16px);
}
.ai-workflow{
max-height:none!important;
}
.ai-dialog-actions{
padding:10px 12px;
}
}
/* V6.8 — Monday active-project autocomplete */
.monday-project-field{position:relative}
.monday-project-status{min-height:16px;margin-top:5px;font-size:12px;color:#68707a}
.monday-project-results{position:absolute;z-index:80;left:0;right:0;top:100%;margin-top:2px;padding:6px;background:#fff;border:1px solid #d9dee5;border-radius:12px;box-shadow:0 12px 30px rgba(17,24,39,.16);max-height:280px;overflow:auto}
.monday-project-result{display:block;width:100%;text-align:left;border:0;background:#fff;padding:10px;border-radius:9px;cursor:pointer;color:#111827}
.monday-project-result:hover,.monday-project-result:focus{background:#f3f6fa;outline:none}
.monday-project-result b{display:block;font-size:13px;margin-bottom:3px}
.monday-project-result small{display:block;color:#717984;font-size:11px;line-height:1.35}
.monday-project-result .monday-badge{display:inline-block;margin-top:6px;font-size:9px;font-weight:800;letter-spacing:.06em;color:#5b21b6;background:#ede9fe;padding:3px 6px;border-radius:999px}
.monday-project-status.ok{color:#167747}
.monday-project-status.warn{color:#a06400}
/* V7.2 — keep Added Items reachable when the sidebar content is taller than the screen */
@media (min-width:901px){
.editor{overflow-y:auto!important;overscroll-behavior:contain}
.editor>section{flex-shrink:0}
.added{flex:1 0 320px!important;min-height:320px!important}
.added-items{flex:1 1 auto;min-height:0}
}
/* V7.3 — Send to Monday */
.proof-actionbar .monday-top-action{background:#6c2bd9!important;color:#fff!important}
.proof-actionbar .monday-top-action:hover{background:#5a1fc0!important}
.proof-actionbar .monday-top-action:disabled{opacity:.6;cursor:progress}
/* V7.4 — Monday synced card + collapsible project details */
.sync-card{position:relative;padding:11px 13px 12px;border:1px solid #b9e6cc;border-radius:10px;background:linear-gradient(135deg,#effbf4 0%,#f6f2ff 100%);box-shadow:0 1px 0 #fff inset}
.sync-card-head{display:flex;align-items:center;gap:8px}
.sync-card-head b{font-size:12px;color:#14653b;letter-spacing:.01em}
.sync-card-head a{margin-left:auto;font-size:11px;font-weight:700;color:#6c2bd9;text-decoration:none;padding:3px 8px;border-radius:999px;background:#fff;border:1px solid #e2d6fb}
.sync-card-head a:hover{background:#f3edff}
.sync-check{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#00c875;position:relative;box-shadow:0 0 0 3px #00c87526}
.sync-check::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sync-card-venue{margin-top:7px;font-size:12px;font-weight:700;color:#24323b;line-height:1.35;overflow-wrap:anywhere}
.sync-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sync-card-meta span{display:inline-flex;align-items:baseline;gap:5px;padding:4px 8px;border-radius:6px;background:#ffffffcc;border:1px solid #dfe6ea;font-size:11px;font-weight:700;color:#24323b}
.sync-card-meta small{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7a8790}
.sync-card.just-synced{animation:syncPop .55s ease-out}
.sync-card.just-synced .sync-check{animation:syncPulse 1.2s ease-out}
@keyframes syncPop{0%{transform:scale(.97);opacity:0}60%{transform:scale(1.01);opacity:1}100%{transform:none}}
@keyframes syncPulse{0%{box-shadow:0 0 0 0 #00c87599}100%{box-shadow:0 0 0 12px #00c87500}}
.edit-details-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 11px;border:1px dashed #c4ced4;border-radius:8px;background:#fff;color:#41505a;font-size:12px;font-weight:700;cursor:pointer}
.edit-details-btn:hover{background:#f5f8fa;border-color:#9fb0ba}
.edit-details-btn i{font-style:normal;transition:transform .15s}
.edit-details-btn[aria-expanded="true"] i{transform:rotate(180deg)}
.project-details{display:grid;gap:10px}
.project-details[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.sync-card.just-synced,.sync-card.just-synced .sync-check{animation:none}}
/* =========================================================
V8.0 — program redesign (Apple / UniFi style).
Only the app chrome changes; the packing list paper keeps its own styles.
========================================================= */
:root{
--v8-navy:#101820;--v8-navy-2:#17394c;--v8-orange:#f68b1f;--v8-orange-2:#e67b11;--v8-monday:#6c2bd9;--v8-green:#00c875;
--v8-bg:#f5f5f7;--v8-card:#fff;--v8-line:rgba(16,24,32,.08);--v8-line-2:rgba(16,24,32,.14);
--v8-text:#101820;--v8-muted:#6e7781;--v8-faint:#9aa3ab;--v8-canvas:#e8e8ed;
--v8-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,Arial,sans-serif;
}
body{background:var(--v8-bg)!important}
.v8-topbar,.editor,.v8-floatbar,.v8-menu{font-family:var(--v8-font);-webkit-font-smoothing:antialiased;color:var(--v8-text)}
.v8-topbar i.ti,.editor i.ti,.v8-floatbar i.ti{font-size:17px;line-height:1}
/* Top bar */
.v8-topbar{position:relative;z-index:30;height:56px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 18px;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--v8-line)}
.v8-brand{display:flex;align-items:center;gap:12px;min-width:0}
.v8-brand img{height:22px;width:auto}
.v8-sep{width:1px;height:18px;background:var(--v8-line-2)}
.v8-product{font-size:13px;font-weight:600;color:var(--v8-muted);white-space:nowrap}
.v8-docstatus{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px}
.v8-docstatus b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
.v8-docstatus #status{color:var(--v8-muted);font-size:12px;white-space:nowrap}
.v8-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--v8-green)}
.v8-dot.dirty{background:var(--v8-orange)}
.v8-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.v8-btn{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 13px;border-radius:9px;border:1px solid transparent;background:transparent;font:600 13px var(--v8-font);color:var(--v8-text);box-shadow:none;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.v8-btn:focus-visible,.v8-menu button:focus-visible,.editor button:focus-visible,.v8-floatbar button:focus-visible{outline:2px solid var(--v8-navy-2);outline-offset:2px}
.v8-icon{width:32px;padding:0;justify-content:center;color:var(--v8-navy-2)}
.v8-icon:hover{background:rgba(16,24,32,.06)}
.v8-monday{color:var(--v8-monday);border-color:rgba(108,43,217,.35)}
.v8-monday:hover{background:rgba(108,43,217,.07)}
.v8-monday:disabled{opacity:.6;cursor:progress}
.v8-primary{background:var(--v8-orange);color:#fff}
.v8-primary:hover{background:var(--v8-orange-2)}
.v8-menu-wrap{position:relative}
.v8-menu{position:absolute;right:0;top:40px;width:230px;padding:6px;background:#fff;border:1px solid var(--v8-line);border-radius:12px;box-shadow:0 12px 32px rgba(16,24,32,.14)}
.v8-menu[hidden]{display:none}
.v8-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;border-radius:8px;font:500 13px var(--v8-font);color:var(--v8-text);text-align:left;box-shadow:none}
.v8-menu button:hover{background:var(--v8-bg)}
.v8-menu kbd{margin-left:auto;font:500 11px var(--v8-font);color:var(--v8-faint)}
.v8-menu hr{border:0;border-top:1px solid var(--v8-line);margin:6px 4px}
.v8-ver{padding:4px 10px 6px;font-size:11px;color:var(--v8-faint)}
/* Layout */
.layout{height:calc(100vh - 56px)!important;padding:0!important;gap:0!important;background:var(--v8-bg)!important;grid-template-columns:380px minmax(0,1fr)!important}
.editor{background:transparent!important;border:0!important;border-right:1px solid var(--v8-line)!important;border-radius:0!important;box-shadow:none!important;padding:16px!important;display:flex!important;flex-direction:column!important;gap:12px!important;overflow-y:auto!important;overscroll-behavior:contain}
.editor>*{flex-shrink:0}
.v8-card{background:var(--v8-card)!important;border:1px solid var(--v8-line)!important;border-radius:14px!important;padding:14px!important;box-shadow:none!important;margin:0!important}
.project-fields.v8-card{display:flex!important;flex-direction:column;gap:10px!important}
.v8-label{display:block;font-size:12px;font-weight:600;color:var(--v8-muted);margin:0 0 6px}
.v8-field{display:flex;align-items:center;gap:8px;height:38px;padding:0 11px;border-radius:10px;background:var(--v8-bg);border:1px solid transparent;color:var(--v8-muted);transition:background .15s,border-color .15s,box-shadow .15s}
.v8-field input{flex:1;min-width:0;height:auto!important;min-height:0!important;border:0!important;background:none!important;outline:0;padding:0!important;font:500 14px var(--v8-font)!important;color:var(--v8-text);box-shadow:none!important}
.v8-field:focus-within{background:#fff;border-color:var(--v8-navy-2);box-shadow:0 0 0 3px rgba(23,57,76,.12)}
.editor .monday-project-status:empty{display:none}
.editor .monday-project-status{margin-top:6px}
.editor .project-details label{font:600 12px var(--v8-font);color:var(--v8-muted)}
.editor .project-details input{height:36px;border:1px solid var(--v8-line-2)!important;border-radius:9px!important;background:#fff;font:500 13px var(--v8-font);box-shadow:none}
.editor .project-details input:focus{outline:0;border-color:var(--v8-navy-2)!important;box-shadow:0 0 0 3px rgba(23,57,76,.12)}
.edit-details-btn{width:auto!important;align-self:flex-start;justify-content:flex-start!important;gap:6px;padding:2px 0!important;border:0!important;background:none!important;color:var(--v8-navy-2)!important;font:600 12px var(--v8-font)!important}
.edit-details-btn i.ti{font-size:15px}
.edit-details-btn .v8-chev{transition:transform .15s}
.edit-details-btn[aria-expanded="true"] .v8-chev{transform:rotate(180deg)}
.sync-card{border-radius:12px!important;background:#f0fbf5!important;border-color:#c9eed9!important}
/* Sidebar tabs */
.v8-tabs{display:flex;padding:3px;border-radius:11px;background:rgba(16,24,32,.06);gap:2px}
.v8-tabs button{flex:1;height:30px;border:0;border-radius:8px;background:none;font:600 12.5px var(--v8-font);color:var(--v8-muted);box-shadow:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0}
.v8-tabs button[aria-selected="true"]{background:#fff;color:var(--v8-text);box-shadow:0 1px 3px rgba(16,24,32,.12)}
.v8-count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:rgba(16,24,32,.08);font-size:11px;line-height:18px;color:var(--v8-text)}
.v8-tabs button[aria-selected="true"] .v8-count{background:var(--v8-orange);color:#fff}
.v8-pane[hidden]{display:none!important}
.v8-pane-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font:600 13px var(--v8-font)}
.v8-pane-title small{font-weight:500;color:var(--v8-muted);font-size:12px}
.v8-chips{display:flex;gap:6px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:none}
.v8-chips::-webkit-scrollbar{display:none}
.v8-chip{flex:0 0 auto;height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--v8-line-2);background:#fff;font:600 12px var(--v8-font);color:var(--v8-muted);box-shadow:none}
.v8-chip:hover{border-color:var(--v8-navy-2);color:var(--v8-text)}
.v8-chip.on{background:var(--v8-navy);border-color:var(--v8-navy);color:#fff}
.v8-source-row{display:flex;align-items:center;justify-content:space-between;margin:8px 0 4px;color:var(--v8-muted);font-size:12px;font-weight:500}
.v8-seg{display:flex;width:150px;padding:3px;border-radius:10px;background:var(--v8-bg);gap:2px}
.v8-seg button{flex:1;height:26px;border:0;border-radius:7px;background:none;font:600 12px var(--v8-font);color:var(--v8-muted);box-shadow:none;padding:0}
.v8-seg button.on{background:#fff;color:var(--v8-text);box-shadow:0 1px 3px rgba(16,24,32,.12)}
/* Rows (presets and packing list) */
.v8-rows{display:flex;flex-direction:column;margin-top:6px}
.v8-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid var(--v8-line)}
.v8-row:first-child{border-top:0}
.v8-thumb{flex:0 0 auto;width:44px;height:44px;border-radius:10px;background:var(--v8-bg);display:grid;place-items:center;overflow:hidden;color:var(--v8-faint)}
.v8-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.v8-thumb i.ti{font-size:20px}
.v8-name{flex:1;min-width:0}
.v8-name b{display:block;font:600 13px var(--v8-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v8-name small{display:flex;align-items:center;gap:5px;margin-top:2px;color:var(--v8-muted);font-size:11.5px}
.v8-pill{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font:700 10.5px var(--v8-font);letter-spacing:.03em}
.v8-pill.uk{background:#e8f0f8;color:#17394c}
.v8-pill.es{background:#fdf0e1;color:#9a4f06}
.v8-pill-btn{border:0!important;background:none!important;padding:0!important;box-shadow:none!important;border-radius:6px}
.v8-pill-btn:hover .v8-pill{filter:brightness(.95)}
.v8-add{flex:0 0 auto;width:30px;height:30px;padding:0!important;border-radius:50%!important;border:0!important;background:rgba(246,139,31,.12)!important;color:var(--v8-orange-2)!important;display:grid!important;place-items:center;box-shadow:none!important;transition:background .15s,color .15s}
.v8-add:hover{background:var(--v8-orange)!important;color:#fff!important}
.v8-stepper{flex:0 0 auto;display:flex;align-items:center;height:30px;border-radius:9px;background:var(--v8-bg)}
.v8-stepper.v8-in-list{background:rgba(246,139,31,.12)}
.v8-stepper button{width:26px;height:30px;padding:0!important;border:0!important;background:none!important;color:var(--v8-muted);display:grid;place-items:center;box-shadow:none!important}
.v8-stepper.v8-in-list button{color:#c46508}
.v8-stepper button i.ti{font-size:14px}
.v8-stepper input{width:32px!important;height:24px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:6px!important;background:none!important;text-align:center;font:700 13px var(--v8-font)!important;color:var(--v8-text);box-shadow:none!important;-moz-appearance:textfield}
.v8-stepper input::-webkit-inner-spin-button,.v8-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.v8-stepper input:focus{outline:0;background:#fff!important;box-shadow:0 0 0 2px rgba(246,139,31,.5)!important}
.v8-row-actions{display:flex;gap:0;opacity:0;transition:opacity .15s}
.v8-row:hover .v8-row-actions,.v8-row:focus-within .v8-row-actions{opacity:1}
.v8-ghost{width:26px;height:26px;padding:0!important;border:0!important;border-radius:7px!important;background:none!important;color:var(--v8-muted);display:grid;place-items:center;box-shadow:none!important}
.v8-ghost:hover{background:rgba(16,24,32,.06)!important;color:var(--v8-text)}
.v8-ghost.danger:hover{color:#c0392b}
.v8-ghost i.ti{font-size:15px}
.v8-empty{padding:22px 8px;text-align:center;color:var(--v8-muted);font-size:12px;line-height:1.5}
.v8-quiet{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;padding-top:10px;border-top:1px solid var(--v8-line)}
.v8-quiet button{display:inline-flex;align-items:center;gap:5px;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;font:600 12px var(--v8-font)!important;color:var(--v8-navy-2)!important;min-height:0!important;width:auto!important}
.v8-quiet button i.ti{font-size:15px}
.v8-quiet button:hover{color:var(--v8-orange-2)!important}
/* Preview canvas */
.preview-panel{position:relative!important;background:var(--v8-canvas)!important;border:0!important;border-radius:0!important;box-shadow:none!important;display:flex;flex-direction:column;min-height:0}
.preview-panel .desk{flex:1;background:var(--v8-canvas)!important;padding:32px 24px 96px!important}
.preview-panel .desk .paper{box-shadow:0 1px 2px rgba(0,0,0,.06),0 12px 40px rgba(16,24,32,.12)!important}
.v8-floatbar{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:2px;padding:5px 6px 5px 14px;border-radius:999px;background:rgba(16,24,32,.86);color:#fff;font-size:12px;font-weight:600;white-space:nowrap;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.v8-floatsep{width:1px;height:16px;background:rgba(255,255,255,.2);margin:0 6px}
.v8-floatbar button{height:28px;min-width:28px;padding:0 6px!important;border:0!important;border-radius:999px!important;background:none!important;color:#fff!important;font:600 12px var(--v8-font)!important;display:grid;place-items:center;box-shadow:none!important}
.v8-floatbar button:hover{background:rgba(255,255,255,.12)!important}
.v8-floatbar i.ti{font-size:15px}
@media (max-width:900px){
.v8-topbar{grid-template-columns:auto 1fr;height:auto;min-height:56px;padding:8px 12px}
.v8-docstatus{display:none}
.v8-product,.v8-sep{display:none}
.layout{height:auto!important;grid-template-columns:1fr!important}
.editor{border-right:0!important;overflow:visible!important}
.v8-floatbar{position:sticky;left:auto;transform:none;margin:0 auto 12px;width:max-content}
}
@media (max-width:620px){
.v8-monday span,.v8-primary span{display:none}
.v8-monday,.v8-primary{width:34px;padding:0;justify-content:center}
.v8-row-actions{opacity:1}
}
@media print{.v8-topbar,.v8-floatbar{display:none!important}}
.v8-row-controls{display:flex;align-items:center;gap:8px;margin-top:5px}
.v8-row-controls small{margin:0;color:var(--v8-muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#addedItems .v8-row{align-items:flex-start}
#addedItems .v8-row-actions{align-self:center}
.v8-source-row .v8-seg{width:180px}
.v8-setall{display:flex;align-items:center;gap:6px;font:600 12px var(--v8-font);color:var(--v8-navy-2)}
.v8-setall span{display:inline-flex;align-items:center;gap:5px;margin-right:4px}
.v8-setall span i.ti{font-size:15px}
.v8-quiet .v8-setall-btn{height:26px;padding:0 10px!important;border-radius:7px!important;border:1px solid var(--v8-line-2)!important;background:#fff!important;font:600 12px var(--v8-font)!important;color:var(--v8-text)!important;box-shadow:none!important}
.v8-quiet .v8-setall-btn:hover{border-color:var(--v8-navy-2)!important}
.v8-quiet .v8-setall-btn[data-setall="UK"]:hover{background:#e8f0f8!important}
.v8-quiet .v8-setall-btn[data-setall="SPAIN"]:hover{background:#fdf0e1!important}
/* =========================================================
V8.1 — Appearance switch + dark interface.
Screen only: printing, the packing list sheet and PDFs always stay light.
========================================================= */
.sb-appearance{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;font:500 13px var(--v8-font);color:var(--v8-text)}
.sb-theme-seg{display:flex;padding:2px;border-radius:9px;background:var(--v8-bg);gap:2px}
.sb-theme-seg button{width:30px!important;height:24px;padding:0!important;border:0!important;border-radius:7px!important;background:none!important;color:var(--v8-muted)!important;display:grid!important;place-items:center;box-shadow:none!important}
.sb-theme-seg button i.ti{font-size:15px}
.sb-theme-seg button.on{background:#fff!important;color:var(--v8-text)!important;box-shadow:0 1px 3px rgba(16,24,32,.15)!important}
@media screen{
html[data-theme="dark"]{
--v8-bg:#0f1115;--v8-card:#171a1f;--v8-line:rgba(255,255,255,.08);--v8-line-2:rgba(255,255,255,.14);
--v8-text:#eef1f4;--v8-muted:#9aa4ad;--v8-faint:#6b747c;--v8-canvas:#0a0c0f;--v8-navy-2:#a9c6d8;
color-scheme:dark;
}
html[data-theme="dark"] body{background:var(--v8-bg)!important}
/* The packing list sheet is a document: keep its original light colours. */
html[data-theme="dark"] .desk .paper,html[data-theme="dark"] #printRoot{color:#1c252b;color-scheme:light}
html[data-theme="dark"] .v8-topbar{background:rgba(23,26,31,.8)}
html[data-theme="dark"] .v8-brand img{filter:invert(1) hue-rotate(180deg) saturate(1.4)}
html[data-theme="dark"] .v8-btn{color:var(--v8-text)}
html[data-theme="dark"] .v8-icon{color:#c9d3db}
html[data-theme="dark"] .v8-icon:hover{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .v8-monday{color:#b9a2ff;border-color:rgba(185,162,255,.4)}
html[data-theme="dark"] .v8-monday:hover{background:rgba(185,162,255,.1)}
html[data-theme="dark"] .v8-menu{background:#1c2026;border-color:var(--v8-line);box-shadow:0 16px 40px rgba(0,0,0,.55)}
html[data-theme="dark"] .v8-menu button{color:var(--v8-text)}
html[data-theme="dark"] .v8-menu button:hover{background:#262b33}
html[data-theme="dark"] .sb-theme-seg{background:#0f1115}
html[data-theme="dark"] .sb-theme-seg button.on{background:#2c323b!important}
html[data-theme="dark"] .editor{color:var(--v8-text)}
html[data-theme="dark"] .v8-field{background:#1e2228}
html[data-theme="dark"] .v8-field:focus-within{background:#23272e;border-color:#8fb4cc;box-shadow:0 0 0 3px rgba(143,180,204,.18)}
html[data-theme="dark"] .editor .project-details input,
html[data-theme="dark"] .editor .project-details select{background:#1e2228;color:var(--v8-text);border-color:var(--v8-line-2)!important}
html[data-theme="dark"] .sync-card{background:rgba(0,200,117,.09)!important;border-color:rgba(0,200,117,.32)!important}
html[data-theme="dark"] .sync-card-head b{color:#5fe0a6}
html[data-theme="dark"] .sync-card-head a{background:#1c2026;border-color:rgba(185,162,255,.35);color:#b9a2ff}
html[data-theme="dark"] .sync-card-venue{color:var(--v8-text)}
html[data-theme="dark"] .sync-card-meta span{background:rgba(255,255,255,.06);border-color:var(--v8-line-2);color:var(--v8-text)}
html[data-theme="dark"] .monday-project-status{color:var(--v8-muted)}
html[data-theme="dark"] .monday-project-results{background:#1c2026;border-color:var(--v8-line-2);box-shadow:0 14px 34px rgba(0,0,0,.55)}
html[data-theme="dark"] .monday-project-result{background:transparent;color:var(--v8-text)}
html[data-theme="dark"] .monday-project-result:hover,html[data-theme="dark"] .monday-project-result:focus{background:#262b33}
html[data-theme="dark"] .monday-project-result small{color:var(--v8-muted)}
html[data-theme="dark"] .v8-tabs{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .v8-tabs button[aria-selected="true"]{background:#2c323b;color:var(--v8-text);box-shadow:none}
html[data-theme="dark"] .v8-count{background:rgba(255,255,255,.1);color:var(--v8-text)}
html[data-theme="dark"] .v8-chip{background:transparent;border-color:var(--v8-line-2);color:var(--v8-muted)}
html[data-theme="dark"] .v8-chip:hover{border-color:#8fb4cc;color:var(--v8-text)}
html[data-theme="dark"] .v8-chip.on{background:#eef1f4;border-color:#eef1f4;color:#101820}
html[data-theme="dark"] .v8-seg{background:#1e2228}
html[data-theme="dark"] .v8-seg button.on{background:#2c323b;color:var(--v8-text);box-shadow:none}
html[data-theme="dark"] .v8-thumb{background:#fff}
html[data-theme="dark"] .v8-name b{color:var(--v8-text)}
html[data-theme="dark"] .v8-pill.uk{background:rgba(110,160,210,.18);color:#a9cdf0}
html[data-theme="dark"] .v8-pill.es{background:rgba(246,139,31,.16);color:#f7b26e}
html[data-theme="dark"] .v8-add{background:rgba(246,139,31,.16)!important;color:#f7a04a!important}
html[data-theme="dark"] .v8-add:hover{background:var(--v8-orange)!important;color:#fff!important}
html[data-theme="dark"] .v8-stepper{background:#1e2228}
html[data-theme="dark"] .v8-stepper.v8-in-list{background:rgba(246,139,31,.16)}
html[data-theme="dark"] .v8-stepper.v8-in-list button{color:#f7a04a}
html[data-theme="dark"] .v8-stepper input{color:var(--v8-text)}
html[data-theme="dark"] .v8-stepper input:focus{background:#2c323b!important}
html[data-theme="dark"] .v8-ghost:hover{background:rgba(255,255,255,.08)!important;color:var(--v8-text)}
html[data-theme="dark"] .v8-quiet .v8-setall-btn{background:#1e2228!important;color:var(--v8-text)!important}
html[data-theme="dark"] .v8-quiet .v8-setall-btn[data-setall="UK"]:hover{background:rgba(110,160,210,.18)!important}
html[data-theme="dark"] .v8-quiet .v8-setall-btn[data-setall="SPAIN"]:hover{background:rgba(246,139,31,.16)!important}
html[data-theme="dark"] .preview-panel .desk .paper{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 18px 50px rgba(0,0,0,.6)!important}
html[data-theme="dark"] .v8-floatbar{background:rgba(40,45,53,.92)}
/* Dialogs (item editor, preset manager, AI render) */
html[data-theme="dark"] dialog{background:#171a1f;color:var(--v8-text);border-color:var(--v8-line-2)}
html[data-theme="dark"] dialog input,html[data-theme="dark"] dialog select,html[data-theme="dark"] dialog textarea{background:#1e2228;color:var(--v8-text);border-color:var(--v8-line-2)}
html[data-theme="dark"] dialog button{background:#262b33;color:var(--v8-text);border-color:var(--v8-line-2)}
html[data-theme="dark"] dialog label{color:var(--v8-muted)}
}
/* =========================================================
V8.2 — Rich item notes (bold, size, text colour, highlight).
The editor is a white "paper" surface in both themes because the
colours and highlights are what gets printed on the packing list.
========================================================= */
.note-field{display:grid;gap:6px}
.note-label{font-size:11px;color:#53616b;font-weight:700}
.note-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--v8-line-2);border-radius:10px;background:var(--v8-bg);font-family:var(--v8-font)}
.note-toolbar .note-tool{height:28px;min-width:28px;display:inline-flex;align-items:center;justify-content:center;gap:1px;padding:0 6px;border:0;border-radius:8px;background:none;color:var(--v8-text);font:700 13px var(--v8-font);box-shadow:none;transition:background .15s,color .15s}
.note-toolbar .note-tool:hover{background:rgba(16,24,32,.07)}
.note-toolbar .note-tool.on{background:#fff;color:var(--v8-navy-2);box-shadow:0 1px 3px rgba(16,24,32,.14)}
.note-toolbar .note-tool:focus-visible{outline:2px solid var(--v8-navy-2);outline-offset:1px}
.note-toolbar .note-tool i.ti{font-size:16px}
.note-toolbar .note-caret{font-size:11px!important;color:var(--v8-faint)}
.note-sizes{display:flex;align-items:center;gap:1px}
.note-sizes .note-tool{width:30px;line-height:1}
.note-sep{width:1px;height:18px;margin:0 4px;background:var(--v8-line-2)}
.note-tool-wrap{position:relative}
.note-pop{position:absolute;z-index:5;top:34px;left:0;display:grid;grid-template-columns:repeat(6,24px);gap:6px;padding:8px;background:#fff;border:1px solid var(--v8-line);border-radius:12px;box-shadow:0 12px 32px rgba(16,24,32,.16)}
.note-pop[hidden]{display:none}
.note-pop .note-swatch{width:24px;height:24px;padding:0;border-radius:50%;border:1px solid rgba(16,24,32,.15);background:var(--sw);box-shadow:none;display:grid;place-items:center;color:var(--v8-muted)}
.note-pop .note-swatch:hover{transform:scale(1.12);background:var(--sw)}
.note-pop .note-swatch.none{background:#fff}
.note-pop .note-swatch.none i{font-size:14px}
.note-editor{min-height:92px;max-height:220px;overflow-y:auto;padding:9px 11px;border:1px solid #cbd3d8;border-radius:9px;background:#fff;color:#101820;font:400 13px/1.45 var(--v8-font);white-space:pre-wrap;word-break:break-word;outline:0;cursor:text}
.note-editor:focus{border-color:var(--v8-navy-2);box-shadow:0 0 0 3px rgba(23,57,76,.12)}
.note-editor:empty::before{content:attr(data-placeholder);color:#9aa3ab;pointer-events:none}
.note-editor b,.doc-notes b{font-weight:800}
.note-editor span[style*="background-color"],.doc-notes span[style*="background-color"]{padding:0 2px;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.doc-notes span[style*="font-size"]{line-height:1.2}
@media print{.doc-notes span[style*="background-color"]{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
@media screen{
html[data-theme="dark"] .note-label{color:var(--v8-muted)}
html[data-theme="dark"] .note-toolbar{background:#1e2228;border-color:var(--v8-line-2)}
html[data-theme="dark"] dialog .note-toolbar .note-tool{background:none;color:var(--v8-text)}
html[data-theme="dark"] dialog .note-toolbar .note-tool:hover{background:rgba(255,255,255,.08)}
html[data-theme="dark"] dialog .note-toolbar .note-tool.on{background:#2c323b;color:#fff;box-shadow:none}
html[data-theme="dark"] .note-pop{background:#1c2026;border-color:var(--v8-line-2);box-shadow:0 14px 34px rgba(0,0,0,.55)}
html[data-theme="dark"] dialog .note-pop .note-swatch{background:var(--sw);border-color:rgba(255,255,255,.2)}
html[data-theme="dark"] dialog .note-pop .note-swatch.none{background:#fff;color:#6e7781}
html[data-theme="dark"] .note-editor{border-color:var(--v8-line-2)}
html[data-theme="dark"] .note-editor:focus{border-color:#8fb4cc;box-shadow:0 0 0 3px rgba(143,180,204,.2)}
}
/* =========================================================
V8.3 — Revision stamp (Rev. N · Updated date/time) in the page footer
and on the cover, so printed copies show which version they are.
========================================================= */
.page-footer .doc-rev{flex:1;text-align:center;color:#5b6b75;font-size:9px;white-space:nowrap}
.print-cover-meta{grid-template-columns:repeat(4,1fr)!important}
@media print{
.print-cover-meta{grid-template-columns:repeat(4,1fr)!important}
}
/* =========================================================
V8.4 — List pages in the new brand style (cover unchanged).
Navy header with the revision, info row like the Label Generator,
one rounded card per group. Same rules for screen, print and PDF.
========================================================= */
.lp-measure{position:absolute;left:-10000px;top:0;width:794px;visibility:hidden;pointer-events:none}
.paper.lp,#listPages .paper.lp,#printListPages .paper.lp,.lp-measure .paper.lp{
box-sizing:border-box!important;height:1123px!important;min-height:1123px!important;max-height:1123px!important;
padding:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;background:#fff!important;color:#101820;
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased
}
.lp *{box-sizing:border-box}
.lp-band,.lp-stripe,.lp-info,.lp-foot,.lp-card{flex-shrink:0}
.lp-band{position:relative;padding:26px 36px 28px;background:#101820;color:#fff;overflow:hidden}
.lp-band::after{content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(246,139,31,.55),rgba(246,139,31,0) 65%)}
.lp-band>*{position:relative;z-index:1}
.lp-band-top{display:flex;justify-content:space-between;align-items:flex-start}
.lp-band-top img{width:200px;height:auto;display:block}
.lp-kind{text-align:right;font:600 11px "KaisarSB",Arial,sans-serif;letter-spacing:.22em;color:#f68b1f}
.lp-rev{display:block;margin-top:8px;font:600 24px/1 "KaisarSB",Arial,sans-serif;letter-spacing:.04em;color:#fff}
.lp-kind small{display:block;margin-top:5px;font:500 12px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;letter-spacing:0;color:rgba(255,255,255,.8)}
.lp-band h1{margin:18px 0 0;font:600 28px/1.2 "KaisarSB",Arial,sans-serif;text-transform:uppercase;letter-spacing:.01em;color:#fff}
.lp-client{display:table;margin-bottom:8px;padding:3px 10px;border-radius:6px;background:#f68b1f;font:600 11px/1.4 "KaisarSB",Arial,sans-serif;letter-spacing:.06em;color:#fff}
.lp-stand{display:block}
.lp-stripe{height:5px;background:linear-gradient(90deg,#f68b1f,#ffb15e)}
.lp-info{display:grid;grid-template-columns:repeat(4,1fr);padding:16px 36px 14px;border-bottom:1px solid #e3e7ea}
.lp-info div{min-width:0;padding:0 12px;text-align:center}
.lp-info div+div{border-left:1px solid #e3e7ea}
.lp-info i{font-size:20px;color:#f68b1f}
.lp-info small{display:block;margin-top:2px;font:600 9px "KaisarSB",Arial,sans-serif;letter-spacing:.1em;color:#6e7781}
.lp-info b{display:block;margin-top:5px;padding-top:5px;border-top:1.5px solid #f68b1f;font:600 12.5px "KaisarSB",Arial,sans-serif;text-transform:uppercase;overflow-wrap:anywhere}
.lp-body{flex:1 1 auto;min-height:0;padding:0 36px;overflow:hidden}
.lp-body .doc-empty{margin-top:40px;text-align:center;color:#9aa3ab;font-size:13px}
.lp-card{margin-top:14px;border:1px solid #e3e7ea;border-radius:14px;overflow:hidden;break-inside:auto}
.lp-card-head{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#f6f7f8}
.lp-card-head h2{margin:0;font:600 14px "KaisarSB",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#101820}
.lp-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#f68b1f}
.lp-count{margin-left:auto;padding:3px 9px;border-radius:999px;background:#fff;font:600 10px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#6e7781}
.lp-cols,.lp-row{display:grid;grid-template-columns:44px 74px 1fr 1fr 52px 120px;align-items:center;column-gap:10px;padding:0 14px}
.lp-cols{padding-top:7px;padding-bottom:5px;border-bottom:1px solid #e3e7ea;font:600 8.5px "KaisarSB",Arial,sans-serif;letter-spacing:.12em;color:#9aa3ab}
.lp-checks{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;text-align:center}
.lp-row{min-height:60px;padding-top:6px;padding-bottom:6px}
.lp-row+.lp-row{border-top:1px solid #e3e7ea}
.lp-qty{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#f68b1f;color:#fff;font:600 14px "KaisarSB",Arial,sans-serif}
.lp-pic{width:74px;height:48px;display:grid;place-items:center}
.lp-pic img{max-width:70px;max-height:46px;object-fit:contain}
.lp-name{min-width:0;font:600 13px/1.2 "KaisarSB",Arial,sans-serif;text-transform:uppercase;color:#101820;overflow-wrap:anywhere}
.lp-notes{min-width:0;font:400 11px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#36424b;overflow-wrap:anywhere}
.lp-notes b{font-weight:800;color:#101820}
.lp-notes span[style*="background-color"]{padding:0 2px;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lp-notes span[style*="font-size"]{line-height:1.2}
.lp-none{color:#c4cacf}
.lp-src{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 9px "KaisarSB",Arial,sans-serif;letter-spacing:.06em;color:#6e7781}
.lp-src img{width:22px;height:15px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(16,24,32,.08)}
.lp-box{width:20px;height:20px;border:1.5px solid #aeb5bb;border-radius:50%}
.lp-foot{display:flex;justify-content:space-between;align-items:center;margin:14px 36px 0;padding:10px 0 20px;border-top:1px solid #e3e7ea;font:500 10px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#9aa3ab}
.lp-foot-rev{font:600 12px "KaisarSB",Arial,sans-serif;letter-spacing:.04em;color:#101820}
.lp-foot b{font:600 11px "KaisarSB",Arial,sans-serif;letter-spacing:.06em;color:#101820}
@media print{
#printListPages .paper.lp{height:297mm!important;min-height:297mm!important;max-height:297mm!important;padding:0!important}
.lp,.lp *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}
/* ============================================================
V8.6 — Analyse Render (Beta): purple/orange glow button and
redesigned Generate from Render dialog
============================================================ */
@property --ai-ang{syntax:"";inherits:false;initial-value:0deg}
@keyframes aiAurora{to{background-position:200% 0}}
@keyframes aiGlow{0%,100%{box-shadow:0 0 6px 0 rgba(108,43,217,.45),0 0 0 0 rgba(246,139,31,0)}50%{box-shadow:0 0 16px 3px rgba(108,43,217,.75),0 0 34px 8px rgba(246,139,31,.45)}}
@keyframes aiTwinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(12deg)}}
@keyframes aiRing{to{--ai-ang:360deg}}
@keyframes aiBreathe{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.08)}}
@keyframes aiBlink{0%,100%{opacity:0}50%{opacity:1}}
@keyframes aiScan{0%{top:-30%}100%{top:100%}}
@keyframes aiBar{0%{left:-40%}100%{left:100%}}
@keyframes aiLineIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Top bar button */
.v8-ai{position:relative;border:0;color:#fff!important;background:linear-gradient(110deg,var(--v8-monday),var(--v8-orange),var(--v8-monday));background-size:200% 100%;animation:aiAurora 6s linear infinite,aiGlow 2.2s ease-in-out infinite}
.v8-ai i{display:inline-block;animation:aiTwinkle 2.4s ease-in-out infinite}
.v8-beta{display:inline-flex;align-items:center;height:16px;padding:0 5px;border-radius:5px;background:rgba(255,255,255,.25);font:800 9px var(--v8-font);letter-spacing:.08em}
@media (max-width:620px){.v8-ai span{display:none}}
/* Dialog shell */
.ai-render-dialog [hidden]{display:none!important}
.ai-render-dialog.has-results #analyseRenderBtn{display:none!important}
.ai-render-dialog{width:min(760px,calc(100vw - 28px))!important;height:min(760px,calc(100vh - 28px))!important;border-radius:20px!important;background:var(--v8-bg)!important;color:var(--v8-text)!important;font-family:var(--v8-font)!important;box-shadow:0 30px 90px rgba(7,22,31,.45)!important}
.ai-render-dialog button,.ai-render-dialog input,.ai-render-dialog select{font-family:var(--v8-font)!important}
.ai-dialog-head{display:flex!important;align-items:flex-start!important;gap:14px!important;padding:20px 22px 16px!important;background:var(--v8-card)!important;color:var(--v8-text)!important;border-bottom:1px solid var(--v8-line)}
.ai-head-icon{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:21px;background:linear-gradient(110deg,var(--v8-monday),var(--v8-orange),var(--v8-monday));background-size:200% 100%;animation:aiAurora 6s linear infinite,aiGlow 2.2s ease-in-out infinite}
.ai-head-icon i{animation:aiTwinkle 2.4s ease-in-out infinite}
.ai-head-copy{flex:1;min-width:0}
.ai-dialog-head h2{display:flex;align-items:center;gap:8px;margin:1px 0 4px!important;font-size:19px!important;font-weight:700;letter-spacing:-.01em}
.ai-dialog-head p{margin:0!important;color:var(--v8-muted)!important;font-size:13px!important}
.ai-beta{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:5px;background:var(--v8-orange);color:#fff;font:800 9.5px var(--v8-font);letter-spacing:.08em}
.ai-dialog-head .icon-close{flex:0 0 auto;display:grid;place-items:center;width:30px!important;height:30px!important;background:var(--v8-bg)!important;color:var(--v8-muted)!important;font-size:16px!important}
.ai-workflow{display:flex;flex-direction:column;gap:12px;padding:18px 22px!important}
/* Drop zone → chosen file card */
.ai-upload-card{display:grid!important;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px!important;padding:12px 14px!important;border:1px solid var(--v8-line)!important;border-radius:14px!important;background:var(--v8-card)!important}
.ai-render-dialog:not(.has-file) .ai-upload-card{grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px!important;min-height:230px;padding:24px!important;border:1.5px dashed var(--v8-line-2)!important;border-radius:16px!important}
.ai-upload-card.dragover{border-color:var(--v8-monday)!important;background:rgba(108,43,217,.06)!important}
.ai-drop-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(108,43,217,.1);color:var(--v8-monday);font-size:28px;margin-bottom:4px}
.ai-file-thumb{width:40px;height:48px;border-radius:8px;display:grid;place-items:center;background:#fff2e5;color:#d05f12;font:800 10px var(--v8-font)}
.ai-upload-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.ai-upload-copy b{font-size:14px!important;font-weight:600}
.ai-upload-copy span{font-size:12px!important;color:var(--v8-muted)!important}
.ai-render-dialog:not(.has-file) .ai-upload-copy span{white-space:normal!important}
.ai-file-ok{color:var(--v8-green);font-size:20px}
.ai-drop-hint{color:var(--v8-faint);font-size:12px}
#chooseRenderBtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px!important;border-radius:10px!important;border:1px solid var(--v8-line-2)!important;background:var(--v8-card)!important;color:var(--v8-text)!important;font-weight:600;font-size:13px}
.ai-render-dialog.has-file #chooseRenderBtn{border-color:transparent!important;background:transparent!important;color:var(--v8-muted)!important}
.ai-render-dialog.has-file #chooseRenderBtn i{display:none}
.ai-render-dialog.has-file .ai-drop-icon,.ai-render-dialog.has-file .ai-drop-hint,
.ai-render-dialog:not(.has-file) .ai-file-thumb,.ai-render-dialog:not(.has-file) .ai-file-ok{display:none}
.ai-render-dialog.has-file .ai-drop-title{font-size:0!important}
.ai-render-dialog.has-file .ai-drop-title::before{content:"Stand render PDF";font-size:14px}
.ai-render-dialog.is-busy #chooseRenderBtn,.ai-render-dialog.is-busy .ai-file-ok{visibility:hidden}
.ai-analysis-note{gap:10px!important;margin:0!important;padding:11px 13px!important;border-radius:12px!important;background:var(--v8-card)!important;border:1px solid var(--v8-line);color:var(--v8-muted)!important;font-size:12px!important;line-height:1.5!important}
.ai-analysis-note i{color:var(--v8-monday);font-size:17px;margin-top:1px}
.ai-analysis-note b{white-space:normal!important;color:var(--v8-text)!important}
.ai-render-dialog.is-busy .ai-analysis-note,.ai-render-dialog.has-results .ai-analysis-note{display:none!important}
/* Analysing: dark tech panel with breathing glow */
.ai-status{position:relative;overflow:hidden;flex:1 1 auto;min-height:330px;flex-direction:column;justify-content:center;gap:14px!important;margin:0!important;padding:28px 20px 22px!important;border-radius:16px!important;text-align:center;color:#eef1ff;
border:1.5px solid transparent!important;background:
linear-gradient(rgba(140,120,255,.07) 1px,transparent 1px) 0 0/22px 22px padding-box,
linear-gradient(90deg,rgba(140,120,255,.07) 1px,transparent 1px) 0 0/22px 22px padding-box,
linear-gradient(#0b0d1a,#0b0d1a) padding-box,
conic-gradient(from var(--ai-ang),var(--v8-monday),var(--v8-orange),var(--v8-monday)) border-box!important;
animation:aiRing 3.5s linear infinite}
.ai-status[hidden]{display:none!important}
.ai-status::before{content:"";position:absolute;left:50%;top:44%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:radial-gradient(circle,rgba(108,43,217,.6),rgba(108,43,217,.28) 35%,rgba(246,139,31,.18) 52%,transparent 70%);animation:aiBreathe 2.2s ease-in-out infinite;pointer-events:none}
.ai-status>*{position:relative}
.ai-status-dots{position:absolute!important;inset:0;pointer-events:none}
.ai-status-dots i{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffc58a;box-shadow:0 0 8px 2px rgba(246,139,31,.85);opacity:0;animation:aiBlink 2.6s ease-in-out infinite}
.ai-scan-doc{position:relative;width:92px;height:112px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(160,140,255,.45);box-shadow:0 0 24px rgba(108,43,217,.5),inset 0 0 18px rgba(108,43,217,.25);overflow:hidden;padding:12px 11px;display:flex;flex-direction:column;gap:6px}
.ai-scan-doc i{display:block;height:6px;border-radius:3px;background:rgba(200,190,255,.35)}
.ai-scan-doc i:nth-child(2){width:70%}.ai-scan-doc i:nth-child(5){width:55%}
.ai-scan-doc span{display:block;height:30px;border-radius:5px;background:rgba(200,190,255,.18)}
.ai-scan-doc::after{content:"";position:absolute;left:0;right:0;height:30%;background:linear-gradient(180deg,transparent,rgba(246,139,31,.35),transparent);border-bottom:2px solid #ffa24a;box-shadow:0 2px 12px var(--v8-orange);animation:aiScan 1.8s ease-in-out infinite}
.ai-status b{font-size:16px;letter-spacing:.02em;text-shadow:0 0 14px rgba(108,43,217,.95),0 0 26px rgba(246,139,31,.45)}
.ai-status .ai-status-line{display:block;max-width:100%;color:#d4c6ff!important;font:500 12.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-status .ai-status-line.ai-line-in{animation:aiLineIn .35s ease-out}
.ai-track{position:relative;width:min(320px,100%);height:4px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.ai-track::after{content:"";position:absolute;top:0;bottom:0;width:40%;border-radius:2px;background:linear-gradient(90deg,var(--v8-monday),var(--v8-orange));box-shadow:0 0 10px var(--v8-orange);animation:aiBar 1.4s ease-in-out infinite}
.ai-status .ai-status-hint{color:#7f87b8!important;font-size:11.5px}
/* Results */
.ai-results-wrap{margin:0!important;display:flex;flex-direction:column;gap:10px}
.ai-results-head{align-items:flex-end!important;margin:0!important;gap:10px}
.ai-results-head b{font-size:15px!important}
.ai-results-head span{font-size:12px!important;color:var(--v8-muted)!important}
.ai-review-badge{gap:5px;height:24px;padding:0 9px!important;font:700 11px var(--v8-font)!important;white-space:nowrap}
.ai-warnings{margin:0!important;border:0!important;border-radius:12px!important;font-size:12px!important}
.ai-results{gap:0!important;border-radius:14px;background:var(--v8-card);border:1px solid var(--v8-line);overflow:hidden}
.ai-results .added-empty{padding:18px;color:var(--v8-muted);font-size:13px}
.ai-result-row{grid-template-columns:22px 92px minmax(0,1fr) 124px 78px!important;gap:10px!important;padding:10px 12px!important;background:transparent!important;border:0!important;border-top:1px solid var(--v8-line)!important;border-radius:0!important}
.ai-result-row:first-child{border-top:0!important}
.ai-result-row.ai-off{opacity:.45}
.ai-result-check{width:17px!important;height:17px!important;accent-color:var(--v8-monday)!important}
.ai-step{display:flex;align-items:center;height:30px;border-radius:9px;background:var(--v8-bg)}
.ai-step button{width:28px;height:30px;padding:0!important;border:0!important;background:none!important;color:var(--v8-muted);font-size:14px;box-shadow:none!important}
.ai-step .ai-result-qty{width:34px!important;height:30px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;font:700 13px var(--v8-font)!important;color:var(--v8-text);-moz-appearance:textfield}
.ai-step .ai-result-qty::-webkit-inner-spin-button,.ai-step .ai-result-qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ai-result-name{font-weight:600!important;color:var(--v8-text)!important;outline:0}
.ai-result-evidence{display:inline!important;font-size:11px!important;color:var(--v8-muted)!important}
.ai-preset-match{margin-left:6px;font-size:11px!important;font-weight:700!important;color:var(--v8-green)!important}
.ai-result-group{height:30px!important;padding:0 8px!important;border:0!important;border-radius:9px!important;background:var(--v8-bg)!important;color:var(--v8-text)!important;font-size:12px!important}
.ai-confidence{gap:5px;padding:0!important;background:none!important;color:var(--v8-muted)!important;font:600 11px var(--v8-font)!important;text-transform:capitalize!important;letter-spacing:0!important}
.ai-confidence::before{content:"";width:8px;height:8px;border-radius:50%}
.ai-confidence.high::before{background:var(--v8-green)}.ai-confidence.medium::before{background:var(--v8-orange)}.ai-confidence.low::before{background:#e5484d}
/* Footer */
.ai-dialog-actions{align-items:center;padding:12px 22px!important;background:var(--v8-card)!important;border-top:1px solid var(--v8-line)!important;box-shadow:none!important}
.ai-sel-count{margin-right:auto;color:var(--v8-faint);font-size:12px}
.ai-dialog-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px!important;border-radius:10px!important;font-size:13px!important;font-weight:600!important}
#cancelAiRender{border-color:transparent!important;background:transparent!important;color:var(--v8-muted)!important}
#discardAiItemsBtn{border:1px solid var(--v8-line-2)!important;background:var(--v8-card)!important;color:var(--v8-text)!important}
#addAiItemsBtn{border:0!important;background:var(--v8-orange)!important}
#addAiItemsBtn:disabled{opacity:.5;cursor:not-allowed}
.ai-analyse-btn{border:0!important;color:#fff!important;background:linear-gradient(110deg,var(--v8-monday),var(--v8-orange),var(--v8-monday))!important;background-size:200% 100%!important;animation:aiAurora 6s linear infinite,aiGlow 2.2s ease-in-out infinite}
.ai-analyse-btn i{animation:aiTwinkle 2.4s ease-in-out infinite}
.ai-analyse-btn:disabled{opacity:1!important;animation:none;background:var(--v8-line-2)!important;color:var(--v8-faint)!important;box-shadow:none}
.ai-analyse-btn:disabled i{animation:none}
@media (max-width:760px){
.ai-dialog-head,.ai-workflow{padding-left:14px!important;padding-right:14px!important}
.ai-upload-card{grid-template-columns:auto 1fr auto}
.ai-render-dialog.has-file .ai-file-ok{display:none}
.ai-result-row{grid-template-columns:22px 92px minmax(0,1fr)!important;row-gap:6px!important}
.ai-result-group{grid-column:3!important}
.ai-confidence{grid-column:3!important;grid-row:auto!important;justify-self:start!important}
.ai-dialog-actions{flex-wrap:wrap;padding:10px 14px!important}
.ai-sel-count{width:100%}
.ai-upload-card #chooseRenderBtn{width:auto!important}
}
@media screen{
html[data-theme="dark"] .ai-drop-icon{background:rgba(185,162,255,.12);color:#b9a2ff}
html[data-theme="dark"] .ai-analysis-note i{color:#b9a2ff}
html[data-theme="dark"] .ai-file-thumb{background:#3a2a1a;color:#ffb066}
html[data-theme="dark"] .ai-review-badge{background:#3a2a1a!important;color:#ffb066!important}
html[data-theme="dark"] .ai-warnings{background:#332a14!important;color:#f1d493!important}
html[data-theme="dark"] .ai-render-dialog::backdrop{background:rgba(0,0,0,.7)}
}
@media (prefers-reduced-motion:reduce){
.v8-ai,.v8-ai i,.ai-head-icon,.ai-head-icon i,.ai-analyse-btn,.ai-analyse-btn i,.ai-status,.ai-status::before,.ai-status-dots i,.ai-scan-doc::after,.ai-track::after,.ai-status-line{animation:none!important}
}
/* ============================================================
V8.7 — Generate from Render: render from Monday, real steps,
top plan with numbered markers
============================================================ */
.ai-render-dialog.ai-v2{width:min(1000px,calc(100vw - 28px))!important;height:min(800px,calc(100vh - 28px))!important}
.ai-v2 .ai-label{display:block;margin:0 0 6px;font:600 12px var(--v8-font);color:var(--v8-muted)}
.ai-src{display:flex;flex-direction:column;gap:12px}
.ai-src[hidden]{display:none!important}
.ai-src-search{position:relative}
.ai-search{display:flex;align-items:center;gap:9px;height:42px;padding:0 12px;border-radius:11px;background:var(--v8-card);border:1px solid var(--v8-line)}
.ai-search:focus-within{border-color:var(--v8-monday);box-shadow:0 0 0 3px rgba(108,43,217,.14)}
.ai-mon{flex:0 0 auto;width:18px;height:18px;border-radius:5px;background:conic-gradient(#ff3d57 0 33%,#ffcb00 0 66%,#00ca72 0)}
.ai-v2 .ai-search input{flex:1;min-width:0;height:auto!important;border:0!important;background:none!important;box-shadow:none!important;outline:0;padding:0!important;font:500 14px var(--v8-font)!important;color:var(--v8-text)}
.ai-search-results{position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:4px;padding:6px;max-height:260px;overflow:auto;background:var(--v8-card);border:1px solid var(--v8-line-2);border-radius:12px;box-shadow:0 14px 34px rgba(16,24,32,.16)}
.ai-search-results button{display:block;width:100%;text-align:left;padding:9px 10px!important;border:0!important;border-radius:9px!important;background:none!important;color:var(--v8-text)!important;box-shadow:none!important}
.ai-search-results button:hover{background:var(--v8-bg)!important}
.ai-search-results b{display:block;font-size:13px;font-weight:600}.ai-search-results small{color:var(--v8-muted);font-size:11.5px}
.ai-search-results p{margin:6px 8px;color:var(--v8-muted);font-size:12.5px}
.ai-files-card{background:var(--v8-card);border:1px solid var(--v8-line);border-radius:14px;overflow:hidden}
.ai-proj{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--v8-line)}
.ai-proj b{display:block;font-size:14px}.ai-proj small{color:var(--v8-muted);font-size:12px}
.ai-tag{margin-left:auto;display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:rgba(108,43,217,.1);color:var(--v8-monday);font:700 11px var(--v8-font);white-space:nowrap}
.ai-file{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--v8-line);cursor:pointer;margin:0!important;font-size:13px!important}
.ai-file:first-child{border-top:0}
.ai-file input{flex:0 0 auto;width:17px!important;height:17px!important;accent-color:var(--v8-monday)}
.ai-file-ico{flex:0 0 auto;width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:#fff2e5;color:#d05f12;font-size:19px}
.ai-file-ico.plan{background:rgba(108,43,217,.1);color:var(--v8-monday)}
.ai-file-copy{flex:1;min-width:0}
.ai-file-copy b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-file-copy small{color:var(--v8-muted);font-size:11.5px}
.ai-latest,.ai-kind{flex:0 0 auto;font:800 10px var(--v8-font);letter-spacing:.06em;color:var(--v8-green)}
.ai-kind{color:var(--v8-monday)}
.ai-src-status{margin:0;color:var(--v8-muted);font-size:12.5px}
.ai-src-status:empty{display:none}
.ai-or{display:flex;align-items:center;gap:10px;color:var(--v8-faint);font-size:12px}
.ai-or::before,.ai-or::after{content:"";flex:1;height:1px;background:var(--v8-line-2)}
.ai-render-dialog.ai-v2 .ai-upload-card{display:flex!important;align-items:center;justify-content:center;gap:8px!important;min-height:0;height:56px;padding:0 14px!important;border:1.5px dashed var(--v8-line-2)!important;border-radius:12px!important;background:transparent!important;color:var(--v8-muted);font-size:13px;text-align:left}
.ai-render-dialog.ai-v2 .ai-upload-card.dragover{border-color:var(--v8-monday)!important;background:rgba(108,43,217,.06)!important}
.ai-v2 .ai-upload-card i{font-size:20px;color:var(--v8-faint)}
.ai-v2 #chooseRenderBtn{height:auto;padding:0!important;border:0!important;background:none!important;color:var(--v8-text)!important;font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* Analysing */
.ai-busy{flex:1 1 auto;display:grid;grid-template-columns:1.25fr 1fr;gap:12px;min-height:420px}
.ai-busy[hidden]{display:none!important}
.ai-tech{position:relative;overflow:hidden;border-radius:16px;color:#eef1ff;padding:18px;display:flex;flex-direction:column;gap:14px;
border:1.5px solid transparent;background:
linear-gradient(rgba(140,120,255,.07) 1px,transparent 1px) 0 0/22px 22px padding-box,
linear-gradient(90deg,rgba(140,120,255,.07) 1px,transparent 1px) 0 0/22px 22px padding-box,
linear-gradient(#0b0d1a,#0b0d1a) padding-box,
conic-gradient(from var(--ai-ang),var(--v8-monday),var(--v8-orange),var(--v8-monday)) border-box;
animation:aiRing 3.5s linear infinite}
.ai-tech::before{content:"";position:absolute;left:50%;top:55%;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;background:radial-gradient(circle,rgba(108,43,217,.55),rgba(108,43,217,.22) 35%,rgba(246,139,31,.14) 52%,transparent 70%);animation:aiBreathe 2.2s ease-in-out infinite;pointer-events:none}
.ai-tech>*{position:relative}
.ai-tech h3{margin:0;font:600 12.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#d4c6ff}
.ai-tech>small{margin-top:auto;color:#7f87b8;font-size:11.5px}
.ai-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;align-content:start}
.ai-pg{position:relative;margin:0;aspect-ratio:1.414;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(160,140,255,.35)}
.ai-pg img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88}
.ai-pg figcaption{position:absolute;left:6px;bottom:6px;font:700 9.5px var(--v8-font);letter-spacing:.04em;padding:3px 6px;border-radius:5px;background:rgba(11,13,26,.82);color:#fff}
.ai-pg.plan{box-shadow:0 0 0 2px var(--v8-orange),0 0 18px rgba(246,139,31,.6)}
.ai-pg.plan figcaption{background:var(--v8-orange)}
.ai-pg.scan::after{content:"";position:absolute;left:0;right:0;height:30%;background:linear-gradient(180deg,transparent,rgba(246,139,31,.35),transparent);border-bottom:2px solid #ffa24a;animation:aiScan 1.4s ease-in-out infinite}
.ai-steps{margin:0;padding:14px;list-style:none;display:flex;flex-direction:column;gap:4px;background:var(--v8-card);border:1px solid var(--v8-line);border-radius:16px;align-self:start}
.ai-step{display:flex;gap:11px;padding:10px 8px;border-radius:10px}
.ai-dot{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;border:1.5px solid var(--v8-line-2);color:var(--v8-faint)}
.ai-step.done .ai-dot{background:var(--v8-green);border-color:var(--v8-green);color:#fff}
.ai-step.fail .ai-dot{background:#e5484d;border-color:#e5484d;color:#fff}
.ai-step.now{background:rgba(108,43,217,.08)}
.ai-step.now .ai-dot{border-color:var(--v8-monday);border-top-color:transparent;animation:aiSpin .8s linear infinite}
.ai-step b{display:block;font-size:13px;font-weight:600}
.ai-step small{display:block;color:var(--v8-muted);font:12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.ai-step.todo b{color:var(--v8-faint)}
/* Results */
.ai-render-dialog.ai-v2 .ai-results-wrap{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;align-items:start}
.ai-render-dialog.ai-v2 .ai-results-wrap.no-plan{grid-template-columns:minmax(0,1fr)}
.ai-render-dialog.ai-v2 .ai-results-wrap[hidden]{display:none!important}
.ai-plan-card{position:sticky;top:0;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--v8-card);border:1px solid var(--v8-line);border-radius:14px}
.ai-plan-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--v8-muted)}
.ai-plan-head b{color:var(--v8-text);font-size:13px}
.ai-plan-head span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-plan{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--v8-line);background:#fff}
.ai-plan img{display:block;width:100%;height:auto}
.ai-mk{position:absolute;transform:translate(-50%,-50%);min-width:20px;height:20px;padding:0 3px;border-radius:999px;display:grid;place-items:center;font:800 10px/1 var(--v8-font);color:#fff;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:default;transition:transform .15s,box-shadow .15s}
.ai-mk.high,.ai-num.high{background:var(--v8-green)}.ai-mk.medium,.ai-num.medium{background:var(--v8-orange)}.ai-mk.low,.ai-num.low{background:#e5484d}
.ai-mk.hot{transform:translate(-50%,-50%) scale(1.4);z-index:2;box-shadow:0 0 0 4px rgba(108,43,217,.35),0 0 18px rgba(108,43,217,.6)}
.ai-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--v8-muted)}
.ai-legend span:not(.ai-legend-note)::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.ai-legend .h::before{background:var(--v8-green)}.ai-legend .m::before{background:var(--v8-orange)}.ai-legend .l::before{background:#e5484d}
.ai-legend-note{margin-left:auto;color:var(--v8-faint)}
.ai-list{display:flex;flex-direction:column;gap:10px;min-width:0}
.ai-review-badge.ok{background:#e3f8ee!important;color:#0b7a4b!important}
.ai-row{display:grid;grid-template-columns:18px 22px 96px minmax(0,1fr) 92px;gap:10px;align-items:center;padding:9px 12px;border-top:1px solid var(--v8-line);transition:background .15s}
.ai-row:first-child{border-top:0}
.ai-row.hot{background:rgba(108,43,217,.07)}
.ai-row.ai-off{opacity:.45}
.ai-row input[type=checkbox]{width:16px!important;height:16px!important;accent-color:var(--v8-monday)}
.ai-num{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:800 10.5px var(--v8-font);color:#fff}
.ai-pair{display:flex;align-items:center;gap:3px}
.ai-pair em{font-style:normal;color:var(--v8-faint);font-size:11px}
.ai-crop,.ai-photo{flex:0 0 auto;width:42px;height:42px;border-radius:8px;overflow:hidden;border:1px solid var(--v8-line);background:linear-gradient(135deg,#d9dde3,#eef0f3);object-fit:cover}
.ai-photo{display:grid;place-items:center;background:#fff}
.ai-photo img{width:100%;height:100%;object-fit:contain}
.ai-photo span{font-size:8px;color:#9aa3ab;text-align:center;line-height:1.1}
.ai-nm{min-width:0;display:flex;flex-direction:column;gap:2px}
.ai-v2 .ai-name{width:100%;height:auto!important;padding:1px 0!important;border:0!important;background:transparent!important;box-shadow:none!important;outline:0;font:600 13px var(--v8-font)!important;color:var(--v8-text);text-overflow:ellipsis}
.ai-nm small{font-size:11px;color:var(--v8-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-nm small i{font-style:normal;color:var(--v8-green);font-weight:700}
.ai-nm small u{text-decoration:none;color:var(--v8-orange-2);font-weight:700}
.ai-nm small em{font-style:normal;color:#b45f06}
.ai-v2 .ai-row-group{align-self:flex-start;height:24px!important;min-height:0!important;line-height:1!important;padding:0 6px!important;border:0!important;border-radius:7px!important;background:var(--v8-bg)!important;color:var(--v8-text)!important;font-size:11px!important}
.ai-step2{display:flex;align-items:center;height:30px;border-radius:9px;background:var(--v8-bg);justify-self:end}
.ai-step2 button{width:28px;height:30px;padding:0!important;border:0!important;background:none!important;color:var(--v8-muted);box-shadow:none!important}
.ai-v2 .ai-step2 input{width:34px!important;height:30px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;text-align:center;font:700 13px var(--v8-font)!important;color:var(--v8-text);-moz-appearance:textfield}
.ai-step2 input::-webkit-inner-spin-button,.ai-step2 input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ai-empty{padding:18px;color:var(--v8-muted);font-size:13px}
@media (max-width:760px){
.ai-busy,.ai-render-dialog.ai-v2 .ai-results-wrap{grid-template-columns:minmax(0,1fr)}
.ai-plan-card{position:static}
.ai-row{grid-template-columns:18px 22px minmax(0,1fr) 92px}
.ai-pair{display:none}
.ai-tag{display:none}
}
@media screen{
html[data-theme="dark"] .ai-tag{color:#cdb8ff;background:rgba(185,162,255,.12)}
html[data-theme="dark"] .ai-kind{color:#cdb8ff}
html[data-theme="dark"] .ai-file-ico{background:#3a2a1a;color:#ffb066}
html[data-theme="dark"] .ai-file-ico.plan{background:rgba(185,162,255,.12);color:#cdb8ff}
html[data-theme="dark"] .ai-review-badge.ok{background:#123a28!important;color:#4fd394!important}
html[data-theme="dark"] .ai-search-results{box-shadow:0 14px 34px rgba(0,0,0,.55)}
}
@media (prefers-reduced-motion:reduce){.ai-tech,.ai-tech::before,.ai-pg.scan::after,.ai-step.now .ai-dot{animation:none!important}}
/* V8.7.3 — the step list shares the .ai-step name with the old quantity stepper */
.ai-steps .ai-step{height:auto;align-items:flex-start;background:none}
.ai-steps .ai-step.now{background:rgba(108,43,217,.08)}
/* ============================================================
V8.8 — AI Vision: page-by-page viewer with real detections + SB-BOT
============================================================ */
.ai-v2 .ai-busy{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);min-height:0}
.aiv-stage{position:relative;overflow:hidden;border-radius:16px;background:#05060d;color:#e8ecff;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 0 0 1.5px rgba(143,91,255,.45),0 0 40px rgba(108,43,217,.25)}
.aiv-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 45%,rgba(108,43,217,.28),transparent 70%),linear-gradient(rgba(140,120,255,.06) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(140,120,255,.06) 1px,transparent 1px) 0 0/24px 24px}
.aiv-stage>*{position:relative}
.aiv-top{display:flex;align-items:center;justify-content:space-between;font:600 11px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;color:#b9a8ff}
.aiv-live{display:flex;align-items:center;gap:6px;color:#ffb066}
.aiv-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 8px #ff4d4d;animation:aivBlink 1s steps(2) infinite}
@keyframes aivBlink{50%{opacity:.2}}
.aiv-viewer{position:relative;aspect-ratio:1.414;border-radius:10px;overflow:hidden;background:#0b0e18}
.aiv-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%}
.aiv-frame img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;transition:opacity .35s,filter .35s}
.aiv-frame img.swap{opacity:0}
.aiv-viewer.cover .aiv-frame img{filter:grayscale(1) brightness(.45)}
.aiv-br{position:absolute;z-index:6;width:24px;height:24px;border:2px solid #6fe3ff;filter:drop-shadow(0 0 6px #6fe3ff)}
.aiv-br.tl{left:8px;top:8px;border-right:0;border-bottom:0}.aiv-br.tr{right:8px;top:8px;border-left:0;border-bottom:0}
.aiv-br.bl{left:8px;bottom:8px;border-right:0;border-top:0}.aiv-br.brr{right:8px;bottom:8px;border-left:0;border-top:0}
.aiv-beam{position:absolute;left:0;right:0;height:22%;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(111,227,255,.16) 70%,rgba(111,227,255,.45));border-bottom:2px solid #6fe3ff;box-shadow:0 6px 18px rgba(111,227,255,.6);animation:aivBeam 2.2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes aivBeam{0%{top:-22%}100%{top:100%}}
.aiv-ov{position:absolute;inset:0;z-index:4}
.aiv-box{position:absolute;border:1.5px solid #f68b1f;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 14px rgba(246,139,31,.6);opacity:0;transform:scale(1.25);transition:opacity .25s,transform .35s cubic-bezier(.2,1.4,.4,1)}
.aiv-box.on{opacity:1;transform:none}
.aiv-box b{position:absolute;left:-1.5px;bottom:100%;margin-bottom:3px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 6px;border-radius:3px;background:#f68b1f;color:#160b00;font:700 10px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase}
.aiv-box.high{border-color:#3ee08f;box-shadow:0 0 14px rgba(62,224,143,.6)}.aiv-box.high b{background:#3ee08f;color:#002611}
.aiv-box.low{border-color:#8f5bff;box-shadow:0 0 14px rgba(143,91,255,.7)}.aiv-box.low b{background:#8f5bff;color:#fff}
.aiv-mk{position:absolute;min-width:18px;height:18px;margin:-9px 0 0 -9px;padding:0 3px;border-radius:999px;display:grid;place-items:center;font:800 9.5px var(--v8-font);color:#fff;background:#3ee08f;border:2px solid #fff;box-shadow:0 0 12px #3ee08f;opacity:0;transform:scale(0);transition:.3s cubic-bezier(.2,1.6,.4,1)}
.aiv-mk.medium{background:#f68b1f;box-shadow:0 0 12px #f68b1f}.aiv-mk.low{background:#e5484d;box-shadow:0 0 12px #e5484d}
.aiv-mk.on{opacity:1;transform:none}
.aiv-stamp{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg) scale(1.6);opacity:0;padding:8px 16px;border:3px solid #ff5d5d;border-radius:8px;color:#ff5d5d;font:800 22px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;background:rgba(5,6,13,.55);transition:.35s cubic-bezier(.2,1.4,.4,1);pointer-events:none;text-align:center}
.aiv-stamp small{display:block;font-size:10px;letter-spacing:.08em;color:#ffb0b0}
.aiv-viewer.cover .aiv-stamp{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
.aiv-label{position:absolute;z-index:6;left:12px;bottom:12px;display:flex;gap:6px;font:700 10.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em}
.aiv-label span{padding:3px 7px;border-radius:4px;background:rgba(5,6,13,.75);border:1px solid rgba(143,91,255,.5);color:#d4c6ff}
.aiv-label .k{background:#f68b1f;border-color:#f68b1f;color:#160b00}
.aiv-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.aiv-strip::-webkit-scrollbar{display:none}
.aiv-th{position:relative;flex:0 0 74px;aspect-ratio:1.414;margin:0;border-radius:5px;overflow:hidden;opacity:.5;border:1px solid rgba(143,91,255,.3);transition:.3s}
.aiv-th img{width:100%;height:100%;object-fit:cover;display:block}
.aiv-th figcaption{position:absolute;left:3px;bottom:3px;padding:1px 4px;border-radius:3px;background:rgba(5,6,13,.8);color:#fff;font:700 8px var(--v8-font);letter-spacing:.04em;text-transform:uppercase}
.aiv-th.plan figcaption{background:#f68b1f;color:#160b00}
.aiv-th.skip::after{content:"SKIP";position:absolute;inset:0;display:grid;place-items:center;font:800 9px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#ff8a8a;background:rgba(5,6,13,.6);letter-spacing:.1em}
.aiv-th.done{opacity:.85}
.aiv-th.now{opacity:1;border-color:#6fe3ff;box-shadow:0 0 0 1px #6fe3ff,0 0 12px rgba(111,227,255,.6)}
.aiv-log{height:72px;overflow:hidden;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#9fb0ff;-webkit-mask-image:linear-gradient(transparent,#000 35%);mask-image:linear-gradient(transparent,#000 35%)}
.aiv-log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aiv-log .ok{color:#3ee08f}.aiv-log .warn{color:#ffb066}
.aiv-log .cur::after{content:"▋";color:#6fe3ff;animation:aivBlink .8s steps(2) infinite}
.aiv-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.aiv-bot{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,#0b0d1a,#1b1338);border:1px solid rgba(143,91,255,.45);color:#e8ecff}
.aiv-bot .sbbot{flex:0 0 auto;width:96px;height:126px;overflow:visible;animation:sbbHover 3s ease-in-out infinite;transform-origin:50% 60%}
@keyframes sbbHover{0%,100%{transform:perspective(420px) rotateY(-16deg) translateY(0)}50%{transform:perspective(420px) rotateY(16deg) translateY(-5px)}}
.aiv-bot .head3d{transform-box:fill-box;transform-origin:50% 90%;animation:sbbNod 3s ease-in-out infinite}
@keyframes sbbNod{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.aiv-bot .eyes{transform-box:fill-box;transform-origin:center;animation:sbbLook 2.2s ease-in-out infinite,sbbBlinkEye 4.4s infinite}
@keyframes sbbLook{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
@keyframes sbbBlinkEye{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
.aiv-bot .ant{animation:aivBlink 1s steps(2) infinite}
.aiv-bot .laser{transform-box:view-box;transform-origin:40px 47px;animation:sbbLaser 2.2s ease-in-out infinite}
@keyframes sbbLaser{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
.aiv-bot .core{transform-box:fill-box;transform-origin:center;animation:sbbPulse 1.4s ease-in-out infinite}
@keyframes sbbPulse{50%{opacity:.55;transform:scale(.85)}}
.aiv-bot .thrust{animation:sbbThrust .5s ease-in-out infinite alternate}
@keyframes sbbThrust{to{opacity:.25}}
.aiv-bot .armR{transform-box:fill-box;transform-origin:50% 8%;animation:sbbWave 1.6s ease-in-out infinite}
@keyframes sbbWave{50%{transform:rotate(-16deg)}}
.aiv-bot .mouth{transform-box:fill-box;transform-origin:center}
.aiv-bot.talk .mouth{animation:sbbTalk .3s steps(2) infinite}
@keyframes sbbTalk{50%{transform:scaleX(.5)}}
.aiv-bubble{position:relative;flex:1;min-width:0;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(143,91,255,.4);font:600 12.5px/1.45 var(--v8-font)}
.aiv-bubble::before{content:"";position:absolute;left:-7px;top:22px;border:7px solid transparent;border-left:0;border-right-color:rgba(143,91,255,.55)}
.aiv-bubble small{display:block;margin-bottom:2px;font:700 10px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;color:#ffb066}
.aiv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;border-radius:14px;background:var(--v8-card);border:1px solid var(--v8-line)}
.aiv-stats div{padding:7px 9px;border-radius:10px;background:var(--v8-bg)}
.aiv-stats b{display:block;font:800 21px var(--v8-font);letter-spacing:-.02em;color:#6c2bd9}
.aiv-stats .i b{color:#0b7a4b}.aiv-stats .m b{color:#c25c00}
.aiv-stats small{color:var(--v8-muted);font-size:11px}
.aiv-side .ai-steps{align-self:stretch}
@media (max-width:760px){.aiv-bot .sbbot{width:76px;height:100px}.aiv-log{height:54px}}
@media screen{
html[data-theme="dark"] .aiv-stats .i b{color:#4fd394}
html[data-theme="dark"] .aiv-stats .m b{color:#ffb066}
html[data-theme="dark"] .aiv-stats b{color:#b9a2ff}
}
@media (prefers-reduced-motion:reduce){.aiv-beam,.aiv-live::before,.aiv-bot *,.aiv-bot .sbbot,.aiv-log .cur::after{animation:none!important}}
@media (max-width:760px){.ai-v2 .ai-busy{grid-template-columns:minmax(0,1fr);flex:none}.aiv-stage{flex:none}}
/* V8.9 — SB-BOT with orange armour, rigged in 3D (body, arm and head layers) */
/* ---- SB-BOT 3D rig ---- */
.sbbot3d{position:relative;width:var(--sbw,230px);aspect-ratio:200/344;perspective:520px;perspective-origin:50% 30%}
.sb-floor>svg,.sb-turn>svg,.sb-headrig>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sb-rig,.sb-turn,.sb-headrig{position:absolute;inset:0;transform-style:preserve-3d}
.sb-rig{animation:sbBob 3s ease-in-out infinite}
@keyframes sbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3%)}}
.sb-floor{position:absolute;inset:0;animation:sbFloor 3s ease-in-out infinite;transform-origin:50% 97%}
@keyframes sbFloor{50%{transform:scaleX(.8);opacity:.55}}
/* body turns left and right */
.sb-turn{transform-origin:50% 60%;animation:sbTurn 6s ease-in-out infinite}
@keyframes sbTurn{0%,100%{transform:rotateY(-20deg)}50%{transform:rotateY(20deg)}}
.sb-arm{transform-origin:74% 44.2%;animation:sbWave3d 1.6s ease-in-out infinite;transform:translateZ(14px)}
@keyframes sbWave3d{0%,100%{transform:translateZ(14px) rotateY(0) rotateZ(0)}50%{transform:translateZ(22px) rotateY(-30deg) rotateZ(-120deg)}}
/* head leads the turn, with a little nod; the shell behind gives it thickness */
.sb-headrig{transform-origin:50% 20%;animation:sbHead3d 6s ease-in-out infinite;animation-delay:-.35s}
@keyframes sbHead3d{0%,100%{transform:translateZ(6px) rotateY(-34deg) rotateX(4deg)}25%{transform:translateZ(6px) rotateY(0) rotateX(-6deg)}50%{transform:translateZ(6px) rotateY(34deg) rotateX(4deg)}75%{transform:translateZ(6px) rotateY(0) rotateX(-6deg)}}
.sb-shell{transform:translateZ(-9px)}
.sb-headsvg{transform:translateZ(5px)}
.sb-headsvg .sb-sheen{animation:sbSheen 6s ease-in-out infinite;animation-delay:-.35s}
@keyframes sbSheen{0%,100%{transform:skewX(-18deg) translateX(150px)}50%{transform:skewX(-18deg) translateX(-30px)}}
.sb-headsvg .sb-eyes{animation:sbEyes 6s ease-in-out infinite;animation-delay:-.35s}
@keyframes sbEyes{0%,100%{transform:translateX(-10px)}50%{transform:translateX(10px)}}
.sb-headsvg .sb-eye{transform-box:fill-box;transform-origin:center;animation:sbBlink2 4.6s infinite}
@keyframes sbBlink2{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.12)}}
.sb-headsvg .sb-brow{transform-box:fill-box;transform-origin:center;animation:sbBrow 4.6s infinite}
@keyframes sbBrow{0%,40%,52%,100%{transform:translateY(0)}46%{transform:translateY(5px)}}
.sb-headsvg .sb-cheeks{animation:sbPulse 1.6s ease-in-out infinite}
.talk .sb-headsvg .sb-cheeks{animation:sbTalk2 .3s steps(2) infinite}
@keyframes sbTalk2{50%{opacity:.35}}
.sb-body .sb-core{animation:sbPulse 1.4s ease-in-out infinite}
@keyframes sbPulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.sbbot3d *{animation:none!important}}
.aiv-bot .sbbot3d{--sbw:84px;flex:0 0 auto}
@media (max-width:760px){.aiv-bot .sbbot3d{--sbw:68px}}
.aiv-bubble{z-index:2}
/* ============================================================
V9.0 — SB-BOT peeks over the window; analysis happens in SB-BOT's room
============================================================ */
/* The dialog itself is transparent so SB-BOT can sit behind the window (.ai-sheet). */
.ai-render-dialog.ai-v2{overflow:visible!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;margin-top:max(118px,calc((100vh - 800px)/2));margin-bottom:auto;height:min(800px,calc(100vh - 140px))!important;max-height:none!important}
.ai-sheet{position:relative;z-index:1;flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:var(--v8-bg);color:var(--v8-text);box-shadow:0 30px 90px rgba(7,22,31,.45)}
/* Peeking: only the head and hands come over the top edge */
.ai-peek{position:absolute;z-index:0;right:46px;top:-86px;width:120px;height:206px;pointer-events:none;animation:aiPeekIn 1.2s cubic-bezier(.2,1.25,.35,1) .35s both}
.ai-peek .sbbot3d{--sbw:120px;animation:aiPeekIdle 9s ease-in-out 2.4s infinite}
@keyframes aiPeekIn{0%{transform:translateY(120px)}70%{transform:translateY(-5px)}100%{transform:none}}
@keyframes aiPeekIdle{0%,40%,62%,100%{transform:translate(0,0) rotate(0)}46%{transform:translate(0,30px)}52%{transform:translate(0,30px)}56%{transform:translate(-10px,-2px) rotate(-8deg)}}
.ai-peek-hands{position:absolute;z-index:2;right:58px;top:-8px;width:96px;height:16px;pointer-events:none;animation:aiGrab .35s ease-out 1.1s both}
.ai-peek-hands i{position:absolute;top:0;width:22px;height:16px;border-radius:7px 7px 4px 4px;background:linear-gradient(#5b6370,#2b3038);border:2.5px solid #2a2f38}
.ai-peek-hands i:first-child{left:4px}.ai-peek-hands i:last-child{right:4px}
@keyframes aiGrab{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ai-peek-say{position:absolute;z-index:3;right:176px;top:-96px;max-width:280px;padding:10px 13px;border-radius:14px 14px 4px 14px;background:linear-gradient(135deg,#1b1338,#0b0d1a);color:#fff;font:600 13px/1.4 var(--v8-font);box-shadow:0 10px 30px rgba(108,43,217,.4);border:1px solid rgba(143,91,255,.55);pointer-events:none;animation:aiSayPop .45s cubic-bezier(.2,1.5,.4,1) 1.4s both}
.ai-peek-say small{display:block;margin-bottom:2px;font:700 10px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.1em;color:#ffb066}
@keyframes aiSayPop{from{opacity:0;transform:scale(.6) translate(20px,10px)}to{opacity:1;transform:none}}
.ai-render-dialog:is(.is-busy,.has-results) :is(.ai-peek,.ai-peek-hands,.ai-peek-say){display:none}
@media (max-width:760px),(max-height:700px){
:is(.ai-peek,.ai-peek-hands,.ai-peek-say){display:none}
.ai-render-dialog.ai-v2{margin-top:auto;height:min(800px,calc(100vh - 16px))!important}
}
/* SB-BOT's room */
.ai-v2 .ai-busy{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);min-height:500px}
.aiv-room{position:relative;min-height:500px;border-radius:16px;overflow:hidden;color:#e8ecff;background:radial-gradient(70% 60% at 50% 40%,#1c1440,#05060d 75%);box-shadow:inset 0 0 0 1.5px rgba(143,91,255,.45),0 0 40px rgba(108,43,217,.25);perspective:900px;perspective-origin:50% 35%}
.aiv-floor{position:absolute;left:-30%;right:-30%;bottom:-150px;height:400px;transform:rotateX(78deg);transform-origin:50% 100%;pointer-events:none;background:linear-gradient(rgba(111,227,255,.22) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(111,227,255,.22) 1px,transparent 1px) 0 0/40px 40px;-webkit-mask-image:radial-gradient(60% 70% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(60% 70% at 50% 0%,#000,transparent 75%);animation:aivFloor 6s linear infinite}
@keyframes aivFloor{to{background-position:0 40px,0 0}}
.aiv-room .aiv-top{position:absolute;z-index:20;left:14px;right:14px;top:12px}
.aiv-room .aiv-viewer{position:absolute;z-index:6;left:50%;top:38px;width:54%;transform:translateX(-50%);box-shadow:0 0 0 2px rgba(111,227,255,.6),0 0 40px rgba(111,227,255,.35),0 30px 60px rgba(0,0,0,.6)}
.aiv-room .aiv-br{width:18px;height:18px}
.aiv-mons{position:absolute;inset:0;z-index:4;pointer-events:none;transform-style:preserve-3d}
.aiv-mon{position:absolute;width:var(--mw,13%);aspect-ratio:1.414;margin:0;border-radius:6px;overflow:hidden;background:#0b0e18;box-shadow:0 0 0 1.5px rgba(143,91,255,.7),0 0 18px rgba(143,91,255,.45);opacity:0;transform:translate(var(--fx),var(--fy)) scale(.2) rotate(var(--fr));transition:transform 1s cubic-bezier(.3,1.25,.4,1),opacity .6s,box-shadow .3s}
.aiv-mon.in{opacity:1;transform:translateZ(var(--z)) rotateY(var(--ry))}
.aiv-mon.now{box-shadow:0 0 0 2px #6fe3ff,0 0 26px rgba(111,227,255,.8)}
.aiv-mon.skip.in{opacity:.35;transform:translateZ(-80px) rotateY(var(--ry)) scale(.85)}
.aiv-mon.skip::after{content:"SKIP";position:absolute;inset:0;display:grid;place-items:center;font:800 10px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#ff8a8a;background:rgba(5,6,13,.6);letter-spacing:.12em}
.aiv-mon img{width:100%;height:100%;object-fit:cover;display:block;opacity:.88}
.aiv-mon figcaption{position:absolute;left:3px;bottom:3px;padding:1px 4px;border-radius:3px;background:rgba(5,6,13,.85);color:#fff;font:700 7.5px var(--v8-font);letter-spacing:.04em;text-transform:uppercase}
.aiv-mon.plan figcaption{background:var(--v8-orange);color:#160b00}
.aiv-pad{position:absolute;z-index:8;left:50%;bottom:10px;width:180px;height:28px;margin-left:-90px;border-radius:50%;background:radial-gradient(closest-side,rgba(111,227,255,.65),rgba(111,227,255,.15) 60%,transparent);animation:aivPad 2s ease-in-out infinite}
@keyframes aivPad{50%{opacity:.6}}
.aiv-robot{position:absolute;z-index:9;left:50%;bottom:18px;margin-left:-54px}
.aiv-robot .sbbot3d{--sbw:108px}
.aiv-laser{position:absolute;z-index:7;left:50%;bottom:150px;width:2px;height:130px;margin-left:-1px;background:linear-gradient(transparent,rgba(111,227,255,.8));transform-origin:50% 100%;filter:drop-shadow(0 0 6px #6fe3ff);opacity:.8;animation:aivLaser 3s ease-in-out infinite}
@keyframes aivLaser{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(24deg)}}
.aiv-room .aiv-bubble{position:absolute;z-index:10;left:calc(50% + 54px);bottom:132px;max-width:240px;flex:none;background:rgba(27,19,56,.92);border-radius:12px 12px 12px 4px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.aiv-room .aiv-bubble::before{display:none}
.aiv-room .aiv-log{position:absolute;z-index:10;left:14px;bottom:12px;width:28%;height:84px}
@media (max-width:760px){
.ai-v2 .ai-busy{min-height:0}
.aiv-room{min-height:440px}
.aiv-room .aiv-viewer{width:76%}
.aiv-room .aiv-log{display:none}
.aiv-robot{left:24%}
.aiv-room .aiv-bubble{left:calc(24% + 56px);max-width:180px;font-size:11.5px}
.aiv-pad{left:24%}
.aiv-laser{left:24%}
}
@media (prefers-reduced-motion:reduce){.ai-peek,.ai-peek .sbbot3d,.aiv-floor,.aiv-pad,.aiv-laser{animation:none!important}.aiv-mon{transition:none}}
/* SB-BOT's head peeking from behind the Analyse Render button */
.v8-ai{position:relative}
.sb-peekhead{position:absolute;z-index:-1;left:8px;top:50%;width:30px;height:32px;margin-top:-16px;pointer-events:none;transition:transform .55s cubic-bezier(.3,1.5,.4,1)}
.sb-peekhead svg{width:100%;height:100%;display:block;overflow:visible}
.v8-ai.peek .sb-peekhead,.v8-ai:hover .sb-peekhead{transform:translateX(-34px) rotate(-14deg)}
.sb-peekhead .sb-eye{transform-box:fill-box;transform-origin:center;animation:sbBlink2 4.6s infinite}
.sb-peekhead .sb-eyes{animation:sbEyes 6s ease-in-out infinite}
@media (max-width:620px){.sb-peekhead{display:none}}
@media (max-width:760px){.ai-v2 .ai-busy{grid-template-columns:minmax(0,1fr);flex:none}}