:root{--ink:#1d2030;--muted:#81869a;--line:#e8e9f0;--bg:#f7f7fa;--surface:#fff;--purple:#6756d9;--green:#24876b;--orange:#cf8a36;--red:#c95d83}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px "DM Sans",sans-serif}.boot{min-height:100vh;display:grid;place-items:center;color:var(--muted)}button,input,textarea,select{font:inherit}button{cursor:pointer}.layout{display:flex;min-height:100vh}.sidebar{width:244px;flex:0 0 244px;background:#fff;border-right:1px solid var(--line);padding:25px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{font:700 24px "Space Grotesk";letter-spacing:-1px;display:flex;gap:9px;align-items:center;padding:0 11px 32px}.brand-mark{display:grid;place-items:center;width:30px;height:30px;color:#fff;background:var(--purple);border-radius:9px;font-size:15px}.workspace{padding:0 11px 22px}.workspace-label{font-size:10px;letter-spacing:1px;font-weight:700;color:#a4a6b1;margin-bottom:10px}.workspace-card{display:flex;gap:9px;align-items:center;padding:11px 9px;background:#f4f3fc;border-radius:10px}.workspace-logo{width:29px;height:29px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#f59b70,#6756d9);display:grid;place-items:center;color:#fff;font-weight:700}.workspace-logo img{width:100%;height:100%;object-fit:cover}.workspace-card strong{display:block;font-size:12px}.workspace-card small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.nav{display:grid;gap:4px}.nav button{border:0;background:none;color:#73778a;text-align:left;border-radius:8px;padding:11px 12px;font-weight:600;display:flex;align-items:center;gap:12px}.nav button.active{background:#efedfc;color:var(--purple)}.nav .count{margin-left:auto;border-radius:10px;background:#f1effc;color:var(--purple);font-size:10px;padding:3px 7px}.nav .review-count{background:#fff0e3;color:#bd7c2d}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:14px}.side-action{display:block;border:0;background:none;color:#777b8c;padding:9px 12px;width:100%;text-align:left}.profile{display:flex;gap:9px;align-items:center;margin:10px 8px 0;padding-top:12px;border-top:1px solid #f0f0f4}.avatar{width:31px;height:31px;border-radius:50%;background:#ebe8fd;color:var(--purple);display:grid;place-items:center;font-size:10px;font-weight:700}.profile strong,.profile small{display:block}.profile strong{font-size:11px}.profile small{font-size:10px;color:var(--muted);margin-top:2px}.main{width:100%;max-width:1500px;margin:0 auto;padding:0 52px 50px}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.crumb{font-size:12px;color:#a0a3b0}.actions{display:flex;gap:9px;align-items:center}.button{border:0;border-radius:8px;padding:10px 15px;font-size:12px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}.primary{background:var(--purple);color:#fff;box-shadow:0 4px 11px #6756d938}.secondary{color:var(--purple);background:#fff;border:1px solid #dfddf2}.icon-button{background:#fff;border:1px solid var(--line);border-radius:8px;width:37px;height:37px;color:#74788a}.heading{padding:34px 0 24px;display:flex;justify-content:space-between;align-items:end}.eyebrow{font-size:11px;color:#979aa8;margin:0 0 8px}.heading h1,.project-title{font:600 30px "Space Grotesk";letter-spacing:-1px;margin:0}.subtle{color:var(--muted);margin:8px 0 0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:22px}.stat,.panel{background:var(--surface);border:1px solid var(--line);border-radius:13px}.stat{padding:19px;display:flex;gap:12px;align-items:center}.stat-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:19px}.stat:nth-child(1) .stat-icon{background:#eceefd;color:#6174ca}.stat:nth-child(2) .stat-icon{background:#fff2e4;color:#c27b2c}.stat:nth-child(3) .stat-icon{background:#e5f4ed;color:#398d72}.stat:nth-child(4) .stat-icon{background:#fbeaf2;color:#be6791}.stat strong{display:block;font:600 25px "Space Grotesk"}.stat span{font-size:11px;color:var(--muted)}.grid{display:grid;grid-template-columns:minmax(480px,1fr) 330px;gap:20px}.panel{padding:22px}.panel-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:18px}.panel h2{font:600 17px "Space Grotesk";margin:0}.panel-head p{font-size:11px;color:var(--muted);margin:5px 0 0}.link-button{border:0;background:none;color:var(--purple);font-size:11px;font-weight:700}.table-labels,.project-row{display:grid;grid-template-columns:minmax(220px,1.8fr) 1fr 1fr 18px;gap:10px;align-items:center}.table-labels{font-size:9px;font-weight:700;letter-spacing:.7px;color:#aaacb9;border-bottom:1px solid var(--line);padding:0 6px 9px}.project-row{padding:13px 6px;border-bottom:1px solid #f0f0f4;cursor:pointer}.project-row:hover{background:#fafaff}.proof-thumb{width:40px;height:40px;border-radius:8px;background:#eceafd;overflow:hidden;display:grid;place-items:center;color:var(--purple);font-weight:700}.proof-thumb img{width:100%;height:100%;object-fit:cover}.project-name{display:flex;gap:11px;align-items:center}.project-name strong{font-size:12px;display:block}.project-name small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.status{font-size:10px;font-weight:700;display:inline-flex;gap:5px;align-items:center}.status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.in-production{color:#6978c7}.awaiting-review{color:#c5812f}.needs-changes{color:#c0648b}.approved,.finalized{color:#388e71}.updated{font-size:10px;color:#9598a6}.attention{padding:0}.attention .panel-head{padding:22px 22px 8px}.attention-row{display:flex;gap:10px;align-items:center;padding:12px 22px;border-bottom:1px solid #f0f0f4}.attention-row strong{font-size:11px;display:block}.attention-row small{font-size:10px;color:var(--muted)}.badge{padding:3px 7px;background:#f1effc;color:var(--purple);border-radius:10px;font-size:10px;font-weight:700}.empty{padding:30px 8px;text-align:center;color:var(--muted);font-size:12px}.workspace-main{max-width:1280px;margin:0 auto;padding:0 32px 50px;width:100%}.workspace-top{height:78px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.back{border:0;background:none;color:#696d7e;font-weight:700}.project-heading{padding:28px 0 18px;display:flex;justify-content:space-between;align-items:end}.project-meta{font-size:12px;color:var(--muted);margin-top:7px}.project-tabs{display:flex;gap:2px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px;margin-bottom:16px}.project-tabs button{border:0;background:none;padding:9px 13px;color:#777b8d;border-radius:7px;font-size:12px;font-weight:700}.project-tabs button.active{color:var(--purple);background:#f0effc}.proof-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.proof-toolbar strong{font:600 16px "Space Grotesk"}.proof-container{display:grid;gap:22px}.proof-page{display:grid;grid-template-columns:minmax(0,820px) 320px;justify-content:center;gap:18px;align-items:start}.art{position:relative;line-height:0;background:#fff}.art img,.art .pdf-canvas{display:block;width:100%;height:auto}.annotation-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}.draw-toolbar{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:7px;z-index:2;background:#fff;padding:8px 10px;border:1px solid #deddf1;border-radius:9px;box-shadow:0 3px 12px #1d203022;line-height:normal}.color-dot,.width-dot{border:0;background:none;padding:0;border-radius:50%;cursor:pointer}.color-dot{width:22px;height:22px;background:var(--c);border:2px solid #fff;box-shadow:0 0 0 1px #bcc0ce}.color-dot.active{box-shadow:0 0 0 2px var(--purple)}.width-dot{width:28px;height:28px;background:#fff;border:1px solid #dfdfeb;display:grid;place-items:center}.width-dot:after{content:"";width:var(--s);height:var(--s);background:#5e6375;border-radius:50%}.width-dot.active{border-color:var(--purple);background:#f0effc}.tool-divider{width:1px;height:20px;background:#e2e2ea}.tool-button{border:1px solid #dddcef;background:#fff;color:var(--purple);border-radius:6px;padding:6px 9px;font-size:11px;font-weight:700}.page-comments{background:#fff;border:1px solid var(--line);border-radius:10px;padding:17px;line-height:normal}.page-comments h3{font:600 14px "Space Grotesk";margin:0 0 11px}.comment{padding:9px 0;border-bottom:1px solid #f1f1f5}.comment:last-child{border-bottom:0}.comment strong{font-size:11px}.comment small{float:right;color:var(--muted);font-size:10px}.comment p{font-size:12px;line-height:1.4;margin:5px 0 0;color:#666a7b}.comment-form{margin-top:12px}.field{display:block;font-size:11px;font-weight:700;color:#606476;margin:0 0 12px}.field input,.field textarea,.field select{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid #dfdfe8;border-radius:8px;background:#fff;color:var(--ink);outline:none}.field textarea{min-height:82px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--purple)}.offer-box{max-width:650px}.offer-box p{line-height:1.6;color:#65697a}.page-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}.page-tabs button{border:1px solid #dfddeb;background:#fff;color:var(--purple);border-radius:7px;padding:8px 11px;font-size:11px;font-weight:700}.page-tabs button.active{background:var(--purple);color:#fff}.modal-backdrop{position:fixed;inset:0;background:#1c1f315c;display:grid;place-items:center;padding:18px;z-index:20}.modal{position:relative;width:min(410px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:15px;padding:28px;box-shadow:0 18px 70px #1d203055}.modal h2{font:600 21px "Space Grotesk";margin:0 0 8px}.modal p{font-size:12px;color:var(--muted);line-height:1.5}.modal-close{position:absolute;right:13px;top:10px;border:0;background:none;font-size:22px;color:#8c90a0}.modal-icon{width:35px;height:35px;background:#efedfc;color:var(--purple);border-radius:9px;display:grid;place-items:center;margin-bottom:14px}.modal-actions{display:flex;gap:8px;margin-top:14px}.modal-actions>*{flex:1}.toast{position:fixed;right:22px;bottom:22px;background:#252838;color:#fff;border-radius:9px;padding:11px 14px;z-index:30;font-size:12px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.logo-preview{height:100px;background:#fff;border:1px dashed #d9d8e7;border-radius:10px;display:grid;place-items:center;color:var(--muted);overflow:hidden}.logo-preview img{max-width:100%;max-height:100%;object-fit:contain}.guest-header{max-width:1180px;margin:0 auto;padding:20px 28px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.guest-brand{font:700 21px "Space Grotesk"}.hidden{display:none!important}@media(max-width:1000px){.sidebar{width:210px;flex-basis:210px}.main{padding:0 24px}.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.proof-page{grid-template-columns:minmax(0,1fr) 280px}.workspace-main{padding:0 24px}}@media(max-width:720px){.sidebar{display:none}.main,.workspace-main{padding-left:16px;padding-right:16px}.topbar,.workspace-top{height:64px}.heading,.project-heading{align-items:start;gap:12px;flex-direction:column}.stats{grid-template-columns:1fr 1fr}.stat{padding:13px}.grid{display:block}.attention{margin-top:16px}.table-labels{display:none}.project-row{grid-template-columns:1fr 15px}.project-row .status,.project-row .updated{grid-column:1;margin-left:52px}.project-row .updated{display:none}.proof-page{grid-template-columns:1fr}.page-comments{grid-row:2}.draw-toolbar{max-width:calc(100% - 20px);flex-wrap:wrap}.settings-grid{grid-template-columns:1fr}.guest-header{padding:16px}.workspace-top .actions .secondary{display:none}}
.language-switch{width:calc(100% - 16px);margin:6px 8px;border:1px solid #dcd9f2;border-radius:9px;background:linear-gradient(135deg,#fbfaff,#f0edff);color:var(--purple);padding:8px 11px;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.2px;box-shadow:0 2px 7px #6756d914;transition:transform .15s ease,box-shadow .15s ease}.language-switch:hover{transform:translateY(-1px);box-shadow:0 5px 12px #6756d924}.language-switch:before{content:'◎';width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:var(--purple);color:#fff;font-size:14px;line-height:1}.guest-header .language-switch{width:auto;margin:0;gap:7px;padding:8px 11px}
.annotation-canvas.drawing-enabled{touch-action:none;-webkit-user-select:none;user-select:none}.page-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 auto 14px;max-width:820px}.page-nav strong{font-size:12px;color:#5d6175}.page-nav button:disabled{opacity:.42;cursor:not-allowed}@media(max-width:720px){.proof-page{gap:12px}.proof-page .art{max-width:100%;overflow:hidden}.draw-toolbar{position:sticky;left:6px;top:6px}.page-nav{position:sticky;top:0;z-index:4;background:var(--bg);padding:8px 0;margin-bottom:8px}.page-nav .button{padding:9px 10px;font-size:11px}}
.brand,.heading h1,.project-title,.stat strong,.panel h2,.proof-toolbar strong,.page-comments h3,.guest-brand,.modal h2{font-family:"Montserrat",Arial,sans-serif!important}.brand,.heading h1,.project-title{letter-spacing:-.4px}body{font-family:"Montserrat",Arial,sans-serif}
.brand-mark{background:#6756d9!important;font-size:0!important;position:relative;overflow:hidden}.brand-mark:before{content:"";position:absolute;inset:6px 7px 7px 8px;border-radius:3px;background:#fff;clip-path:polygon(0 0,70% 0,100% 30%,100% 100%,0 100%)}.brand-mark:after{content:"";position:absolute;left:11px;top:15px;width:10px;height:5px;border-left:2px solid #6756d9;border-bottom:2px solid #6756d9;transform:rotate(-45deg)}.language-picker{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:7px 8px;padding:3px;border:1px solid #dedbf2;border-radius:10px;background:#f6f5fc;box-shadow:inset 0 1px 1px #ffffff}.language-picker button{border:0;border-radius:7px;background:transparent;color:#7c8092;padding:7px 5px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:5px;transition:background .15s,color .15s,box-shadow .15s}.language-picker button.active{background:#fff;color:#5542d0;box-shadow:0 2px 6px #352d771c}.language-picker button:not(.active):hover{background:#eeecfb}.flag{display:inline-block;width:17px;height:12px;border-radius:2px;box-shadow:0 0 0 1px #39405a2b;overflow:hidden}.flag-bg{background:linear-gradient(to bottom,#fff 0 33.33%,#169b62 33.33% 66.66%,#d62612 66.66%)}.flag-en{background:linear-gradient(33deg,transparent 42%,#fff 42% 48%,#cf142b 48% 53%,transparent 53%),linear-gradient(-33deg,transparent 42%,#fff 42% 48%,#cf142b 48% 53%,transparent 53%),linear-gradient(to right,transparent 39%,#fff 39% 61%,transparent 61%),linear-gradient(to bottom,transparent 31%,#fff 31% 69%,transparent 69%),linear-gradient(to right,transparent 44%,#cf142b 44% 56%,transparent 56%),linear-gradient(to bottom,transparent 38%,#cf142b 38% 62%,transparent 62%),#1f4d99}.guest-header .language-picker{width:132px;margin:0}.language-picker-compact{flex:0 0 132px}@media(max-width:720px){.guest-header .language-picker{width:116px}.language-picker button span{font-size:10px}}
.brand-mark{background:linear-gradient(135deg,#8b79ff,#5140c5)!important;box-shadow:0 4px 11px #6756d94d}.brand-mark:before{content:"✓"!important;inset:0!important;width:auto!important;height:auto!important;border:0!important;clip-path:none!important;background:transparent!important;color:#fff!important;display:grid!important;place-items:center!important;font:700 20px/1 Arial,sans-serif!important}.brand-mark:after{content:""!important;left:auto!important;top:auto!important;right:3px!important;bottom:3px!important;width:7px!important;height:7px!important;border:2px solid #fff!important;border-radius:50%!important;background:#ff9f5c!important;transform:none!important}.flag{width:18px!important;height:18px!important;border-radius:50%!important;box-shadow:0 0 0 1px #39405a35,0 1px 3px #39405a28!important}.flag-bg{background:linear-gradient(to bottom,#fff 0 33.33%,#199d63 33.33% 66.66%,#d62612 66.66%)!important}.flag-en{background:linear-gradient(33deg,transparent 43%,#fff 43% 48%,#cf142b 48% 52%,transparent 52%),linear-gradient(-33deg,transparent 43%,#fff 43% 48%,#cf142b 48% 52%,transparent 52%),linear-gradient(to right,transparent 37%,#fff 37% 63%,transparent 63%),linear-gradient(to bottom,transparent 31%,#fff 31% 69%,transparent 69%),linear-gradient(to right,transparent 44%,#cf142b 44% 56%,transparent 56%),linear-gradient(to bottom,transparent 39%,#cf142b 39% 61%,transparent 61%),#1f4d99!important}
.flag{width:20px!important;height:14px!important;border-radius:2px!important}.flag-en{background:#012169 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0 0 60 30M60 0 0 30' stroke='white' stroke-width='7'/%3E%3Cpath d='M0 0 60 30M60 0 0 30' stroke='%23C8102E' stroke-width='3'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='white' stroke-width='11'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E") center/cover no-repeat!important}

/* Responsive layout safeguards */
.sidebar{overflow-y:auto;overscroll-behavior:contain}
.mobile-nav-layer,.mobile-nav-toggle{display:none}
@media(max-width:1180px){.grid{grid-template-columns:1fr}}
@media(max-width:1120px){.proof-page{grid-template-columns:minmax(0,820px);justify-content:center}.page-comments{max-width:820px;width:100%;justify-self:center}}
@media(max-width:720px){
  .mobile-nav-toggle{display:grid;place-items:center;flex:0 0 37px}
  .topbar{height:auto;min-height:64px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding-block:10px}
  .topbar .crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .actions{justify-content:flex-end;min-width:0}.topbar .actions .secondary{display:none}.topbar .actions .primary{padding-inline:11px;white-space:nowrap}
  .workspace-top{height:auto;min-height:64px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;padding-block:10px}
  .workspace-top .actions{grid-column:1/-1;justify-content:flex-start;overflow-x:auto;white-space:nowrap;padding-bottom:2px;scrollbar-width:none}.workspace-top .actions::-webkit-scrollbar{display:none}.workspace-top .actions .secondary{display:inline-flex}.workspace-top .actions .button{flex:0 0 auto}
  .project-tabs{overflow-x:auto;white-space:nowrap;padding-inline-end:32px;scroll-padding-inline:12px;scroll-snap-type:x proximity;scrollbar-width:none}.project-tabs::-webkit-scrollbar{display:none}.project-tabs button{flex:0 0 auto;scroll-snap-align:start}
  .modal-actions{flex-direction:column}.modal-actions>*{width:100%}
  .guest-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.guest-header>span:nth-child(2){grid-column:1/-1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;order:3}
  .mobile-nav-layer{display:block;position:fixed;inset:0;z-index:50;pointer-events:none}.mobile-nav-layer.open{pointer-events:auto}.mobile-nav-scrim{position:absolute;inset:0;border:0;background:#1c1f315c;opacity:0;transition:opacity .18s ease}.mobile-nav-layer.open .mobile-nav-scrim{opacity:1}
  .mobile-nav-panel{position:absolute;inset-block:0;inset-inline-start:0;width:min(86vw,330px);background:#fff;padding:20px 14px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow-y:auto;box-shadow:16px 0 38px #1d203033;transform:translateX(-105%);transition:transform .2s ease}.mobile-nav-layer.open .mobile-nav-panel{transform:translateX(0)}
  .mobile-nav-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 20px}.mobile-nav-head .brand{padding:0;font-size:22px}.mobile-nav-head .icon-button{border:0;background:#f4f3fc}.mobile-nav-links{margin-top:4px}.mobile-nav-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}.mobile-nav-foot .language-picker{margin-inline:0}.mobile-profile{width:100%;border:0;background:none;text-align:start;margin:10px 0 0;padding:12px 8px;cursor:pointer}
}

/* Review follow-up: accessible contrast, type and shared interaction states. */
:root{--muted:#596075}
.project-link{color:inherit;text-decoration:none}
.workspace-label,.table-labels,.updated,.crumb{color:#5b6175}
.workspace-card small,.profile small,.project-name small,.attention-row small{color:var(--muted);font-size:12px}
.table-labels{font-size:11px}.updated,.status{font-size:12px}.field{font-size:12px}.panel-head p{font-size:12px}.project-name strong,.attention-row strong{font-size:13px}
.awaiting-review{color:#8a5316}.needs-changes{color:#973d63}.approved,.finalized{color:#176c57}
.field input,.field textarea,.field select{font-size:14px}
:where(button,input,textarea,select,a):focus-visible{outline:2px solid #4f3fc6;outline-offset:2px}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{border-color:#4f3fc6;box-shadow:0 0 0 3px #6756d926}
.button:active:not(:disabled){transform:scale(.96)}.button.is-pending{opacity:.72;cursor:wait}.button.is-pending::after{content:"";width:12px;height:12px;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;margin-inline-start:3px}
@media(prefers-reduced-motion:no-preference){.button.is-pending::after{animation:proofly-spin .7s linear infinite}}@keyframes proofly-spin{to{transform:rotate(1turn)}}
#toast-region{position:fixed;right:22px;bottom:22px;z-index:60;max-width:min(420px,calc(100vw - 32px));background:#252838;color:#fff;border-radius:9px;padding:11px 14px;font-size:13px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .16s ease,transform .16s ease}#toast-region.show{opacity:1;transform:translateY(0)}
.proof-skeleton{min-height:260px;width:100%;border-radius:12px;background:linear-gradient(100deg,#f0f0f5 25%,#fafafe 42%,#f0f0f5 58%);background-size:200% 100%;display:grid;place-items:center;color:#696f82}.proof-skeleton:before{content:"Loading preview…";font-size:13px;font-weight:600}@media(prefers-reduced-motion:no-preference){.proof-skeleton{animation:proofly-shimmer 1.2s linear infinite}}@keyframes proofly-shimmer{to{background-position:-200% 0}}
.art img,.art .pdf-canvas,.proof-thumb img{outline:1px solid oklch(0 0 0 / .1);outline-offset:-1px}
.color-dot{width:32px;height:32px}.width-dot{width:34px;height:34px}.tool-button{padding:8px 11px;font-size:12px}
.brand-mark{background:linear-gradient(135deg,#8b79ff,#5140c5)!important}.flag{width:20px!important;height:14px!important;border-radius:2px!important}
@media(max-width:720px){.field input,.field textarea,.field select{font-size:16px}.draw-toolbar{gap:8px;padding:9px}.color-dot{width:34px;height:34px}.width-dot{width:36px;height:36px}.modal-backdrop{overscroll-behavior:contain}#toast-region{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.mobile-nav-scrim,.mobile-nav-panel,#toast-region{transition:none}.proof-skeleton{animation:none}}

/* Keep the primary project action next to the project list it creates. */
.compact-topbar{justify-content:flex-start}
.panel-head{gap:16px}
.panel-actions{margin-inline-start:auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.panel-actions .link-button{min-height:38px;padding:0 4px;white-space:nowrap}
.panel-new-project{padding:11px 15px;white-space:nowrap;box-shadow:0 8px 20px #6756d92f}
.panel-new-project .mi{font-size:20px;line-height:1}
@media(max-width:720px){
  .panel-head{align-items:stretch;flex-direction:column}
  .panel-actions{margin-inline-start:0;justify-content:flex-start}
  .panel-new-project{width:100%}
}

/* Proof page status layout: keep status controls with the project title, not in the top bar. */
.workspace-top .status-action-wrap,.workspace-top .status-legend{display:none!important}
.workspace-top .actions{flex-wrap:wrap;justify-content:flex-end}
.project-heading{align-items:flex-start;gap:24px}
.project-heading>div{min-width:0}
.project-status-panel{margin-inline-start:auto;min-width:300px;max-width:390px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px 14px;box-shadow:0 10px 28px #1d20300d}
.project-status-current{display:flex;align-items:center;gap:10px;justify-content:space-between}
.project-status-current .status-icon-pill{flex:0 0 auto}
.project-status-current small{font-size:11px;line-height:1.3;color:var(--muted);text-align:end;max-width:185px}
.project-status-panel .status-quick-actions{margin-top:10px;justify-content:flex-end;gap:8px}
.project-status-panel .status-icon-button{width:38px!important;height:38px!important;min-width:38px!important;border-radius:12px!important}
.project-status-panel .status-icon-button .mi{font-size:21px!important}
@media(max-width:960px){
  .project-heading{flex-direction:column;align-items:stretch}
  .project-status-panel{margin-inline-start:0;width:100%;max-width:none;min-width:0}
  .project-status-current,.project-status-panel .status-quick-actions{justify-content:flex-start}
  .project-status-current small{text-align:start;max-width:none}
}
@media(max-width:720px){
  .workspace-top .actions{justify-content:flex-start}
  .project-status-panel .status-icon-button{width:44px!important;height:44px!important;min-width:44px!important}
}

/* Header identity: company + language + active designer. */
.app-topbar{gap:16px;justify-content:space-between}
.topbar-right,.header-utilities{margin-inline-start:auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.company-chip,.header-profile-chip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:14px;min-height:42px;padding:6px 10px;color:var(--ink);box-shadow:0 6px 18px #1d20300a}
.company-chip{max-width:270px}
.company-chip-logo{width:30px;height:30px;border-radius:9px;background:#f4f3fc;color:var(--purple);display:grid;place-items:center;overflow:hidden;flex:0 0 30px;font-weight:800;font-size:11px}
.company-chip-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.company-chip strong,.company-chip small,.header-profile-chip strong,.header-profile-chip small{display:block;line-height:1.15;min-width:0}
.company-chip strong,.header-profile-chip strong{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.company-chip small,.header-profile-chip small{font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-profile-chip{border:0;cursor:pointer;max-width:230px;text-align:start;padding-inline:8px 11px}
.header-profile-chip:hover{background:#f7f6fd;box-shadow:0 8px 20px #6756d914}
.header-profile-chip .avatar{width:34px;height:34px;border-radius:10px;overflow:hidden;flex:0 0 34px}
.header-profile-chip .avatar img{width:100%;height:100%;object-fit:cover}
.workspace-top{gap:12px}
.workspace-identity-top{margin-inline-end:auto}
.guest-header .guest-company-chip{margin-inline:auto}
.guest-header .company-chip-logo{width:34px;height:34px;flex-basis:34px}
@media(max-width:1180px){
  .topbar-right .topbar-company{display:none}
  .header-profile-chip{max-width:190px}
}
@media(max-width:860px){
  .app-topbar{height:auto;min-height:68px;align-items:center;padding-block:10px}
  .topbar-right,.header-utilities{flex-wrap:wrap}
  .workspace-top{height:auto;min-height:70px;flex-wrap:wrap;padding-block:10px}
  .workspace-identity-top{order:3;flex:1 1 100%;margin-inline-end:0}
  .workspace-top .actions{margin-inline-start:0}
}
@media(max-width:720px){
  .topbar-right .language-picker,.header-utilities .language-picker{width:112px}
  .header-profile-chip span:last-child{display:none}
  .header-profile-chip{padding:5px;min-height:42px}
  .guest-header .guest-company-chip{order:3;grid-column:1/-1;margin:0}
}

/* Sidebar brand: compact wordmark + dashboard shortcut. */
.sidebar .brand,.mobile-nav-head .brand{cursor:pointer;border-radius:14px;min-height:44px;padding:4px 8px;margin:0 2px 28px;gap:10px;transition:background-color .14s ease,box-shadow .14s ease}
.sidebar .brand:hover,.mobile-nav-head .brand:hover{background:#f6f4ff;box-shadow:0 8px 18px #6756d910}
.sidebar .brand:focus-visible,.mobile-nav-head .brand:focus-visible{outline:2px solid #4f3fc6;outline-offset:2px}
.pixelapprove-wordmark{display:inline-flex;align-items:baseline;min-width:0}
.sidebar .pixelapprove-wordmark,.mobile-nav-head .pixelapprove-wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:.92;letter-spacing:-.8px;min-width:0}
.sidebar .word-pixel,.sidebar .word-approve,.mobile-nav-head .word-pixel,.mobile-nav-head .word-approve{display:block;max-width:135px;overflow:visible;text-overflow:clip;white-space:nowrap}
.sidebar .word-pixel,.mobile-nav-head .word-pixel{font-size:21px}
.sidebar .word-approve,.mobile-nav-head .word-approve{font-size:17px;color:#5b6175;letter-spacing:-.45px}
.sidebar .brand .brand-mark,.mobile-nav-head .brand .brand-mark{width:34px;height:34px;flex:0 0 34px;border-radius:11px}
.landing-brand .pixelapprove-wordmark,.guest-brand .pixelapprove-wordmark{gap:0}
@media(max-width:1000px){
  .sidebar .word-pixel,.sidebar .word-approve{max-width:118px}
  .sidebar .word-pixel{font-size:20px}
  .sidebar .word-approve{font-size:16px}
}

/* Proofing identity cleanup: no repeated company chips in the designer/review view. */
.topbar-company,.workspace-identity-top,.guest-company-chip{display:none!important}
.workspace-top .header-utilities{display:none!important}
.company-logo-only{width:42px;height:42px;border-radius:13px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;box-shadow:0 7px 18px #1d20300d;color:var(--purple);flex:0 0 42px}
.company-logo-only img{width:100%;height:100%;object-fit:contain;padding:5px;background:#fff}
.company-logo-only svg{width:26px;height:26px;color:var(--purple)}
.project-company-logo{margin-inline-start:4px;margin-inline-end:auto}
.guest-company-logo{margin-inline-start:12px;margin-inline-end:auto}
.project-designer-byline{display:inline-flex;align-items:center;gap:10px;margin-top:12px;color:var(--muted)}
.project-designer-byline .avatar{width:38px;height:38px;border-radius:12px;overflow:hidden;flex:0 0 38px;outline:1px solid oklch(0 0 0 / .1);outline-offset:-1px}
.project-designer-byline .avatar img{width:100%;height:100%;object-fit:cover}
.project-designer-byline small,.project-designer-byline strong{display:block;line-height:1.18}
.project-designer-byline small{font-size:10px;text-transform:uppercase;letter-spacing:.55px;color:#8a8fa1;font-weight:800}
.project-designer-byline strong{font-size:13px;color:var(--ink);font-weight:800}
.workspace-top{grid-template-columns:auto auto minmax(0,1fr) auto}
.workspace-top .actions{margin-inline-start:auto}
@media(max-width:860px){
  .project-company-logo{order:2;margin-inline-end:0}
  .workspace-top .actions{order:3;margin-inline-start:auto}
  .project-designer-byline{margin-top:10px}
}

/* Proofing cleanup v2: one brand, one back action, one compact status control. */
.project-company-logo,.guest-company-logo,.guest-header>.company-chip,.guest-header>.guest-company-chip{display:none!important}
.guest-header{justify-content:space-between}
.guest-header>span:not(.guest-brand){display:none!important}
.workspace-top{display:flex!important;grid-template-columns:none!important;align-items:center;gap:14px}
.workspace-top .back{margin-inline-end:auto}
.workspace-top .actions{margin-inline-start:0}
.compact-status-panel{min-width:0;max-width:340px;padding:12px 14px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 14px}
.compact-status-panel .status-quick-actions{margin-top:0!important;justify-content:flex-start!important;gap:8px}
.compact-status-panel .status-icon-button{width:40px!important;height:40px!important;min-width:40px!important;border-radius:14px!important}
.compact-status-panel .status-icon-button.active{box-shadow:0 0 0 3px currentColor inset;background:color-mix(in oklch,currentColor 10%,white)}
.status-selected-copy{min-width:0}
.status-selected-copy strong{display:block;font-size:13px;line-height:1.15;color:var(--ink)}
.status-selected-copy small{display:block;margin-top:3px;font-size:11px;line-height:1.25;color:var(--muted)}
.project-status-current{display:none!important}
@media(max-width:960px){
  .compact-status-panel{width:100%;max-width:none}
}
@media(max-width:720px){
  .workspace-top{flex-wrap:wrap}
  .workspace-top .actions{width:100%;justify-content:flex-start}
  .compact-status-panel{grid-template-columns:1fr}
}

/* Project identity and lighter client approval controls. */
.project-identity-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.project-identity-card{display:inline-flex;align-items:center;gap:10px;min-width:0}
.project-identity-avatar{width:38px;height:38px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;color:var(--purple);flex:0 0 38px;box-shadow:0 5px 14px #1d20300a}
.project-identity-avatar img{width:100%;height:100%;object-fit:cover}
.project-identity-avatar.company-avatar img{object-fit:contain;padding:5px;background:#fff}
.project-identity-avatar svg{width:24px;height:24px}
.project-identity-card small,.project-identity-card strong{display:block;line-height:1.16}
.project-identity-card small{font-size:10px;text-transform:uppercase;letter-spacing:.55px;color:#8a8fa1;font-weight:800}
.project-identity-card strong{font-size:13px;color:var(--ink);font-weight:800;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-status-panel{min-width:0;max-width:430px;padding:0;background:transparent;border:0;box-shadow:none}
.client-status-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.client-status-button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:14px;padding:10px 13px;display:inline-flex;align-items:center;gap:10px;min-height:48px;box-shadow:0 5px 16px #1d20300a;transition:background-color .15s ease,border-color .15s ease,transform .12s ease}
.client-status-button .mi{font-size:22px}
.client-status-button strong,.client-status-button small{display:block;line-height:1.12;text-align:start}
.client-status-button strong{font-size:12px}
.client-status-button small{font-size:10px;color:var(--muted);margin-top:3px}
.client-status-button.changes{color:#9b4269}
.client-status-button.approve{color:#16715b}
.client-status-button.active{border-color:currentColor;background:color-mix(in oklch,currentColor 8%,white);box-shadow:0 5px 16px #1d20300a}
.client-status-button:active{transform:scale(.96)}
.compact-status-panel .status-icon-button.active{box-shadow:none!important;border-color:currentColor!important;background:color-mix(in oklch,currentColor 10%,white)!important}
@media(max-width:960px){
  .client-status-panel{width:100%;max-width:none}
  .client-status-actions{justify-content:flex-start}
}
@media(max-width:720px){
  .project-identity-strip{gap:10px}
  .project-identity-card{width:100%}
  .client-status-button{flex:1 1 180px}
}

/* Editable company team list. */
.team-editor-list{
  display:grid;
  gap:10px;
}
.team-editor-row{
  display:grid;
  grid-template-columns:42px minmax(150px,1fr) minmax(210px,1.25fr) 160px auto;
  gap:12px;
  align-items:end;
  padding:12px;
  border:1px solid #eeeef5;
  border-radius:14px;
  background:#fff;
}
.team-editor-row .avatar{
  align-self:center;
  width:38px;
  height:38px;
  border-radius:12px;
  overflow:hidden;
}
.team-editor-row .avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.team-editor-row .field{
  margin:0;
}
.team-save-button{
  min-height:40px;
  white-space:nowrap;
}
.team-save-button:disabled{
  opacity:.6;
  cursor:wait;
}
@media(max-width:980px){
  .team-editor-row{
    grid-template-columns:42px 1fr 1fr;
  }
  .team-role-field,
  .team-save-button{
    grid-column:auto;
  }
}
@media(max-width:720px){
  .team-editor-row{
    grid-template-columns:42px 1fr;
    align-items:start;
  }
  .team-editor-row .team-email-field,
  .team-editor-row .team-role-field,
  .team-editor-row .team-save-button{
    grid-column:1/-1;
  }
}

/* Annotation toolbar v20: visible for anonymous review and ~30% lighter. */
.compact-draw-toolbar,
.draw-toolbar{
  gap:5px;
  padding:6px 8px;
  border-radius:8px;
  box-shadow:0 4px 14px #1d20301f;
}
.compact-draw-toolbar strong,
.draw-toolbar strong{
  font-size:11px;
  line-height:1;
}
.compact-draw-toolbar .color-dot,
.draw-toolbar .color-dot{
  width:22px!important;
  height:22px!important;
}
.compact-draw-toolbar .width-dot,
.draw-toolbar .width-dot{
  width:24px!important;
  height:24px!important;
}
.compact-draw-toolbar .tool-button,
.draw-toolbar .tool-button{
  padding:6px 8px!important;
  font-size:11px!important;
}
.compact-draw-toolbar .autosave-status,
.draw-toolbar .autosave-status{
  font-size:11px;
}
.compact-draw-toolbar .tool-divider,
.draw-toolbar .tool-divider{
  height:17px;
}
.guest-proof-page .draw-toolbar{
  display:flex;
}
.readonly-proof-page .draw-toolbar,
.readonly-proof-page .draw-hint{
  display:none!important;
}
.readonly-annotation{
  pointer-events:none;
  cursor:default;
}
.draw-hint{
  max-width:285px;
  padding:12px 13px;
  border-radius:13px;
}
.draw-hint strong{
  font-size:13px;
}
.draw-hint span{
  font-size:12px;
  line-height:1.35;
}
@media(max-width:720px){
  .compact-draw-toolbar,
  .draw-toolbar{
    gap:5px;
    padding:6px;
    max-width:calc(100% - 12px);
  }
  .compact-draw-toolbar .color-dot,
  .draw-toolbar .color-dot{
    width:24px!important;
    height:24px!important;
  }
  .compact-draw-toolbar .width-dot,
  .draw-toolbar .width-dot{
    width:26px!important;
    height:26px!important;
  }
  .compact-draw-toolbar .autosave-status,
  .draw-toolbar .autosave-status{
    display:none;
  }
  .guest-proof-page .art,
  .guest-proof-page .annotation-canvas.drawing-enabled{
    touch-action:none;
  }
  .guest-proof-page .draw-hint{
    left:8px;
    right:8px;
    max-width:none;
  }
}

/* Keep language and account controls in one canonical place: the sidebar.
   The desktop topbar should stay a lightweight breadcrumb/header only. */
.topbar .topbar-right,
.topbar .header-utilities,
.topbar .language-picker,
.topbar .header-profile-chip,
.topbar [data-header-profile],
.topbar [data-header-signin],
.topbar [data-profile],
.topbar [data-signin]{
  display:none!important;
}

.topbar.app-topbar,
.topbar.compact-topbar{
  justify-content:flex-start!important;
}

/* Status icons: keep them compact and self-contained instead of inheriting
   the old text-status dot layout. */
.status-icon-pill{
  width:34px;
  height:30px;
  padding:0;
  border:1px solid currentColor;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  background:color-mix(in oklch,currentColor 9%,white);
  font-size:0;
  line-height:1;
  vertical-align:middle;
  overflow:hidden;
  flex:0 0 auto;
}
.status-icon-pill:before{
  display:none!important;
  content:none!important;
}
.status-icon-pill .mi{
  font-size:18px;
  line-height:1;
}
.status-icon-pill.with-copy{
  width:auto;
  min-height:34px;
  padding:7px 10px;
  gap:7px;
  font-size:12px;
  font-weight:800;
}

.status-legend{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #f0f0f4;
}
.status-legend-item{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:145px;
}
.status-legend-item strong,
.status-legend-item small{
  display:block;
  line-height:1.15;
}
.status-legend-item strong{
  font-size:12px;
}
.status-legend-item small{
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
}

@media(max-width:720px){
  .panel{
    overflow:hidden;
  }
  .project-row.project-link{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:6px 12px!important;
    align-items:center!important;
    width:100%;
    min-width:0;
    padding:14px 0!important;
    overflow:hidden;
  }
  .project-row.project-link .project-name{
    grid-column:1;
    grid-row:1;
    min-width:0;
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:12px;
    align-items:center;
  }
  .project-row.project-link .proof-thumb{
    width:44px;
    height:44px;
  }
  .project-row.project-link .project-name strong,
  .project-row.project-link .project-name small{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .project-row.project-link .status-icon-pill,
  .project-row.project-link .status{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    margin:0!important;
  }
  .project-row.project-link .updated{
    display:none!important;
    margin:0!important;
  }
  .project-row.project-link>span:last-child{
    display:none!important;
  }
  .status-legend{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    overflow:visible;
  }
  .status-legend-item{
    min-width:0;
  }
}

/* Proof dimensions: lightweight print-size guides outside the artwork. */
.proof-stack,
.proof-container,
.proof-page,
.proof-page .art.has-dimensions{
  overflow:visible!important;
}
.proof-page .art.has-dimensions{
  margin-block-start:28px;
  margin-inline-start:28px;
}
.proof-dimension{
  position:absolute;
  z-index:1;
  pointer-events:none;
  color:#8a90a3;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1;
}
.proof-dimension-label{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:18px;
  padding:0 7px;
  border:1px solid #e5e6ef;
  border-radius:999px;
  background:#fff;
  box-shadow:0 3px 10px #1d20300f;
  white-space:nowrap;
}
.proof-dimension-x{
  inset-inline:0;
  top:-17px;
  height:1px;
  border-block-start:1px solid #c7cad8;
}
.proof-dimension-x:before,
.proof-dimension-x:after{
  content:"";
  position:absolute;
  top:-5px;
  width:1px;
  height:10px;
  background:#c7cad8;
}
.proof-dimension-x:before{inset-inline-start:0}
.proof-dimension-x:after{inset-inline-end:0}
.proof-dimension-x .proof-dimension-label{
  inset-inline-start:50%;
  top:-10px;
  transform:translateX(-50%);
}
.proof-dimension-y{
  inset-block:0;
  inset-inline-start:-17px;
  width:1px;
  border-inline-start:1px solid #c7cad8;
}
.proof-dimension-y:before,
.proof-dimension-y:after{
  content:"";
  position:absolute;
  inset-inline-start:-5px;
  width:10px;
  height:1px;
  background:#c7cad8;
}
.proof-dimension-y:before{top:0}
.proof-dimension-y:after{bottom:0}
.proof-dimension-y .proof-dimension-label{
  top:50%;
  inset-inline-start:-10px;
  transform:translate(-50%,-50%) rotate(-90deg);
  transform-origin:center;
}
.locked-status-panel{
  display:flex;
  align-items:center;
  gap:12px;
  max-width:430px;
  padding:12px 14px;
  border-color:#d7dcfb;
  background:linear-gradient(135deg,#fff,#f5f7ff);
}
.locked-status-panel p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
@media(max-width:720px){
  .proof-page .art.has-dimensions{
    margin-block-start:24px;
    margin-inline-start:20px;
  }
  .proof-dimension{
    font-size:10px;
  }
  .proof-dimension-y{
    inset-inline-start:-13px;
  }
  .proof-dimension-x{
    top:-15px;
  }
  .proof-dimension-y .proof-dimension-label{
    inset-inline-start:-8px;
  }
  .locked-status-panel{
    width:100%;
    max-width:none;
  }
}