.figma-home,.figma-sidebar,.figma-preview-shell,.preview-modal { font-family:Inter,sans-serif; font-size:14px; line-height:20px; color:#414651; }
.figma-home p,.figma-sidebar p { margin:0; }
.figma-preview-shell { display:flex; background:white; align-items:flex-start; }
.figma-preview-shell > main { flex:1; min-width:0; }
.figma-sidebar { display:flex; flex-direction:column; width:296px; flex:0 0 296px; height:100dvh; min-height:720px; position:sticky; top:0; background:white; border-right:1px solid #e9eaeb; }
.sidebar-brand { padding:32px 20px 0; height:113px; flex-shrink:0; }
.sidebar-brand a { display:flex; align-items:center; gap:7.18px; width:max-content; }
.small-brand { display:inline-block; width:24px; height:24px; }.small-brand .brand-mark { transform:scale(.5); transform-origin:0 0; }
.brand-divider { display:block; margin-top:32px; }
.sidebar-links { padding:0 12px; }
.sidebar-link { display:flex; gap:12px; align-items:center; height:44px; padding:10px 12px; border-radius:6px; color:#414651; font-size:16px; font-weight:600; text-decoration:none; }
.sidebar-link.active { color:#fe470c; background:#fafafa; }.sidebar-link:hover { background:#fafafa; color:#fe470c; }
.sidebar-bottom { margin-top:auto; padding:0 16px 24px; display:flex; flex-direction:column; gap:16px; }
.sidebar-qr { border:1px solid #e9eaeb; border-radius:4px; box-shadow:0 1px 2px #0a0d120d; padding:16px; height:276px; }
.sidebar-qr h2 { font-size:14px; line-height:20px; font-weight:600; color:#181d27; margin:0 0 4px; }
.sidebar-qr p { color:#535862; font-size:14px; line-height:20px; }
.qr-scanner { position:relative; display:flex; align-items:center; justify-content:center; width:112px; height:112px; margin:16px auto; }
.qr-scanner:before,.qr-scanner:after { content:''; position:absolute; inset:0; pointer-events:none; border:2px solid #fe470c; border-radius:4px; clip-path:polygon(0 0,12px 0,12px 2px,2px 2px,2px 12px,0 12px,0 0,100% 0,100% 12px,calc(100% - 2px) 12px,calc(100% - 2px) 2px,calc(100% - 12px) 2px,calc(100% - 12px) 0,100% 0,100% 100%,calc(100% - 12px) 100%,calc(100% - 12px) calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) calc(100% - 12px),100% calc(100% - 12px),100% 100%,0 100%,0 calc(100% - 12px),2px calc(100% - 12px),2px calc(100% - 2px),12px calc(100% - 2px),12px 100%,0 100%); }
.sidebar-qr .figma-button { width:100%; height:36px; border-radius:4px; }
.sidebar-account { display:flex; position:relative; align-items:center; border:1px solid #e9eaeb; box-shadow:0 1px 2px #0a0d120d; border-radius:4px; height:64px; padding:12px; gap:4px; }
.sidebar-account > a { display:flex; align-items:center; gap:8px; color:#181d27; text-decoration:none; min-width:0; flex:1; }
.sidebar-account strong { display:block; font-weight:600; white-space:nowrap; font-size:14px; }.account-email { color:#535862; display:block; font-size:14px; overflow:hidden; text-overflow:ellipsis; }
.account-avatar { position:relative; width:40px; height:40px; flex:0 0 40px; }.account-avatar > img { width:40px; height:40px; border-radius:50%; object-fit:cover; }.account-avatar i,.activity-avatar i { position:absolute; width:12px; height:12px; bottom:0; right:0; border:1.5px solid white; background:#17b26a; border-radius:50%; }
.account-menu { background:none; border:0; align-self:flex-start; padding:0; }.account-popover { position:absolute; bottom:68px; right:0; background:white; border:1px solid #e9eaeb; border-radius:8px; padding:12px; box-shadow:0 4px 12px #0001; }.account-popover button { border:0; background:white; }
.mobile-menu { display:none; }
.figma-home { padding:32px; background:white; }
.home-header { margin-bottom:48px; }.home-breadcrumb { display:flex; align-items:center; gap:8px; height:28px; font-weight:600; font-size:14px; margin-bottom:20px; }.breadcrumb-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; }.breadcrumb-current { padding:4px 8px; background:#fafafa; border-radius:6px; }
.home-header h1 { margin:0 0 4px; font-size:24px; line-height:32px; font-weight:600; color:#181d27; }.home-header p { font-size:16px; line-height:24px; color:#535862; }
.home-section { margin-bottom:48px; }.home-section:last-child { margin-bottom:16px; }.home-section-header { display:flex; gap:16px; align-items:center; justify-content:space-between; min-height:40px; }.home-section-header h2 { font-size:18px; line-height:28px; margin:0; color:#181d27; font-weight:600; }.home-actions { display:flex; gap:12px; }
.figma-button { display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:10px 14px; height:40px; color:white; background:#fe470c; border:1px solid #ef4006; border-radius:8px; font:var(--sar-type-action); white-space:nowrap; box-shadow:0 1px 2px #0a0d120d,inset 0 -2px #0a0d120d; cursor:pointer; }.figma-button:hover { background:#e53e08; }.figma-button.secondary { color:#414651; background:white; border-color:#d5d7da; }.figma-button.secondary:hover { background:#fafafa; }.figma-button:focus-visible,.sidebar-link:focus-visible,.note-actions button:focus-visible { outline:3px solid #fe470c60; outline-offset:3px; }
.home-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; }.home-metric { border:1px solid #e9eaeb; border-radius:12px; padding:20px; height:174px; box-shadow:0 1px 2px #0a0d120d; }.metric-icon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid #e9eaeb; border-radius:10px; box-shadow:0 1px 2px #0a0d120d; margin-bottom:20px; }.home-metric h3 { font-size:14px; line-height:20px; margin:0 0 8px; color:#535862; font-weight:600; }.home-metric p { font-size:30px; line-height:38px; font-weight:600; color:#181d27; white-space:nowrap; }
.home-section-header.compact { min-height:36px; }.compact .figma-button { height:36px; }
.home-table-scroll { overflow-x:auto; }.home-notes-table { table-layout:fixed; width:100%; min-width:780px; border-collapse:collapse; }.home-notes-table th { height:44px; font-size:12px; font-weight:600; line-height:18px; color:#717680; text-align:left; border-bottom:1px solid #e9eaeb; padding:12px 0; }.home-notes-table td { height:72px; border-bottom:1px solid #e9eaeb; font-size:14px; color:#535862; padding:16px 0; }.home-document { display:flex; align-items:center; gap:12px; }.home-document strong { display:block; font-weight:500; color:#181d27; }.home-document > span > span { display:block; }.document-icon { display:block; width:40px; height:40px; position:relative; flex-shrink:0; }.document-icon > img:first-child { position:absolute; top:0; left:4px; }.document-icon > img:last-child { position:absolute; top:15px; left:11px; }
.note-badge { display:inline-flex; align-items:center; gap:4px; border:1px solid #e9eaeb; border-radius:999px; padding:2px 6px; font-size:12px; line-height:16px; color:#414651; background:#fafafa; }.note-badge.open { color:#c4320a; background:#fff6ed; border-color:#ffd6ae; }.note-actions { display:flex; justify-content:flex-end; gap:8px; }.note-actions button { display:flex; align-items:center; justify-content:center; border:0; background:none; width:40px; height:40px; border-radius:6px; }.note-actions button:hover { background:#fafafa; }
.activity-header { padding-bottom:20px; border-bottom:1px solid #e9eaeb; min-height:57px; }.home-activity-columns { display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:24px; }.home-activity { display:flex; gap:12px; min-height:106px; position:relative; }.home-activity:before { content:''; position:absolute; top:52px; bottom:6px; left:23px; width:2px; background:#e9eaeb; }.activity-avatar { display:flex; align-items:center; justify-content:center; width:48px; height:48px; flex:0 0 48px; background:#f5f5f5; border:1px solid #e9eaeb; border-radius:50%; position:relative; }.home-activity p { color:#535862; line-height:20px; }.home-activity p > span { color:#414651; }.home-activity time { font-size:12px; margin-left:4px; }.activity-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 6px; font-size:12px; line-height:16px; border:1px solid #d5d7da; box-shadow:0 1px 2px #0a0d120d; border-radius:4px; margin-top:10px; }.home-empty { padding:24px 0; color:#535862; }
.preview-modal-backdrop { position:fixed; inset:0; background:#181d2755; backdrop-filter:blur(4px); z-index:2000; display:flex; align-items:center; justify-content:center; padding:24px; }.preview-modal { max-width:440px; width:100%; padding:32px; border-radius:12px; background:white; box-shadow:0 12px 30px #0002; display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }.preview-modal h2 { font-size:20px; margin:0; }.preview-modal p { margin:0; }
@media(max-width:1100px) { .home-section-header { align-items:flex-start; flex-wrap:wrap; }.home-metric p { font-size:24px; }.home-actions { flex-wrap:wrap; }.home-activity-columns { gap:24px; } }
@media(max-width:767px) { .figma-preview-shell { flex-direction:column; }.figma-preview-shell > main { width:100%; }.figma-sidebar { width:100%; flex:auto; height:auto; min-height:0; position:relative; border-right:0; border-bottom:1px solid #e9eaeb; }.sidebar-brand { height:72px; padding:24px 16px; }.brand-divider,.sidebar-bottom { display:none; }.mobile-menu { display:block; position:absolute; right:16px; top:24px; border:1px solid #e9eaeb; border-radius:6px; background:white; padding:4px 12px; }.sidebar-links { display:none; padding-bottom:12px; }.sidebar-links.expanded { display:block; }.figma-home { padding:24px 16px; }.home-metrics { grid-template-columns:1fr; }.home-activity-columns { grid-template-columns:1fr; }.home-header { margin-bottom:32px; }.home-section { margin-bottom:32px; }.home-actions { gap:8px; } }

.preview-nav { width:100%; background:white; border:0; text-align:left; }

/* Scanner corners, rather than a continuous frame. */
.qr-scanner:before {border:0;clip-path:none;border-radius:0;background:linear-gradient(#fe470c,#fe470c) top left/12px 2px no-repeat,linear-gradient(#fe470c,#fe470c) top left/2px 12px no-repeat,linear-gradient(#fe470c,#fe470c) top right/12px 2px no-repeat,linear-gradient(#fe470c,#fe470c) top right/2px 12px no-repeat,linear-gradient(#fe470c,#fe470c) bottom left/12px 2px no-repeat,linear-gradient(#fe470c,#fe470c) bottom left/2px 12px no-repeat,linear-gradient(#fe470c,#fe470c) bottom right/12px 2px no-repeat,linear-gradient(#fe470c,#fe470c) bottom right/2px 12px no-repeat;}.qr-scanner:after{display:none;}