@font-face{font-family:BDO Grotesk;src:local(Inter);font-display:swap}:root{--page:#f5f6f8;--surface:#fff;--surface-subtle:#f7f8fa;--ink:#171a21;--muted:#697181;--line:#e5e7eb;--line-strong:#d5d9e0;--brand:#446fd6;--brand-dark:#3159b8;--brand-soft:#edf3ff;--nav:#1d2433;--success:#147d52;--success-soft:#e9f8f0;--warning:#9a5b13;--warning-soft:#fff5dd;--danger:#b33b4a;--danger-soft:#fff0f2;--shadow:0 12px 34px #171e2b14}*{box-sizing:border-box}html,body{min-height:100%}body{background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:BDO Grotesk,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select,textarea{font:inherit}button,select{cursor:pointer}a{color:inherit;text-decoration:none}.app-shell,.auth-shell{min-height:100vh}.auth-shell>main{background:radial-gradient(circle at 50% 15%, #eef3ff, var(--page) 48%);text-align:center;place-content:center;justify-items:center;gap:10px;min-height:100vh;padding:28px;display:grid}.auth-shell>main h1{margin:0}.auth-shell>main p{max-width:440px;color:var(--muted);margin:0 0 10px}.auth-shell>main button{background:var(--brand);color:#fff;border:0;border-radius:9px;min-height:42px;padding:0 18px;font-weight:650}.clerk-page{background:radial-gradient(circle at 25% 25%, #eef3ff, var(--page) 48%);grid-template-columns:minmax(320px,520px) auto;justify-content:center;align-items:center;gap:clamp(48px,8vw,120px);min-height:100vh;padding:48px;display:grid}.clerk-intro{max-width:470px}.clerk-intro .brand-mark{margin-bottom:42px}.clerk-intro .brand-mark span{background:var(--nav)}.clerk-intro .brand-mark span:last-child{background:var(--brand)}.clerk-intro h1{max-width:440px;font-size:clamp(40px,6vw,68px)}.clerk-intro>p:last-child{max-width:420px;color:var(--muted);font-size:16px;line-height:1.6}.topbar{z-index:40;background:var(--nav);color:#fff;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;height:64px;padding:0 28px;display:flex;position:sticky;top:0}.brand{letter-spacing:-.01em;align-items:center;gap:12px;font-size:15px;font-weight:650;display:inline-flex}.brand-mark{gap:3px;width:28px;display:grid}.brand-mark span{background:#fff;border-radius:10px;height:3px;display:block}.brand-mark span:first-child{width:56%}.brand-mark span:nth-child(2){width:76%}.brand-mark span:nth-child(3){background:#7199ef;width:100%}.topbar-user{color:#d4d9e3;align-items:center;gap:12px;font-size:13px;display:flex}.avatar{color:#fff;background:#374157;border-radius:50%;place-items:center;width:34px;height:34px;font-size:12px;font-weight:700;display:grid;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.page-container{width:min(1240px,100% - 48px);margin:0 auto;padding:42px 0 64px}.page-heading{justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px;display:flex}.eyebrow{color:var(--brand);letter-spacing:.11em;text-transform:uppercase;margin:0 0 8px;font-size:11px;font-weight:750}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.035em;margin-bottom:8px;font-size:clamp(28px,4vw,40px);font-weight:620;line-height:1.08}.subheading{color:var(--muted);margin-bottom:0;font-size:15px}.button{background:var(--brand);color:#fff;border:1px solid #0000;border-radius:9px;justify-content:center;align-items:center;gap:8px;min-height:40px;padding:0 15px;font-size:13px;font-weight:650;transition:background .14s,border-color .14s,transform .14s;display:inline-flex}.button:hover{background:var(--brand-dark)}.button:active{transform:translateY(1px)}.button:disabled{cursor:not-allowed;opacity:.5}.button.secondary{border-color:var(--line-strong);color:var(--ink);background:#fff}.button.secondary:hover{background:var(--surface-subtle);border-color:#aeb5c0}.button.ghost{color:var(--muted);background:0 0}.button.ghost:hover{color:var(--ink);background:#eef0f4}.button.danger{background:var(--danger)}.button.compact{min-height:34px;padding:0 11px}.button.icon-only{width:40px;padding:0}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px;display:flex}.filter-row{flex-wrap:wrap;gap:6px;display:flex}.filter-pill{color:var(--muted);background:0 0;border:1px solid #0000;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:600}.filter-pill:hover{color:var(--ink);background:#fff}.filter-pill.active{border-color:var(--line);color:var(--ink);background:#fff;box-shadow:0 1px 3px #0000000a}.search{border:1px solid var(--line);min-width:min(320px,100%);color:var(--muted);background:#fff;border-radius:9px;align-items:center;gap:9px;padding:0 12px;display:flex}.search input{width:100%;height:40px;color:var(--ink);background:0 0;border:0;outline:0}.design-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.design-card{border:1px solid var(--line);background:var(--surface);border-radius:16px;transition:transform .18s,box-shadow .18s,border-color .18s;overflow:hidden;box-shadow:0 1px 2px #141a2605}.design-card:hover{box-shadow:var(--shadow);border-color:#cdd5e2;transform:translateY(-2px)}.design-thumb{aspect-ratio:16/9;border-bottom:1px solid var(--line);background:linear-gradient(145deg,#f7f9fc,#e8edf5);place-items:center;display:grid;position:relative;overflow:hidden}.design-thumb:before,.design-thumb:after{content:"";background:#ffffffe0;border-radius:9px;position:absolute;box-shadow:0 8px 22px #2630441a}.design-thumb:before{width:74%;height:64%;top:18%;left:13%}.design-thumb:after{background:#dce6fa;width:22%;height:48%;top:26%;left:18%}.design-thumb-icon{z-index:2;color:#6482bf;margin-left:18%;position:relative}.design-card-body{padding:17px 18px 18px}.design-card-head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.design-card h3{letter-spacing:-.015em;margin-bottom:5px;font-size:16px;font-weight:650}.design-meta{color:var(--muted);align-items:center;gap:8px;margin-top:15px;font-size:12px;display:flex}.meta-dot{background:#adb3bd;border-radius:50%;width:3px;height:3px}.status{color:#626a78;white-space:nowrap;background:#eef0f4;border-radius:999px;align-items:center;gap:6px;padding:5px 8px;font-size:11px;font-weight:700;display:inline-flex}.status:before{content:"";background:currentColor;border-radius:50%;width:6px;height:6px}.status.in_review{background:var(--brand-soft);color:var(--brand-dark)}.status.changes_requested{background:var(--warning-soft);color:var(--warning)}.status.approved{background:var(--success-soft);color:var(--success)}.empty-state,.loading-state,.error-state{border:1px dashed var(--line-strong);text-align:center;background:#ffffff8c;border-radius:16px;place-items:center;min-height:340px;padding:42px;display:grid}.empty-state svg{color:#98a2b3;margin:0 auto 16px}.empty-state h2{margin-bottom:7px;font-size:18px}.empty-state p{max-width:410px;color:var(--muted);margin-bottom:20px;font-size:14px;line-height:1.55}.modal-backdrop{z-index:80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0d121b94;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:16px;width:min(520px,100%);max-height:calc(100vh - 40px);overflow-y:auto;box-shadow:0 24px 70px #0a101c47}.modal.wide{width:min(680px,100%)}.modal-head{justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 22px 14px;display:flex}.modal-head h2{letter-spacing:-.02em;margin-bottom:5px;font-size:20px}.modal-head p{color:var(--muted);margin-bottom:0;font-size:13px}.modal-body{padding:8px 22px 22px}.modal-actions{border-top:1px solid var(--line);justify-content:flex-end;gap:9px;padding:16px 22px;display:flex}.field{gap:7px;margin-bottom:16px;display:grid}.field label{font-size:12px;font-weight:700}.field input,.field textarea,.field select{border:1px solid var(--line-strong);width:100%;min-height:42px;color:var(--ink);background:#fff;border-radius:9px;outline:0;padding:10px 12px}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.field textarea{resize:vertical;min-height:100px}.field-help{color:var(--muted);font-size:12px;line-height:1.45}.dropzone{background:var(--surface-subtle);text-align:center;border:1px dashed #aab5c5;border-radius:12px;place-items:center;min-height:150px;padding:24px;display:grid;position:relative}.dropzone input{cursor:pointer;opacity:0;position:absolute;inset:0}.dropzone svg{color:var(--brand);margin:0 auto 9px}.dropzone strong{margin-bottom:4px;font-size:13px;display:block}.dropzone span{color:var(--muted);font-size:12px}.selected-file{color:var(--success);margin-top:10px;font-size:12px;font-weight:650}.review-page{grid-template-columns:minmax(0,1fr) 360px;height:calc(100vh - 64px);display:grid;overflow:hidden}.review-main{flex-direction:column;min-width:0;display:flex}.review-toolbar{border-bottom:1px solid var(--line);background:#fff;justify-content:space-between;align-items:center;gap:14px;min-height:66px;padding:11px 18px;display:flex}.review-title{align-items:center;gap:12px;min-width:0;display:flex}.review-title-text{min-width:0}.review-title h1{text-overflow:ellipsis;white-space:nowrap;margin:0 0 2px;font-size:17px;overflow:hidden}.review-title p{color:var(--muted);margin:0;font-size:11px}.review-actions{align-items:center;gap:8px;display:flex}.mode-switch{border:1px solid var(--line);background:var(--surface-subtle);border-radius:10px;gap:3px;padding:3px;display:flex}.mode-button{min-height:34px;color:var(--muted);background:0 0;border:0;border-radius:7px;align-items:center;gap:7px;padding:0 11px;font-size:12px;font-weight:650;display:inline-flex}.mode-button.active{color:var(--brand-dark);background:#fff;box-shadow:0 1px 3px #141a261a}.canvas-wrap{background-color:#e9ebef;background-image:radial-gradient(#cfd3da .7px,#0000 .7px);background-size:14px 14px;flex:1;min-height:0;padding:24px;position:relative;overflow:auto}.preview-shell{background:#fff;border-radius:10px;width:100%;min-width:320px;height:100%;min-height:520px;position:relative;overflow:hidden;box-shadow:0 8px 32px #1f263426}.preview-frame{background:#fff;border:0;width:100%;height:100%}.preview-hint{z-index:5;color:#fff;pointer-events:none;background:#191f2be6;border-radius:999px;padding:7px 11px;font-size:11px;position:absolute;top:14px;left:50%;transform:translate(-50%)}.comment-pin{z-index:8;background:var(--brand);color:#fff;border:2px solid #fff;border-radius:50%;place-items:center;width:26px;height:26px;font-size:11px;font-weight:750;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 3px 10px #00000047}.comment-pin.addressed{opacity:.68;background:#8b94a3}.comment-pin.draft{background:var(--danger)}.comment-popover{z-index:12;border:1px solid var(--line);background:#fff;border-radius:12px;width:min(310px,100% - 24px);padding:13px;position:absolute;transform:translate(10px,10px);box-shadow:0 16px 38px #141b2938}.comment-popover textarea{border:1px solid var(--line-strong);resize:vertical;border-radius:8px;outline:none;width:100%;min-height:88px;padding:9px 10px}.comment-popover textarea:focus{border-color:var(--brand)}.comment-popover-actions{justify-content:flex-end;gap:7px;margin-top:9px;display:flex}.comment-sidebar{border-left:1px solid var(--line);background:#fff;flex-direction:column;min-width:0;display:flex}.sidebar-head{border-bottom:1px solid var(--line);padding:19px 18px 14px}.sidebar-head-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.sidebar-head h2{margin:0;font-size:15px}.comment-count{min-width:22px;height:22px;color:var(--muted);background:#eef1f5;border-radius:99px;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:inline-flex}.sidebar-filters{gap:12px;margin-top:13px;display:flex}.sidebar-filter{color:var(--muted);background:0 0;border:0;border-bottom:2px solid #0000;padding:0 0 6px;font-size:12px;font-weight:650}.sidebar-filter.active{border-color:var(--brand);color:var(--ink)}.comment-list{flex:1;overflow-y:auto}.comment-item{border-bottom:1px solid #eef0f3;padding:17px 18px;transition:background .13s}.comment-item:hover,.comment-item.active{background:#f7f9fd}.comment-item.addressed{opacity:.62}.comment-focus{outline-offset:4px;width:100%;color:inherit;text-align:left;background:0 0;border:0;padding:0;display:block}.comment-author{align-items:center;gap:9px;margin-bottom:10px;display:flex}.comment-author .avatar{background:var(--brand-soft);width:28px;height:28px;color:var(--brand-dark)}.comment-author strong{font-size:12px;display:block}.comment-email,.comment-author time{color:var(--muted);margin-top:1px;font-size:10px;display:block}.comment-number{color:var(--brand);margin-left:auto;font-size:11px;font-weight:750}.comment-body{white-space:pre-wrap;margin:0 0 9px;font-size:13px;line-height:1.5;display:block}.comment-context{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;background:#f1f4f9;border-left:2px solid #cbd7ef;margin:0 0 10px;padding:7px 9px;font-size:10px;display:block;overflow:hidden}.comment-footer{color:var(--muted);justify-content:space-between;align-items:center;gap:8px;font-size:10px;display:flex}.text-action{color:var(--brand-dark);background:0 0;border:0;padding:3px 0;font-size:11px;font-weight:700}.sidebar-empty{color:var(--muted);text-align:center;flex:1;place-items:center;padding:32px;display:grid}.sidebar-empty svg{margin:0 auto 12px}.sidebar-empty p{margin:0;font-size:13px;line-height:1.5}.status-select{border:1px solid var(--line-strong);max-width:170px;height:36px;color:var(--ink);background:#fff;border-radius:8px;outline:none;padding:0 30px 0 10px;font-size:12px;font-weight:650}.export-box{border:1px solid var(--line);color:#333a47;white-space:pre-wrap;background:#f7f8fa;border-radius:10px;min-height:220px;padding:14px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.demo-banner{color:#795019;text-align:center;background:#fff8e8;border-bottom:1px solid #f2d8a3;padding:9px 18px;font-size:12px}.inline-error{background:var(--danger-soft);color:var(--danger);border-radius:8px;margin:10px 0 0;padding:9px 11px;font-size:12px}.spin{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:1000px){.design-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.review-page{grid-template-columns:minmax(0,1fr) 320px}.review-toolbar{flex-direction:column;align-items:flex-start}}@media (max-width:760px){.clerk-page{grid-template-columns:1fr;gap:28px;padding:28px 18px}.clerk-intro{display:none}.topbar{height:56px;padding:0 16px}.topbar-user>span{display:none}.page-container{width:min(100% - 28px,620px);padding-top:28px}.page-heading{flex-direction:column;align-items:stretch}.design-grid{grid-template-columns:1fr}.toolbar{flex-direction:column;align-items:stretch}.search{min-width:0}.review-page{grid-template-columns:1fr;height:auto;min-height:calc(100vh - 56px);overflow:visible}.review-main{min-height:72vh}.review-toolbar{z-index:30;position:sticky;top:56px}.review-actions{flex-wrap:wrap;width:100%}.mode-switch{flex:1}.mode-button{flex:1;justify-content:center}.canvas-wrap{min-height:580px;padding:12px}.comment-sidebar{border-left:0;border-top:1px solid var(--line);min-height:420px}.modal-actions{flex-wrap:wrap}}