:root{font-family:'Segoe UI',Inter,Arial,sans-serif;color:#f3f3f3;background:#191919;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;min-width:980px;height:100vh;overflow:hidden}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.35;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #e7e7e7;outline-offset:3px}
.app-shell{height:100vh;display:grid;grid-template-rows:58px minmax(0,1fr) 28px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 18px;gap:18px;background:#222;border-bottom:1px solid #454545}
.topbar .identity{font-weight:650;font-size:14px;letter-spacing:-.015em;white-space:nowrap}
.version-tag{color:#bdbdbd;font-size:10px;letter-spacing:.1em;padding-left:12px}
.toolbar-group{display:flex;align-items:center;gap:8px}
.topbar button,.topbar select{background:#303030;border:1px solid #555;color:#fafafa;border-radius:5px;height:34px;padding:0 12px;font-size:12px}
.topbar button.primary{background:#ededed;color:#151515;border-color:#ededed;font-weight:650}
.topbar button:hover{background:#454545}
.topbar button.primary:hover{background:#ddd}
.workarea{display:grid;grid-template-columns:250px minmax(0,1fr) 326px;min-height:0}
.panel{background:#262626;min-height:0;overflow-y:auto}
.pages-panel{border-right:1px solid #454545;padding:19px 15px}
.inspector{border-left:1px solid #454545;padding:0;display:flex;flex-direction:column}
.panel-head{font-size:11px;font-weight:700;color:#e5e5e5;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px}
.page-item{display:grid;grid-template-columns:70px minmax(0,1fr);align-items:center;gap:11px;width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:6px;padding:7px 6px;color:#e5e5e5;margin-bottom:7px}
.page-item.active{background:#383838;border-color:#a5a5a5}
.page-item:hover{background:#333}
.page-mini{width:70px;height:40px;display:grid;grid-template-columns:38% 62%;background:#eee;border:1px solid #a3a3a3;overflow:hidden}
.page-mini .mini-dark{background:#e4e6e6;display:flex;flex-direction:column;justify-content:space-between;padding:5px}
.page-mini .mini-dark i{display:block;height:2px;width:75%;background:#777}
.page-mini .mini-art{display:grid;grid-template-rows:1fr 1fr;gap:2px;padding:3px}
.page-mini .mini-art i{background:var(--mini-1,#d4d6d6)}
.page-mini .mini-art i:nth-child(2){background:var(--mini-2,#4d5155)}
.page-item .page-name{font-size:12px;font-weight:620;line-height:1.35;display:block}
.page-item .page-sub{font-size:11px;color:#b6b6b6;display:block;margin-top:4px}
.page-item.is-hidden{opacity:.53}
.page-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:15px}
.mini-btn{background:#313131;color:#f4f4f4;border:1px solid #606060;border-radius:5px;font-size:12px;min-height:33px;padding:6px 9px}
.mini-btn:hover{background:#414141}
.page-controls{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.page-info{padding:13px 8px;color:#bababa;font-size:11px;line-height:1.6}
.workspace{display:flex;flex-direction:column;min-width:0;min-height:0;background:#353535}
.canvas-toolbar{height:45px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #4d4d4d;padding:0 20px;gap:15px;background:#2d2d2d}
.canvas-toolbar .canvas-label{font-size:12px;color:#dedede;white-space:nowrap}
.canvas-toolbar .canvas-hint{font-size:11px;color:#c6c6c6}
.canvas-stage{position:relative;flex:1;overflow:auto;display:flex;justify-content:center;align-items:center;padding:30px;min-height:0}
.artboard-wrap{position:relative;flex-shrink:0;box-shadow:0 30px 70px #16161699;border:1px solid #aaa}
#artboard{position:absolute;left:0;top:0;transform-origin:top left}
#artboard .content-slot{cursor:text}
#artboard .content-slot:hover{outline:2px solid #777;outline-offset:4px}
#artboard .content-slot.selected{outline:3px solid #1c1c1c;box-shadow:0 0 0 6px #ffffffaf;outline-offset:3px}
.inspector-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #505050;flex-shrink:0}
.inspector-tabs button{border:0;border-bottom:3px solid transparent;background:#252525;color:#c5c5c5;padding:16px 10px;font-size:13px;font-weight:650}
.inspector-tabs button[aria-selected=true]{border-bottom-color:#ededed;background:#323232;color:#fff}
.inspector-scroll{overflow-y:auto;padding:18px;min-height:0}
.inspector h2{font-size:14px;margin:0 0 8px}
.inspector .intro{font-size:12px;line-height:1.55;color:#c5c5c5;margin:0 0 16px}
.control{margin-bottom:15px}
.control label,.control-label{font-size:11px;font-weight:650;color:#e3e3e3;display:block;margin-bottom:6px}
.control .help{font-size:11px;line-height:1.5;color:#c3c3c3;margin-top:5px}
.control input[type=text],.control input[type=number],.control select,.control textarea,.control input[type=file]{width:100%;min-height:34px;border-radius:5px;border:1px solid #757575;background:#171717;color:#fff;padding:7px 9px;font-size:12px}
.control textarea{min-height:88px;line-height:1.5;resize:vertical}
.control input[type=color]{border:1px solid #969696;padding:0;min-width:40px;width:45px;height:32px;background:transparent;border-radius:5px;cursor:pointer}
.color-control{display:flex;gap:9px;align-items:center}
.color-control input[type=text]{flex:1}
.section-group{border-top:1px solid #505050;padding-top:16px;margin-top:18px}
.section-group h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#e2e2e2;margin:0 0 14px}
.two-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.callout{border:1px solid #656565;background:#303030;padding:12px;font-size:11px;line-height:1.55;border-radius:5px;color:#dedede;margin-bottom:14px}
.notice{font-size:12px;line-height:1.6;color:#c8c8c8}
.statusbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 16px;background:#202020;color:#c3c3c3;border-top:1px solid #414141;font-size:10px;letter-spacing:.025em}
.hidden{display:none!important}
.button-row{display:flex;gap:8px;flex-wrap:wrap}
.button-row .mini-btn{flex:1}
#findings{margin:10px 0;padding:0;list-style:none;max-height:190px;overflow:auto}
#findings li{padding:9px;background:#323232;border:1px solid #545454;margin-bottom:6px;border-radius:4px;font-size:11px;line-height:1.4}
#findings li button{margin-top:5px}
@media(max-width:1240px){.workarea{grid-template-columns:210px minmax(0,1fr) 285px}.pages-panel{padding:14px 10px}.inspector-scroll{padding:13px}.canvas-hint{display:none}}
@media print{.app-shell{display:none!important}}

#artboard .media-slot.selected-media{outline:3px solid #101010;outline-offset:-5px;box-shadow:inset 0 0 0 7px #fff8;}
.page-actions{margin-top:5px}
#new-page-template{width:100%;height:34px;border:1px solid #757575;background:#171717;color:white;border-radius:5px;padding:0 9px;font-size:12px}

/* V8.7: true artboard thumbnails — the same page renderer as the canvas. */
.page-item{grid-template-columns:92px minmax(0,1fr);gap:12px;overflow:hidden;padding:8px 6px}
.page-thumb-frame{display:block;width:92px;height:52px;overflow:hidden;position:relative;background:white;border:1px solid #858585;box-shadow:0 1px 4px #0005;pointer-events:none}
.page-thumb-inner{display:block;position:absolute;top:0;left:0;width:1280px;height:720px;transform-origin:top left;transform:scale(.071875);pointer-events:none}
.page-thumb-inner .guide-page{box-shadow:none!important;transform:none!important}
.page-item .page-name{font-size:12px;line-height:1.35}
.page-item .page-sub{font-size:10px;line-height:1.4}
@media(max-width:1240px){.page-item{grid-template-columns:78px minmax(0,1fr)}.page-thumb-frame{width:78px;height:44px}.page-thumb-inner{transform:scale(.0609375)}}

/* Project creation: the only modal in the master workflow. */
#new-brand-dialog{color:#f6f6f6;background:#292929;border:1px solid #777;border-radius:9px;padding:26px 28px;width:min(440px,calc(100vw - 32px));box-shadow:0 30px 100px #0009;font:13px/1.5 'Segoe UI',Arial,sans-serif}
#new-brand-dialog::backdrop{background:#000b}
#new-brand-dialog h2{font-size:18px;letter-spacing:-.02em;margin:0 0 9px}
#new-brand-dialog p{color:#cecece;line-height:1.55;margin:0 0 23px}
#new-brand-dialog .control label{font-size:12px}
#new-brand-dialog .control input{width:100%;padding:11px 12px;background:#151515;border:1px solid #8b8b8b;border-radius:5px;color:white}
#new-brand-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}
#new-brand-dialog button{padding:10px 18px;background:#393939;border:1px solid #777;color:white;border-radius:5px;cursor:pointer}
#new-brand-dialog button.primary{background:#eee;border-color:#eee;color:#161616;font-weight:700}

/* V8.8 — restrained recovery and review controls */
.font-preview{padding:14px 11px;border:1px solid #767676;background:#2b2b2b;border-radius:5px;margin:8px 0;color:#fff;font-size:23px;line-height:1.5;overflow-wrap:anywhere}
.recovery-list{list-style:none;margin:12px 0;padding:0}.recovery-item{display:flex;justify-content:space-between;gap:6px;padding:12px 0;border-bottom:1px solid #555}.recovery-item small{display:block;color:#e1e1e1;font-size:11px;line-height:1.5}.recovery-item button{margin:2px}
.recovery-item strong{font-size:12px}.section-group summary{cursor:pointer;min-height:32px;font-weight:700;color:#fff}
.review-dialog{background:#242424;color:#f7f7f7;border:1px solid #777;border-radius:10px;max-width:820px;width:min(95vw,820px);max-height:90vh;padding:0;box-shadow:0 35px 100px #0008;font-family:'Segoe UI','Open Sans',Arial,sans-serif}
.review-dialog::backdrop{background:#0009}.review-top{display:flex;justify-content:space-between;gap:25px;align-items:start;padding:24px 28px 18px;border-bottom:1px solid #555}.review-top h2{font-size:27px;margin:4px 0 7px}.review-top p{font-size:13px;color:#e4e4e4;line-height:1.5;max-width:570px;margin:0}.review-eyebrow{font-size:10px;font-weight:700;letter-spacing:.16em;color:#dfdfdf}
.review-dialog button{border:1px solid #aaa;color:#fff;background:#393939;padding:9px 12px;border-radius:5px;cursor:pointer;font:600 12px/1.3 'Segoe UI',sans-serif}.review-dialog button.primary{background:#e8e8e8;border-color:#e8e8e8;color:#202020}.review-dialog button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.review-summary{padding:14px 28px;background:#333;color:#fff;font-size:13px;font-weight:700}.review-scroll{padding:4px 28px;max-height:42vh;overflow-y:auto}.review-scroll ul{list-style:none;padding:0}.review-scroll li{padding:12px 0;border-bottom:1px solid #4e4e4e;font-size:12px;line-height:1.5;display:flex;align-items:center;justify-content:space-between;gap:10px}.review-scroll strong{margin-right:5px}
.review-actions{padding:16px 28px;display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid #555}.review-footnote{color:#d9d9d9;font-size:11px;line-height:1.6;padding:0 28px 20px;margin:0}

/* V8.10: quieter, task-led UI with deliberate controls */
.page-add-group{border-top:1px solid #505050;padding:15px 0 10px;display:flex;flex-direction:column;gap:8px}
.page-add-group label{font-size:12px;font-weight:650;color:#f0f0f0}
.page-add-group select,.canvas-toolbar select{border:1px solid #838383;background:#1e1e1e;color:#fff;border-radius:5px;min-height:34px;padding:4px 9px;font-size:12px}
.page-add-group .help{font-size:11px;line-height:1.55;color:#d1d1d1;margin:0}
.canvas-actions{gap:5px}.canvas-actions #zoom-in,.canvas-actions #zoom-out{font-size:18px;min-width:34px}.canvas-actions #zoom-value{font-size:11px;color:#ebebeb;min-width:38px;text-align:right}
.canvas-actions #deselect{white-space:nowrap}.canvas-actions button:disabled{opacity:.5}
.inspector details>summary{cursor:pointer;font-size:12px;font-weight:650;color:#f0f0f0;margin-bottom:11px;line-height:1.45}
.inspector details[open]>summary{border-bottom:1px solid #555;padding-bottom:9px}
.inspector .font-preview{display:block;margin:9px 0;padding:10px;background:#383838;color:#fff;font-size:23px;line-height:1.3;border-radius:4px}
.canvas-stage{justify-content:safe center;align-items:safe center}
@media(max-width:1280px){.workarea{grid-template-columns:224px minmax(0,1fr) 305px}.canvas-toolbar{padding-inline:10px}.canvas-actions{gap:3px}}

.approval-check{display:flex!important;gap:8px;align-items:center;line-height:1.45!important;font-size:11px!important;color:#ededed!important;padding:8px 0;margin:5px 0}
.approval-check input[type=checkbox]{width:16px;height:16px;flex:none;accent-color:#dddddd}

/* Single primary save workflow; advanced compatibility tools remain available under More. */
.toolbar-more{position:relative;flex-shrink:0}.toolbar-more summary{cursor:pointer;display:flex;align-items:center;min-height:33px;padding:0 11px;border:1px solid #767676;border-radius:4px;color:#f3f3f3;font:600 12px/1.3 'Segoe UI',Arial,sans-serif;background:#2e2e2e;list-style:none}.toolbar-more summary::-webkit-details-marker{display:none}.toolbar-more summary::after{content:'⌄';font-weight:400;margin-left:9px}.toolbar-more[open] summary{border-color:#ddd}.toolbar-more-menu{position:absolute;top:calc(100% + 7px);right:0;z-index:1000;min-width:200px;display:grid;gap:4px;padding:7px;background:#252525;border:1px solid #777;box-shadow:0 12px 30px #0007;border-radius:5px}.toolbar-more-menu button{width:100%;text-align:left}.toolbar-more summary:focus-visible{outline:2px solid #fff;outline-offset:2px}