/* Layout baseado na referência enviada em 07/10/2026. */
:root{--header:56px}
body{background:var(--black)}
.header{padding:0 24px;gap:22px;background:var(--black)}
.brand img{width:153px}
.tagline,.nav-divider,.current-page{display:none}
.price-link{margin-left:auto;font-size:12px;min-height:34px;padding:6px 14px}
.workspace{grid-template-columns:clamp(280px,23vw,370px) minmax(0,1fr);padding:12px 16px 16px;gap:12px;height:calc(100dvh - var(--header))}
.editor,.library{position:relative;top:auto;height:100%;max-height:none;border-radius:22px;background:#111111;border-color:#292929;min-height:0}
.editor{padding:16px 12px 12px}
.editor-head{height:39px;align-items:flex-start;margin:0 6px 12px}
.editor h2{font:500 15px/1.5 Inter,sans-serif;letter-spacing:0;margin:0;padding-bottom:12px;border-bottom:2px solid var(--white)}
.editor-content{padding:0 2px;scrollbar-width:thin}
.editor-feature{height:clamp(120px,17vh,174px);border-radius:12px;overflow:hidden;position:relative;isolation:isolate;margin-bottom:16px;background:#202020}
.editor-feature>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:brightness(.72)}
.editor-feature:after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#090909d9)}
.editor-feature>div{position:absolute;left:13px;right:13px;bottom:12px;display:grid;gap:2px;z-index:1}
.editor-feature strong{color:var(--acid);font:700 18px/1.2 "Space Grotesk",sans-serif;letter-spacing:-.02em}
.editor-feature span{font-size:11px;color:var(--white)}
.person-tabs{margin:0 0 12px;padding:4px;border-radius:12px;background:#222222;border-color:#3A3A3A}
.person-tabs button{font-size:12px;min-height:33px;border-radius:8px}
.person-tabs button[aria-selected=true]{background:#333333;color:var(--white);box-shadow:inset 0 0 0 1px #494949}
.editor-content .step{margin:0 0 12px}
.editor-content .video-zone{height:clamp(135px,22vh,206px);background:#202020;border:1px dashed #3D3D3D;border-radius:12px}
.empty-video{padding:12px;gap:4px}
.empty-video .upload-orb,.photo-upload-target .upload-orb{background:linear-gradient(#464646,#282828);border-color:#606060;width:40px;height:40px;margin-bottom:7px}
.empty-video strong{font-size:13px;text-wrap:balance;max-width:215px}
.empty-video>span:not(.upload-orb){font-size:13px;color:var(--white)}
.empty-video .text-link{font-size:11px;margin-top:6px;color:var(--muted)}
.upload-small{padding:8px 3px 0;min-height:25px;font-size:10px}
.editor-content .photo-zone,.editor-content .photo-upload-target,.photo-preview{min-height:clamp(125px,19vh,174px)}
.photo-zone{background:#202020;border:1px solid #262626;border-radius:12px}
.photo-upload-target{gap:3px;padding:12px}
.photo-upload-target strong{font-size:13px}
.photo-upload-target>span:not(.upload-orb){font-size:11px}
.photo-upload-target small{font-size:9px}
.photo-preview{padding:12px;gap:9px}
.permission-note{margin-top:7px;font-size:9px}
.character-grid{background:#202020;border:1px solid #262626;border-radius:12px;min-height:130px;padding:20px 10px;align-items:center}
.character{font-size:10px}
.editor-bottom{padding-top:0;margin-top:3px;border:0}
.simple-promise,.generate-hint{display:none}
.generate{border-radius:12px;min-height:47px;font-size:14px;padding:12px}
.generate:disabled{background:#292929;color:#999999}
.library{display:flex;flex-direction:column;padding:13px 20px 16px;overflow:hidden}
.library-top{height:46px;min-height:46px;gap:20px;align-items:center;flex-direction:row}
.library-title h1{margin:0;display:flex;align-items:center;gap:8px;font:500 13px/1.5 Inter,sans-serif;letter-spacing:0;text-wrap:nowrap;border:1px solid #3C3C3C;padding:9px 12px;border-radius:10px;background:#2B2B2B;box-shadow:inset 0 1px 3px #ffffff0c}
.library-title h1 .icon{width:17px;height:17px;color:var(--white)}
.search{width:220px;max-width:220px;margin-left:auto;background:transparent;border-color:#373737;min-height:35px;padding:7px 11px}
.search input{font-size:10px}
.search .icon{width:14px;height:14px}
.search-key{display:none}
.filters-row{justify-content:center;flex-shrink:0;margin:26px 0 20px;gap:0}
.filters{display:flex;gap:2px;background:var(--black);border:1px solid #333333;border-radius:999px;padding:4px;flex-wrap:nowrap}
.filters button{font-size:11px;min-height:33px;padding:6px 15px;color:#B0B0B0}
.filters button[aria-pressed=true]{background:var(--white);color:var(--black)}
.result-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.library-scroll{min-height:0;flex:1;overflow:auto;padding:3px 3px 0;scrollbar-width:thin;scrollbar-color:#3A3A3A transparent}
.gallery{gap:16px;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
.motion-card{display:block;margin:0 0 16px}
.card-button{aspect-ratio:9/16;border-radius:13px;border:0;background:#232323;--ratio:9/16}
.card-button.selected{border:0;box-shadow:inset 0 0 0 2px var(--acid)}
.card-media{aspect-ratio:9/16;transform:none!important;transition:none;z-index:-1}
.card-shade{inset:45% 0 0;background:linear-gradient(transparent,#090909d9);opacity:0;visibility:hidden;transition:opacity 120ms}
.card-badge{top:12px;left:11px;font-size:10px;border:0;background:transparent;padding:0;opacity:0;visibility:hidden;transition:opacity 120ms}
.card-badge .icon{width:13px;height:13px}
.card-play{display:none!important}
.card-selected{background:var(--acid);width:22px;height:22px;top:10px;right:10px;z-index:2}
.card-body{bottom:12px;left:11px;right:11px;gap:8px;opacity:0;visibility:hidden;transition:opacity 120ms;pointer-events:none}
.card-title{font:500 12px/1.3 Inter,sans-serif;letter-spacing:0;max-width:100%;text-wrap:balance}
.card-caption{display:none!important}
.card-action,.card-button.selected .card-action{opacity:1;transform:none;margin:0 0 0 auto;padding:8px 11px;border-radius:8px;font-size:11px;gap:15px;width:max-content;max-width:100%}
.card-action .icon{width:15px;height:15px}
.card-button:focus-visible .card-body,.card-button:focus-visible .card-badge,.card-button:focus-visible .card-shade{opacity:1;visibility:visible}
.library-footer{font-size:9px;border-top:0;margin:1px 0 0;padding:9px 0;color:#A6A6A6}
.no-results{padding:60px 20px}
.modal .generate{border-radius:999px}
@media(hover:hover) and (pointer:fine){.card-button:hover .card-body,.card-button:hover .card-badge,.card-button:hover .card-shade{opacity:1;visibility:visible}}
@media(min-width:921px) and (max-height:800px){
  .editor{padding-top:14px}
  .editor-head{height:32px;margin-bottom:10px}
  .editor h2{font-size:14px;padding-bottom:8px}
  .editor-feature{height:108px;margin-bottom:12px}
  .editor-feature strong{font-size:16px}
  .person-tabs{margin-bottom:10px}
  .editor-content .video-zone{height:123px}
  .empty-video .upload-orb,.photo-upload-target .upload-orb{width:31px;height:31px;margin-bottom:2px}
  .empty-video .text-link{margin-top:2px}
  .editor-content .photo-zone,.editor-content .photo-upload-target,.photo-preview{min-height:111px}
  .photo-upload-target{padding:8px}
  .photo-upload-target small{margin-top:2px}
  .editor-content .step{margin-bottom:10px}
}
@media(max-width:1100px) and (min-width:921px){
  .workspace{grid-template-columns:280px minmax(0,1fr)}
  .library{padding-left:14px;padding-right:14px}
  .library-title h1{font-size:11px;padding:9px}
  .search{width:145px}
  .filters button{padding:6px 11px}
  .gallery{gap:12px}
}
@media(max-width:920px){
  :root{--header:56px}
  .header{padding:0 18px}
  .workspace{display:block;height:auto;padding:16px 16px 100px}
  .library{height:auto;border:0;border-radius:0;min-height:calc(100dvh - 160px);padding:0;background:transparent;overflow:visible}
  .library-top{height:auto;min-height:38px;gap:12px}
  .library-title h1{font-size:12px;padding:8px 10px}
  .search{width:190px;max-width:190px}
  .filters-row{margin:23px 0 18px}
  .filters button{padding:6px 14px}
  .library-scroll{overflow:visible;padding:3px 0 0}
  .gallery{gap:13px}
  .motion-card{margin-bottom:13px}
  .library-footer{flex-direction:row}
  .editor{display:none;position:fixed;bottom:0;top:auto;left:50%;transform:translateX(-50%);z-index:40;width:min(460px,100%);height:min(745px,calc(100dvh - 70px));padding:18px 16px calc(16px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0}
  .editor.is-open{display:flex}
  .editor-head{height:38px;margin-bottom:10px;align-items:center}
  .editor h2{font-size:16px;padding-bottom:8px}
  .editor-feature{height:112px;margin-bottom:12px}
  .editor-feature strong{font-size:18px}
  .person-tabs{margin-bottom:12px}
  .person-tabs button{font-size:12px}
  .editor-content .video-zone{height:150px}
  .editor-content .photo-zone,.editor-content .photo-upload-target,.photo-preview{min-height:130px}
  .editor-content .step{margin-bottom:12px}
  .editor-bottom{margin-top:8px}
  .generate{font-size:14px;min-height:49px}
  .mobile-close{display:grid}
  .mobile-bar{background:#111111;border-color:#333333}
  .mobile-bar button{border-radius:12px}
}
@media(max-width:620px){
  .brand img{width:144px}
  .price-link{font-size:11px}
  .library-top{flex-direction:column;align-items:stretch;gap:13px}
  .library-title h1{width:max-content;max-width:100%;font-size:13px}
  .search{width:100%;max-width:none;min-height:38px;padding:9px 12px}
  .search input{font-size:11px}
  .filters-row{justify-content:flex-start;margin:18px 0 15px;overflow:auto}
  .filters{max-width:100%;overflow-x:auto;gap:0;padding:3px;scrollbar-width:none}
  .filters button{font-size:10px;padding:6px 12px;min-height:32px}
  .gallery{gap:12px}
  .motion-card{margin-bottom:12px}
  .card-button{border-radius:11px}
  .card-body{left:9px;right:9px;bottom:9px}
  .card-title{font-size:11px}
  .card-badge{font-size:9px;left:9px;top:9px}
  .card-action{font-size:10px;padding:7px 9px;gap:9px}
  .library-footer{flex-direction:column;gap:3px}
}