.image-card{
  width:100%; height:100%; box-sizing:border-box; position:relative;
  background:var(--md-neutral-background-1-rest);
  border-radius:var(--md-radius-240,24px);
  box-shadow:0 4px 4px rgba(112,144,176,0.15), 0 0 1px rgba(112,144,176,0.2);
  padding:16px 24px 24px; display:flex; flex-direction:column; gap:16px;
}
.image-card-drop-zone{
  position:relative; width:100%; height:300px; flex-shrink:0;
  border-radius:var(--md-radius-160,16px); background:transparent;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  border:2px dashed var(--md-neutral-stroke-1-rest);
}
.image-card-drop-zone.has-image{ border-style:solid; border-width:1px; border-color:var(--md-neutral-stroke-1-rest); }
.image-card-drop-zone.has-image{ container-type:size; }
.image-card-drop-zone.has-image > .image-card-img{
  position:absolute; left:50%; top:50%; display:block; object-fit:cover;
  width:max(100cqw, 100cqh * var(--img-ratio, 0)); height:max(100cqh, 100cqw / var(--img-ratio, 1e9));
  transform:translate(-50%,-50%) translate(var(--img-pan-x,0px), var(--img-pan-y,0px)) scale(var(--img-scale,1));
  transform-origin:center center;
}
.image-card-drop-zone.is-svg > .image-card-img{ object-fit:contain; width:100cqw; height:100cqh; }
.image-card.img-pan-armed .image-card-img{ cursor:move; }
.image-card.img-pan-armed .image-card-img:active{ cursor:grabbing; }
.image-card.img-pan-armed{ z-index:40; }
.image-card.img-pan-armed .image-card-drop-zone{ outline:2px solid var(--ui-accent); outline-offset:2px; cursor:move; }
.image-card-crop-ghost{
  position:absolute; left:50%; top:50%; max-width:none; max-height:none; display:block; cursor:move;
  transform:translate(-50%,-50%) translate(var(--img-pan-x,0px), var(--img-pan-y,0px)) scale(var(--img-scale,1));
  transform-origin:center center;
}
.image-card-crop-ghost:active{ cursor:grabbing; }
.image-card-crop-mask{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  box-shadow:0 0 0 200vmax rgba(15,18,23,0.55);
}
.image-card-panel-thumb-wrap{
  position:relative; width:100%; height:100px; border-radius:var(--md-radius-160,16px);
  overflow:hidden; background:var(--md-neutral-background-2-rest);
  border:1px solid var(--ui-border); margin-bottom:8px; container-type:size;
}
.image-card-panel-thumb{
  position:absolute; left:50%; top:50%; display:block; object-fit:cover;
  width:max(100cqw, 100cqh * var(--img-ratio, 0)); height:max(100cqh, 100cqw / var(--img-ratio, 1e9));
  transform:translate(-50%,-50%) translate(var(--img-pan-x,0px), var(--img-pan-y,0px)) scale(var(--img-scale,1));
  transform-origin:center center;
}
.image-card-panel-thumb-wrap{ cursor:pointer; }
.image-card-panel-thumb-wrap.is-svg .image-card-panel-thumb{ object-fit:contain; width:100cqw; height:100cqh; }
.image-card-panel-thumb-edit{
  position:absolute; bottom:6px; right:6px; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--ui-border); background:var(--md-color-grey-white); color:var(--md-neutral-foreground-1-rest); font-size:11px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; transition:opacity .15s;
}
.image-card-panel-thumb-wrap:hover .image-card-panel-thumb-edit{ opacity:1; }
#imageCardMenu{ max-width:200px; }
.image-card.img-focused .image-card-drop-zone{ outline:2px solid var(--ui-accent); outline-offset:2px; }
.image-card .image-card-img{ cursor:pointer; }
.image-card-drop-hint{
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  padding:16px; color:var(--md-neutral-foreground-3-rest); font-family:var(--font-sans); font-size:var(--md-typography-font-size-400);
}
.image-card-drop-icon{ width:80px; height:80px; }
.image-card-lib-link, .image-card-file-link{ color:var(--md-brand-foreground-1-rest); text-decoration:none; cursor:pointer; }
.image-card-source-seg{ display:flex; width:100%; margin:0 0 10px; }
.image-card-source-seg button{ flex:1; }
.image-card-source-panes{ position:relative; overflow:hidden; transition:height .28s cubic-bezier(.2,.8,.2,1); }
.image-card-source-pane{ transition:opacity .22s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.image-card-source-panes:not([data-source="file"]) .image-card-source-pane[data-pane="file"],
.image-card-source-panes:not([data-source="link"]) .image-card-source-pane[data-pane="link"]{
  position:absolute; left:0; top:0; width:100%; opacity:0; pointer-events:none;
}
.image-card-source-panes:not([data-source="file"]) .image-card-source-pane[data-pane="file"]{ transform:translateX(-18px); }
.image-card-source-panes:not([data-source="link"]) .image-card-source-pane[data-pane="link"]{ transform:translateX(18px); }
.image-card-source-pane[data-pane="link"]{ padding-top:8px; box-sizing:border-box; }
.image-card-edit-link-field{ display:flex; flex-direction:column; gap:6px; }
.image-card-edit-link-hint{ margin:6px 0 0; font-size:var(--text-sm); color:var(--ui-muted); }
.image-card-edit-link-hint.is-bad{ color:var(--ui-danger); }
.image-card-edit-footer-left{ display:flex; gap:8px; width:100%; }
.image-card-edit-footer-left.hidden{ display:none; }
.image-card-edit-footer-left .btn{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap; min-width:0; }
.image-card-edit-footer .btn{ white-space:nowrap; }
.image-card-edit-help{ margin:0; font-size:var(--text-sm); color:var(--ui-muted); text-align:center; }
.image-card-edit-body .image-card-panel-dropzone{ height:200px; }
.image-card-edit-body .image-card-panel-dropzone .image-card-drop-icon{ width:64px; height:64px; }
.image-card-edit-body .image-card-panel-dropzone .image-card-drop-hint{ font-size:var(--text-md); }
.image-card-panel-dropzone{ height:120px; }
.image-card-panel-dropzone.drag-over{ border-color:var(--ui-accent); background:var(--md-neutral-background-2-rest); }
.image-card-panel-dropzone .image-card-drop-hint{ font-size:11px; }
.image-card-panel-dropzone .image-card-drop-icon{ width:44px; height:44px; }
.image-card-panel-lib-link{ color:var(--md-brand-foreground-1-rest); text-decoration:none; cursor:pointer; }
.image-card-more-btn{
  position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:8px;
  border:1px solid var(--ui-border); background:var(--md-color-grey-white); color:var(--ui-muted);
  box-shadow:0 1px 4px rgba(20,30,50,0.18);
  font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:0; pointer-events:none; transition:opacity .1s;
}
.image-card-drop-zone:hover .image-card-more-btn, .image-card-more-btn.open{ opacity:1; pointer-events:auto; }
.image-card-more-btn:hover{ background:var(--md-neutral-background-2-rest); color:var(--md-neutral-foreground-1-rest); }
.image-card-text{ display:flex; flex-direction:column; gap:8px; flex-shrink:0; }
.image-card-title{ font-family:var(--font-display); font-weight:var(--font-weight-light); font-size:var(--md-typography-font-size-600); line-height:32px; color:var(--md-neutral-foreground-1-rest); outline:none; }
.image-card-description{ font-family:var(--font-sans); font-weight:var(--font-weight-light); font-size:var(--md-typography-font-size-400); line-height:24px; color:var(--md-neutral-foreground-1-rest); outline:none; white-space:pre-wrap; }
.image-card-footer{ display:flex; flex-direction:column; gap:10px; width:100%; margin-top:auto; flex-shrink:0; }
.image-card-divider{ width:100%; height:1px; background:var(--md-neutral-stroke-1-rest); flex-shrink:0; }
.image-card-footer-icon[data-icon-empty="true"] .list-item-icon{ display:none; }
.image-card-footer .list-item-label:empty{ display:none; }
.image-card-footer:has(.list-item-label:empty) .image-card-divider,
.image-card-footer:not(:has(.list-item-label)) .image-card-divider{ display:none; }

