.upload { position:relative; width:100%; min-height:176px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:24px; background:var(--accent); clip-path:var(--step); cursor:pointer; }
    .upload::before { content:''; position:absolute; inset:2px; background:var(--black); clip-path:var(--step); }
    .upload>* { position:relative; }
    .upload:hover::before,.upload.dragging::before,.upload:has(input:focus-visible)::before { background:var(--accent); }
    .upload:hover,.upload.dragging,.upload:has(input:focus-visible) { color:var(--black); }
    .upload svg { width:32px; height:32px; }
    .upload span { font-size:18px; font-weight:550; }

.upload[data-frame]:not([data-frame="original"]) { clip-path:none; background:var(--black); color:var(--accent); }
.upload[data-frame]:not([data-frame="original"])::before { display:none; }
.upload[data-frame="fine"] { border:1px solid var(--accent); }
.upload[data-frame="corners"] { border:0; background:
 linear-gradient(var(--accent),var(--accent)) left top/24px 2px no-repeat,
 linear-gradient(var(--accent),var(--accent)) left top/2px 24px no-repeat,
 linear-gradient(var(--accent),var(--accent)) right top/24px 2px no-repeat,
 linear-gradient(var(--accent),var(--accent)) right top/2px 24px no-repeat,
 linear-gradient(var(--accent),var(--accent)) left bottom/24px 2px no-repeat,
 linear-gradient(var(--accent),var(--accent)) left bottom/2px 24px no-repeat,
 linear-gradient(var(--accent),var(--accent)) right bottom/24px 2px no-repeat,
 linear-gradient(var(--accent),var(--accent)) right bottom/2px 24px no-repeat !important; }
.upload[data-frame="dashed"] { border:2px dashed var(--accent); }
.upload[data-frame="soft"] { border:1px solid var(--accent); border-radius:12px; }
.upload[data-frame="compact"] { min-height:64px; max-width:360px; flex-direction:row; gap:14px; background:var(--accent) !important; color:var(--black) !important; border:1px solid var(--accent); }
.upload[data-frame="compact"] svg { width:24px; height:24px; }
.upload[data-frame="compact"]:hover,.upload[data-frame="compact"].dragging,.upload[data-frame="compact"]:has(input:focus-visible) { background:var(--black) !important; color:var(--accent) !important; }
.upload[data-frame]:not([data-frame="original"]):not([data-frame="compact"]):hover svg,.upload[data-frame]:not([data-frame="original"]):not([data-frame="compact"]).dragging svg { transform:translateY(-2px); }
@media(max-width:600px) { .upload { min-height:160px; } .upload[data-frame="compact"] { min-height:64px; } }